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

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

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

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

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

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

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

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

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

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

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

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

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

　　六、人性化
 

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

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

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

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

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

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

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

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

　　八、去掉線框
 

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

　　九、注意對(duì)比
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　十四、速度要快
 

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

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

　　有目的性地使用動(dòng)畫可以改善體驗(yàn)，但是不要增加干擾和等待。
 

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

　　十五、少即是多
 

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

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