【網頁設計】視覺動線該如何設計網站才能讓別人覺得容易瀏覽?

【網頁設計】視覺動線該如何設計網站才能讓別人覺得容易瀏覽?

【推薦原因】

不論是用手機還是用電腦或者是平板,只要進行上網的動作就會看到大量的網頁,在瀏覽網頁的過程中不知道你是否有注意到,有些網頁很好閱讀,可以輕鬆找到自己想要的資訊,有些網站則看起來十分凌亂,也搞不清楚重點在哪,要找資訊需要翻個老半天呢?

網頁設計是提升轉換率的重點,設計不單只是設計師的工作,設計同時也包含行銷的概念,當你對設計的領域了解的更多,應用於網站上時成效也會更好。如何用最有效的方法呈現你想表達的概念?什麼是你想讓觀看者最先注意到的內容?本系列就推薦幾個網頁設計常見的方法給您參考!


 

網站設計技巧:視覺階層

視覺階層主要協助訪客關注重點與觀看順序,將我們想要訪客關注的內容、採取的行動,以視覺的方式引導訪客注意;網頁裡面總有大大小小的內容,有些內容很重要有些則不那麼重要,我們必須引導訪客照著正確的方式閱讀,這些都是我們使用視覺階層的原因。

視覺階層最基本的觀念在於質量和對比,質量大和對比強烈的物體會吸引訪客的目光,比如大小顏色字體對齊等。

大小

越大的物件理所當然越容易吸引觀看者目光,在Netflix的影片介紹中電視劇名稱比內容簡介更重要,所以使用較大的字體。

網頁設計

顏色

大膽、對比強烈的顏色容易成為視覺的焦點。Netflix的註冊頁面最主要的是讓使用者訂閱高級方案,再來才是價格與細節,因此Netflix使用具有強烈對比的紅色來強調CTA與高級方案,讓使用者目光聚焦在這兩個部分,其他則以灰色來降低資訊階級。

網頁設計

字體

在介面設計上,一般會將字體區分為三種類別:
Heading 標題:最重要的資訊,通常運用較大的字體、粗體呈現
Subheading 副標題:與標題相關的內容,不應該搶標題的風采,
但必須要清楚引導觀看者視線,協助他們瀏覽內容
Body Copy 內容:內容可以是整篇文章、摘要、簡介,重點在於易讀性,通常字體較小,中文的字體大部分是微軟正黑體,也是幾乎所有裝置內建的字體

以光曜臉書廣告頁為例,Heading 標題「Facebook 廣告管理」為本頁重點,以大字粗體呈現,Subheading 副標題「光曜理念」為引導介紹內容,以小字粗體呈現,最後 Body Copy 內容為適合閱讀的小字體。

網頁設計

對齊

這邊指的是縮排的概念,一般來說,縮排越多代表是較次要的內容,運用好縮排也能讓觀看者更容易閱讀,在書面報告、新聞媒體、電子商務的網頁十分常見。BHK’s網站的左邊選單儘管是相同的字體、顏色,但利用縮排即可呈現不同層級

第一層:全部商品、人氣熱銷、美顏系列
第二層:新品上市、狂銷推薦、精選組合

網頁設計

再舉觀看順序為例:(截圖為女兒保養品)

網頁設計

第一眼看到的是粉橘色「Free Shipping」大字(使人想要了解),除了顏色的對比以外,更在Free與Shipping兩者之間運用字型大小來凸顯主要文字「Free」,接著是說明如何達成免運門檻(使人看懂左邊世界圖的金額),第三點才是各國免運門檻的細節,最後就是瀏覽其他的網站內容,以上就是將視覺階層完整詮釋的範例。

 

最後提醒-網站設計重要觀念

If you make everything bold, nothing is bold.

如果你讓所有內容都很重要,那所有內容都會變得不重要,每個人專注的時間有限,如果不能在短時間吸引觀看者目光,短時間告訴觀看者應該注意哪些重點,那等到觀看者精神開始不專注的時候,與觀看者溝通的效率就會降低,網頁將喪失它應有的功能。

視覺階層的應用其實不只在網站,在各方面如圖像、簡報、介面設計都可以捕捉到視覺階層的影子,多觀察生活中的例子並練習,相信視覺階層可以讓你也設計出很棒的網頁哦!

參考資料:提升易讀性(二): 視覺層級介紹與實例Visual Hierarchy

 

光曜數位行銷

官方網站

部落格

粉絲專頁

 

文章由【光曜數位行銷】授權提供TC使用,原文文章標題為【網頁設計師使用的法則,你學會了嗎?(一)視覺階層】,版權歸【光曜數位行銷】所有,欲轉載請聯繫原發布單位,經TC彙集整理,部分內容為TC創作,未經授權不得轉載。圖片來源:Unsplash


TC Summary

如果想要讓網站變得更好閱讀,就必須要事先為使用者做資訊分級,然後依照大小顏色字體對齊的原則來做視覺階層的處理。

 

《延伸閱讀》

 

 

加入好友