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

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

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

 

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

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

密度像素是屏幕上每一英寸所包含的像素個數(shù)，簡稱PPI（Pixels Per Inch）。dp（density-independent pixel）是密度獨立像素，也寫作dip（也有device-independent pixel之說，設(shè)備獨立像素）。

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

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

因為有些屏幕的單位英寸的像素數(shù)量要比其他屏幕多，即ppi分辨率大，為了保證設(shè)計的圖標(biāo)在不同分辨率的屏幕上都一樣大，設(shè)計師通常只是設(shè)計一個尺寸，導(dǎo)出2x、3x、4x的尺寸。

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

 

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

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

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

以8的倍數(shù)設(shè)計可以保證設(shè)計的一致性?；谶@種慣例，大家在進行設(shè)計工作時不用再猜測間距的數(shù)值，每個圖標(biāo)都可以完美地與其他圖標(biāo)對齊。

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

 

3. 刪減元素容器的線框

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

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

 

4. 無障礙設(shè)計—重視對比度

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

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

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

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

 

5. 基于用戶習(xí)慣，設(shè)計用戶體驗

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

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

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

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

 

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

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

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

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

 

7. 避免使用超過兩種字體

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

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

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

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

 

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

讓用戶去認(rèn)知產(chǎn)品是產(chǎn)品設(shè)計中所推崇的，因為，我們?yōu)槭裁匆層脩粼谑褂玫倪^程中去思考呢？

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

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

在Gmail郵箱中，我瞟一眼就可以知道哪些是已讀郵件，哪些是未讀郵件，這個過程不需要過腦子。同理，我登錄到自己的亞馬遜賬戶后，可以迅速地從上次購物時中斷的地方繼續(xù)開始購物—因為它顯示了我最近瀏覽過的物品。

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

—Nielson Norman Group（尼爾森諾曼集團，人機交互和用戶體驗咨詢公司，唐·諾曼是創(chuàng)始人之一）

 

9. 切忌拖慢用戶體驗  

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

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

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

關(guān)于動畫和微交互的一條經(jīng)驗就是，如果某個體驗只是無謂地增加了時間，那么這不是在改善用戶體驗。

如果加入的動畫帶有目的性，則可以改善用戶體驗；但是如果增加的只是不必要的分散注意力的元素或用戶操作，那么用戶體驗不會變得更好。

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

這位Dribble用戶，非常抱歉把你揪了出來:/

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

所以，如果你要在界面中使用動畫，那么給它一個明確的目的，并且不要讓用戶等待超過500毫秒。在2019年的今天，惹惱你的用戶只需要1毫秒。

 

10. 大道至簡

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

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

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

最后，分享給大家一句我最愛的設(shè)計箴言：

臻于完美之時，不是加無可加，而是減無可減。

文章來源：UXRen