這9種方法讓你網頁視覺設計深入人心

視覺層次是塑造優秀數字產品的基礎,它能讓內容以更加有效的方式被組織到一起,使其更容易被理解。

視覺層次對於用戶體驗的影響很大,訊息的組織架構是否清晰直觀,將直接影響到整體的導航和瀏覽交互。

雖然大家對於視覺層次都有基本的認知,但是在設計的過程中,要怎麼做才能確保構建出合理的視覺層次呢?

首先,不同的產品構建放方法肯定是不一樣的,不過有一些相對通用的方法,適用於多數的情況。今天的文章就為你提供一些通用的視覺層次構建的技巧。

1、基於你的業務目標來構建

每個數字產品背後通常都有著明確的商業目標。為了實現這些目標,創意團隊可以基於目標來確定不同元素的重要性和優先順序。電商網站是就是最典型的案例,不同的元素佔據不同的層次,共同達成目標。這當中,圖片是最重要的視覺元素之一,它是用來吸引用戶的注意力,從視覺上鼓勵用戶考慮它。標題在圖片之後,對產品在文字上予以描述。在此之後,借助CTA按鈕為用戶提供醒目的購買入口。明確的商業目標和清晰的行銷方向將會為設計團隊提供視覺設計的依據。

2、結合用戶瀏覽模式來構建層次

在以前的文章當中沒少提到用戶的瀏覽模式,其中最常見的兩種瀏覽模式就是F型瀏覽模式和Z型瀏覽模式。

用戶在瀏覽新聞和部落格等內容量較大的網站頁面的時候,會採用F型模式來快速掃視,定位自己感興趣的內容。用戶會先橫向掃視,然後視線向下行動,再橫向瀏覽。整個視線的軌跡類似於字母F,而用戶會在掃視過程中不斷找到自己感興趣的關鍵詞或者內容。

Z型瀏覽模式則主要發生在不那麼複雜的頁面當中,甚至於其中都不會包含太多的文本內容,用戶會快速地從左到右從上到下瀏覽,整個視覺軌跡類似字母Z。

了解這些用戶瀏覽模式,你就可以根據實際狀況,有意識地將關鍵的元素放置在用戶掃視最多的節點上,引起用戶的注意。

0_nL8OylUb4GGrQfsI

3、功能優先

層次感這東西看起來是更偏向與美學設計,但是實際上它的功能性會顯得更強一些。設計師需要確保產品用戶能夠清晰地使用,並且導航足以引導用戶。而功能性的層次比起視覺層次要更加重要,單純擁有了視覺層次,不足以構建高效可用的產品體驗。而結構化不夠明晰的介面,自然也就無法帶來足夠好的用戶體驗了。所以,在進行UI設計的時候,視覺層次的構建應該依托于功能,只有確保了功能的可用,比如導航的可用性,視覺層次才會發揮它的作用。

4、留白同樣是需要掌控的視覺元素

首先留白不單純只是元素和元素之間的空域。它同樣是用來構建布局的視覺元素。留白的重要性在於,它可以使得被留白包圍的元素被用戶注意到,尤其是關鍵性的交互控制項。通過控制留白的疏密,設計師能夠讓不同的元素之間的親疏關係體現出來,而大量的留白還能讓關鍵性的、需要強調的特定元素,醒目地呈現在用戶面前。換句話來說,用好了留白,自然也就能自如地控制UI的層次感。

0_YM7Efnfk0VoVX8we

5、利用黃金比例

前幾天,我們撰寫了一篇文章專門探討了在UI當中使用黃金比例的方法。

黃金比例是1:1.618,被認為是最具美感的視覺比例,在自然界當中幾乎無處不在,而許多美麗的自然景觀和生物奇觀,大多都和黃金比例有著或深或淺的關聯。

許多設計師喜歡在布局框架中使用黃金比例,它能使得布局有輕重,又顯得足夠協調。

0_8EGGCp4GZvUVNmiT

6、使用柵格

柵格是設計師控制布局的關鍵性工具之一,布局在不同的環節發揮著不同的作用,而控制視覺層次,同樣有用。柵格有助於將不同的元素控制在不同的比例大小之下,保持合理的距離,控制留白。總體上,柵格對於層次的控制是非常有效的。

7、增加色彩

在控制視覺層次的時候,色彩所起到的作用也是不可替代的。在很多時候,色彩能夠幫助用明白哪些元素是核心。在整個配色當中,色彩通常有著強弱之分。大膽的色彩諸如紅色和橙色,就比相對弱一些的白色和淺灰要來的顯眼,設計師常常使用醒目的顏色來高亮顯示關鍵性的內容。

在使用色彩構建層次的時候,關鍵在於層級的控制,有對比才有層次。

0_e51jhygHmw2KQTuZ

8、注意字體的使用

視覺層次結構的控制還涉及到一個關鍵的部分,就是字體和排版。不同的字體組合,不同大小的字體搭配,同樣直接影響著視覺層次的構建。

標題和展示性的文本所使用的字體和正文部分的字體應該著明顯的對比,這樣的對比一般是通過字體家族、色彩和大小來進行區分,Banner 中的展示性文案、正文標題、副標題、正文內容這些內容所處層次不同,重要性不同,功能也不盡相同,自然也就處於不同的層次。

不過,通常而言,設計師需要將字體數量控制在3種以內,太多的字體會讓整個設計顯得凌亂不堪。

9、桌面端3層級,行動端2層級

在具體的內容層級控制上,桌面端和行動端有著不一樣的要求。在相對較大的桌面端螢幕上瀏覽網頁的時候,3個層級的訊息能夠讓頁面看起來豐富,但是訊息的呈現又足夠清晰有條理,主要和核心的訊息最容易吸引用戶的注意力,這是第一個層級;易於掃視的文本內容以標題和副標題的形式呈現,幫助用戶對於內容有基本的了解,而正文和說明則將內容更為具體地展現出來,供用戶仔細閱讀。

但是行動端的情況則截然不同,小螢幕上並不足以承載3個層級的訊息展現,通常設計師會將內容劃分為兩個層級,這樣用戶便於吸收,UI看起來足夠清爽直觀,用戶也不會因為層級過多而感到混亂。

1_n960KQf3G7jby2D8X-A5Dg

結語

高效的層級構建不僅僅是美學層面上的事情,它同樣是功能性的。

有效的層級結構搭建幫助用戶更輕鬆獲取訊息,更能幫助產品更容易達到商業目標,這不是皆大歡喜麼?


【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛


給你最好的網頁設計Gogoshark


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化