1、信息分類
相關聯信息需要進行歸類，我們日常無論是瀏覽新聞類還是商品類產品，習慣都是閱讀標題后直接閱讀內容，能夠更加沉浸。

左側為什么錯？
從信息邏輯維度看，標題與說明文字本應形成緊密關聯的內容整體，若在兩者之間強行插入按鈕，會直接割裂文字信息的連貫性，破壞內容的自然流轉。從用戶體驗維度而言，酒店標題作為吸引用戶深度閱讀的核心聚焦點，其核心價值在于通過強化利益點的內容設計引導用戶產生預約購買意愿。此時貿然添加按鈕，不僅會拉長用戶的閱讀路徑，導致關鍵信息無法被快速捕捉，降低信息獲取效率；更會打斷兩段關聯文字的瀏覽節奏，引發用戶的短暫認知疑惑，最終削弱整體閱讀體驗的流暢性。

建議正確做法～～   
在任何類型的產品模塊設計中，信息分層都是核心原則之一。當兩段內容元素存在內在關聯時，需將其整合為連貫的信息整體呈現給用戶，避免人為割裂內容邏輯。這一設計思路恰好呼應了格式塔心理學中的視覺組織原理：通過接近原則讓關聯內容在空間上保持緊湊，借助相似原則強化同類元素的視覺統一性，依托共同命運原則確保相關內容在交互中保持一致的呈現邏輯 —— 以此讓用戶能直觀感知內容間的關聯性，提升信息理解效率與整體體驗的流暢度。


實際產品中的應用


2、層級區分
兩個獨立的且不相關的元素，需要進行視覺區分

左側為什么錯？
在頁面設計中，“新人尊享” 標簽與 “立即上車” 按鈕的顏色存在明顯沖突 —— 這種視覺上的相似性容易讓用戶產生認知混淆：用戶會自然困惑這兩個元素是否均為可交互按鈕。而當點擊 “新人尊享” 標簽卻未獲得任何反饋時，這種預期與實際體驗的落差會直接造成操作困惑，不僅打斷用戶的瀏覽節奏，更會削弱對產品交互邏輯的信任感，最終影響整體用戶體驗的流暢度。

建議正確做法～

在設計過程中，需針對不同信息維度進行清晰的視覺區隔。以具體場景為例：“新人尊享” 作為標簽類元素，其核心功能是傳遞信息提示，強化內容屬性；而 “立即上車” 作為按鈕類元素，本質是引導用戶完成下一步操作，承載交互價值。

因此，面對類似的設計需求時，必須對不同維度的信息元素進行差異化處理 —— 通過視覺語言的精準表達實現 “所看即所得”：讓用戶能直觀區分元素的功能屬性，既清晰傳遞內容本身的含義，又避免因視覺混淆導致的操作誤解，從而在保障信息傳遞效率的同時，守住用戶體驗的流暢性。

實際產品中的應用


3、突出熱區
當模塊具有按鈕、文字鏈、圖片入口等需要下一步操作的關鍵元素，需要進行高亮顯示，以此幫助用戶快速定位目標。

左側為什么錯？
圖中 “查看主頁” 入口采用灰色字體設計，盡管通過下劃線強化了交互屬性，但整體視覺識別度仍顯不足。在信息密度較高的復雜頁面中，這種弱化的視覺表現會導致用戶在需要執行下一步操作時，難以快速定位到該入口 —— 這種 “尋找成本” 的增加，不僅直接降低了用戶的操作選擇效率，更可能因關鍵入口的識別障礙，影響用戶對核心功能的使用意愿。

建議正確做法～～
無論是在整體頁面還是局部模塊中，當需要引導用戶執行下一步操作時，對關鍵入口進行視覺高亮處理都是高效的設計策略。以右圖的個人信息模塊為例，“查看主頁” 入口通過文字高亮結合下劃線的設計，既借助顏色對比讓用戶能快速鎖定操作入口，又保持了文字的自然呈現形態，不干擾正常閱讀節奏。這種處理方式遠優于色塊按鈕的突出形式 —— 若采用色塊按鈕，不僅會讓模塊布局顯得冗余繁雜，更會因視覺重量過強而 “喧賓奪主”，破壞整體設計的平衡感與信息層級的清晰度。


