UI設計師如何做出更高級的UI界面
人們總希望能夠通過規則讓事情變得更容易理解。對於平面設計是如此，對於數字化的UI界面也同樣是如此。經過仔細地組織和整理之後的UI界面，無論是APP還是網站，都能夠被用戶更好地了解，使用和吸收，這也真正讓用戶滿意的產品的必由之路。為了更好地組織UI中的內容，設計師需要具備讓視覺內容層次化的設計技能。今天的文章，我們就全面地探討一下如何真正有效地組織視覺內容。
視覺層次是什麼？構建視覺層次是設計師在設計過程中最核心的設計技術之一。最初心理學家基於格式塔原理來檢測用戶對於元素之間關係的視覺感知，發現人們傾向於將視覺關係靠近的元素群視作為有關係的一組。
通過將內容按照一定的視覺層次進行構建，從而讓用戶在看到APP和網站內容的時候，能夠輕鬆理解各個元素之間的關係，明白他們的重要程度差異。通過控制不同視覺元素本身的視覺差異（大小、色彩、對比度、風格等），讓它們可以區分彼此。UI元素的視覺呈現方式對於用戶體驗有著極大的影響。如果UI中的元素組織性很差，看起來會是一團糟，最終用戶也無法有效地獲得導航指引，也難以正確地交互了。此外，非結構化的內容，可讀性也較低，用戶無法一目了然地獲取信息，需要花費大量的氣力區分內容，從中找到自己想要的信息，這樣很容易招致用戶不滿，甚至導致產品失敗。
排版層次文本內容是絕大多數UI設計中需要處理的主要組成部分。這也是為什麼視覺層次的構建很大程度上依賴排版。所以，視覺設計專家會將排版層次從視覺層次中單獨提取出來作為一個獨立分支來進行探討。
設計師通過排版系統將文本內容以最適宜用戶感知的方式組織起來。通過合理的選擇字體的樣式和排版布局，設計師讓最重要、最迫切需要被用戶關注到的內容突出顯示。字體的大小、色彩和字體家族都在樣式調整的範圍內。
排版層次中，包含著不同的排版元素，包括標題、副標題、正文內容、CTA元素、說明以及其他內容。為了建立層次感，這些內容和元素會被分割成為不同層級。通常，為了保證層次分明又不會讓信息的呈現過於複雜，會將層次劃分為3個層級。第一層級。諸如頭條標題，這些元素旨在為用戶提供核心的信息，並且引起訪客能夠立刻注意到它們。第二層級。諸如普通標題和副標題，它們應該能夠讓用戶快速掃視閱讀，儘快了解到其中的主要內容。第三層級。正文和一些額外的信息（比如引用）構成了第三個層級。在這個部分設計師通常需要使用較小的字體，並且確保內容的可讀性。由於正文內容通常是UI中內容信息的主要載體，而大量的信息和內容需要逐步的呈現，所以設計師和編輯會將內容切割為不同的段落，讓用戶可以輕鬆的一段一段地、按照順序來感知並吸收信息。
還有一件值得一提的事情，在為移動端設備進行排版設計的時候，設計師要盡量將其中的層級控制在兩個層級以內。移動端設備的屏幕尺寸有限，無力承載3個層級的信息，所以，諸如副標題這樣的第二層級的內容需要去掉，以防層級太多。
視覺層級構建的基礎當設計師已經確定了基本的內容和組件之後，就需要為它們制定呈現的層級和順序了。幫助設計師為這些UI組件和元素制定順序和層級的，主要是下面的屬性：尺寸大小區分層次最有效的手段是通過尺寸大小差異化。大的比小的更重要，這種認知是根深蒂固的。用戶會自然而然地關注到尺寸較大的文本和尺寸較大的圖。設計師可以根據元素的重要性，在尺寸上做文章。色彩色彩對於用戶的感知有著巨大的影響。所以在進行視覺層次構建的時候，色彩的合理運用會產生更為明顯的效果。不同的色彩本身就可以輕鬆構成層次結構的，強烈的色彩諸如紅色、橙色、黑色都很容易引人注意。諸如白色和淺灰通常可以用來作為大面積的背景色，和其他的色彩構成對比。不同的色彩加持在UI元素上能夠構成微妙的層次結構。設計師在設計CTA按鈕的時候，通常會選用和背景顏色差異明顯的、大膽而扎眼的色彩。
對比創建層次結構依靠的核心就是製造對比。一個元素和另外一個元素構成對比，讓用戶看到不同內容和元素之間的差異。通過視覺上的差異（大小、顏色、樣式）營造出對比度，但是在對比的時候還要確保整體上的均衡，盡量不要因為對比而讓某些元素被用戶忽略掉。
留白
用戶界面當中會有許多元素和組件，想要它們被用戶注意到，那麼設計師需要讓這些元素周圍有足夠的留白。留白同時也常常被稱為負空間，元素和元素之間的空白區域就是留白。許多設計師常常會忽略留白，但是留白應該被視作為構造設計的重要組成部分。正是因為留白和元素本身之間的構成的疏密對比，才讓用戶注意到留白包圍下的內容。靠近正如同我之前所說的，視覺層次的建立很大程度上是基於格式塔原理，所以設計師對於UI元素之間的靠近度會非常注意。人們傾向於將視覺上比較靠近的元素視為一組，而設計師也正是基於這種認知，將不同的元素分為不同的組。讓相關的相似的元素更靠近一點，讓不同和無關的元素隔得遠一些，不同的靠近度讓元素稱為了不同的類別和分組。重複同樣的，即使是在不同的地方出現，用戶還會很輕鬆地注意到相同的元素。這就是重複的元素髮揮作用的工作原理。不斷重複的元素、樣式、色彩、文本會被用戶注意到，它們會被識別為一種固定的模式，或者說規律，這樣也就構成了統一的推則。比如，設計師會在文章中引用重要的句子，這些句子會用單獨的樣式和色彩高亮突出，當你下一次在另一篇文章當中看到類似的色彩和文本，會迅速明白你看到的是一句引用。視覺層次是搭建有效信息架構的基礎。當用戶界面的元素需要結構化和組織化的時候，視覺層次的構建能夠有效地幫你達成這個目標。清晰的視覺層級是整個導航體系中不可分割的一部分，它們讓用戶更快了解產品的特徵。
TAG:羅錦 |