編輯導(dǎo)語(yǔ)：界面設(shè)計(jì)的好壞，會(huì)直接影響到用戶的使用體驗(yàn)，然而不少產(chǎn)品在做界面設(shè)計(jì)時(shí)，可能會(huì)直接進(jìn)行搬運(yùn)設(shè)計(jì)，而沒(méi)有針對(duì)自身產(chǎn)品的特點(diǎn)和設(shè)計(jì)目標(biāo)進(jìn)行界面優(yōu)化。那么，設(shè)計(jì)師或產(chǎn)品設(shè)計(jì)人員在設(shè)計(jì)界面時(shí)，可以注意哪些細(xì)節(jié)？不如來(lái)看看作者的總結(jié)吧！

對(duì)于很多設(shè)計(jì)師來(lái)講在設(shè)計(jì)界面過(guò)程中往往會(huì)忽略掉很多的細(xì)節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計(jì)師在做頁(yè)面時(shí)往往是直接拿到競(jìng)品的頁(yè)面搬運(yùn)到自己產(chǎn)品上，這種做法理論上不會(huì)讓自己的頁(yè)面出錯(cuò)。

但是很多人往往忽略了一點(diǎn)，就是別人這么設(shè)計(jì)的目標(biāo)是什么，是否會(huì)匹配自己的設(shè)計(jì)目標(biāo)，如果不了解這些貿(mào)然的去搬運(yùn)設(shè)計(jì)，那么時(shí)間久了會(huì)養(yǎng)成一個(gè)不好的習(xí)慣，需要設(shè)計(jì)師去進(jìn)行設(shè)計(jì)時(shí)可能就會(huì)遇到很多難點(diǎn)，作為初級(jí)設(shè)計(jì)師或者剛?cè)胄械脑O(shè)計(jì)師，前期可以去進(jìn)行搬運(yùn)設(shè)計(jì)，但是一定要了解別人為什么這么做。

接下來(lái)將分享20個(gè)設(shè)計(jì)上的小技巧，大部分在日常設(shè)計(jì)中都會(huì)遇到，了解到這些設(shè)計(jì)細(xì)節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗(yàn)。

一、信息分類

相關(guān)聯(lián)信息需要進(jìn)行歸類，我們?nèi)粘o(wú)論是瀏覽新聞?lì)愡€是商品類產(chǎn)品，習(xí)慣都是閱讀標(biāo)題后直接閱讀內(nèi)容，能夠更加沉浸。

1. 左側(cè)為什么錯(cuò)？

信息維度來(lái)講標(biāo)題與說(shuō)明文字具有強(qiáng)關(guān)聯(lián)性，中間強(qiáng)插一個(gè)按鈕會(huì)把文字信息割裂，另一個(gè)維度，酒店標(biāo)題是作為吸引用戶后續(xù)閱讀的聚焦點(diǎn)，它需要通過(guò)更加具有利益點(diǎn)的內(nèi)容吸引用戶進(jìn)行預(yù)約購(gòu)買，此時(shí)添加按鈕，會(huì)使用戶閱讀距離上增長(zhǎng)，無(wú)法在最快時(shí)間獲得相關(guān)信息，影響用戶獲取信息效率，并且在兩段文字具有關(guān)聯(lián)性時(shí)，用戶瀏覽順序被打斷，會(huì)造成短暫疑惑，降低閱讀效率。

2. 建議正確做法

無(wú)論是什么類型的產(chǎn)品模塊，我們?cè)谠O(shè)計(jì)中應(yīng)當(dāng)做好信息分層，當(dāng)兩段內(nèi)容元素具有關(guān)聯(lián)性時(shí)，他們應(yīng)當(dāng)作為一個(gè)整體給用戶展現(xiàn)。

相關(guān)原理：接近原則、相似原則、共同命運(yùn)原則。

3. 實(shí)際產(chǎn)品中的應(yīng)用

二、層級(jí)區(qū)分

兩個(gè)獨(dú)立的且不相關(guān)的元素，需要進(jìn)行視覺(jué)區(qū)分。

1. 左側(cè)為什么錯(cuò)？

