貓點觀察

打造友好型網站的15個網頁設計原則

網站就像是一家店面一樣,想像一下,如果你走進一家實體店面,當你環顧時發現店內相當髒亂,那你會繼續停留嗎?當然一定會走出來,而網站也是同樣的意思,如果你點進一個網站,內容雜亂無章,看起來很久沒更新,當然就不會停留在網站,更用說會在網站上消費。

想像一下一個實體商店的裝潢和設計,也會吸引消費者是否踏入商店內消費,而網站也就是一個店的門面,大多數的消費者也會在意網頁是否美觀以及搜索的點擊鍵是否友善,如果網站內容無法滿足他們需求,可能會因此離開網站;如果你希望自己的網站能被關注,建立一個高質感的網站,這裡要教大家15個重要的網站設計員則,讓大家能改善網站的品質,提高網站的流量。

1.頁面易於導航

友善的網頁設計,能讓使用者快速的找到自己想要的目標,而網站導航就是「最重要的網站功能」,舉例來說,像是使用者會希望能快速找到「返回」或「上一頁」的點擊鍵,還有關於、聯繫方式等頁面,都是消費者希望在網站中能快速找到的資訊。

2.始終利用負空間

網頁設計不是把空間填滿就好,這樣反而會使網頁看起來雜亂無章,網站也需要一些空白區域,最重要的簡單,可以藉由品牌的顏色設計來運用網站的空間,透過視覺的設計,來吸引使用者的眼球。

3.頁面要一致和吸引人

品牌的LOGO可以讓人留下深刻的印象,舉例來說,像是Nike大家都知道品牌是勾勾的標誌,甚至會直接想到品牌的字體和設計風格,在設計網站時,也能運用一些元素,為品牌提供清晰的視覺識別,讓網頁的模板看起來有獨特性。

4.充分使用顏色

使用大量互補的顏色,可以讓視覺產生衝擊感,就像是黃色搭配紫色、黑色搭配白色等設計,讓網頁看起來相當活潑,也能運用品牌的顏色來做網頁設計的搭配,像是候選人或政治人物的官網,就相當適合使用黨派或個人主視覺的顏色來設計網頁。

5.考慮目標受眾

不同類型的店家,網頁設計的風格也要符合行業類別,要了解受眾目標,最好是可以先參考競爭對手所設計出來的網站內容,想像一下如果是一家醫院的網頁,但網頁設計卻像是賣產品的,那就搞錯受眾對象,醫院的網頁必須是專業、簡單或溫馨的主題,讓病人感覺到有好的體驗,而醫院的受眾目標就是病人,如果你想設計一個網頁,就要先了解受眾目標。

6.字體大小和字型應該符合需求

網站的字體和字型也相當重要,消費者在瀏覽網頁時,除了會在意網站的美觀,自己可讀性也很重要,字體大小和字型都是網站成功的關鍵,如果字體太小,可能會讓訪問者看了很吃力,或是字型不易閱讀,也等於在傷害訪問者的眼睛,這些都會影響網站的流量。

字體當然要選擇清晰易讀,最好是簡單的字體,根據排名顯示,前5名網站適合的字體包括Sans Serif、Arial、Helvetica、Helvetica Neue和Roboto,而段落字體最常見的兩種尺寸是14像素和16像素,可以參考這些訊息來設置網頁的字體,而字型字體大小適時的與網頁設計做搭配,也是很重要的元素。

7. 遵循菲特定律和希克定律

心理學家Paul Fitts開發了菲特定律,而菲特定律也就是目標的大小,簡單來說,網頁設計的點擊鍵大小,也會影響點擊的時間,舉例來說,大按鈕使用點擊所需的時間比較少,而小按鈕使用者要點擊的時間比較多,所以在網頁設計時也可以運用菲特定律,將按鈕修改為容易點擊的大按鈕。

至於什麼是希克定律,有點像是選擇障礙的概念,人們在做出選擇時,都會產生疲勞的感覺,而在網站設計上,如果要使用者做出過多的選擇,他們也可能會產生疲勞感,因此,在網頁設計必須簡潔,不要出現太多讓使用者選擇的選項,才能讓使用者停留網頁的時間更久。

8. 使用「不變」的定律來突顯關鍵訊息

當「不變」定律運用在網站時,就能脫穎而出,舉例來說,網站上「歡迎」的標誌、圖片等其他內容,要使用不變性來創建自己網站的層次結構,而每個網頁都是運用同樣的元素、顏色和位置,讓訪問者的參訪每個網頁時,都能按照你所設定的順序找到每個頁面。

