在我們?cè)O(shè)計(jì)UI有所疑惑時(shí)，可以參照以下標(biāo)準(zhǔn)做法。

這些做法并非一成不變—我只是列舉出這些方法，相信它們可以對(duì)你的日常UI設(shè)計(jì)工作有所幫助。

我們需要記住一點(diǎn)，設(shè)計(jì)其實(shí)就是跳出框框思考，這意味著，有些時(shí)候我們要打破陳規(guī)。所以，對(duì)我的建議也不要全盤(pán)接受。

 

1. 設(shè)計(jì)時(shí)使用密度像素（dp），而非像素（pixel）

圖中的像素值是密度像素值的三四倍

密度像素是屏幕上每一英寸所包含的像素個(gè)數(shù)，簡(jiǎn)稱(chēng)PPI（Pixels Per Inch）。dp（density-independent pixel）是密度獨(dú)立像素，也寫(xiě)作dip（也有device-independent pixel之說(shuō)，設(shè)備獨(dú)立像素）。

設(shè)計(jì)界面時(shí)，建議大家基于設(shè)備的密度像素，而不是像素。這樣可以保證我們?cè)O(shè)計(jì)出的圖標(biāo)素材比例適當(dāng)，適應(yīng)不同尺寸的設(shè)備。

舉個(gè)例子，假如我們以密度獨(dú)立像素dp為單位，設(shè)計(jì)了一個(gè) 200 x 50的按鍵，那么這個(gè)按鍵在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸則為400 x 100像素，即原尺寸的兩倍。

因?yàn)橛行┢聊坏膯挝挥⒋绲南袼財(cái)?shù)量要比其他屏幕多，即ppi分辨率大，為了保證設(shè)計(jì)的圖標(biāo)在不同分辨率的屏幕上都一樣大，設(shè)計(jì)師通常只是設(shè)計(jì)一個(gè)尺寸，導(dǎo)出2x、3x、4x的尺寸。

iPhone XS Max的屏幕尺寸是414 x 896。但這里的單位并不是像素，而是點(diǎn)的個(gè)數(shù)。論像素，則是1242 x 2688 px。知道了這些，給iPhone XS Max做設(shè)計(jì)時(shí)，我會(huì)以414 x 896個(gè)點(diǎn)為尺寸做設(shè)計(jì)，而后導(dǎo)出3x的圖標(biāo)素材。

 

2. 間距使用8的倍數(shù)（8dp）

為什么UI設(shè)計(jì)的間距都是8的倍數(shù)而不是5的倍數(shù)呢？這里有一個(gè)簡(jiǎn)單的解釋—如果一個(gè)設(shè)備是1.5x的分辨率，我們就沒(méi)法導(dǎo)出一個(gè)奇數(shù)。

另外，現(xiàn)代主流的屏幕尺寸都是以8為單位，以8的倍數(shù)做設(shè)計(jì)可以很好地適應(yīng)這些屏幕。

以8的倍數(shù)設(shè)計(jì)可以保證設(shè)計(jì)的一致性。基于這種慣例，大家在進(jìn)行設(shè)計(jì)工作時(shí)不用再猜測(cè)間距的數(shù)值，每個(gè)圖標(biāo)都可以完美地與其他圖標(biāo)對(duì)齊。

有關(guān)這個(gè)話(huà)題的更全面探討，請(qǐng)參考Bryn Jackson的文章《八像素網(wǎng)格設(shè)計(jì)》。

 

3. 刪減元素容器的線框

我們?cè)谠O(shè)計(jì)的過(guò)程中應(yīng)該時(shí)常將自己抽離出來(lái)，審視界面中這些作為元素“容器”的線和框是否讓界面顯得過(guò)于雜亂，是否應(yīng)該予以保留。通常這些用以區(qū)隔界面內(nèi)容的線和框可以被邊界留白代替。

我們?cè)O(shè)計(jì)的大部分元素都存在于線框里，簡(jiǎn)單清除掉這些“容器”可以讓界面看起來(lái)不那么擁擠—給元素更多呼吸的空間。

 

4. 無(wú)障礙設(shè)計(jì)—重視對(duì)比度

善用對(duì)比度不僅僅是為了讓用戶(hù)的注意力集中于重要的信息，更是為了使產(chǎn)品更容易訪問(wèn)/使用。

設(shè)計(jì)產(chǎn)品就好比建設(shè)像圖書(shū)館、學(xué)校一類(lèi)的公共場(chǎng)所，它的適用對(duì)象需要涵蓋每一個(gè)人，包括失明、色盲和視障用戶(hù)。

