UI設(shè)計(jì)的10條經(jīng)驗(yàn)法則

　　這里是UI設(shè)計(jì)中要遵循的標(biāo)準(zhǔn)實(shí)踐的列表。
 

　　這些都不是一成不變的，只是我認(rèn)為可以在日常UI設(shè)計(jì)工作中為您提供幫助的一系列方法。
 

　　請記住，設(shè)計(jì)只不過是在框外進(jìn)行思考，有時這意味著要打破規(guī)則。
 

一、設(shè)計(jì)密度，而不是像素

 

像素值是dp值的3或4倍
 

　　如果您不熟悉，則密度是屏幕或PPI每一英寸的像素?cái)?shù)。“ dp”單位是“密度無關(guān)像素”的縮寫，有時也縮寫為“ dip”。
 

　　在設(shè)計(jì)接口時，建議我們不要為像素設(shè)計(jì)，而應(yīng)為設(shè)備的像素密度設(shè)計(jì)。這樣可以確保我們的元素正確縮放以適合不同的設(shè)備尺寸。
 

　　這樣做的原因是，例如，如果我們設(shè)計(jì)一個按鈕素材資源，例如200 x 50 dp，則它在160ppi屏幕上顯示為200 x 50 px，在320 ppi屏幕上顯示為400 x 100 px，即尺寸的2倍原始資產(chǎn)。
 

　　由于某些屏幕每英寸的像素要比其他屏幕多，因此資產(chǎn)不會在像素密度高的屏幕上顯示得更小，它們僅以原始大小的2倍，3倍，4倍進(jìn)行渲染。這樣可以確保所有資產(chǎn)在具有不同密度的不同設(shè)備之間保持其大小。
 

　　例如，iPhone XS Max的屏幕尺寸為414 x896。但這不是像素，而是點(diǎn)數(shù)。以像素為單位，為1242 x 2688像素。考慮到這一點(diǎn)，在為iPhone XS Max進(jìn)行設(shè)計(jì)時，我會以414 x 896點(diǎn)進(jìn)行設(shè)計(jì)，然后以3x的速度交付資產(chǎn)。
 

二、使用8dp增量
 

　　為什么設(shè)計(jì)間距以8為增量?好吧，對此有一個簡單的解釋。例如，我們使用幻數(shù)8而不是5的原因是，如果設(shè)備的分辨率為1.5倍，則無法正確呈現(xiàn)奇數(shù)。
 

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

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

　　有關(guān)此主題的更全面的閱讀，請參閱Bryn Jackson的8點(diǎn)網(wǎng)格文章。
 

三、移除線條和盒子
 

　　在設(shè)計(jì)時，您應(yīng)該不時退一步，并確定是否容器使UI混亂。通常，用于分隔內(nèi)容的框和行可以用空白代替。
 

　　我們設(shè)計(jì)的大多數(shù)元素都包含在框中，因此，只需刪除那些容器，它可以使頁面看起來不那么密集，并為我們的元素提供更多的呼吸空間。
 

四、注意對比
 

　　使用對比不僅可以吸引用戶的注意力，而且可以提高產(chǎn)品的可訪問性。
 

　　設(shè)計(jì)產(chǎn)品類似于在圖書館或?qū)W校之類的公共建筑中建造建筑-它必須包含所有人。其中包括盲人，色盲和視力障礙的用戶。

 

　　Web內(nèi)容可訪問性指南(WCAG)至少需要4.5：1的對比度。
 

　　為確保您符合此標(biāo)準(zhǔn)，請下載Stark，該文件可讓您檢查是否可以訪問您的設(shè)計(jì)。
 

五、熟悉是好的
 

將某些元素視為標(biāo)準(zhǔn)的原因有很多。
 

　　例如，如果您將按鈕設(shè)計(jì)為圓形，則例如當(dāng)文本需要“開始免費(fèi)試用”時，它將占用不必要的垂直空間。
 

　　除此之外，用戶已經(jīng)期望在整個網(wǎng)絡(luò)上獲得類似的體驗(yàn)。如果您的網(wǎng)站，應(yīng)用程序或軟件的功能與用戶習(xí)慣的功能不同，那么它就不會很直觀，他們可能會對這種體驗(yàn)感到沮喪。
 

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

 

六、使用顏色權(quán)重建立層次結(jié)構(gòu)
 

　　每種顏色都有視覺上的分量，可以幫助我們在內(nèi)容之間建立層次結(jié)構(gòu)。通過使用較淺的顏色，我們可以為元素分配不同的重要性級別。
 

　　經(jīng)驗(yàn)法則是，如果一個元素比另一個元素更重要，則它應(yīng)具有更高的視覺重量。這使用戶易于快速瀏覽頁面并區(qū)分重要和次要信息。
 

