當(dāng)你在設(shè)計(jì)過(guò)程中有疑問(wèn)時(shí)，不妨看看我們?yōu)槟銣?zhǔn)備的，在UI設(shè)計(jì)中要遵循的標(biāo)準(zhǔn)實(shí)踐法則列表。當(dāng)然，這些法則不是一成不變的，只是我們認(rèn)為可以在日常的UI設(shè)計(jì)工作中為你提供的一系列方法而已。

請(qǐng)記住，設(shè)計(jì)需要跳出固有的思維，這意味著你要打破規(guī)則。因此，這些經(jīng)驗(yàn)法則僅僅作為你的參考即可，而非公式。

01、設(shè)計(jì)基于密度而非像素

請(qǐng)記住，像素密度的定義。它是顯示設(shè)備每物理英寸的像素?cái)?shù)，像素密度的簡(jiǎn)寫是PPI（Pixels per inch）。另一個(gè)安卓常用的單位是DP，這個(gè)單位的英文全稱是“Density-independent pixels”，簡(jiǎn)稱DIP或者DP。請(qǐng)注意，這個(gè)單位是相對(duì)單位，而對(duì)應(yīng)的iOS設(shè)計(jì)中的相對(duì)單位則是PT（point）。

像素值是DP值的3或者4倍

在設(shè)計(jì)界面的時(shí)候，我們最應(yīng)該關(guān)注的不是手機(jī)的分辨率（像素），而是設(shè)備的密度。這樣可以保證我們?cè)诓煌叽绲脑O(shè)備中有最佳的適配效果。

這樣做的原因是，比如我們?cè)O(shè)計(jì)了一個(gè)按鈕素材資源，它的尺寸是200X50dp，那么在160ppi屏幕的設(shè)備上，它就是200x50px，在320ppi的屏幕上，它顯示為400x100px，即為原始尺寸的兩倍。

由于某些顯示設(shè)備每英寸的像素?cái)?shù)（ppi）要比其它屏幕多，因此圖片素材不會(huì)在像素密度高的屏幕上顯示得更小，它們會(huì)以原始大小的2倍，3倍，4倍進(jìn)行渲染。這樣可以保證所有的圖片素材在具有不同密度的設(shè)備之間保持同樣大?。ㄒ虼巳绻悴粸楦呙芏绕聊惶峁└髨D片，那么圖片會(huì)被拉大，就虛掉了）。

例如，iPhone XS Max的屏幕尺寸為414X896，請(qǐng)注意單位不是像素，而是PT。以像素為單位計(jì)算，那么尺寸為1242X2688px?？紤]到這一點(diǎn)，在為iPhone XS Max進(jìn)行設(shè)計(jì)時(shí)，我們會(huì)使用414x896pt來(lái)進(jìn)行設(shè)計(jì)，然后在輸出素材時(shí)，簡(jiǎn)單的將素材乘以3即可（也就是3倍圖）。

02、使用8DP增量

為什么在設(shè)計(jì)間距時(shí)要以數(shù)字8為增量？在這里有一個(gè)簡(jiǎn)單的解釋。例如，我們使用這個(gè)神奇的數(shù)字8而不是5，是因?yàn)槿绻O(shè)備具有1.5倍的分辨率，它將無(wú)法正確呈現(xiàn)奇數(shù)。（ 5X1.5=7.5，很明顯，我們不想要小數(shù)點(diǎn)）

此外，現(xiàn)在絕大多數(shù)的屏幕尺寸都可以被8整除，從而可以輕松的在這些設(shè)備上調(diào)整我們的設(shè)計(jì)。

通過(guò)在8點(diǎn)網(wǎng)格上以8為增量進(jìn)行設(shè)計(jì)，我們可以保持設(shè)計(jì)的一致性。間距也不再需要猜測(cè)，所有內(nèi)容都與我們定義的間距約定保持一致。

03、去除多余的線框和卡片

在設(shè)計(jì)的時(shí)候，你應(yīng)該時(shí)不時(shí)的跳出來(lái)看看，感受一下容器是否會(huì)讓UI界面顯得混亂。在大多數(shù)情況下，用于分隔內(nèi)容的框和線可以用留白來(lái)替代。

