UI設(shè)計(jì)新人必讀準(zhǔn)則

本文格式為Word版，下載可任意編輯——UI設(shè)計(jì)新人必讀準(zhǔn)則官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

UI設(shè)計(jì)新人必讀準(zhǔn)則

“設(shè)計(jì)絕不是簡(jiǎn)單的拼合，排列甚至編輯;設(shè)計(jì)是通過(guò)說(shuō)明，簡(jiǎn)化、明確、修飾，使之嚴(yán)肅，有說(shuō)服性，甚至帶一點(diǎn)趣味性，來(lái)賦予其價(jià)值及意義。〞

1.“明確〞應(yīng)當(dāng)放在設(shè)計(jì)的首要位置

對(duì)任何界面而言，“明確〞是首要的也是最重要的一點(diǎn)。人們必需能夠分辯出它是什么，才能有效地使用你設(shè)計(jì)出來(lái)的界面。設(shè)計(jì)師們?cè)谠O(shè)計(jì)的時(shí)候，要去關(guān)心人們?yōu)楹螘?huì)使用這個(gè)應(yīng)用，去了解什么樣的界面是能幫助他們與之互動(dòng)的，去預(yù)計(jì)人們?cè)谑褂脮r(shí)的行為并能夠成功地反饋給他們。這樣做了之后，界面中再出現(xiàn)的需要推理的地方以及延時(shí)反應(yīng)都是可以被容忍的，但是絕對(duì)不能出現(xiàn)讓用戶(hù)困惑的地方。明確的界面能夠給使用者進(jìn)一步操作的信心。一個(gè)應(yīng)用就算它有一百?gòu)堩?yè)面，但是每一頁(yè)都是明了明確的，它也遠(yuǎn)勝于只有一頁(yè)卻不知所云的應(yīng)用。2.界面是為了交互而存在

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

界面的存在是為了讓人和我們的世界產(chǎn)生互動(dòng)。它可以幫助人們厘清，明白，使用，展示相互之間的關(guān)系，他能夠把我們聚集在一起可以將我們隔開(kāi)，實(shí)現(xiàn)我們的價(jià)值并為我們服務(wù)。界面設(shè)計(jì)不是藝術(shù)設(shè)計(jì)。界面設(shè)計(jì)也不是用來(lái)標(biāo)榜設(shè)計(jì)師的個(gè)人。界面的功用和效果是可以被測(cè)量的。但是它們不是功利性的。優(yōu)秀的界面不但能夠讓我們做事有效率，還能夠激發(fā)、喚起和加強(qiáng)我們與這個(gè)世界的聯(lián)系。3.不惜一切代價(jià)吸引用戶(hù)注意

我們生活在一個(gè)簡(jiǎn)單被打攪的世界。我們很難在一個(gè)不被干擾的環(huán)境中靜下心來(lái)閱讀。用戶(hù)注意力是十分寶貴的。所以，不要在應(yīng)用的周邊丟一些簡(jiǎn)單令人分心的東西……

要把設(shè)計(jì)這個(gè)畫(huà)面最初的目的時(shí)刻放在首位。假使用戶(hù)正在閱讀，那先讓他們一心的讀完之后再?gòu)棾鰪V告(假使一定要放廣告的話(huà))。尊重用戶(hù)的注意力，不僅僅會(huì)讓用戶(hù)感到高興，你本身的設(shè)計(jì)也會(huì)收獲好結(jié)果。假使在界面設(shè)計(jì)中，用戶(hù)使用是首要目標(biāo)的話(huà)，那么尊重用戶(hù)的注意力是先決條件。要不惜一切代價(jià)保護(hù)它。

4.讓用戶(hù)掌控一切

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