我們可以看到，新人尊享的標(biāo)簽顏色與按鈕顏色存在沖突，在頁(yè)面中看到模塊會(huì)產(chǎn)生誤解，新人尊享和立即上車兩個(gè)是不是都可以點(diǎn)，當(dāng)點(diǎn)到“新人尊享”標(biāo)簽時(shí)卻發(fā)現(xiàn)沒(méi)有任何反饋，就會(huì)影響用戶體驗(yàn)。

2. 建議正確做法

我們?cè)谠O(shè)計(jì)時(shí)應(yīng)當(dāng)對(duì)信息維度進(jìn)行視覺(jué)區(qū)分，例如“新人尊享”定位是標(biāo)簽，主要目的是作為信息提示存在，而“立即上車”是按鈕，目的是讓用戶進(jìn)行下一步操作，所以我們遇到類似的設(shè)計(jì)時(shí)應(yīng)當(dāng)對(duì)不同信息維度做差異化處理，即所看即所得，既能表達(dá)出內(nèi)容本身的含義，也不會(huì)造成體驗(yàn)上的損失。

3. 實(shí)際產(chǎn)品中的應(yīng)用

三、突出熱區(qū)

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

1. 左側(cè)為什么錯(cuò)？

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

2. 建議正確做法

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

3. 實(shí)際產(chǎn)品中的應(yīng)用

四、圖標(biāo)表意明確

設(shè)計(jì)中經(jīng)常會(huì)遇到圖標(biāo)相關(guān)設(shè)計(jì)，無(wú)論是通用圖標(biāo)還是金剛區(qū)、百寶箱圖標(biāo)，我們都需要注意圖標(biāo)的表意是否匹配功能。

1. 左側(cè)為什么錯(cuò)？

我們看左邊的圖，如果把文字去掉僅僅通過(guò)圖標(biāo)是否能夠清晰的了解功能的作用，其實(shí)并不能，圖標(biāo)與功能本身并不匹配，對(duì)用戶使用時(shí)會(huì)造成嚴(yán)重的歧異，造成沒(méi)有安全感。

2. 建議正確做法

如右圖中，我們?cè)谠O(shè)計(jì)新的圖標(biāo)時(shí)只需要進(jìn)行稍微注意下，就能夠解決圖標(biāo)表意的問(wèn)題，在認(rèn)知層面解決用戶的困惑，降低認(rèn)知障礙。

3. 實(shí)際產(chǎn)品中的應(yīng)用

五、狀態(tài)可見(jiàn)性

當(dāng)產(chǎn)品需要用戶進(jìn)行多步驟完成任務(wù)時(shí)，應(yīng)當(dāng)展示系統(tǒng)進(jìn)度，讓用戶了解他們的行為操作在界面中所處于的位置。

我們看下圖中房屋裝修信息填寫(xiě)流程，用戶面對(duì)這種多流程任務(wù)時(shí)，耐心往往很低，我們可以在設(shè)計(jì)時(shí)添加系統(tǒng)狀態(tài)進(jìn)度條，時(shí)刻提示用戶當(dāng)前的節(jié)點(diǎn)，此方法應(yīng)用場(chǎng)景還有注冊(cè)登錄、信息完善等更多場(chǎng)景，目的都是為了讓用戶達(dá)到交互可預(yù)測(cè)的狀態(tài)，提升用戶體驗(yàn)。

實(shí)際產(chǎn)品中的應(yīng)用

六、輕量投影

在界面中陰影的作用是用來(lái)做信息層級(jí)區(qū)分和視覺(jué)效果裝飾，因此在使用時(shí)需要注意陰影的大小，現(xiàn)實(shí)世界中陰影是隨處可見(jiàn)，大樓陰影、植物陰影以及人的陰影等等，這些陰影是生活中的一部分，而在UI設(shè)計(jì)中，陰影則是界面的一部分，它可以根據(jù)界面中各種元素模塊進(jìn)行使用，但在設(shè)計(jì)中我們要避免過(guò)度使用，試想一下我們?cè)谏钪嘘幱皶?huì)刻意成為我們關(guān)注點(diǎn)嗎，因此在頁(yè)面中也是同樣道理。

