【推薦原因】
不論是用手機還是用電腦或者是平板，只要進行上網的動作就會看到大量的網頁，在瀏覽網頁的過程中不知道你是否有注意到，有些網頁很好閱讀，可以輕鬆找到自己想要的資訊，有些網站則看起來十分凌亂，也搞不清楚重點在哪，要找資訊需要翻個老半天呢？
網頁設計是提升轉換率的重點，設計不單只是設計師的工作，設計同時也包含行銷的概念，當你對設計的領域了解的更多，應用於網站上時成效也會更好。如何用最有效的方法呈現你想表達的概念？什麼是你想讓觀看者最先注意到的內容？本系列就推薦幾個網頁設計常見的方法給您參考！
內容目錄
網站設計技巧：視覺階層
視覺階層最基本的觀念在於質量和對比，質量大和對比強烈的物體會吸引訪客的目光，比如大小、顏色、字體、對齊等。
大小
越大的物件理所當然越容易吸引觀看者目光，在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 Summary 《延伸閱讀》
文章由【光曜數位行銷】授權提供TC使用，原文文章標題為【網頁設計師使用的法則，你學會了嗎？（一）視覺階層】，版權歸【光曜數位行銷】所有，欲轉載請聯繫原發布單位，經TC彙集整理，部分內容為TC創作，未經授權不得轉載。圖片來源：Unsplash
如果想要讓網站變得更好閱讀，就必須要事先為使用者做資訊分級，然後依照大小、顏色、字體、對齊的原則來做視覺階層的處理。
TC的IG上會有更多相關職場成長懶人包，立即追蹤不錯過任何成長機會！
想持續接收到最精華的文章，可按這裡加入 TC Incubator的LINE@
