什麼是網頁設計?背景
認識網頁設計Q & A

認識網頁設計 - 網頁設計相關

推薦給您,提高銷售的8個網頁設計原則,你有做到嗎?

網頁設計的多元性是比想像中重要許多的,你可以任意修改你的網頁,但如果整體看起來很糟糕的話,實際上並不會有任何助益。設計不單只是設計師的責任,設計也同時包含行銷概念。當你對設計的領域瞭解越多,應用於網站上時,成效也會越好。 以下是8個實用的網頁設計原則推薦給您參考:

網頁設計示意圖

實用的網頁設計原則#1 :視覺階層

會吵的孩子有糖吃,好的視覺效果引人注目。視覺階層就是一個好的網頁設計中,最重要的要領之一,因為視覺反應是全部感官中,最快也是最直接影響到我們的情緒反應,當瀏覽者第一進入您的網站,在網站中您最推薦的是哪個部分呢?。

練習:請排序以下圓圈的重要性

網頁設計示意圖

在無條件限制下,將圓圈排序是非常簡單的,這就是視覺階層。

網頁中的某些部分是相對重要的部分(形象、引導行動、吸引關注…等),你可能會希望先讓瀏覽者注意到我們想推薦的重點部分,而不是其他的地方。如果你的網頁導覽有10個項目,他們的重要性會都相同嗎?想想看你希望傳達怎樣的訊息,將比較重要的項目突顯出來。

視覺階層並不單只受大小形狀的影響,像網上購物網站運用了要求行動的概念,以顏色突顯出「加入購物車」:

網頁設計示意圖

從企業經營目標著手

網頁設計示意圖

網站中項目和元素的排列應該根據該企業的經營目標而訂,如果缺少明確的目標,是很難釐清先後順序的。

舉例來說,這個截圖是來自日本最大連鎖庶民食堂的網站,他們主要在販賣日式餐飲。

最引人注目的是最推薦的大字【食堂滿額禮】(使人想要了解優惠),接著是優惠餐的照片(說明了優惠的東西是什麼),第三個是優惠餐點的原本價格(讓人感到超值並想要嘗試),第四是說明如何取得優惠的方式,最後就是瀏覽其他的網站內容。以上就是將視覺階層完整詮釋的範例。

練習:瀏覽網站並將視覺階層做名次排行,接著檢查自己的網頁,是否有再發現任何重要的項目(網頁訪客最有可能尋找的資訊),但沒有被特別強調出來的呢?

實用的網頁設計原則#2: 黃金比例

1.618( )是黃金比例的代表數,這讓所有東西達到力與美的絕佳展現(至少多數是這樣認為的)。

網頁設計示意圖

此外,也有費波那契數列,其中每個數字都為前兩數字的總和—0, 1, 1, 2, 3, 5, 8, 13, 21……依此類推。值得注意的是,兩個看似不相關的數字居然可以推算出與其相關的數字。

這就是黃金比例的樣子:

很多藝術家與建築師都是按照黃金比例完成他們的作品或工程,其中最著名的就是建於古希臘時代的帕德嫩神廟。

這可以被用於網路設計嗎?當然沒問題,推特就使用了這個:

以下是推特創意總監的一則評論

給所有對#NewTwitter的黃金比例感興趣的人,我們並沒有任意配置那些比例。當然,這只適用於較窄版的介面,如果你的瀏覽器螢幕較寬,必能出現更多視窗提供資訊,以提高其使用性,但是這個最窄的寬度也代表著黃金比例的開端。

所以,如果你的寬度是960px,將它除以1.618 (=593px)。現在你知道了網站的內容可以是593px,以及邊框是367px。若網頁高度為760px,你可以將它分兩塊,分別是479px和299px(760/1.618=~470)。

實用的網頁設計原則#3: 席克法則

席克法則講的是:每增加一個選項,做決定的時間就會增加。

相信大家在餐廳裡一定有這個經驗,要從琳瑯滿目的菜單中挑出一道菜是難以抉擇的。如果只給你兩個選項,決定的時間會相對減少很多。這就像《選擇之困境》中所提的—越多的選項,越使人什麼都不選,很多時候我們必須先幫消費者篩選並推薦他們適合的商品。

