UI設(shè)計(jì)中44條重要理論
1.用微妙的雙重投影來讓你的卡片看起來更加清晰

在某些元素周圍使用多個放置陰影或非常精細(xì)的邊框(僅比實(shí)際陰影暗一點(diǎn))可以使這些元素看起來更清晰、更清晰,并幫助你避免那些看起來渾濁的陰影。
2.減少標(biāo)題上的字母間距以提供更好的光學(xué)平衡

你的標(biāo)題很可能會比正文更大,也比正文更重,所以字母之間的間距有時會看起來更大,
減少一點(diǎn)間距,就可以使你的標(biāo)題更加清
3.為了保持一致性,請確保圖標(biāo)共享相同的視覺樣式

在ui中實(shí)現(xiàn)圖標(biāo)時,保持一致。
確保它們具有相同的視覺風(fēng)格; 相同的重量,或者填充,或者輪廓。
4.在你的設(shè)計(jì)中只用一種字體就好了

在創(chuàng)建設(shè)計(jì)時只使用一種字體是比較好的,這樣做實(shí)際上可以幫助你產(chǎn)生統(tǒng)一的設(shè)計(jì)效果。
使用字重、大小和顏色的組合,你還是可以用一個單獨(dú)的字體表達(dá)清晰的文字的結(jié)構(gòu)
5.留白

留白可以讓你的設(shè)計(jì)具有呼吸感,更加舒適。
6.選擇底色,然后使用色調(diào)和陰影來增加一致

通過選擇一個基色,然后使用你選擇的顏色的色調(diào)和陰影,可以以最簡單的方式為你的設(shè)計(jì)增加一致性
7.拇指法則

允許用戶隨時跳過你的移動應(yīng)用程序登錄序列,并將該跳過鏈接放在拇指容易觸及的位置。
只是一個簡單的調(diào)整,可以讓你的用戶有更好的體驗(yàn)。
8.光影需要是來自同一個光源

確保你的陰影總是來自同一個光源,會素描的同學(xué)很好理解,光源關(guān)系一致表達(dá)空間統(tǒng)一性的基礎(chǔ)
9.文本與圖像之間的對比度

基本的處理方式是,在圖片上增加一個透明漸變蒙版來使得字體看的更加清楚。
10.同一種字體時,使用多字重的字體

如果只使用一個字體,盡量選擇有多字重的字體。
11.在淺色背景上你的文字可見性需要注意

在淺色背景下工作時,文字顏色不要太淺,雖然看起來很舒服,但可見性不較差,不利于閱讀
12.長文本中,文字閱讀感不要太搶眼

當(dāng)涉及到長格式的內(nèi)容時,某些常規(guī)的粗體字體在屏幕上看起來還是有點(diǎn)太重,太呆板了。
建議,選擇深灰色來降低文本的色調(diào),閱讀起來會更加舒服。
13.行動按鈕需要是最聚焦的

通過使用顏色對比、尺寸和標(biāo)簽,確保“行動按鈕”盡可能突出
14.字號越小,你的行距就越高

隨著字號的減小,增加行高可以獲得更好的易讀性。
15.突出菜單中最常用的元素

在設(shè)計(jì)應(yīng)用程序內(nèi)部使用的菜單時,請確保提供最常用的操作(即; 上傳圖像,添加文件等…)最突出的屏幕
16.從你的圖像中挑選顏色加入到產(chǎn)品設(shè)計(jì)中

從產(chǎn)品圖像中挑選顏色,然后將你選擇的顏色的各種色調(diào)和陰影應(yīng)用到你的背景、文本、圖標(biāo)……,就能為你的設(shè)計(jì)增添大量的視覺趣味。
17.根據(jù)字體的x高度設(shè)置行高

不同x高度的字體需要不同的行高測量來實(shí)現(xiàn)文本行之間的正確分隔。
即使你可能有兩種字體大小相同(即; 18px)它們的x高度可能會有很大差異,選擇正確行高是非常有必要的
18.突出最重要的元素

通過使用字體大小、權(quán)重、顏色和布局的組合,你可以輕松突出UI中最重要的元素
19.告知錯誤的原因

在用戶剛剛執(zhí)行的操作附近添加一條錯誤消息,可以幫助用戶提高正確登入,也可以緩解用戶焦慮(他可以更加清晰那里出錯)
20.嘗試在手機(jī)上創(chuàng)建更大可點(diǎn)擊的區(qū)域

當(dāng)為移動設(shè)備設(shè)計(jì)時,嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域
對于按鈕和僅由文本組成的鏈接來說,點(diǎn)擊區(qū)域會很小,所以盡可能使用帶有標(biāo)簽的圖標(biāo)。
iOS和Android的最低建議點(diǎn)擊區(qū)域
iOS為44 x 44pt
安卓48 x 48dp
21.在短標(biāo)題上使用大寫的字母

長標(biāo)題都是大寫字母的話,閱讀轉(zhuǎn)化上比較慢(你明白他是什么意思比較慢)
短標(biāo)題都是大字母的話,相對來說比較快可以和記憶中的單詞對應(yīng)上。
22.保持淺色文本和圖像之間的對比度

始終確保淺色文本在淺色圖像背景下清晰可見。
只需在文本后面應(yīng)用一個低透明的深色背景,就能保持這些元素之間的良好對比度
23.排版的親密性

