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

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

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

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

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

 

像素值是dp值的3或4倍
 

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

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

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

　　由于某些屏幕每英寸的像素要比其他屏幕多，因此資產(chǎn)不會(huì)在像素密度高的屏幕上顯示得更小，它們僅以原始大小的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ì)時(shí)，我會(huì)以414 x 896點(diǎn)進(jìn)行設(shè)計(jì)，然后以3x的速度交付資產(chǎn)。
 

二、使用8dp增量
 

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

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

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

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

三、移除線條和盒子
 

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

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

四、注意對(duì)比
 

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

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

 

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

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

五、熟悉是好的
 

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

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

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

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

 

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

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

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

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

七、避免使用兩個(gè)以上的字體
 

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

　　解決此問(wèn)題的方法是使用字體系列。
 

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

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

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

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

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

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

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

　　在我的Gmail收件箱中，我可以一目了然地確定自己已閱讀的電子郵件和沒(méi)有閱讀的電子郵件?；蛘?，如果我登錄到Amazon，我可以快速?gòu)纳洗瓮Ｏ聛?lái)的地方取回，因?yàn)樗鼤?huì)告訴我最近查看的商品。
 

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

 

九、不要放慢我的速度

 

在UX中正確使用動(dòng)畫的終極指南
 

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

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

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

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

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

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

　　抱歉叫你Dribbble用戶：/
 

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

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

十、少即是多
 

　　LMK，如果您想投資這個(gè)革命性的想法
 

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

　　著名的百度主頁(yè)就是一個(gè)很好的例子。設(shè)計(jì)并未將訪問(wèn)者淹沒(méi)于可能不必要的信息，而將設(shè)計(jì)重點(diǎn)放在了主要?jiǎng)幼魃希核阉鳌?br />  

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