當使用者在網頁中遇到越多的選項,這會讓網站的使用上的困難度增加(或者完全不想使用)。為了讓使用者能夠更樂在其中,刪除一些選項是必要的。刪除不必要的選項是為了讓整個設計更加簡潔有力,以展現出良好的網路設計。

在這個資訊爆炸的世代,人們要的是精簡過的選項!如果你的產品是種類繁多的商品,篩選過的商品會使人更容易做決定。

下列是CaffeBene品牌網站販售各式各樣的商品,如此分類對於各種品項就非常清楚:

分類圖

實用的網頁設計原則#4: 費茨法則

費茨法則指出,移動到目標區域(例如:點擊按鈕)所需的時間,是到目標的距離和目標的大小的函數。也就是說,物體越大且距離越近,就越容易被使用。

相比其他的按鈕,Spotify中的「播放」鍵讓人非常容易點擊。

他們還將其放置在(全螢幕的桌面)左下角,這個位子被認為是最好的,因為技術上來說,左下角是最容易點擊的位置。然而,這並不能套用於網路設計(基於滑鼠滑動和操作系統的方式所致)。

越大並不代表越好,完全不需要任何思考就能知道,佔去半個版面的按鈕絕對不是好的。就算如此,費茨法則是二進制對數,這也說明了對於可用性預測的結果是沿著曲線進行,而非直線。

若能將一個很小的按鈕放大20%,將增加它點擊的容易性;然而,這個效果必然不適用於在一個很大的物體上。這就近似於目標大小的規則。

按鈕的大小應視其點擊率的高低而訂,你需要先瞭解大多數的人最常點擊哪個按鈕,再決定是否增加它的大小(較易點擊與推薦)。

想像一下有一張表格需要填寫,在表格的最後有兩個按鈕—「確認送出」和「重新填寫」(全部清除)。

99.9999% 的人會點擊「確認送出」,也就是說「確認送出」這個按鈕大小應大於「重新填寫」。

提交示意圖

實用的網頁設計原則#5: 三分構圖法

三分構圖法

在設計中使用圖像非常好的,因為圖像視覺效果所傳達的訊息遠比文字有效

圖像應依循三分構圖法:想像這個圖像由兩條相同縱線及橫線,均分成九等分,再將你所想傳達或表示的訊息沿著這些線條或交叉點放置。

有發現圖像圖文配置後整個版面既活潑又不失工整嗎?這就是三分構圖法。

使用亮麗的大圖像有助於設計,並跟著這個原則,就能使你的網站更有趣、更吸引人。

實用的網路設計原則#6: 格式塔法則 (完型法則)     by wiki

格式塔心理學是一種思想和大腦的理論,主要在表示,在注意物體的細部之前,人們傾向先觀察物體的全貌。

以下圖片就是我表達的意思:

想想看,當你看到一隻狗時,要如何不去注意牠身上的斑點呢?

這裡的關鍵點是在觀察一個東西的細部之前,我們會先注意整體。也就是說,在進入一個網站時,我們習慣先瀏覽整個網頁,而不是單單只注意標題、瀏覽項目、或頁腳等。其中一位構圖法的創始人科特考夫卡表示:「整體與其部分個體是獨立存在的。」

1. 接近法則

我們會將相近的東西集中在一起,然後它們進而就成為同一個體。在網頁設計中,你必須確保每個物件不會讓人把它們聯想在一起;同樣的,有些項目就需要被看成一個個體(瀏覽選項、頁腳等)。

接近法則示意圖

2. 相似法則

我們會將相似的東西分為同類,比方說相似的形狀、顏色、陰影特效等。

在下方的圖中,因為黑色部分與白色部分看起來會成為一個獨立個體並會被分別為兩類,單看黑色為柱子,單看白色則為二個側臉造型。

相似法則示意圖

3. 閉合法則

我們習慣追求物體的完整性,假設一個形狀的線條有一些缺失,我們在看的過程中,自然而然的會補滿那些部分。即使沒有一個形狀是完整的,我們還是能看到兩個正方形重疊在四個圓上

假設少了閉合法則,我們會認為那些只是長短不一的線條,並不會覺得它們能組成一個形狀。

