一、暗色模式下飽和度不宜過高
高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼，給用戶很不好的體驗(yàn)。暗黑模式一般在晚上使用，因此對(duì)設(shè)計(jì)師來說，需要做的是讓整個(gè)配色相對(duì)柔和，讓用戶感到放松。基于此，在設(shè)計(jì)的時(shí)候應(yīng)該將飽和度限制在200-500之間。
(彩云注：這里的200-500彩云去查了不少資料，但沒有找到最好的答案，這里引用的是Material Design中的顏色規(guī)范，感興趣的同學(xué)可以自行查找)
二、 按鈕要有優(yōu)先級(jí)
在同一個(gè)界面，最理想的狀態(tài)是只有一個(gè)最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因?yàn)槿绻粋€(gè)界面上有太多這種行動(dòng)按鈕（CTA）按鈕，會(huì)讓關(guān)鍵操作淹沒在這些按鈕中，讓用戶不知所措。
三、簡(jiǎn)化不必要的動(dòng)詞
沒必要在菜單上增加動(dòng)詞和短語，用最少的信息寫清楚功能就足夠讓用戶理解了。所以，在菜單設(shè)計(jì)上要盡量避免增加無關(guān)緊要的詞，這樣才不會(huì)影響用戶體驗(yàn)。
四、字體尺寸類別越少越好
你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來會(huì)更加平衡。在決定字體大小時(shí)，盡量規(guī)范字號(hào)的標(biāo)準(zhǔn)。比如標(biāo)題（16px），副標(biāo)題（12px），正文（10px），說明文字（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)是為了讓用戶更有效率地理解事物。在使用圖標(biāo)的時(shí)候一定要注意圖標(biāo)的一致性，尤其是一些是一些風(fēng)格細(xì)節(jié)。
這里也跟大家分享2個(gè)我自己常用的figma圖標(biāo)庫(kù)：
1)Unicorn (https://www.figma.com/community/file/931512007012650048)
2)Basil Icons (https://www.figma.com/community/file/931906394678748246)
六、不同背景下的顏色飽和度適當(dāng)微調(diào)
通常情況下，我們會(huì)認(rèn)為一個(gè)顏色在深色模式和亮色模式下是用的同一個(gè)顏色值，但這其實(shí)是錯(cuò)誤的。一個(gè)顏色在亮色模式下看起來非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個(gè)問題最好辦法是使用2套不同飽和度的顏色。
七、新手引導(dǎo)多給用戶自主權(quán)
App的新手引導(dǎo)決定了用戶第一次體驗(yàn)產(chǎn)品時(shí)的感受。在設(shè)計(jì)的時(shí)候，試著公開需要哪些具體步驟，增加”跳過“和前后移動(dòng)查看的能力對(duì)新用戶來說非常重要。
八、在圖片上增加疊加層
許多網(wǎng)站和App都是用圖片驅(qū)動(dòng)的，但在圖片上直接增加文字內(nèi)容有時(shí)候會(huì)被淹沒掉。在圖片上增加一個(gè)疊加層可以提升內(nèi)容的可讀性。
九、信息部分露出
對(duì)于一些大屏設(shè)備來說，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對(duì)于這些閑置的空間來說，盡量通過設(shè)計(jì)告訴它底部還有更多內(nèi)容。這對(duì)UI和UX方面都有好處，因?yàn)榭臻g的使用方式能夠讓用戶清晰的知道所有內(nèi)容。
十、拆分大段文字
為了讓用戶聚焦閱讀，應(yīng)盡量避免使用大段的長(zhǎng)/寬行。保持短句和簡(jiǎn)潔能夠增加內(nèi)容的可讀性。（彩云注：這點(diǎn)用在你的作品集里也是很合適的，有些人經(jīng)常使用大段的文字內(nèi)容來描述，很可能直接勸退面試官）
十一、Z字形原理
Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當(dāng)人們看到一個(gè)均勻分布元素的設(shè)計(jì)時(shí)，眼睛的總體運(yùn)動(dòng)情況。通過這個(gè)原理我們知道，用戶在內(nèi)容上的視線是沿著Z字形來閱讀的，所以遵循這一原理設(shè)計(jì)你想要核心表達(dá)的內(nèi)容。
十二、擴(kuò)大可點(diǎn)擊范圍
擴(kuò)大點(diǎn)擊區(qū)域，維護(hù)像按鈕、單選、多選等控件的響應(yīng)尺寸，如果你設(shè)計(jì)的點(diǎn)擊區(qū)域太小會(huì)讓用戶點(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ì)更難，另外也需要區(qū)分不同的場(chǎng)景，像一些運(yùn)營(yíng)類的圖標(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í)，用戶經(jīng)常都需要點(diǎn)擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長(zhǎng)文本導(dǎo)致的滾動(dòng)。相反，可以加一個(gè)閱讀更多的按鈕方便想看全所有內(nèi)容的用戶。
十七、接近法則
”鄰近的物體往往被視為是同一組內(nèi)容“。有時(shí)候?yàn)榱税褍?nèi)容區(qū)分開的更清晰，嘗試用線對(duì)相關(guān)內(nèi)容進(jìn)行分組。（彩云注：其實(shí)有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設(shè)計(jì)風(fēng)格和具體內(nèi)容來定）
十八、文字控件可視化
在設(shè)計(jì)控件時(shí)，如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化，除了非常需要很精確的設(shè)置參數(shù)。對(duì)于價(jià)格范圍這種，很容易將它可視化為滑塊控件。
十九、占位符要接近要填寫內(nèi)容
對(duì)一些人來說容易理解的東西，對(duì)某些人來說可能不是。因此，最好使用示例占位符來解釋輸入字段，這可以防止用戶在填寫內(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，最左邊是”首頁“，而最右邊是”用戶“。（彩云注：這是一個(gè)心理學(xué)上的理論，人們對(duì)于一系列的材料更容易記住開頭的內(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ì)用戶需要點(diǎn)擊多少次才能完成他的目標(biāo)，額外的點(diǎn)擊會(huì)減慢整個(gè)操作過程。簡(jiǎn)化過程，自然體驗(yàn)就會(huì)更好，所以盡可能的減少點(diǎn)擊次數(shù)。（彩云注：下面的案例，增加可點(diǎn)擊符號(hào)也可以減少用戶思考的時(shí)間。）
二十二、少即是多
為了使內(nèi)容突出，沒有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的的文字層次結(jié)構(gòu)、字體重量，同時(shí)只使用一種字體足以吸引用戶對(duì)內(nèi)容的注意力。
二十三、留白定義重點(diǎn)
留白在設(shè)計(jì)中非常重要，太少或者沒有留白會(huì)使得設(shè)計(jì)非常混亂。明智地使用留白可以明確地強(qiáng)調(diào)內(nèi)容。
二十四、別讓用戶閑著
根據(jù)多爾蒂閾值(Doherty Threshold)這個(gè)理論：”系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率。“。因此，我們可以使用動(dòng)畫、圖像甚至文本來保持用戶的注意力。（彩云注：給用戶的提示可以先快速加載信息框架，讓用戶有事可做，而不是什么都看不到）
作者：彩云Sky
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》用上這24個(gè)UI體驗(yàn)優(yōu)化經(jīng)驗(yàn)，果然做出來的設(shè)計(jì)更高級(jí)了！
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司