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

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

【推薦原因】

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

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


 

網站設計技巧:視覺階層

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

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

大小

越大的物件理所當然越容易吸引觀看者目光,在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

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

 

《延伸閱讀》

 

想做到以下3件事情嗎?

1.進行一場有條理、具備高說服力的提案Pitch

2.拿下大案子的銷售Pitch,完成高成率業務

3.關鍵時刻讓自己拿下學位或職位的Pitch

 

但是你是否遇到以下困境.....

 

不知道簡報報告重點怎麼抓.....

主題發想很困難,不知從何入手.....

腦袋有太多東西要講,卻不知道怎麼排序.....

擔心自己口才不好.....

不知道簡報怎麼設計,更不知道怎麼做簡報.....

 

你需要的是「A4成功提案法」來幫助自己!

A4成功提案法可以幫助你達成更好的簡報報告,內容包含:

 

  • 決定簡報目的、聽眾想聽的、和如何讓聽眾引發自己希望的動作
  • 迅速列出簡報問題大綱,並且試著回答
  • 正確的內容分類,並用「金字塔結構」論述法幫助簡報
  • 去除雜訊與統一簡報視覺
  • 掌握時間,反覆大量練習

 

點選前往了解:『A4成功提案法』成為一名有說服力的人!

 

學完您將知道如何成為一個

  • 職場企劃高手
  • 如何做好一個國際提案的菁英
  • 各大TED的講者技巧
  • 新創創業融資簡報


現在下訂我們立刻再加贈超值好禮!

價值2,200元
『6種銷售簡報PPT模版』

包含工作、自我介紹、募資、求職、提案、論文 6大精華內容

立即前往了解:如何成為有說服力的人

 

加入好友