閉合法則示意圖

4. 對稱法則

在我們的認知中,普遍認為物體會是相對稱的,且會有一個中心點。我們會習慣將物體等分成數個小部分。當有兩個相對稱的東西時,我們很自然的會將它連在一起。

看到上面的圖像時,通常我們會將它看成四個對稱的個體,而非八個不同的括弧。

對稱法則示意圖

5. 共方向法則

我們通常會將物體沿著它的線條方向而視,同向的物體基本上會被歸類在同一區。

舉例來說,指著同方向的物體或手勢會被分在一起,這個概念可以套用到網頁設計,讓使用者跟著你的指示瀏覽網頁(像註冊表格、價值主張等)。

像是在先前看到的圖中,如果在一列圓點中,有一半的點向上移動,另一半向下,我們會把這兩個不同向的圓點歸成兩類。

共方向法則示意圖

6. 連續法則

我們基本上認為一條線會繼續沿著它的方向發展,在有交叉的情況下(像線條十字交叉),就算它們重疊了,我們還是會覺得那兩條線是沒有關聯的。

連續法則示意圖

還有其他的構圖設計法像是:主體—背景法則或格式塔物項法則(形狀相似且有條理的物件通常會被視為一體,就像奧運的圓圈),不過我覺得上述所提的幾個法則是最實用的。

實用的網頁設計原則#7: 留白與簡潔

留白部分(亦稱為周圍的空間)是頁面中空白的地方。也就是指圖表、邊緣、裝訂區域、各行列之間等的空隙。

其實空白的部分是網頁設計中非常重要的元素,它讓網頁中的內容更突顯出來。留白部分是使用了階層的概念,像是各類型的資訊、顏色或圖像。

沒有留白的網頁就像把所有文字或圖片擠在一起,這在視覺效果上,會讓頁面看起來十分凌亂擁擠,而且也增加了瀏覽的困難性(甚至訪客完全不想瀏覽網頁),這也說明了為什麼簡潔的網頁設計是相對好的。

足夠的空白空間會讓網頁看起來很「舒適乾淨」,雖然簡潔的頁面更能傳遞出所想表達的訊息,但這不代表要將內容簡化。簡潔的設計是指在頁面範圍中充分運用空間,在設計之前,你必須知道要如何充分發揮留白的空間

留白法則

將留白的原則套用於網頁設計中,除了能更突顯網頁所想傳遞的訊息,也易於瀏覽者閱讀。

空白的部分不僅使網頁看起來更精巧,也易於閱讀及增強網頁所傳遞的訊息。

實用的網頁設計原則#8: 奧坎的剃刀

奧坎的剃刀法則

奧坎的剃刀原則在說明:從各假說之中,挑出一個最合理、最淺顯易懂的假說。

以設計的領域來看,奧坎的剃刀原則說明了最簡化的方法往往是最好的。

執行美國管理軟體Pipedrive的人,上傳了一則關於使用舊金山創業加速器AngelPad的文章:

Angelpad團隊表示過:「網站的主頁包含了太多東西。」雖然一開始我們並不認同這個說法,但我們依舊做了調查。果然,事實證明了我們的想法並不正確。因此,我們移除了約80%的內容,取而代之的是註冊及了解更多的按鈕,這也讓我們的註冊率增加了300%。

外觀雖然重要,但更重要的是網頁的操作性。有幾間公司,像37Signals將「簡潔」變成他們的商業模式。以下是節錄於由他們創辦人所寫的工作大解放(Rework):

很多人認為我們的產品比其他競爭對手都少,他們認為產品不該少掉太多特性或功能,但我們也是因此而感到驕傲。因為多數的軟體都太過複雜,所以我們決定反向操作,像是太多功能、按鍵,這些都太容易讓使用者混淆。

雖然簡潔的設計並不能與它的效能相提並論,但從我自身多年的經驗,體悟到了越簡單越好的這句話。

總結

好的網頁設計與藝術是不同的領域。在了解企業目標之後,網頁設計的風格是因使用者而訂。使用上述推薦的網頁設計原則,可以使你的網頁在觀感及效益中都得到相當好的成果。


歡迎推廣本文,請務必連結(LINK)本文出處