Web內(nèi)容無(wú)障礙指南（WCAG）要求文本或文本圖像的對(duì)比度至少為4.5：1。

為了保證設(shè)計(jì)達(dá)到該標(biāo)準(zhǔn)，我們可以下載Stark這款插件來(lái)檢查設(shè)計(jì)是否是無(wú)障礙的。

 

5. 基于用戶(hù)習(xí)慣，設(shè)計(jì)用戶(hù)體驗(yàn)

為什么有些圖標(biāo)元素會(huì)被公認(rèn)為標(biāo)準(zhǔn)？原因有多種。

假如你把一個(gè)按鈕設(shè)計(jì)成圓形，那么當(dāng)我們需要一個(gè)（字?jǐn)?shù)較多的）“Start Free Trial”按鈕時(shí)，它就會(huì)不必要地占用界面中豎直方向上的空間。

另外，用戶(hù)期待的是與其他產(chǎn)品相似的體驗(yàn)。如果你設(shè)計(jì)的網(wǎng)站、APP或軟件與用戶(hù)的既有習(xí)慣相悖，那么這樣的體驗(yàn)是不直觀的，用戶(hù)很可能會(huì)因此受挫。

故而，在我們發(fā)揮創(chuàng)造力的時(shí)候，最好以現(xiàn)有的設(shè)計(jì)規(guī)范為基準(zhǔn)和前提。不要重新設(shè)計(jì)輪子。

 

6. 善用顏色重量（color weight），建立視覺(jué)層次

每一種顏色都有自己的視覺(jué)重量，我們可以通過(guò)借助顏色的視覺(jué)重量來(lái)建立內(nèi)容的視覺(jué)層次，用顏色的深淺來(lái)呈現(xiàn)內(nèi)容的重要性的層級(jí)。

善用顏色視覺(jué)重量的秘訣是，一個(gè)更為重要的元素，應(yīng)該有更重的視覺(jué)顏色，以便用戶(hù)快速瀏覽網(wǎng)頁(yè)，區(qū)分重要和不重要的信息。

大字號(hào)、粗體的信息會(huì)首先被用戶(hù)注意到，而后他們會(huì)關(guān)注其下的輔助性信息。

 

7. 避免使用超過(guò)兩種字體

通常，設(shè)計(jì)界面會(huì)控制使用的字體數(shù)目，兩種不同的字體就應(yīng)足夠—這不是說(shuō)你不能使用更多字體，只是你需要充分的理由。通常來(lái)講，僅用兩種字體會(huì)更好。

設(shè)計(jì)界面時(shí)要善用字體家族。

使用字體家族意味著我們可以使用同一字體的不同變體。字體家族的存在就是為了字體的不同變體可以更和諧地被放在一起，讓設(shè)計(jì)在保持多變性的同時(shí)兼顧一致性。

選擇字體時(shí)，盡量選擇那些有多種重量（如標(biāo)準(zhǔn)、適中、粗體、特粗）和樣式的（如長(zhǎng)體、寬體、斜體）的字體家族（譯者注：作者此處所述選字體經(jīng)驗(yàn)的適用對(duì)象主要為英文字體。）。這樣既會(huì)給設(shè)計(jì)留出可探索的空間，也不會(huì)增加額外的字體種類(lèi)。

 

8. 讓用戶(hù)認(rèn)知，而非記住

讓用戶(hù)去認(rèn)知產(chǎn)品是產(chǎn)品設(shè)計(jì)中所推崇的，因?yàn)椋覀優(yōu)槭裁匆層脩?hù)在使用的過(guò)程中去思考呢？

結(jié)賬頁(yè)面、電子郵箱、搜索歷史、返回按鈕等都是很好的建立了用戶(hù)認(rèn)知的例子。

在好的設(shè)計(jì)中，結(jié)賬頁(yè)面是不需要讓用戶(hù)記住他們所要購(gòu)買(mǎi)的物品的。用戶(hù)應(yīng)該可以清楚地從界面中確認(rèn)他要購(gòu)買(mǎi)的物品，而非通過(guò)回憶來(lái)想起。

在Gmail郵箱中，我瞟一眼就可以知道哪些是已讀郵件，哪些是未讀郵件，這個(gè)過(guò)程不需要過(guò)腦子。同理，我登錄到自己的亞馬遜賬戶(hù)后，可以迅速地從上次購(gòu)物時(shí)中斷的地方繼續(xù)開(kāi)始購(gòu)物—因?yàn)樗@示了我最近瀏覽過(guò)的物品。

