国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

一、信息分類

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

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

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

2. 建議正確做法

無論是什么類型的產(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)行視覺區(qū)分。

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

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

2. 建議正確做法

我們?cè)谠O(shè)計(jì)時(shí)應(yīng)當(dāng)對(duì)信息維度進(jìn)行視覺區(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ò)？

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

2. 建議正確做法

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

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

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

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

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

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

2. 建議正確做法

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

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

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

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

我們看下圖中房屋裝修信息填寫流程，用戶面對(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)用

六、輕量投影

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

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

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

2. 建議正確做法

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

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

2. 建議正確做法

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

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

八、合理的字體加粗

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

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

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

2. 建議正確做法

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

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

九、刻意減少行高

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

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

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

2. 建議正確做法

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

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

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

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

1. 為什么錯(cuò)？

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

2. 建議正確做法

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

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

十一、孰輕孰重

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

1. 為什么錯(cuò)？

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

2. 建議正確做法

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

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

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

十二、遵循習(xí)慣

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

1. 為什么錯(cuò)？

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

2. 建議正確做法

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

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

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

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

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