UI設計中的視覺層次

亨利.亞當斯(Henry Adams,美國歷史學家、學術家和小說家)曾經說過:“混沌是自然法則,秩序是人類的夢想”。人們總是喜歡秩序,因為秩序可以讓事情變得更容易理解。這同樣適用于數字產品的用戶界面,當UI元素被有序組合和結構化時,人們可以輕松的使用應用程序和網站,并對產品感到滿意。

為了清晰的向用戶展現UI中的內容,設計師應用了一個著名的方法—視覺層次。今天的文章將對這種方法的本質以及如何正確使用進行了講解。?

什么是視覺層次?

視覺層次是設計過程的核心方法之一。它最初是建立在格式塔原理的基礎上,考察了用戶對相互關聯元素的視覺感知,并展示了人們如何將視覺元素歸為一類。

視覺層次致力于以一種用戶能夠理解的方式呈現產品內容。用它來組織UI內容,可以使大腦根據物理差異(如大小、顏色、對比度、風格等)來區分對象。

UI元素的視覺呈現對產品的用戶體驗有很大影響。如果內容看起來一團糟,用戶就無法在產品中快速找到信息或正確的與產品進行交互。此外,非結構化文字內容的易讀性較低,用戶將無法快速預覽,他們需要費力的去區分他們要找的內容。這種糟糕的用戶體驗會導致用戶滿意度降低,這也就意味著一款產品不會很受歡迎。

文字的層級

文字是任何UI設計中都很重要的組成部分,這就是為什么視覺層次高度依賴于文字。專家們決定通過創建一個單獨的文字級別來強調文字的重要性。

該系統旨在以最合適用戶感知的方式組織文本內容。設計師通過對比關系來修改和組合文字,讓重要的需要用戶首先注意到的文字優先突出。經常用到的方式是調整大小、顏色、字體和對齊方式。

文字層次主要包括:標題、副標題、正文、號召性文字以及輔助文字等。為了構建一個可視化的文字層次,需要將所有元素分成不同的等級,讓我們看下具體包括哪些內容。

一級文字:主標題,主標題的目的是為用戶提供核心信息,同時吸引用戶對產品的注意力。

二級文字:二級文字方便用戶快速瀏覽。通常包括:副標題、說明文字

三級文字:正文和其他的數據文字,設計師通常使用較小的字號,但需要保持足夠的可閱讀性。

由于文字內容是UI中的主要信息來源,所以設計師需要逐級呈現信息。通過將文字分成不同的等級,來使用戶能夠快速接收信息并正確感知信息的重要程度。還有一點需要注意的是,在為移動端產品創建文字級別的時候,最好是兩個以內。因為手機屏幕沒有容納三個級別的空間。為了使界面看起來更清晰,一般沒有副標題。

視覺層次工具

當設計師已經選擇好要呈現的內容時,就可以來制定文字等級了。讓我們看看從哪些方面可以幫助設計師建立視覺層次。

大小信息區分最有效的工具之一就是大小。大的事物總是比小的事物更加重要,這種想法植根于用戶心中。這也是為什么用戶的注意力往往會轉移到大的文字或圖片上。設計師需要區分每個內容元素的重要性,并基于此將信息用大小來區分。

顏色顏色是構建視覺層次的有效工具。顏色本身就具有層次結構,從用戶的心理來定義,有大膽的顏色,像紅色、橙色和黑色,很容易引起注意。也有比較弱的顏色像白色和奶油色,這類的顏色適合用作背景。使用不同的顏色,可以使UI元素有輕微層次感。如:其他UI元素都用的是淺色,CTA(號召用戶行為)按鈕則可以用比較重的顏色,可以讓用戶第一眼就注意到。

對比層次基于內容本身的對比。一個元素和另一個元素形成對比則用戶可以看到兩者之間的差異性。可以通過視覺差(包括大小、顏色、樣式)來創建對比。但是也需要保持頁面的平衡,以免一個對象完全掩蓋了另一個對象

負空間在用戶界面中有很多內容,為了讓用戶注意到所有內容,就需要給他們的眼睛一定的休息空間。負空間和空白區域是指元素與元素之間的間距。一些設計師通常不會將空白區域作為他們設計的一部分,但專家們會把空白區域作為一個幫助設計布局的有用工具。適當的負空間,可以幫助用戶注意和感知每一個元素。

接近正如我們上面所說的,視覺層次是建立在格式塔原理的基礎之上的,所以設計師非常關注UI元素的接近程度。用戶習慣把視覺元素統一到一個組里,所以UI元素需要以組的方式呈現,以便用戶對其進行分類。如果某幾個元素距離較近的放置,則用戶會自動將他們視為一個組。設計師可以利用這個接近原則,幫助內容區分級別。

重復如果用戶注意到某些元素看起來很相似,他們也會將它們視為一個組。這就是重復原理。設計師故意為不同的對象用重復一些模式,以便用戶將它們視為一個統一體。舉個例子:一個有大量正文的頁面用一種顏色突出顯示最重要的句子,看到這種顏色的句子用戶就知道這是一個重要句子,用戶也可以直接從一個重要句子直接跳到另一個重要句子。

視覺層次是有效信息結構化的基礎。當UI元素結構化和組織化時,用戶更好的使用產品,可以更加高效的為他們解決問題。此外,強大的視覺層次改進了導航系統,用戶可以更好的定位產品。?

英文原版地址https://design4users.com/visual-hierarchy-how-to-organize-ui-content/

更多文章:

顏色如何影響用戶體驗?

2019年的10個最佳設計系統

歡迎關注微信公眾號:菠蘿方舟

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 為什么要打造視覺層次? 文字對于成年人來說是日常的大部分活動,對于受過教育的成年人來說,把文字轉換成有意義內容的閱...
    Doria2016閱讀 3,712評論 2 32
  • 沙悟凈 詞:狐不舉 曲:河圖 編曲:陳鵬杰 簫:水玥兒 也許的確更有為妖天分 流沙浸透淤泥自在身 等待滿懷故事的過...
    白衣陌閱讀 442評論 0 0
  • 路淒淒,若盼流年歸。 風肆肆,恰逢故人來。 縱身躍下三尺雲臺外,九天開屆無人攔。 化龍似鳳迷入凡塵中,輪迴千年還復來。
    龍_法梟閱讀 180評論 0 1
  • 高曉涵閱讀 113評論 0 0
  • 最高院法官梁鳳云,在中國政法大學法學院研究生畢業典禮上的演講,讀來頗心潮澎湃。 所有的人都在...
    純熙2019閱讀 355評論 6 6