1. 左側(cè)為什么錯(cuò)？

我們看左圖中的陰影，在這個(gè)房屋出租表單選擇模塊中陰影是用來(lái)告知用戶已選擇該表單，給一個(gè)視覺(jué)強(qiáng)提示，但在圖中，陰影的范圍以及深度都是用過(guò)度，在頁(yè)面中不僅會(huì)喧賓奪主，還會(huì)影響基礎(chǔ)的美觀度。

2. 建議正確做法

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

3. 實(shí)際產(chǎn)品中的應(yīng)用

七、Z形閱讀

z形原理也被稱為“古騰堡原理”描述了在查看元素均分的設(shè)計(jì)時(shí)眼睛的運(yùn)動(dòng)規(guī)律，根據(jù)這個(gè)原理驗(yàn)證用戶的眼睛從左上角到右下角以“Z”運(yùn)動(dòng)軌跡瀏覽內(nèi)容。

1. 更適合網(wǎng)頁(yè)

z形閱讀習(xí)慣適用于大面積的可視區(qū)域，需要根據(jù)瀏覽習(xí)慣，把重要的信息快速呈現(xiàn)給用戶，一般會(huì)用于網(wǎng)頁(yè)設(shè)計(jì)中，在新聞?lì)惍a(chǎn)品中通常會(huì)出現(xiàn)大面積文字，需要通過(guò)圖片引導(dǎo)用戶去關(guān)注該模塊，因此根據(jù)z形瀏覽順序可以在對(duì)應(yīng)的視覺(jué)點(diǎn)放置圖片。

2. 建議正確做法

我們?cè)谠O(shè)計(jì)內(nèi)容復(fù)雜的網(wǎng)頁(yè)時(shí)，建議根據(jù)產(chǎn)品訴求和用戶目標(biāo)，合理的放置元素，以此來(lái)達(dá)到目標(biāo)，另一方面根據(jù)z形瀏覽順序，可以讓用戶不會(huì)產(chǎn)生視覺(jué)疲憊，每個(gè)視覺(jué)點(diǎn)停頓時(shí)看到元素都是不同，提升用戶體驗(yàn)。

3. 實(shí)際產(chǎn)品中的應(yīng)用

八、合理的字體加粗

在設(shè)計(jì)大面積文字排版時(shí)，應(yīng)當(dāng)注意字體粗細(xì)，它決定著我們的設(shè)計(jì)是否易讀性高。

1. 左側(cè)為什么錯(cuò)？

左圖中可以看到，無(wú)論是標(biāo)題還是內(nèi)容字體重量都很輕，基本的識(shí)別度已經(jīng)快缺失了，而且正文內(nèi)容通常都是成百上千字，長(zhǎng)時(shí)間閱讀這種纖細(xì)的字體很容易出現(xiàn)視覺(jué)疲勞。

2. 建議正確做法

在設(shè)計(jì)UI界面中，無(wú)論是長(zhǎng)文字體還是模塊元素字體，我們都要注意字體的重量，要具備基本的識(shí)別度，保證用戶在閱讀時(shí)不會(huì)出現(xiàn)困難。

3. 實(shí)際產(chǎn)品中的應(yīng)用

九、刻意減少行高

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

1. 左側(cè)為什么錯(cuò)？

我們可以看到，左圖中標(biāo)題行高過(guò)于大，與正文的間距層級(jí)出現(xiàn)了明顯的割裂，用戶閱讀時(shí)從第一行到第二行的眼球跳動(dòng)時(shí)間會(huì)變得更加大，所耗費(fèi)時(shí)間更加長(zhǎng)，我們自己感受下左圖的閱讀，是不是會(huì)發(fā)現(xiàn)有明顯的疲憊感。

2. 建議正確做法

與正文的處理方法相反，在長(zhǎng)文本段落時(shí)，我們會(huì)刻意增加正文的行高，那是因?yàn)檎耐ǔＮ淖址浅６啵⑶疑舷露温涠己芫o密，需要我們通過(guò)增加間距來(lái)提升閱讀空間感，而標(biāo)題內(nèi)容正常偏短，因此可以提升標(biāo)題的緊湊感來(lái)增加閱讀效率，例如正文行高1.5倍，標(biāo)題行高可以使用1.3倍，具體可以根據(jù)產(chǎn)品規(guī)范進(jìn)行調(diào)整。