人們會(huì)在自己能掌控的環(huán)境中感覺(jué)最舒心，最放松。設(shè)計(jì)草率的軟件應(yīng)用不但剝奪了這種舒適性，還會(huì)迫使人們面對(duì)毫無(wú)預(yù)期的互動(dòng)，困惑的流程和意外的結(jié)果。通過(guò)定期的梳理系統(tǒng)狀態(tài)，描述因果關(guān)系(假使你這個(gè)做了，就會(huì)被表達(dá)出來(lái))，并且在每一步操作都給出提醒，讓用戶(hù)感覺(jué)每一步操作都在他的掌控中。不要擔(dān)憂(yōu)說(shuō)，這不是“顯而易見(jiàn)〞的嗎?由于世界上從來(lái)沒(méi)有顯而易見(jiàn)的事情。5.直觀操作是最好的

好的界面是無(wú)意識(shí)的，就像我們?cè)趯?shí)際生活中直接操作的感覺(jué)一樣。這并不是那么簡(jiǎn)單實(shí)現(xiàn)的，并且隨著元素和資訊的不斷增加，這就變得更難，所以我們?cè)O(shè)計(jì)界面來(lái)幫助我們?nèi)ズ退鼈兓?dòng)。要想在畫(huà)面上添加一個(gè)不必要的東西是十分簡(jiǎn)單，例如，加個(gè)綺麗的按鈕，鑲邊，圖形，選項(xiàng)，偏好，窗口，附件和其它一些冗余的東西。以至于我們一頭扎進(jìn)處理界面元素細(xì)節(jié)的怪圈中而忽視了最重要的事情。取而代之的，你應(yīng)當(dāng)抓住直觀操作這個(gè)最初的目標(biāo)……界面設(shè)計(jì)要盡可能的簡(jiǎn)單，更多的可識(shí)別的慣用自然手勢(shì)。理想狀況下，界面會(huì)變得十分微弱，用戶(hù)在會(huì)有直觀操作的感覺(jué)。6.一個(gè)頁(yè)面一個(gè)主要操作

我們?cè)O(shè)計(jì)的每一個(gè)畫(huà)面，都應(yīng)給用戶(hù)提供有實(shí)際意義的單一操作。這一點(diǎn)，令界面更快上手、易于操作，假使有需要的話(huà)，新增或擴(kuò)展也更簡(jiǎn)易。假使一個(gè)畫(huà)面上有兩個(gè)或兩個(gè)以上的主要操作，瞬間就會(huì)讓用戶(hù)感到困惑。就像寫(xiě)文章要有單一的以及強(qiáng)有力的論點(diǎn)一樣，界面設(shè)計(jì)中的單個(gè)畫(huà)面，也都應(yīng)當(dāng)有單一且明確的操作，這是它存在的理由。7.讓次要操作在次要位置

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

畫(huà)面在包含一個(gè)主要?jiǎng)幼鞯耐瑫r(shí)，可以有多個(gè)次要?jiǎng)幼?，但盡量不要讓它們喧賓奪主!就像你寫(xiě)一篇文章的目的，是為了讓人可以閱讀可以了解，而不是為了人們能夠把它轉(zhuǎn)載在社交網(wǎng)絡(luò)上……讓次要得動(dòng)作放在次要的位置，削減它們的視覺(jué)沖擊力，或是在主要?jiǎng)幼魍瓿珊笤亠@示它們。

8.提供自然而然的下一步操作

很少有交互是有意被放在最終的，所以要為用戶(hù)精心設(shè)計(jì)交互的下一步操作。你要預(yù)期用戶(hù)下一步的交互是怎樣的，并且通過(guò)設(shè)計(jì)將其實(shí)現(xiàn)。就像我們的日常談話(huà)，要為深入交談開(kāi)一個(gè)好頭。當(dāng)用戶(hù)已經(jīng)完成要做的操作后，別讓它們不知所措的停留在那……提供自然而然的下一步，幫助他們完成操作。

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

9.界面外觀遵循用戶(hù)行為

