Hi，我是彩云。我們常常把優(yōu)化產(chǎn)品體驗(yàn)掛在嘴邊，但卻經(jīng)常不知道從哪些角度去思考。今天分享的這些體驗(yàn)優(yōu)化細(xì)節(jié)，是一些被廣泛運(yùn)用的界面設(shè)計(jì)規(guī)則。一個(gè)優(yōu)秀的產(chǎn)品體驗(yàn)設(shè)計(jì)就是從一點(diǎn)一滴的細(xì)節(jié)中積累起來(lái)的，相信通過(guò)這些細(xì)節(jié)自檢，能使得你的界面設(shè)計(jì)更干凈、高效。

暗色模式下飽和度不宜過(guò)高

高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼，給用戶(hù)很不好的體驗(yàn)。暗黑模式一般在晚上使用，因此對(duì)設(shè)計(jì)師來(lái)說(shuō)，需要做的是讓整個(gè)配色相對(duì)柔和，讓用戶(hù)感到放松?；诖?，在設(shè)計(jì)的時(shí)候應(yīng)該將飽和度限制在 200-500 之間。

(彩云注：這里的 200-500 彩云去查了不少資料，但沒(méi)有找到最好的答案，這里引用的是 Material Design 中的顏色規(guī)范，感興趣的同學(xué)可以自行查找)

按鈕要有優(yōu)先級(jí)

在同一個(gè)界面，最理想的狀態(tài)是只有一個(gè)最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因?yàn)槿绻粋€(gè)界面上有太多這種行動(dòng)按鈕（CTA）按鈕，會(huì)讓關(guān)鍵操作淹沒(méi)在這些按鈕中，讓用戶(hù)不知所措。

簡(jiǎn)化不必要的動(dòng)詞

沒(méi)必要在菜單上增加動(dòng)詞和短語(yǔ)，用最少的信息寫(xiě)清楚功能就足夠讓用戶(hù)理解了。所以，在菜單設(shè)計(jì)上要盡量避免增加無(wú)關(guān)緊要的詞，這樣才不會(huì)影響用戶(hù)體驗(yàn)。

字體尺寸類(lèi)別越少越好

你可能注意到，很少有表單的字體大小不平衡，字體之間的類(lèi)別盡量少一些看起來(lái)會(huì)更加平衡。在決定字體大小時(shí)，盡量規(guī)范字號(hào)的標(biāo)準(zhǔn)。比如標(biāo)題（16px），副標(biāo)題（12px），正文（10px），說(shuō)明文字（8px），這些尺寸都是以 2 為倍數(shù)的。

不要混用圖標(biāo)風(fēng)格

盡管我知道要做好圖標(biāo)一致性，但在實(shí)際工作中依然經(jīng)常犯錯(cuò)。很多設(shè)計(jì)師經(jīng)常用不同風(fēng)格的圖標(biāo)混在一起，這樣會(huì)讓整個(gè) UI 界面的設(shè)計(jì)顯得很不成熟。圖標(biāo)是為了讓用戶(hù)更有效率地理解事物。在使用圖標(biāo)的時(shí)候一定要注意圖標(biāo)的一致性，尤其是一些是一些風(fēng)格細(xì)節(jié)。

不同背景下的顏色飽和度適當(dāng)微調(diào)

通常情況下，我們會(huì)認(rèn)為一個(gè)顏色在深色模式和亮色模式下是用的同一個(gè)顏色值，但這其實(shí)是錯(cuò)誤的。一個(gè)顏色在亮色模式下看起來(lái)非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個(gè)問(wèn)題最好辦法是使用 2 套不同飽和度的顏色。

新手引導(dǎo)多給用戶(hù)自主權(quán)

App 的新手引導(dǎo)決定了用戶(hù)第一次體驗(yàn)產(chǎn)品時(shí)的感受。在設(shè)計(jì)的時(shí)候，試著公開(kāi)需要哪些具體步驟，增加“跳過(guò)”和前后移動(dòng)查看的能力對(duì)新用戶(hù)來(lái)說(shuō)非常重要。

在圖片上增加疊加層

許多網(wǎng)站和 App 都是用圖片驅(qū)動(dòng)的，但在圖片上直接增加文字內(nèi)容有時(shí)候會(huì)被淹沒(méi)掉。在圖片上增加一個(gè)疊加層可以提升內(nèi)容的可讀性。

信息部分露出

對(duì)于一些大屏設(shè)備來(lái)說(shuō)，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對(duì)于這些閑置的空間來(lái)說(shuō)，盡量通過(guò)設(shè)計(jì)告訴它底部還有更多內(nèi)容。這對(duì) UI 和 UX 方面都有好處，因?yàn)榭臻g的使用方式能夠讓用戶(hù)清晰的知道所有內(nèi)容。

拆分大段文字

為了讓用戶(hù)聚焦閱讀，應(yīng)盡量避免使用大段的長(zhǎng)/寬行。保持短句和簡(jiǎn)潔能夠增加內(nèi)容的可讀性。（彩云注：這點(diǎn)用在你的作品集里也是很合適的，有些人經(jīng)常使用大段的文字內(nèi)容來(lái)描述，很可能直接勸退面試官）

Z 字形原理

Z 字形原理，也就是大眾所熟知的“古騰堡原理”，它描述了當(dāng)人們看到一個(gè)均勻分布元素的設(shè)計(jì)時(shí)，眼睛的總體運(yùn)動(dòng)情況。通過(guò)這個(gè)原理我們知道，用戶(hù)在內(nèi)容上的視線(xiàn)是沿著 Z 字形來(lái)閱讀的，所以遵循這一原理設(shè)計(jì)你想要核心表達(dá)的內(nèi)容。