實際產品中的應用


4、圖標表意明確 
設計中經常會遇到圖標相關設計，無論是通用圖標還是金剛區、百寶箱圖標，我們都需要注意圖標的表意是否匹配功能。

左側為什么錯？
觀察左側圖片不難發現：若去除文字僅保留圖標，用戶根本無法清晰理解功能的實際作用。核心問題在于圖標設計與功能本身存在明顯的匹配偏差 —— 這種視覺符號與功能含義的錯位，會在用戶使用過程中造成嚴重的認知歧義，不僅增加操作試錯成本，更會因功能識別的不確定性讓用戶產生使用顧慮，最終削弱對產品的信任感與安全感。

建議正確做法～～
如右圖中，我們在設計新的圖標時只需要進行稍微注意下，就能夠解決圖標表意的問題，在認知層面解決用戶的困惑，降低認知障礙。


實際產品中的應用


5、狀態可見性
當產品需要用戶完成多步驟任務時，清晰展示系統進度至關重要 —— 這能讓用戶實時感知自己的操作在整體流程中所處的位置，避免因信息模糊產生迷茫感。

以房屋裝修信息填寫流程為例（見下圖），用戶在面對這類多環節任務時，耐心本就容易因未知流程長度而消耗。此時通過設計添加系統狀態進度條，實時提示當前所處節點，便能有效緩解用戶的操作焦慮。這種設計邏輯同樣適用于注冊登錄、信息完善等多步驟場景，其核心價值在于讓用戶對交互過程形成明確預期，通過 “可知可控” 的體驗設計，減少操作不確定性，最終提升整體用戶體驗的流暢度與滿意度。

實際產品中的應用


6、輕量投影
在 UI 設計中，陰影的核心價值體現在兩大維度：一是通過視覺層次感的塑造實現信息層級的清晰區分，二是作為裝飾元素提升界面的視覺質感。如同現實世界中大樓、植物、人物等物體自然形成的陰影是生活場景的有機組成部分，UI 設計中的陰影也應成為界面元素的 “隱性配角”—— 需根據模塊的層級關系與視覺需求適度運用。

但設計中必須警惕陰影的過度使用：現實里的陰影從不會刻意搶奪視覺焦點，界面中的陰影同樣不應成為用戶關注的重心。過度疊加或夸張的陰影會打破界面的平衡感，甚至干擾信息的正常傳遞，反而背離了陰影服務于層級區分與質感提升的本質目的。因此，陰影的運用需以 “自然融入、恰到好處” 為原則，讓其在增強界面表現力的同時，不喧賓奪主。

左側為什么錯？
我們看左圖中的陰影，在這個房屋出租表單選擇模塊中陰影是用來告知用戶已選擇該表單，給一個視覺強提示，但在圖中，陰影的范圍以及深度都是用過度，在頁面中不僅會喧賓奪主，還會影響基礎的美觀度。

建議正確做法～～
如右圖中，在模塊中若該元素已經有狀態提示且需要陰影作為輔助進行突出，在設計時需要避免大面積深度陰影，使用輕量陰影即可起到輔助提示作用，既保證了頁面美觀，也不會影響使用。


實際產品中的應用


7、Z形閱讀
z形原理也被稱為“古騰堡原理”描述了在查看元素均分的設計時眼睛的運動規律，根據這個原理驗證用戶的眼睛從左上角到右下角以“Z”運動軌跡瀏覽內容。

更適合網頁
Z形閱讀習慣作為符合用戶視覺流動規律的設計邏輯，更適用于大面積可視區域的信息排布 —— 其核心在于順應用戶的自然瀏覽路徑，將關鍵信息精準錨定在視覺焦點上，實現高效傳遞。這種布局邏輯在網頁設計中尤為常見，而在以大面積文字為主體的新聞類產品中，應用價值更為突出：由于文字內容密度較高，需借助圖片的視覺吸引力引導用戶聚焦特定模塊，此時便可依據Z形瀏覽的路徑節點，在對應的視覺停留點放置圖片，讓圖片既成為打破文字單調感的視覺調劑，又能自然承接用戶的瀏覽節奏，提升信息獲取的流暢度與重點內容的觸達效率。