人總是對(duì)符合期望的行為最感舒適。當(dāng)某人或某件事的行為始終依照我們所期望的那樣去進(jìn)行時(shí)，我們會(huì)感覺(jué)到和他們之間的關(guān)系不錯(cuò)。因此，設(shè)計(jì)出來(lái)的元素，看起來(lái)，應(yīng)當(dāng)像它們本身特征一樣。在具體操作中，這意味著，用戶(hù)只要看到這個(gè)界面元素，就應(yīng)當(dāng)能猜測(cè)出這個(gè)元素是做什么的。假使看起來(lái)是個(gè)按鈕，它就應(yīng)當(dāng)有按鈕的功能，不要在基本的交互問(wèn)題上耍小聰明……把你的創(chuàng)造力留到更高層次的需求上吧。10.前后一致的重要性

遵循上一規(guī)則，畫(huà)面中，視覺(jué)元素的外觀不應(yīng)當(dāng)是一樣的，除非他們的功能相近。假使是功能一致或相近的元素，那么它們外觀就應(yīng)當(dāng)是類(lèi)似的，反之，假使元素各自的功能不同，那么它們的外觀也應(yīng)當(dāng)不同。為了保持一致性，新手設(shè)計(jì)師尋常在會(huì)把一致的視覺(jué)處理(重用代碼)方式用在，應(yīng)當(dāng)用不同的視覺(jué)處理方式的元素上。11.猛烈的視覺(jué)層次會(huì)讓效果更好

猛烈的視覺(jué)層次會(huì)讓畫(huà)面有明了的瀏覽次序。也就是說(shuō)，當(dāng)用戶(hù)每次都用一致的順序?yàn)g覽同樣的東西，微小的視覺(jué)層次令使用者不知道哪里才是需要注意的重點(diǎn)，最終只會(huì)讓用戶(hù)感到困惑和混亂。在不斷變化的設(shè)計(jì)環(huán)境中，保持猛烈的視覺(jué)層次是很困難的，由于所有元素視覺(jué)上的重量是相對(duì)的：當(dāng)所有文字都是粗體，那就沒(méi)有所謂的\粗體\了。假使要在畫(huà)面中添加一個(gè)視覺(jué)猛烈的元素時(shí)，設(shè)計(jì)者應(yīng)當(dāng)要重新調(diào)整頁(yè)面上所有元素的重量分派，來(lái)達(dá)到猛烈視覺(jué)層次的效果。大多數(shù)人都不會(huì)注意到視覺(jué)重量這一點(diǎn)，但它其實(shí)是加強(qiáng)(弱化)設(shè)計(jì)的最簡(jiǎn)單的方法。12.巧妙的布局減輕用戶(hù)認(rèn)知負(fù)擔(dān)

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

正如約翰前田(JohnMaeda)在他《Simplicity》書(shū)中所說(shuō)的，恰當(dāng)?shù)鼐幣女?huà)面上的元素能夠以少見(jiàn)多，幫助他人更加快速簡(jiǎn)單地理解你設(shè)計(jì)的界面，由于你已經(jīng)用你的設(shè)計(jì)明白的說(shuō)明白她們彼此之間的關(guān)系。用方位和方向上的編排可以自然地將一致的元素聯(lián)系在一起。通過(guò)對(duì)內(nèi)容的巧妙編排，可以減輕用戶(hù)的認(rèn)知負(fù)擔(dān)，他們不再需要花時(shí)間去思考元素之間的關(guān)聯(lián)，由于你已經(jīng)做好了。不要迫使用戶(hù)去思考……用你的設(shè)計(jì)直接浮現(xiàn)給他們看。13.重點(diǎn)不要總是用顏色來(lái)強(qiáng)調(diào)

物體的色調(diào)會(huì)隨光線(xiàn)改變而改變。艷陽(yáng)高照下與夕陽(yáng)西下時(shí)，同一棵樹(shù)，也會(huì)浮現(xiàn)不同的景象。在自然世界中，色調(diào)很簡(jiǎn)單受環(huán)境影響而改變，所以在設(shè)計(jì)時(shí)，色調(diào)不應(yīng)當(dāng)占很大的比重。作為輔助，我們可以用高亮的顏色，吸引注意力，但這不是區(qū)別這些的唯一方法。在長(zhǎng)篇閱讀或是長(zhǎng)時(shí)間對(duì)著電腦屏幕的狀況下，可以使用溫柔的背景，降低亮度，當(dāng)然也可用活潑亮麗的色調(diào)當(dāng)背景，但是要確保適合你的讀者。14.逐步說(shuō)明