擴(kuò)大可點(diǎn)擊范圍

擴(kuò)大點(diǎn)擊區(qū)域，維護(hù)像按鈕、單選、多選等控件的響應(yīng)尺寸，如果你設(shè)計(jì)的點(diǎn)擊區(qū)域太小會(huì)讓用戶(hù)點(diǎn)擊困難，造成流失。

盡量使用簡(jiǎn)潔的圖標(biāo)

避免使用花俏和俗氣的圖標(biāo)，它們會(huì)讓整個(gè)設(shè)計(jì)顯得非常不成熟，同時(shí)也是很難理解的。用上更簡(jiǎn)單的圖標(biāo)形式，會(huì)讓界面更高級(jí)。（彩云注：當(dāng)然越簡(jiǎn)單的圖標(biāo)其實(shí)想畫(huà)出彩會(huì)更難，另外也需要區(qū)分不同的場(chǎng)景，像一些運(yùn)營(yíng)類(lèi)的圖標(biāo)可能會(huì)為了活動(dòng)氛圍做的相對(duì)風(fēng)格化一些。）

正確的文案表達(dá)

選錯(cuò)文案，會(huì)讓人們對(duì)于任務(wù)缺乏興趣，根據(jù)上下文使用更合適的詞組。

考慮手勢(shì)操作

輕敲和點(diǎn)擊有時(shí)候很累人，可能不如使用滑動(dòng)、拖拽等手勢(shì)操作，這些操作會(huì)讓界面更簡(jiǎn)潔并且也能順利地完成既定任務(wù)。

展示部分文案

在探索酒店、目的地甚至是閱讀任何文章時(shí)，用戶(hù)經(jīng)常都需要點(diǎn)擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長(zhǎng)文本導(dǎo)致的滾動(dòng)。相反，可以加一個(gè)閱讀更多的按鈕方便想看全所有內(nèi)容的用戶(hù)。

接近法則

“鄰近的物體往往被視為是同一組內(nèi)容”。有時(shí)候?yàn)榱税褍?nèi)容區(qū)分開(kāi)的更清晰，嘗試用線(xiàn)對(duì)相關(guān)內(nèi)容進(jìn)行分組。（彩云注：其實(shí)有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設(shè)計(jì)風(fēng)格和具體內(nèi)容來(lái)定）

文字控件可視化

在設(shè)計(jì)控件時(shí)，如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化，除了非常需要很精確的設(shè)置參數(shù)。對(duì)于價(jià)格范圍這種，很容易將它可視化為滑塊控件。

占位符要接近要填寫(xiě)內(nèi)容

對(duì)一些人來(lái)說(shuō)容易理解的東西，對(duì)某些人來(lái)說(shuō)可能不是。因此，最好使用示例占位符來(lái)解釋輸入字段，這可以防止用戶(hù)在填寫(xiě)內(nèi)容時(shí)出錯(cuò)。

系列位置效應(yīng)

根據(jù)“系列位置效應(yīng)”，心理傾向于記住列表的第一項(xiàng)和最后一項(xiàng)，而不是中間項(xiàng)。因此，在任何 App 中設(shè)計(jì)導(dǎo)航時(shí)，根據(jù)應(yīng)用的上下文保持最左和最右的選項(xiàng)。例如 instagram，最左邊是“首頁(yè)”，而最右邊是“用戶(hù)”。（彩云注：這是一個(gè)心理學(xué)上的理論，人們對(duì)于一系列的材料更容易記住開(kāi)頭的內(nèi)容，也叫做首因效應(yīng)或者首位效應(yīng)；更容易記住末尾的內(nèi)容，就叫近因效應(yīng)。）

減少點(diǎn)擊次數(shù)

在設(shè)計(jì)任何體驗(yàn)時(shí)，點(diǎn)擊次數(shù)都是非常重要的指標(biāo)。統(tǒng)計(jì)用戶(hù)需要點(diǎn)擊多少次才能完成他的目標(biāo)，額外的點(diǎn)擊會(huì)減慢整個(gè)操作過(guò)程。簡(jiǎn)化過(guò)程，自然體驗(yàn)就會(huì)更好，所以盡可能的減少點(diǎn)擊次數(shù)。（彩云注：下面的案例，增加可點(diǎn)擊符號(hào)也可以減少用戶(hù)思考的時(shí)間。）

少即是多

為了使內(nèi)容突出，沒(méi)有必要使用多種字體類(lèi)型，包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的文字層次結(jié)構(gòu)、字體重量，同時(shí)只使用一種字體足以吸引用戶(hù)對(duì)內(nèi)容的注意力。

留白定義重點(diǎn)

留白在設(shè)計(jì)中非常重要，太少或者沒(méi)有留白會(huì)使得設(shè)計(jì)非?；靵y。明智地使用留白可以明確地強(qiáng)調(diào)內(nèi)容。

別讓用戶(hù)閑著

根據(jù)多爾蒂閾值(Doherty Threshold)這個(gè)理論：“系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專(zhuān)注，并提高生產(chǎn)效率”。因此，我們可以使用動(dòng)畫(huà)、圖像甚至文本來(lái)保持用戶(hù)的注意力。（彩云注：給用戶(hù)的提示可以先快速加載信息框架，讓用戶(hù)有事可做，而不是什么都看不到）