高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼,給用戶很不好的體驗(yàn)。暗黑模式一般在晚上使用,因此對(duì)設(shè)計(jì)師來(lái)說(shuō),需要做的是讓整個(gè)配色相對(duì)柔和,讓用戶感到放松。基于此,在設(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)在這些按鈕中,讓用戶不知所措。
三、簡(jiǎn)化不必要的動(dòng)詞
沒(méi)必要在菜單上增加動(dòng)詞和短語(yǔ),用最少的信息寫(xiě)清楚功能就足夠讓用戶理解了。所以,在菜單設(shè)計(jì)上要盡量避免增加無(wú)關(guān)緊要的詞,這樣才不會(huì)影響用戶體驗(yàn)。
四、字體尺寸類別越少越好
你可能注意到,很少有表單的字體大小不平衡,字體之間的類別盡量少一些看起來(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)是為了讓用戶更有效率地理解事物。在使用圖標(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è)顏色在亮色模式下看起來(lái)非常漂亮,但在深色模式看可能就太暗了,反之亦然。解決這個(gè)問(wèn)題最好辦法是使用2套不同飽和度的顏色。
七、新手引導(dǎo)多給用戶自主權(quán)
App的新手引導(dǎo)決定了用戶第一次體驗(yàn)產(chǎn)品時(shí)的感受。在設(shè)計(jì)的時(shí)候,試著公開(kāi)需要哪些具體步驟,增加”跳過(guò)“和前后移動(dòng)查看的能力對(duì)新用戶來(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的使用方式能夠讓用戶清晰的知道所有內(nèi)容。
十、拆分大段文字
為了讓用戶聚焦閱讀,應(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è)原理我們知道,用戶在內(nèi)容上的視線是沿著Z字形來(lái)閱讀的,所以遵循這一原理設(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à)出彩會(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ū)分開(kāi)的更清晰,嘗試用線對(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)解釋輸入字段,這可以防止用戶在填寫(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è)“,而最右邊是”用戶“。(彩云注:這是一個(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ì)用戶需要點(diǎn)擊多少次才能完成他的目標(biāo),額外的點(diǎn)擊會(huì)減慢整個(gè)操作過(guò)程。簡(jiǎn)化過(guò)程,自然體驗(yàn)就會(huì)更好,所以盡可能的減少點(diǎn)擊次數(shù)。(彩云注:下面的案例,增加可點(diǎn)擊符號(hào)也可以減少用戶思考的時(shí)間。)
二十二、少即是多
為了使內(nèi)容突出,沒(méi)有必要使用多種字體類型,包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的的文字層次結(jié)構(gòu)、字體重量,同時(shí)只使用一種字體足以吸引用戶對(duì)內(nèi)容的注意力。
二十三、留白定義重點(diǎn)
留白在設(shè)計(jì)中非常重要,太少或者沒(méi)有留白會(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)畫(huà)、圖像甚至文本來(lái)保持用戶的注意力。(彩云注:給用戶的提示可以先快速加載信息框架,讓用戶有事可做,而不是什么都看不到)
原文地址:彩云譯設(shè)計(jì)(公眾號(hào))
作者:彩云Sky
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》用上這24個(gè)UI體驗(yàn)優(yōu)化經(jīng)驗(yàn),果然做出來(lái)的設(shè)計(jì)更高級(jí)了!
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( 91whvog3.cn )是一家專注而深入的界面設(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ì)公司