只在畫(huà)面中顯示必要的信息。假使用戶(hù)需要作出決定，只要浮現(xiàn)足夠的信息供其選擇，然后他們會(huì)到下一頁(yè)去尋覓更多的細(xì)節(jié)。避免一次浮現(xiàn)或解釋全部的信息，假使可以的話(huà)，將選擇放在后面的畫(huà)面展示。這會(huì)使你的界面交互更加明了。15.內(nèi)置幫助

在理想的界面設(shè)計(jì)中，「幫助」選項(xiàng)是沒(méi)有必要，由于界面操作是有引導(dǎo)性的?！笌椭沟南乱徊?，實(shí)際上是，內(nèi)嵌在上下文中的“幫助〞，只有在用戶(hù)確實(shí)需要的時(shí)候才顯示，平常應(yīng)當(dāng)是隱蔽的狀態(tài)。讓用戶(hù)自己去尋求幫助，。重要的是你要保證用戶(hù)可以順暢的使用你的界面。

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://./創(chuàng)想設(shè)計(jì)學(xué)院

16.重要時(shí)刻：初始狀態(tài)

第一次使用界面的體驗(yàn)是十分重要的，而這卻往往被設(shè)計(jì)師忽略。為了讓用戶(hù)更快的上手，最好在設(shè)計(jì)的時(shí)候保持初始狀態(tài)，也就是還沒(méi)開(kāi)始使用過(guò)的狀態(tài)。這個(gè)狀態(tài)不是一張空白的畫(huà)布……它應(yīng)當(dāng)要提供一個(gè)方向和指引，令用戶(hù)迅速進(jìn)入狀況。在初始狀態(tài)下的互動(dòng)過(guò)程中可能會(huì)存在一些摩擦，一旦用戶(hù)了解了規(guī)則，那將會(huì)有很高的機(jī)遇獲得成功。17.好的設(shè)計(jì)是隱形的

好的設(shè)計(jì)有一個(gè)奇怪的特性，它尋常是會(huì)被用戶(hù)忽略的。其中的一個(gè)原因是，一這個(gè)設(shè)計(jì)十分的成功，以至于用戶(hù)完全專(zhuān)注在他想要達(dá)到的目標(biāo)，而不是這個(gè)界面……當(dāng)用戶(hù)順利的完成目的，他們會(huì)感到很滿(mǎn)意，并不需要反映任何問(wèn)題。作為一名設(shè)計(jì)師，這樣會(huì)很困難……由于我們很少收到正面的回應(yīng)，我們很少知道哪些設(shè)計(jì)是好的。但是優(yōu)秀的設(shè)計(jì)師是滿(mǎn)足于設(shè)計(jì)出好用的界面……并且他們知道滿(mǎn)意的使用者尋常是默然的。18.從其他設(shè)計(jì)領(lǐng)域下手

視覺(jué)，平面設(shè)計(jì)，排版，文案，信息架構(gòu)和視覺(jué)設(shè)計(jì)……所有這些學(xué)科都是界面設(shè)計(jì)的一部分。他們都是可以被涉獵和研究的。不要企圖跟他們劃分界限，或看不起其他的領(lǐng)域：從學(xué)到學(xué)到好多知識(shí)可以幫助你的工作推動(dòng)你成長(zhǎng)，還可以從看似無(wú)關(guān)的學(xué)科學(xué)起，接觸你不熟悉的領(lǐng)域……我們能從出版、編程、書(shū)本裝訂、滑板、消防，空手道中學(xué)到哪些知識(shí)呢?19.界面的存在是為了被使用

在大多數(shù)設(shè)計(jì)領(lǐng)域，有用戶(hù)使用就是界面設(shè)計(jì)的成功。就像是一個(gè)漂亮椅子，雖然漂亮，但坐起