解析UI設(shè)計的基本原則

　　UI設(shè)計需要遵循的基本原則：

　　一、使用8的倍數(shù)
 

　　我們使用8而不是5的原因是，如果設(shè)備的分辨率為1.5倍，則無法正確呈現(xiàn)奇數(shù)。此外，絕大多數(shù)設(shè)備屏幕尺寸都可以被8整除，從而可以輕松地在這些設(shè)備上適當(dāng)?shù)卣{(diào)整UI設(shè)計。
 

　　通過在網(wǎng)格上以8的倍數(shù)進行UI設(shè)計，可以保持設(shè)計的一致性。所有內(nèi)容都與我們定義的間距約定完全一致。
 

　　二、清晰明了的設(shè)計
 

　　界面的簡潔是要讓用戶便于使用、便于了解產(chǎn)品，并能減少用戶發(fā)生錯誤選擇的可能性。保證按鈕和操作的標(biāo)簽文字指向性要明確，保持清晰的信息傳遞，讓用戶能夠快速弄明白交互的指向性。清晰應(yīng)該是所有UI界面都具備的基本屬性。UI界面存在的目的是讓用戶能夠更便捷地同你的系統(tǒng)進行交互，不要在UI設(shè)計中使用冗長、復(fù)雜、難以記住的文本標(biāo)簽，越復(fù)雜就越會影響整體的用戶體驗。
 

　　三、記憶負擔(dān)最小化
 

　　用戶體驗設(shè)計的一個重要目標(biāo)是要讓用戶能夠憑借直覺來操作UI界面。你要讓用戶對你的界面產(chǎn)生“熟悉感”，用戶要能夠自然地理解其中的內(nèi)容，你要利用用戶對于你的設(shè)計熟悉的那部分，當(dāng)用戶對UI設(shè)計界面抱有熟悉感的時候，意味著他們對于這個設(shè)計有所了解，如果你能利用好用戶對于交互和界面模式的熟悉來進行設(shè)計的話，能讓你的用戶更快上手操作。
 

　　四、設(shè)計的一致性
 

　　每一個優(yōu)秀界面都應(yīng)該具備這個特點。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與產(chǎn)品內(nèi)容相一致。對于相同的問題，提供相同的解決方案，減輕用戶的認(rèn)知及記憶負荷，一旦確定一個設(shè)計模式，打造更符合直覺的產(chǎn)品體驗顯得相當(dāng)重要。一致的設(shè)計能夠讓用戶對于你的設(shè)計模式更快認(rèn)知、熟悉，并且在此基礎(chǔ)上快速適應(yīng)整體的體驗。用戶是期望借助自己習(xí)得的經(jīng)驗，來探索更多的內(nèi)容的，在整個UI設(shè)計中保持一致的語言、布局和設(shè)計規(guī)律，整個用戶體驗會顯得更加“通透”。
 

　　五、從用戶習(xí)慣考慮
 

　　想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。通過比較真實與虛擬的事物，完成更好的設(shè)計。優(yōu)秀的UI界面是隱形的，華麗的裝飾和不必要的元素都已經(jīng)被剔除，簡單直接的頁面邏輯和直觀必要的元素構(gòu)成了這樣的UI界面。將你的UI內(nèi)的元素限定為必須的，專注于核心的用戶體驗。
 

　　六、人性化
 

　　高效率和用戶滿意度是人性化的體現(xiàn)。用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。一個優(yōu)秀的UI設(shè)計師，從技能上講，不僅能畫圖標(biāo)，還能做好界面，會很多交互知識。優(yōu)秀的UI設(shè)計有個共通的特征：高效。提升界面效率最有效的方法是進行任務(wù)分析。熟悉用戶的流程，了解用戶的目標(biāo)，然后在此基礎(chǔ)上盡量簡化流程，使得用戶能夠便捷快速的達成目標(biāo)。
 

　　UI界面的響應(yīng)是否足夠“人性化”。當(dāng)用戶點擊界面元素的時候，用戶希望知道他們的操作是否成功，合理而快速的界面反饋十分重要。
 

　　在滿足五大基本原則后，一個優(yōu)秀的UI設(shè)計師還會在自己的設(shè)計中逐漸形成自己的設(shè)計風(fēng)格，有自己獨特的設(shè)計思路，能夠高效的設(shè)計出自己想要的作品效果。
 

　　七、設(shè)計密度，而不是像素
 

　　密度是屏幕或PPI每一英寸的像素數(shù)量。“dp”單位是“density-independent pixel”的縮寫，有時也縮寫為“dip”。
 

　　在設(shè)計UI時，不要根據(jù)像素尺寸來設(shè)計，而應(yīng)根據(jù)設(shè)備的像素密度設(shè)計。這樣可以確保UI元素正確縮放以適配不同的設(shè)備尺寸。
 

　　如果設(shè)計一個按鈕，尺寸200x50dp，則它在160ppi屏幕上顯示為200x50px，在320ppi屏幕上顯示為400x100px。
 

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

　　八、去掉線框
 

　　通常，用于分隔內(nèi)容的線框可以用空白代替。我們設(shè)計的大多數(shù)UI元素都包含在線框中，因此，只需刪除那些容器，它可以使頁面看起來不那么密集，并提供更多的呼吸空間。
 

　　九、注意對比
 

　　使用對比不僅可以吸引用戶的注意力，而且可以提高產(chǎn)品的可訪問性。設(shè)計產(chǎn)品類似于在圖書館或?qū)W校之類的公共建筑中建造建筑-它必須包含所有人。其中包括盲人，色盲和視力障礙的用戶。
 

　　Web內(nèi)容可訪問性指南(WCAG)[2]規(guī)定至少需要4.5：1的對比度。
 

　　十、使用標(biāo)準(zhǔn)元素
 

　　將某些元素視為標(biāo)準(zhǔn)的原因有很多。如果將按鈕設(shè)計為圓形，則當(dāng)文本較長時，將占用不必要的垂直空間。
 

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

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

　　十一、使用顏色建立層次結(jié)構(gòu)
 

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

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

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

　　十二、避免使用2種以上的字體
 

　　通常，兩種不同的字體就足夠了。這并不意味著不能使用更多，但是除非有充分的理由，否則通常最好不要使用。
 

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

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

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

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

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

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

　　在網(wǎng)易收件箱中，我可以一目了然地確定已閱讀郵件和沒有閱讀的郵件。或者，如果登錄到淘寶，我可以快速從上次停下來的地方繼續(xù)，因為它會告訴我最近查看的商品。
 

　　十四、速度要快
 

　　作為用戶，速度和效率是唯一重要的事情。
 

　　對于動畫和微交互的一條經(jīng)驗法則是，如果體驗增加了不必要的等待時間，那么它就不是在改善體驗。
 

　　有目的性地使用動畫可以改善體驗，但是不要增加干擾和等待。
 

　　許多研究發(fā)現(xiàn)，UI動畫的最佳速度在200-500毫秒之間。這些數(shù)字基于人腦的特質(zhì)。任何短于100毫秒的動畫都是瞬時的，根本不會被識別。而動畫時間超過1秒將產(chǎn)生一種延遲感，從而使用戶感到無聊。
 

　　十五、少即是多
 

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

　　著名的百度主頁就是一個很好的例子。設(shè)計將重點放在了主要用戶動作上：搜索。