標(biāo)題、正文、標(biāo)題、正文……這樣的排列中如果是間距都是相同的,那么在閱讀上就很難區(qū)分標(biāo)題是屬于上文還是下文的。
正確的做法是,標(biāo)題距離上文的距離>標(biāo)題距離下文的距離,這樣閱讀起來,標(biāo)題會比較清晰的對應(yīng)的是下文。
24.在下載中盡量給進(jìn)度提醒

當(dāng)下載速度是一閃而過時,則無需提示
當(dāng)下載等待時間>3S時,建議給進(jìn)度提示
25.文字也有情緒

在項(xiàng)目中處理文本時,選擇正確的字體將影響文本的語音類型。 那么大聲、或者溫柔、或者正式,嚴(yán)肅,或者有趣。每種字體都有自己獨(dú)特的聲音。
26.為正文選擇合適的行長,并提高可讀性

基于人閱讀情緒,如果閱讀一行很長,一直閱讀下去,會出現(xiàn)你眼前閱讀的內(nèi)容“不見”的情況
對于單列頁面,45到75個字符被廣泛認(rèn)為是令人滿意的行長,66個字符的行(包括字母和空格)是最合適的。
當(dāng)然,字體大小和行高也是決定可讀性的一個因素,但是對于行長,要保持在45到75個字符之間。
27.偶爾使用純粹的裝飾性元素是可以的,但要保持可訪問性

需要適當(dāng),如果裝飾的強(qiáng)了主要表達(dá)的,則不可取 偶爾使用純裝飾的幽靈文字也可以,但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅(jiān)持可用性最佳的做法是沒有問題的。但有時,希望添加純出于裝飾目的的文本,我們不希望所有的設(shè)計(jì)都落入乏味。如果沒有元素會以任何方式影響用戶體驗(yàn),那么出于裝飾的原因,插入奇怪的元素是可以的。
28.使UI中的元素相互區(qū)分

按鈕。 通知。 UI中兩個獨(dú)立但必不可少的元素。一定要確保你的用戶能夠快速準(zhǔn)確地將他們區(qū)分開來。
29.陰影不要太重

舒服的投影會增加你的設(shè)計(jì)的質(zhì)感,和透氣感。太重的投影會顯得你畫面比較臟。
30.使用遞進(jìn)分類時,需要明確當(dāng)前選中的元素

面包屑要突出。
31.使用高度飽和的顏色? 試著用色調(diào)或陰影把事情調(diào)小一點(diǎn)

高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)在網(wǎng)站上看起來很不錯,但過度使用時,會讓用戶眼睛疲勞,主要是與文本內(nèi)容一起使用時。
32.使用用戶熟悉認(rèn)知的圖標(biāo)表達(dá)

在向設(shè)計(jì)中添加圖標(biāo)時,使用用戶熟悉認(rèn)知的圖標(biāo)。新的圖標(biāo)雖有很好看,很有個性,但是會讓用戶疑惑
33.接近律

需要承上表達(dá)的元素,排版上接近對應(yīng)的元素,可以讓用戶心理聯(lián)系起來是一體的
34.減少標(biāo)題的行高是很好的

與長格式正文文本(需要足夠的行高以提高可讀性)不同,標(biāo)題通常要短得多,因此可以稍微縮小間距。標(biāo)題的建議行高通常是文本大小的1到1.3倍
35.從色輪上挑選配色

類比色和鄰近色是最和諧的配色方案之一,也是最不會出錯的配色
36.想用更輕松的語氣, 盡量用小寫字母

在處理特定項(xiàng)目時,使用類似于所有小寫字母的文本可以表達(dá)更加輕松的意思但需要注意,在圖像和文本之間使用某種顏色疊加,以獲得更強(qiáng)的對比度
37.使用重量、大小和顏色來表示你的結(jié)構(gòu)層次感

38.深色背景+淺色文本, 增加字重,提升易讀性

當(dāng)在淺色背景下設(shè)置深色文本時,偶爾可以選擇較輕的字體。
但是…反之:淺色文本>深色背景。最好是把字體的重量增加一點(diǎn),尤其是長文本,原因是,讓用戶避免視覺疲勞,獲得更好的易讀性。
39.使用正確的字體類型,表達(dá)對應(yīng)的情感

正確的字體選擇對于讓你的內(nèi)容更快的正確傳達(dá)更重要。
40.全部大寫+字母間距=更好的易讀性

只需稍微增加字母之間的間距,就可以提高字跡的易讀性,并為大寫字母增加一些設(shè)計(jì)感
41.讓表單上的錯誤信息變得有用和容易理解

確保錯誤提示,解釋了哪里出錯和如何解決始終讓用戶了解最新情況,即使是普通的表單,讓這些錯誤消息變得有用,不要讓用戶懵逼
42.加載占位符

使用占位符可以更好的緩解用戶焦慮
43.通知用戶如果應(yīng)用某個特定操作將會發(fā)生什么

在應(yīng)用可能產(chǎn)生后果的特定操作之前,請?jiān)敿?xì)地通知用戶。尤其適用于具有不可逆轉(zhuǎn)后果的行為,例如永久刪除某個內(nèi)容。讓用戶知道將要發(fā)生什么,并要求他們確認(rèn)
44.不要在下拉列表中隱藏重要的操作

用戶需要采取的基本操作(例如,注冊或登錄)隱藏在下拉列表中,甚至可能找到用戶想要的。
解決:將重要的功能提出來,不要隱藏