2023-12-26 之晨
界面設計就是將一堆分散的元素、內容或者組件，通過正確使用可視層次結構，進行合理的規劃和重組，有目的地呈現在用戶的面前，這樣有助于內容傳達和提升用戶使用效率，幫助用戶快速解決問題。
可視層次結構（Visual Hierarchy）是指在視覺設計中，通過排列、大小、顏色、對比度等方法使設計元素在視覺上形成層次感，以引導用戶的注意力，幫助他們更好地獲取信息。在用戶界面設計、平面設計等領域，可視層次結構起著非常重要的作用。
今天我們主要講 UI/UX 界面設計對可視層次結構的應用，美學的鑒定沒有統一的標準，而視覺層次無疑是指導用戶體驗、推動設計標準以及設計落地的有效方法之一。
更多分析方法：
視覺層次主要是指表現層（視覺設計）和框架層（界面設計、導航設計、信息設計）的內容層次結構。
而表現層和框架層的內容具體如何設計，就需要用到 UI 界面三維分析法。手機界面作為一個二維平面空間，在原有 X 軸、Y 軸的二維空間之外，設計師需要具備 Z 軸三維空間立體分布的設計思維。三維空間的概念可以幫助我們擴展內容的層級結構，也更有助于用戶對于信息的獲取。
這一設計思維的推進和應用，能夠使公司內部復雜的、各個不同產品的設計做到百花齊放而又萬變不離其宗。能夠促進公司級設計規范的統一。
界面好比是一個巨大的容器，巨大的容器中又會包含多個小容器，小容器中會包含顏色、圖片、文字、圖標、按鈕、標簽等等設計元素。每個小容器好比是一個功能，功能不同，設計元素在容器中的存在方式也會有所差異。因為差異的存在，就形成了不同行業以及同行業下不同產品的存在。核心業務不同，功能設計也不同，但是底層核心的設計邏輯相通。
Z 軸內容的設計主要包括以下三種方式，難度依次遞增：
1. 文字、圖片和顏色的設計
①文字的設計包括字號大小、字重、文字顏色，通常情況下三者會結合使用
②圖片設計包括 icon、產品圖片
利用圖標大小不同形成在 Z 軸方向的設計比重差異，常用功能重點突出，方便用戶快速找到所需的功能入口。
③顏色設計包括顏色對比、漸變、主題色應用等
利用顏色不同形成視覺設計在 Z 軸方向的設計比重差異，加強引導，方便用戶快速做出決策。
2. 卡片、投影效果
①卡片
大卡片設計是近幾年最主流的設計方式之一。它能夠更好的聚合各類信息，有利于不同內容的清晰展現，用戶使用產品時注意力也會更加集中，受到了設計師廣泛的喜愛和追捧。
網易云音樂和高德地圖的 UI 界面在設計時均融入了大卡片。
②投影
投影是指圖形的影子投到一個面或一條線上。是最簡單、最直觀的在 Z 軸上設計的方式。
UC 網盤，為了引導用戶將圖片、文件、視頻等資料備份到 UC 網盤，提升用戶的粘性，“+”按鈕利用陰影效果，提升在 Z 軸方向的高度，吸引用戶的點擊。
3. 層疊、3D touch 設計
①層疊
層疊，意思是層層重疊。在 UI 界面中，即多個界面同時重疊在一起來解決用戶的某個需求。iPhone 手機中地圖新指南添加，QQ 音樂中播放器常駐在頁面底部均是利用層疊的設計思路對功能做出設計，避免操作層級太深，提升用戶的使用體驗。
②3D touch 設計
3D Touch 是一種立體觸控技術，用力按一個圖標，或者一行內容，會彈出一層半透明菜單，里面包含了該應用下的一些快捷操作。同樣也是對 Z 軸空間的近一步應用，對復雜系統下效率的提升有明顯的改善。
到這里，我們就介紹完界面在 Z 軸層級上的設計，做設計時要從全局出發，綜合考慮頁面整體的功能。清楚底層的空間布局、適應方式、擴展手段和疊加邏輯，再復雜的界面無非就是規則的嵌套和內容的排布，希望這篇文章能對大家有所幫助。
文章來源：優設網 作者：西城門設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計(www.payeee.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發