我們?cè)O(shè)計(jì)的大部分元素其實(shí)都包含在“框”中，因此，只需刪除這些內(nèi)容即可，它可以讓頁(yè)面顯得不是那么的密集和繁雜，并為元素提供更多的呼吸空間。

04、注意元素的對(duì)比度

良好的對(duì)比不僅可以吸引用戶的注意力，而且還能提升產(chǎn)品的可訪問(wèn)性。

設(shè)計(jì)產(chǎn)品類似于在圖書館或者學(xué)校之類的公共建筑中進(jìn)行設(shè)計(jì)，你必須關(guān)注到所有的人群，包括盲人，色盲人群和視力有障礙的用戶。

根據(jù)Web內(nèi)容可訪問(wèn)性指南，元素需要至少有4.5：1的對(duì)比度。

要確保你的設(shè)計(jì)符合這個(gè)標(biāo)準(zhǔn)，大家可以下載Stark（下載地址：https://getstark.co/），它可以幫助你檢查你的設(shè)計(jì)可訪問(wèn)性是否合格。

05、尊重用戶已有的使用習(xí)慣

將某些元素視為標(biāo)準(zhǔn)的原因有很多。比如你將“開始免費(fèi)試用”按鈕設(shè)計(jì)為圓形，但是它用在一篇文章的底部時(shí)，這就會(huì)占用過(guò)多不必要的垂直空間。

不僅于此，用戶已經(jīng)習(xí)慣了在大多數(shù)應(yīng)用中獲得類似的使用體驗(yàn)。如果你的網(wǎng)站或者應(yīng)用與用戶的常規(guī)使用習(xí)慣差別太大，那么用戶就會(huì)感到沮喪（畢竟學(xué)習(xí)成本太高啦）

因此，建議大家在當(dāng)前設(shè)計(jì)規(guī)范的范疇內(nèi)進(jìn)行創(chuàng)新。不要重新發(fā)明輪子。

06、使用色彩重量構(gòu)建視覺(jué)層次

每種顏色都有視覺(jué)重量，它可以幫助我們?cè)趦?nèi)容之間建立層次感。通過(guò)使用多種淺色，可以為不同的元素分配不同的重要性級(jí)別。

這個(gè)經(jīng)驗(yàn)法則就是，如果一個(gè)元素比另一個(gè)元素重要，則它們應(yīng)該有更“重”的視覺(jué)重量。這種方式會(huì)讓用戶易于快速瀏覽頁(yè)面并區(qū)分重要或者次要的信息。

而更大更粗的字體信息會(huì)首先吸引用戶的注意，隨后用戶會(huì)將注意力集中在這些重要信息的解釋性文字或者內(nèi)容上。

07、避免使用兩種以上字體

我們普遍接受的設(shè)計(jì)準(zhǔn)則就是限制界面中使用的字體數(shù)量。通常，兩種不同的字體就夠了。但這并不意味著你不能用更多字體，除非你有充分的理由，否則最好還是不要那么用。

如果一定要使用多種字體，一種解決辦法就是使用一種字體家族。

通過(guò)使用同種字體家族，我們可以在設(shè)計(jì)中使用具有不同變體的相同字體。同種字體家族讓設(shè)計(jì)變得靈活又一致。

另外，在選擇字體時(shí)，請(qǐng)找到具有不同字體重量的字體，比如一種字體包含，極細(xì)，常規(guī)，中，粗體，超粗體，壓縮，或者斜體等樣式。這種字體會(huì)為你提供更多的選擇，也無(wú)需再去添加其它樣式的字體。

08、不要讓用戶思考

做到迅速識(shí)別是設(shè)計(jì)產(chǎn)品中的一個(gè)好習(xí)慣，所以，為什么要讓用戶思考呢？

結(jié)賬頁(yè)面，電子郵件收件箱，搜索歷史記錄，后退按鈕等等都是很好的例子。

