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

在上一篇《想要優(yōu)化好UI作品，這14個設(shè)計細(xì)節(jié)一定要檢查到位！》文章中講到了14個細(xì)節(jié)優(yōu)化，收到了朋友們的好評。而在今天這篇文章中又總結(jié)了24個非常棒的細(xì)節(jié)，更全面了。2篇文章共計36個優(yōu)化點(diǎn)，推薦兩篇一起學(xué)習(xí)，相信定有收獲，值得你收藏學(xué)習(xí)！

一、暗色模式下飽和度不宜過高

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

(注：這里引用的是Material Design中的顏色規(guī)范，感興趣的同學(xué)可以自行查找)

二、按鈕要有優(yōu)先級

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

三、簡化不必要的動詞

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

四、字體尺寸類別越少越好

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

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

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

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

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

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

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

八、在圖片上增加疊加層

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

九、信息部分露出

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

十、拆分大段文字

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

十一、Z字形原理

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

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

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

十三、盡量使用簡潔的圖標(biāo)

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

十四、正確的文案表達(dá)

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

十五、考慮手勢操作

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

十六、展示部分文案

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

十七、接近法則

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

十八、文字控件可視化

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

十九、占位符要接近要填寫內(nèi)容

對一些人來說容易理解的東西，對某些人來說可能不是。因此，最好使用示例占位符來解釋輸入字段，這可以防止用戶在填寫內(nèi)容時出錯。

二十、系列位置效應(yīng)

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

二十一、減少點(diǎn)擊次數(shù)

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

二十二、少即是多

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

二十三、留白定義重點(diǎn)

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

二十四、別讓用戶閑著

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