9. 吸引訪問者點擊按鍵

網頁中一定會出現許多點擊鍵,除了剛剛提到要大和易於點擊,點擊鍵的命名和描述也很重要,要吸引訪問者會點擊,如果對於按鈕很好奇,自然就會點下去,因此在點擊描述時,必須要考慮到如何吸引使用者。

可以運用一些比較吸引人的方式,舉例來說,「點擊這裡閱讀我們的部落格」、「點擊翔情了解我們的行銷秘密」或「這是我們2022年的報告」,利用一些吸引網友的文案,讓使用者會想點擊。

此外,也能使用較活潑的方式來做設計,像是主題式的點擊,例如森林或亞馬遜主題的網站,可以搭配圖片像是「參觀莊園」,而這類的用法很適合使用在飯店或是一些觀光景點的官方網站,可以吸引訪問者點閱。

10. 利用F模式或Z模式

F模式和Z模式的概念很簡單,就像是網頁的內容設計,必須符合像是英文字母F的設計或是Z的設計,舉例來說,想是Facebook的登錄頁面,就是符合Z模式的設計,大家首先會看到Facebook的標誌,然後右邊是「登錄」按鈕,左側的地方有圖片設計,最後是「創建帳戶」按鍵,整個頁面連結起來就是Z。

11. 好的網站是快速且適合行動設備

人手一機的時代,如果網站不符合行動設備的需求,相信很快就會被淘汰,截至2021年第四季,全球54.4% 的網站流量,來自於行動設備,如果你的網站不支援行動設備,那網站的流量將會減半,而速度也會影響網站流量。Google的研究顯示,如果網站加載時間超過3秒,53%的人就會離開網站。

網站要支援行動設備或快速,最簡單方法是選擇由專家設計師製作的快速網站主題,或者可以自定義構建一個響應式網站。

12. 將文本分成小區塊

人類對於圖片會有更深的印象,但對於文字,通常會比較不願意去閱讀,但要如何吸引訪問者讀文案呢?那就是小區塊的去做分類,讓訪問者產生字數不多的感覺,大區塊的文字,讓人感覺疲憊,而小區塊文字能吸引訪問者閱讀。

根據統計,網站訪問者平均僅會花費5.59秒閱讀文案,因此,過於冗長的內容,會讓訪問者感到厭煩,甚至是離開網站,透過將文字分成小區塊,就能解決此問題。

13. 使用網格

網站的設計要圍繞在網格的設計,但不代表要將網站設計成像是Excel表格,主要是將網站劃分為服務於特定目的的不同區域,以便訪問者可以快速的找到內容,並非真的需要格線,是依照網格的原理,來做網站的分配。

尤其是一些電傷網站,更需要網格的設計,讓消費者很快的就能找到想要的商品,或是各種商品的分類,建議網路商城可以使用這樣的方式來做網頁設計。

14.找到平衡點

在網頁設計中,「平衡」是指設計元素相互關聯的方式,以及元素是否描繪出和諧的畫面,有很多方法,可以在網站上創造平衡,包括透過對稱、使用互補色或對比色、使用形狀和大小相似的元素、使用重複模式,而許多網站也都是運用這樣的平衡對比,來吸引訪問者的眼球,這樣的設計,也會讓訪問者對內容產生注意力。

15.注意細節

網站也需要注重細節,如果按鈕擺放的位置不對,或是標題等錯字百出,會讓消費者覺得網站沒有專業度,其實網頁的細節也會吸引來訪者的眼球,如果沒有注意到這些小細節,或是沒有即時更新網站,都可能因此流失顧客。

結論:

精心裝潢的店面,可以吸引顧客來消費,而沒有裝潢的店家,可能永遠都不會有顧客上門,網頁設計也是如此,建立一個視覺上吸引人的網站,能幫助你提升專業度,並建立消費者的信任,甚至可以贏過競爭對手,讓你財源滾滾來,下次在設計網頁時,建議可以運用以上15個原則,讓訪問者進入你的網站眼晴為之一亮的感覺,這樣你的網站就成功了一半,訪問者也會自然會停留在網站上瀏覽內容。 其實網站內容越簡單,反而會越吸引訪問者停留,如果你的網站是有很多亂七八糟的圖片或視頻,給人很混亂的感覺,那背景的圖片就必須簡單,其實網頁設計不需要太過複雜,只要簡潔有設計感,甚至是簡單的黑白搭配,也可以讓一個網站很有特色。