設(shè)計(jì)時(shí)，應(yīng)讓元素、功能、選項(xiàng)明顯可見(jiàn)，最小化用戶(hù)的記憶負(fù)荷。用戶(hù)無(wú)需自己在操作的步驟中記住信息。系統(tǒng)的操作說(shuō)明應(yīng)該在需要時(shí)很容易看到或查到。

—Nielson Norman Group（尼爾森諾曼集團(tuán)，人機(jī)交互和用戶(hù)體驗(yàn)咨詢(xún)公司，唐·諾曼是創(chuàng)始人之一）

 

9. 切忌拖慢用戶(hù)體驗(yàn)  

作為用戶(hù)，速度和效率是最重要的。用戶(hù)使用一個(gè)應(yīng)用程序，是為了解決某個(gè)特定的問(wèn)題。

我要速度。
— Ricky Bobby（電影《塔拉迪加之夜：瑞奇鮑比的民謠》主角、賽車(chē)手）

如果將一張支票通過(guò)手機(jī)存入銀行賬戶(hù)這個(gè)體驗(yàn)是非常讓人享受的，那固然很好，但作為設(shè)計(jì)師，千萬(wàn)不要讓你的創(chuàng)造力阻礙用戶(hù)實(shí)現(xiàn)他們的目標(biāo)。

關(guān)于動(dòng)畫(huà)和微交互的一條經(jīng)驗(yàn)就是，如果某個(gè)體驗(yàn)只是無(wú)謂地增加了時(shí)間，那么這不是在改善用戶(hù)體驗(yàn)。

如果加入的動(dòng)畫(huà)帶有目的性，則可以改善用戶(hù)體驗(yàn)；但是如果增加的只是不必要的分散注意力的元素或用戶(hù)操作，那么用戶(hù)體驗(yàn)不會(huì)變得更好。

Dribble上有很多著陸頁(yè)的設(shè)計(jì)—當(dāng)用戶(hù)向下滾動(dòng)鼠標(biāo)時(shí)，動(dòng)畫(huà)隨之展開(kāi)。通常，這些設(shè)計(jì)展現(xiàn)出過(guò)火的動(dòng)畫(huà)效果，每個(gè)元素都在淡入淡出，動(dòng)來(lái)動(dòng)去，而幾乎不關(guān)注體驗(yàn)本身。當(dāng)太多事情同時(shí)在界面上發(fā)生時(shí)，用戶(hù)很難知道到底哪些信息是應(yīng)該關(guān)注的，這等同于浪費(fèi)用戶(hù)寶貴的時(shí)間。

這位Dribble用戶(hù)，非常抱歉把你揪了出來(lái):/

無(wú)數(shù)研究表明，界面中動(dòng)畫(huà)的最佳時(shí)間在200到500毫秒之間，這個(gè)數(shù)字是由大腦的特征決定的。任何短于100毫秒的動(dòng)畫(huà)都是一晃而過(guò)，人眼根本無(wú)法識(shí)別；而超過(guò)一秒的動(dòng)畫(huà)會(huì)帶給人無(wú)聊和延遲的感覺(jué)。
—《UX微動(dòng)畫(huà)設(shè)計(jì)指南》

所以，如果你要在界面中使用動(dòng)畫(huà)，那么給它一個(gè)明確的目的，并且不要讓用戶(hù)等待超過(guò)500毫秒。在2019年的今天，惹惱你的用戶(hù)只需要1毫秒。

 

10. 大道至簡(jiǎn)

每次我們想要增加額外的信息到界面中時(shí)，例如按鈕、文字、照片、動(dòng)畫(huà)、插圖等等，它們就會(huì)跟相關(guān)的信息進(jìn)行競(jìng)爭(zhēng)。如果一頁(yè)上有太多東西，那么某些元素的重要程度就會(huì)被削減。

谷歌搜索首頁(yè)就是典范。這個(gè)設(shè)計(jì)將全部的注意力放在了搜索這個(gè)主要功能上，沒(méi)有把用戶(hù)淹沒(méi)在不必要的信息海洋里。

對(duì)不起了雅虎，在這必須把你當(dāng)做不好的案例展示

最后，分享給大家一句我最?lèi)?ài)的設(shè)計(jì)箴言：

臻于完美之時(shí)，不是加無(wú)可加，而是減無(wú)可減。

文章來(lái)源：UXRen