8個網頁設計原則您應該知道與遵循

8個網頁設計原則您應該知道與遵循
網頁設計的好壞比轉換率更重要。網路上提供一大堆提升轉化率的策略,但如果您的網站看起來像廢墟(例如:網頁是美工圖上傳,字體模糊難讀,或行動裝置無法舒適瀏覽,或是使用不再被支援的flash動畫等等),再好的策略都於事無補。
網頁設計不僅僅是“自己看了喜歡,自我感覺良好”。網頁設計必須發揮行銷的功能。網頁設計是要推銷您的產品,對網頁設計了解得越多,得到的結果就越好。

8個網頁設計原則您應該知道和遵循


有效的網頁設計原則1:視覺層次結構

視覺層次是良好網頁設計的重要原則之一,這是人眼觀察到它所看到的事物的順序。
實踐:請按照重要性順序排列這些圓圈:

在不了解這些圓圈的情況下,人們很容易就可以對它們進行排名。這是視覺層次結構所產生的效應。
您的網站某些部分比其他部分更重要(聯絡表單,號召性按鈕(CTA:Call To Action),價值主張(Value proposition)等,您希望那些比較顯眼的部分得到更多的關注。您希望用戶點擊哪個選單?如何讓重要的連結(link)更加突出?
“層次”不僅是指尺寸大小,亞馬遜透過色彩的運用,讓“添加到購物車”的號召性(CAT)按鈕更加突出:

從行銷目標開始
您應該根據您的行銷目標對網站的元素進行排序。如果沒有一個明確的目標,就不知道該優先考慮什麼。
下面這個截圖是來自販賣女性美容保養用品的電商riceforce.com
❶商品圖片放在最醒目的左側(大腦特別喜歡從左到右的視覺運動方式),❷然後是引人注目的特價,❸季節性功能訴求❹優惠期限:要買要快!❺CTA按鈕,這就是展示視覺層次的例子。

檢驗:流覽網頁並有意識地對視覺層次結構中的元素進行排序。然後去看看您自己的網站,有什麼重要的部分(訪客可能在尋求的關鍵資訊)在層次結構中的層級排序不够高嗎?改變一下吧!
 

有效的網頁設計原則2:黃金比例

黃金比例是一個神奇的數字1.618,若照著這個比例切割,會讓所有的事物更美觀。
然後還有  費氏數列  ,其中每個數字被定義為前兩個數字的和:0,1,1,2,3,5,8,13,21等等。有趣的是,兩個看似無關的話題,產生了相同的確切數位。
以下是黃金比例:

許多藝術家和建築師已經將他們的作品比作黃金比例。一個著名的例子是在古希臘建造的萬神殿:
The Parthenon showing a Golden Spiral overlay illustrating Phi or Golden Ratio proportions
<圖片來源>
黃金比例也可以用於網頁設計,下圖是Twitter使用黃金比例的例子:

圖片來源
以下是Twitter的創意總監@stop的評論

對於任何一位對#NewTwitter比例感興趣的人,都知道我們並沒有把這些比例拋到一邊。
當然,這個比例只適用於瀏覽器寬度最窄的電腦螢幕。如果您的瀏覽器很寬,則無法看到。

所以,如果你的瀏覽器寬度是960px,除以1.618(= 593px)。現在你知道內容區域應該是593px和側邊欄367px。如果網站的高度是760px,那麼可以將它分成470px和290px塊(760 / 1.618 =〜470)。
 

有效的網頁設計原則3:希克定律

希克定律(Hick’s Law)每增加一個選擇都會增加決策所需的時間。
您一定有在餐館用餐的經驗。當菜單有過多的選擇時,變得很難決定您的餐點。如果這家餐館只提供了兩個選項,就會減少許多您做決定的時間。這與選擇的弔詭類似——你的選擇愈多,生活就會愈美好?
用戶使用網站時選擇的越多,使用的難度就越大(或者根本就不使用)。因此,為了提供更愉快的體驗,我們需要降低選擇。為了使網頁設計更好,在整個設計過程中必須消除會使用戶分心的選項。
在這個有無窮盡可以選擇的時代,人們需要更好的篩選功能!如果您銷售的產品種類很多,請添加更好的篩選功能,以便於用戶做出決策。
globalstorehk這是我們其中一位客戶的網站,因為販售的產品種類相當多,因此在網頁左側做了非常清楚的分類,客戶可以根據需求輕鬆找到想買的產品。

 

有效的網頁設計原則4:費茨法則

費茨法則規定,任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。換句話說,物體越大,離我們越近,就越容易操作。

這並不意味著“CTA按鈕”越大越好。一個佔了螢幕一半的按鈕並不是一個好主意。依照黃金比例61.8%:38.2%設計按鈕尺寸,將變得更容易讓用戶點擊。
 

有效的網頁設計原則5:三分法

網頁設計多用圖片是個好主意,視覺傳達你的想法比任何文字敘述都更有效快速。
圖片最好遵循三分法 :把主體放置在分界線或點上,又或將畫面切割成三等份,使主體突出之餘,亦保留了恰當的空間感,讓人看起來舒服。

圖片來源:維基
 

有效的網頁設計原則6:格式塔設計法

完形心理學是一種精神和大腦理論。它的原理是人類眼睛在感知物體的各個部分之前,先看到物體的全部。
例子:

圖片來源
您有沒有注意的,你看到的是一條狗,而卻沒有把注意力集中在狗身上的每一個黑點。
這裡的關鍵在於人們在看到部分之前先看到整體。人們總是先看到您網站的全貌,然後再去瀏覽標題、選單、頁腳等部分。作為形式主義的創始人之一,科特·考夫卡 說:  調整體並不等於部分的總和,整體乃是先於部分而存在並制約著部分的性質和意義。
有8個所謂的格式塔設計法則,使我們能夠預測人們將如何看待事物。
1.接近法則 
人們把空間裏的東西緊密地聯系在一起。它們成為一個單一的感知對象。
有效的網頁設計,你就需要確保那些不在一起的東西不會被視為為是一體的。同樣地,您想將某些設計元素組合在一起(導航選單、頁腳等)來傳達出它們構成一個整體。

Craigslist採用此法使它容易理解這類屬於“for sale”:

 
2.相似定律

人類有將物件看成一個整體之傾向。例如我們把相似的東西組合在一起。這種相似性可以是以形狀、顏色、明暗或其他特徵的形式出現。我們傾向把相似的事物看成一體,如下圖所示,當一排方塊和一排的圓形並排時,我們會看成橫向排列的兩排方塊和兩排圓形,而不會看成縱向排列。


有趣的是,一旦將縱向排列的距離拉開之後,我們便傾向將靠近的事物看成一體,而非相似的事物。

實例:服務項目雖是左文右圖的編排方式,但是將橫向之間的距離拉開後,用戶就會自動將左文右圖的呈現方式視為一組:

3.封閉法
人類傾向於追求完整。如果沒有封閉的形狀,例如當整張圖像有部分缺失時,我們的感知就會填補視覺空白。例如下圖,我們看到一個圓形與方型上,即使這些圖形實際上不存在。

如果沒有封閉定律,我們只會看到不同長度的不同線條,但根據封閉定律,我們將這些線條組合成整體形狀。
使用封閉定律會讓徽標或設計要素更有趣。一個很好的例子就是1961年Sir Peter Scott設計的世界自然基金會:

4.對稱律
對稱所產生的美感,是大多數人會有的心理認知,物體分成偶數對稱會令人感到愉悅的。
當我們看到兩個不相連的對稱元素時,人類的感知就會自動將它們連接起來,形成一個連貫的形狀。

圖片出處:Law_of_Symmetry
當我們看上面的圖像時,我們傾向於觀察三對對稱的括號而不是六個單獨的括號。
人們更喜歡對稱外觀而不是非對稱外觀。平衡的三列和曲線增加了BootB網頁設計的樂趣:
City Dog as an example of symmetry in web design
 
5.共同命運法
我們傾向於將物體視為沿著路徑移動的線條。我們將具有相同運動趨勢的物體聚集在一起,因此它們處於相同的路徑上。
一群人都指向同一個方向產生一種聚精會神地集思廣益的感知,您可以用它來引導用戶的注意力(例如註冊表單,價值主張等)。
 

例如,如果有一組點,一半點向上移動,另一半向下移動,則我們會將向上移動的點和向下移動的點看作兩個不同的單元。

 
6.連續性法則
人們傾向於認為一條線是沿著既定的方向發展的。在物體(例如線)之間存在交叉的情況下,我們傾向於將這兩行看作兩個不間斷的實體。即使重疊,刺激仍然清晰。

在下面的這個經典廣告示例中,我們的大腦將支離破碎的線條視為一個連續的整體,這使得IBM的logo比以前的版本更具象徵性和統一性。利用連續性法則,由相同顏色的條紋構成的標誌產生持久的印象。

還有其他格式塔法則,比如Figure–ground或者Gestalt Principles(如果它形成一個規則,簡單而有序的模式,就像奧林匹克環一樣,物體往往會被人們的感知組合在一起)。

有效的網頁設計原則7:留白空間和乾淨的設計

留白(也稱為“負空間”)是頁面左右側“留白”的部分。包括網頁圖片的外邊距(margins)、欄間距(gutters)、列間距等視覺效果。
它不應該僅僅被認為是“留白”的空間——它是設計的一個重要元素。一個沒有留白的頁面,會冒著擁擠、混亂、難以閱讀的危險(人們甚至不會想閱讀)。
適度的留白使網站看起來“乾淨”。乾淨的設計對於傳達清晰的資訊至關重要,但這並不表示網頁卻乏內容。簡潔設計是一種充分利用空間的設計。要做一個乾淨的設計,你必須知道如何巧妙地使用白色空間來清晰地與用戶溝通。
Meet The Greek是很好的例子:

 
白色空間的良好使用可以讓您輕鬆地將注意力集中在主要信息和視覺效果上,並且可以輕鬆閱讀正文內容。
白色空間讓網頁呈現優雅和洗鍊的風格,提高易讀性和焦點內容。
 

有效的網頁設計原則8:奧卡姆的剃刀

奧坎的剃刀是一個原則:「切勿浪費較多東西,去做『用較少的東西,同樣可以做好的事情』。」,促使人們在相互對立的假設中做出選擇,而這些假設至少是最小的假設,從而提供了最簡單的解釋。把它放在設計的背景下,奧坎的剃刀指出最簡單的解決方案通常是最好的。
How to raise funds and build a business提到:

Angelpad團隊和導師以多種方式挑戰我們:“你主頁上有太多東西”。我們一開始不同意的,但我們很樂意去測試。結果證明我們確實是錯了。我們刪除了80%的內容,並在主頁上留下了一個註冊按鈕和一個“了解更多”的連結,結果新註冊會員增加了300%。


簡單、極簡的設計並不意味著沒有設計。網頁過多的內容會讓用戶產生壓力,巧妙地運用留白,朝極簡設計的方向努力吧!
 

結論

8個網頁設計原則您應該知道與遵循,有效的網頁設計和藝術是不一樣的。
我們應該為用戶著想,並考慮到行銷目標。使用這些網頁設計原則,我們可以幫客戶製作美觀好看的網頁設計,並且讓業績獲得回報。

More from our Article

See all posts