在結(jié)賬頁(yè)面中（如果設(shè)計(jì)的當(dāng)?shù)那闆r下），用戶不必記住他要付款的商品。因?yàn)樗苊黠@可以識(shí)別出自己要買的商品，而不用再費(fèi)勁去再次記憶。

展示用戶的搜索歷史記錄

在Gmail收件箱中，用戶可以一目了然的確定自己已經(jīng)閱讀和未讀的電子郵件?；蛘弋?dāng)我登錄到Amazon時(shí)，網(wǎng)站會(huì)告訴用戶最近查看的商品，而不用勞煩用戶再次搜索。

“通過(guò)使對(duì)象，操作選項(xiàng)可見(jiàn)，可以最大程度的減少用戶的認(rèn)知負(fù)載。用戶不必記住從對(duì)話的一部分到另一部分的內(nèi)容。在適當(dāng)時(shí)候，系統(tǒng)會(huì)及時(shí)的告訴他們，或者用一種很方便的方式讓用戶查看到?！?/p>

09、不要放慢交互動(dòng)畫速度

在UX中正確使用動(dòng)畫

對(duì)于用戶來(lái)說(shuō)，速度和效率是非常重要的東西。用戶要使用一個(gè)應(yīng)用程序來(lái)完成特定的工作，而不是盯著交互動(dòng)畫來(lái)欣賞。

“我想走的快點(diǎn)”-Ricky Bobby

如果將一筆支票快速兌入我的銀行賬戶的體驗(yàn)令人愉悅，那非常棒。但是，請(qǐng)不要用你的創(chuàng)造力妨礙我快速完成目標(biāo)。這些動(dòng)畫與我要完成目標(biāo)相比，真的不值一提。

關(guān)于動(dòng)畫和微交互的一條經(jīng)驗(yàn)法則是，如果體驗(yàn)增加了不必要的時(shí)間，那么它并不能改善體驗(yàn)。有目的性的使用動(dòng)畫可以改善體驗(yàn)，請(qǐng)記住，動(dòng)畫一定是有目的的。

我經(jīng)常在Dribbble上看到一些Landing Page，這些設(shè)計(jì)在用戶滾動(dòng)瀏覽頁(yè)面時(shí)有動(dòng)畫效果。大部分頁(yè)面的動(dòng)畫使用淡化，移動(dòng)等等效果，但是它們太過(guò)“動(dòng)畫化”了，反而忽略了對(duì)于體驗(yàn)本身的關(guān)注。作為用戶，當(dāng)屏幕上發(fā)生太多事情的時(shí)候，他們很難注意到重點(diǎn)內(nèi)容，而且這種動(dòng)畫也浪費(fèi)了用戶太多的寶貴時(shí)間。

很多研究表明，界面動(dòng)畫的最佳速度在200到500毫秒之間。這些數(shù)字基于人腦的特殊素質(zhì)。任何短于100毫秒的動(dòng)畫都是瞬時(shí)的，不會(huì)被察覺(jué)。而動(dòng)畫時(shí)間超過(guò)一秒，將會(huì)傳達(dá)一種延遲感，從而讓用戶感覺(jué)無(wú)聊。

因此，如果要使用動(dòng)畫，請(qǐng)務(wù)必注意，動(dòng)畫都是有目的性的，不要讓用戶等待超過(guò)500ms。在2019年，其實(shí)1ms就可以激怒你的用戶。

10、少即是多

每次我們向頁(yè)面添加其他信息的時(shí)候：按鈕，文本，圖像，動(dòng)畫，插圖等，這些內(nèi)容就會(huì)與其它相關(guān)信息存在競(jìng)爭(zhēng)。如果頁(yè)面上內(nèi)容過(guò)多，元素的重要性則會(huì)降低。

注明的Google主頁(yè)就是個(gè)很好的案例。設(shè)計(jì)師并沒(méi)有讓訪客淹沒(méi)在不必要的信息中，而只是突出了其中的一點(diǎn)，那就是：搜索。

其中一條我最喜歡的設(shè)計(jì)格言是：“所謂的完美設(shè)計(jì)，不是在沒(méi)有其它東西可添加時(shí)，而是在沒(méi)有東西可以去掉的時(shí)候?！?/p>