編輯導語：界面設計的好壞，會直接影響到用戶的使用體驗，然而不少產品在做界面設計時，可能會直接進行搬運設計，而沒有針對自身產品的特點和設計目標進行界面優化。那么，設計師或產品設計人員在設計界面時，可以注意哪些細節？不如來看看作者的總結吧！

對于很多設計師來講在設計界面過程中往往會忽略掉很多的細節，比如卡片的排版、文字的排版、各種狀態的反饋等等，特別是剛入行的設計師在做頁面時往往是直接拿到競品的頁面搬運到自己產品上，這種做法理論上不會讓自己的頁面出錯。

但是很多人往往忽略了一點，就是別人這么設計的目標是什么，是否會匹配自己的設計目標，如果不了解這些貿然的去搬運設計，那么時間久了會養成一個不好的習慣，需要設計師去進行設計時可能就會遇到很多難點，作為初級設計師或者剛入行的設計師，前期可以去進行搬運設計，但是一定要了解別人為什么這么做。

接下來將分享20個設計上的小技巧，大部分在日常設計中都會遇到，了解到這些設計細節，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。

一、信息分類

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

1. 左側為什么錯？

信息維度來講標題與說明文字具有強關聯性，中間強插一個按鈕會把文字信息割裂，另一個維度，酒店標題是作為吸引用戶后續閱讀的聚焦點，它需要通過更加具有利益點的內容吸引用戶進行預約購買，此時添加按鈕，會使用戶閱讀距離上增長，無法在最快時間獲得相關信息，影響用戶獲取信息效率，并且在兩段文字具有關聯性時，用戶瀏覽順序被打斷，會造成短暫疑惑，降低閱讀效率。

2. 建議正確做法

無論是什么類型的產品模塊，我們在設計中應當做好信息分層，當兩段內容元素具有關聯性時，他們應當作為一個整體給用戶展現。

相關原理：接近原則、相似原則、共同命運原則。

3. 實際產品中的應用

二、層級區分

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

1. 左側為什么錯？

我們可以看到，新人尊享的標簽顏色與按鈕顏色存在沖突，在頁面中看到模塊會產生誤解，新人尊享和立即上車兩個是不是都可以點，當點到“新人尊享”標簽時卻發現沒有任何反饋，就會影響用戶體驗。

2. 建議正確做法

我們在設計時應當對信息維度進行視覺區分，例如“新人尊享”定位是標簽，主要目的是作為信息提示存在，而“立即上車”是按鈕，目的是讓用戶進行下一步操作，所以我們遇到類似的設計時應當對不同信息維度做差異化處理，即所看即所得，既能表達出內容本身的含義，也不會造成體驗上的損失。

3. 實際產品中的應用

三、突出熱區

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

1. 左側為什么錯？

圖中“查看主頁”入口使用了灰色字體，雖然文字添加了下劃線，但是在識別度上還是不夠強烈，在復雜頁面信息中，用戶需要進行下一步操作時，很難定位到入口，極大的影響用戶的選擇效率。

2. 建議正確做法

無論是在頁面中還是模塊中，當需要用戶進行下一步操作時我們可以進行視覺高亮處理，右圖中個人信息模塊“查看主頁”使用文字高亮加下劃線進行處理，通過顏色讓用戶快速定位入口，且不影響用戶正常閱讀，若使用色塊按鈕進行突出，模塊會冗余，過于喧賓奪主。

3. 實際產品中的應用

四、圖標表意明確

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

1. 左側為什么錯？

我們看左邊的圖，如果把文字去掉僅僅通過圖標是否能夠清晰的了解功能的作用，其實并不能，圖標與功能本身并不匹配，對用戶使用時會造成嚴重的歧異，造成沒有安全感。

2. 建議正確做法

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

3. 實際產品中的應用

五、狀態可見性

當產品需要用戶進行多步驟完成任務時，應當展示系統進度，讓用戶了解他們的行為操作在界面中所處于的位置。

我們看下圖中房屋裝修信息填寫流程，用戶面對這種多流程任務時，耐心往往很低，我們可以在設計時添加系統狀態進度條，時刻提示用戶當前的節點，此方法應用場景還有注冊登錄、信息完善等更多場景，目的都是為了讓用戶達到交互可預測的狀態，提升用戶體驗。

實際產品中的應用

六、輕量投影

在界面中陰影的作用是用來做信息層級區分和視覺效果裝飾，因此在使用時需要注意陰影的大小，現實世界中陰影是隨處可見，大樓陰影、植物陰影以及人的陰影等等，這些陰影是生活中的一部分，而在UI設計中，陰影則是界面的一部分，它可以根據界面中各種元素模塊進行使用，但在設計中我們要避免過度使用，試想一下我們在生活中陰影會刻意成為我們關注點嗎，因此在頁面中也是同樣道理。

1. 左側為什么錯？

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

2. 建議正確做法

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

3. 實際產品中的應用

七、Z形閱讀

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

1. 更適合網頁

z形閱讀習慣適用于大面積的可視區域，需要根據瀏覽習慣，把重要的信息快速呈現給用戶，一般會用于網頁設計中，在新聞類產品中通常會出現大面積文字，需要通過圖片引導用戶去關注該模塊，因此根據z形瀏覽順序可以在對應的視覺點放置圖片。

2. 建議正確做法

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

3. 實際產品中的應用

八、合理的字體加粗

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

1. 左側為什么錯？

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

2. 建議正確做法

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

3. 實際產品中的應用

九、刻意減少行高

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

1. 左側為什么錯？

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

2. 建議正確做法

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

3. 實際產品中的應用

十、面包屑導航的定位

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

1. 為什么錯？

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

2. 建議正確做法

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

3. 實際產品中的應用

十一、孰輕孰重

當一個模塊或者元素內有多個入口時，我們需要保證讓核心入口優先級最高，其他入口弱化以此來引導用戶完成目標。

1. 為什么錯？

左圖中可以看到把“立即購買”和“試用”的點擊按鈕都做成面性，這樣會影響用戶選擇，我們常常說好的體驗是讓用戶選擇，但在具有商業化屬性的場景中，體驗是與業務并存，是需要我們幫助用戶做選擇，從而在不影響體驗的情況下達到業務目標，回來在看左圖中，不僅影響了用戶自主選擇，還沒有達到產品的目的。

2. 建議正確做法

當界面中存在多個入口時，我們可以對這些入口進行優先級處理，以突出核心功能為目的，用戶瀏覽界面的動作是大面積掃讀的形式，這就意味著我們需要弱化無關信息，既保證了界面的基本美觀性，又能夠具備良好的體驗。

相關原則：易掃原則、奧卡姆剃刀原則。

3. 實際產品中的應用

十二、遵循習慣

用戶瀏覽頁面的習慣是由左至右，因此在設計界面中的模塊元素時需要考慮信息文字是否違背用戶習慣。

1. 為什么錯？

左圖中其實也不算錯，為什么不建議這么做呢，一是在純文字且無交互的模塊卡槽內，文字分散排布不利于用戶閱讀，二是左圖中的這種排布方式不利于后續的功能延展，例如在“為你推薦”處添加可點擊事件，那么就需要我們修改布局，這樣會造成返工的可能。

2. 建議正確做法

在設計卡片文字布局時建議使用居左形式，這樣能夠讓用戶最快速度get到信息點，且后續無論在模塊中上下哪個位置進行延展，都不需要進行重新調整布局。

3. 實際產品中的應用

作者：愛吃貓的魚；公眾號：防脫發藥水

本文由 @愛吃貓的魚 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議