建議正確做法～～
我們在設計內容復雜的網頁時，建議根據產品訴求和用戶目標，合理的放置元素，以此來達到目標，另一方面根據z形瀏覽順序，可以讓用戶不會產生視覺疲憊，每個視覺點停頓時看到元素都是不同，提升用戶體驗。


實際產品中的應用


8、合理的字體加粗
在設計大面積文字排版時，應當注意字體粗細，它決定著我們的設計是否易讀性高。

左側為什么錯？
左圖中可以看到，無論是標題還是內容字體重量都很輕，基本的識別度已經快缺失了，而且正文內容通常都是成百上千字，長時間閱讀這種纖細的字體很容易出現視覺疲勞。

建議正確做法～～
在設計UI界面中，無論是長文字體還是模塊元素字體，我們都要注意字體的重量，要具備基本的識別度，保證用戶在閱讀時不會出現困難。


實際產品中的應用


9、刻意減少行高
行高并不是越大越好，在設計文本段落時，有時候刻意減少行高，能夠使易讀性更加高。

左側為什么錯？
我們可以看到，左圖中標題行高過于大，與正文的間距層級出現了明顯的割裂，用戶閱讀時從第一行到第二行的眼球跳動時間會變得更加大，所耗費時間更加長，我們自己感受下左圖的閱讀，是不是會發現有明顯的疲憊感。

建議正確做法～～
與正文的處理方法相反，在長文本段落時，我們會刻意增加正文的行高，那是因為正文通常文字非常多，并且上下段落都很緊密，需要我們通過增加間距來提升閱讀空間感，而標題內容正常偏短，因此可以提升標題的緊湊感來增加閱讀效率，例如正文行高1.5倍，標題行高可以使用1.3倍，具體可以根據產品規范進行調整。


實際產品中的應用


10、面包屑導航的定位
在網頁中經常會遇到面包屑導航，用戶可以通過點擊面包屑導航直達其他頁面，因此我們需要注意面包屑導航的層級狀態。

為什么錯？
首先左圖中當前界面的狀態使用了置灰處理，這就會出現一個問題，用戶無法清晰的查看當前所處位置，認知層面來說，一般在網頁中導航區域灰色是可以點擊的，而圖中把可點擊的狀態用在當前位置，會產生操作上的誤解，影響用戶體驗。

建議正確做法～～
在設計網頁面包屑導航時，建議用戶當前位置使用高亮處理，當用戶想進行導航切換時第一時間能夠注意到當前所處位置，避免誤操作，而其他導航入口可以使用灰度或者其他弱化方式處理，告知用戶其他頁面可以通過此處跳轉，降低用戶思考時間，提升體驗。


實際產品中的應用


總結
在 UI 設計中，需圍繞信息傳遞效率與用戶體驗流暢性，把握十大核心設計原則：信息分類上，關聯內容應整合為整體呈現，避免插入無關元素割裂邏輯，契合格式塔視覺組織原理；層級區分時，需通過視覺差異明確標簽與交互按鈕等不同維度元素的屬性，實現 “所看即所得”；突出熱區需對關鍵操作入口進行適度高亮，既便于用戶快速定位，又不破壞整體平衡；圖標設計要確保表意與功能精準匹配，減少認知歧義與試錯成本；多步驟任務中需展示清晰的進度狀態，讓用戶感知操作位置，緩解焦慮；陰影運用以輕量適度為原則，服務于層級區分與質感提升，避免過度使用喧賓奪主；大面積內容布局可遵循 Z 形閱讀規律，在視覺焦點處合理放置元素，提升信息觸達效率；字體加粗需保證基礎識別度，避免纖細字體導致的閱讀疲勞；行高設置需因內容類型調整，標題緊湊化、正文留白化以優化閱讀節奏；面包屑導航應通過高亮當前位置、弱化其他入口，明確層級狀態，降低用戶定位成本。這些原則從信息邏輯、視覺呈現、交互體驗等多維度發力，最終實現信息高效傳遞、操作流暢無惑的優質 UI 體驗。