3. 實(shí)際產(chǎn)品中的應(yīng)用

十、面包屑導(dǎo)航的定位

在網(wǎng)頁(yè)中經(jīng)常會(huì)遇到面包屑導(dǎo)航，用戶可以通過(guò)點(diǎn)擊面包屑導(dǎo)航直達(dá)其他頁(yè)面，因此我們需要注意面包屑導(dǎo)航的層級(jí)狀態(tài)。

1. 為什么錯(cuò)？

首先左圖中當(dāng)前界面的狀態(tài)使用了置灰處理，這就會(huì)出現(xiàn)一個(gè)問(wèn)題，用戶無(wú)法清晰的查看當(dāng)前所處位置，認(rèn)知層面來(lái)說(shuō)，一般在網(wǎng)頁(yè)中導(dǎo)航區(qū)域灰色是可以點(diǎn)擊的，而圖中把可點(diǎn)擊的狀態(tài)用在當(dāng)前位置，會(huì)產(chǎn)生操作上的誤解，影響用戶體驗(yàn)。

2. 建議正確做法

在設(shè)計(jì)網(wǎng)頁(yè)面包屑導(dǎo)航時(shí)，建議用戶當(dāng)前位置使用高亮處理，當(dāng)用戶想進(jìn)行導(dǎo)航切換時(shí)第一時(shí)間能夠注意到當(dāng)前所處位置，避免誤操作，而其他導(dǎo)航入口可以使用灰度或者其他弱化方式處理，告知用戶其他頁(yè)面可以通過(guò)此處跳轉(zhuǎn)，降低用戶思考時(shí)間，提升體驗(yàn)。

3. 實(shí)際產(chǎn)品中的應(yīng)用

十一、孰輕孰重

當(dāng)一個(gè)模塊或者元素內(nèi)有多個(gè)入口時(shí)，我們需要保證讓核心入口優(yōu)先級(jí)最高，其他入口弱化以此來(lái)引導(dǎo)用戶完成目標(biāo)。

1. 為什么錯(cuò)？

左圖中可以看到把“立即購(gòu)買”和“試用”的點(diǎn)擊按鈕都做成面性，這樣會(huì)影響用戶選擇，我們常常說(shuō)好的體驗(yàn)是讓用戶選擇，但在具有商業(yè)化屬性的場(chǎng)景中，體驗(yàn)是與業(yè)務(wù)并存，是需要我們幫助用戶做選擇，從而在不影響體驗(yàn)的情況下達(dá)到業(yè)務(wù)目標(biāo)，回來(lái)在看左圖中，不僅影響了用戶自主選擇，還沒(méi)有達(dá)到產(chǎn)品的目的。

2. 建議正確做法

當(dāng)界面中存在多個(gè)入口時(shí)，我們可以對(duì)這些入口進(jìn)行優(yōu)先級(jí)處理，以突出核心功能為目的，用戶瀏覽界面的動(dòng)作是大面積掃讀的形式，這就意味著我們需要弱化無(wú)關(guān)信息，既保證了界面的基本美觀性，又能夠具備良好的體驗(yàn)。

相關(guān)原則：易掃原則、奧卡姆剃刀原則。

3. 實(shí)際產(chǎn)品中的應(yīng)用

十二、遵循習(xí)慣

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

1. 為什么錯(cuò)？

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

2. 建議正確做法

在設(shè)計(jì)卡片文字布局時(shí)建議使用居左形式，這樣能夠讓用戶最快速度get到信息點(diǎn)，且后續(xù)無(wú)論在模塊中上下哪個(gè)位置進(jìn)行延展，都不需要進(jìn)行重新調(diào)整布局。

3. 實(shí)際產(chǎn)品中的應(yīng)用

作者：愛(ài)吃貓的魚(yú)；公眾號(hào)：防脫發(fā)藥水

本文由 @愛(ài)吃貓的魚(yú) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議