網頁設計師使用的法則,你學會了嗎?(一)視覺階層

視覺階層ba

當你瀏覽網頁的時候有沒有類似的困擾?

「這個網頁好難瀏覽阿!感覺頁面很亂很雜」
「看了一陣子,怎麼覺得沒有吸收到什麼資訊?」

或是當你設計網頁的時候有沒有這種感覺?

「網頁到底要怎麼排版才比較好看?」
「為什麼我排的版感覺的就是怪怪的?」

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

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

(一)視覺階層

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

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

大小

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

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

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

「以不一樣的思維進行廣告行銷,進而認同品牌價值」,
立志讓更多人知道原來廣告行銷也可以這麼好玩!!

每日學,文章推廣

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

發佈留言