　　更大，更粗體的信息是首先要吸引用戶眼球的內(nèi)容，然后他們將繼續(xù)瀏覽其下方的支持信息。
 

七、避免使用兩個以上的字體
 

　　普遍接受的設(shè)計(jì)實(shí)踐是限制界面中使用的字體數(shù)量。通常，兩個不同的字體就足夠了。這并不意味著您不能使用更多，但是除非有充分的理由，否則通常最好不要使用。
 

　　解決此問題的方法是使用字體系列。
 

　　通過使用字體系列，我們可以在設(shè)計(jì)中使用具有不同變體的相同字體。同一家族的字體旨在共同工作，因此它們既靈活又一致。
 

　　選擇字體時，請找到具有不同權(quán)重的字體，例如輕，常規(guī)，中，粗體，超粗體以及壓縮，擴(kuò)展和斜體等樣式。這將為您提供更多空間來探索不同的樣式，而無需添加其他字體。
 

八、認(rèn)可而不是回憶
 

　　識別是產(chǎn)品設(shè)計(jì)中的一種好習(xí)慣，因?yàn)?，為什么要讓用戶思?
 

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

　　在結(jié)帳頁面(如果設(shè)計(jì)得當(dāng))上，我不必記住要付款的商品。我顯然應(yīng)該能夠識別出我要購買的商品，而不必費(fèi)勁自己的記憶。
 

取消我搜索的內(nèi)容
 

　　在我的Gmail收件箱中，我可以一目了然地確定自己已閱讀的電子郵件和沒有閱讀的電子郵件?；蛘撸绻业卿浀紸mazon，我可以快速從上次停下來的地方取回，因?yàn)樗鼤嬖V我最近查看的商品。
 

　　“通過使對象，操作和選項(xiàng)可見，最大程度地減少用戶的內(nèi)存負(fù)載。用戶不必記住從對話的一部分到另一部分的信息。適當(dāng)時，系統(tǒng)使用說明應(yīng)清晰可見或易于取回。” — Nielson Norman Group

 

九、不要放慢我的速度

 

在UX中正確使用動畫的終極指南
 

　　作為用戶，速度和效率是唯一重要的事情。我正在使用一個應(yīng)用程序來解決要完成的特定工作。
 

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

　　如果將數(shù)字化支票存入我的銀行帳戶的體驗(yàn)令人愉快，那很好，但是不要讓您的創(chuàng)造力妨礙我作為用戶的目標(biāo)。
 

　　主要與動畫和微交互有關(guān)的一條經(jīng)驗(yàn)法則是，如果體驗(yàn)增加了不必要的時間，那么它并不能改善體驗(yàn)。
 

　　有目的性地使用動畫可以改善體驗(yàn)，但是不會給元素增加不必要的干擾和移動。
 

　　我經(jīng)常在Dribbble上看到用于著陸頁的設(shè)計(jì)，這些設(shè)計(jì)在用戶滾動瀏覽頁面時具有動畫效果。通常，動畫會隨著一切的淡化和移動而變得過于動畫化，而對體驗(yàn)本身的關(guān)注卻很少。作為用戶，當(dāng)屏幕上發(fā)生太多事情時，要知道我該注意些什么可能是一個挑戰(zhàn)。這也浪費(fèi)了我的寶貴時間。
 

　　抱歉叫你Dribbble用戶：/
 

　　許多研究發(fā)現(xiàn)，界面動畫的最佳速度在200到500毫秒之間。這些數(shù)字基于人腦的特殊素質(zhì)。任何短于100毫秒的動畫都是瞬時的，根本不會被識別。而動畫時間超過1秒將傳達(dá)一種延遲感，從而使用戶感到無聊。” — 在UX中正確使用動畫的最終指南
 

　　因此，如果您使用動畫，那么這兩個部分是有目的的。如果這些動畫是有目的的，那么不要讓我等待超過500毫秒。在2019年，只需一毫秒即可激怒您的用戶。
 

十、少即是多
 

　　LMK，如果您想投資這個革命性的想法
 

　　每次我們向頁面添加其他信息時：按鈕，文本，圖像，動畫，插圖等，它就會與相關(guān)信息競爭。如果頁面上的內(nèi)容過多，則元素的重要性會降低。
 

　　著名的百度主頁就是一個很好的例子。設(shè)計(jì)并未將訪問者淹沒于可能不必要的信息，而將設(shè)計(jì)重點(diǎn)放在了主要動作上：搜索。
 

　　我最喜歡的設(shè)計(jì)語錄之一： “實(shí)現(xiàn)完美，不是在沒有其他可添加的東西時，而是在沒有其他東西可取的時候。”