都說(shuō)沒(méi)有規(guī)矩不成方圓，很多行業(yè)都需要講規(guī)矩。在設(shè)計(jì)行業(yè)也同樣如此。設(shè)計(jì)師在設(shè)計(jì)的時(shí)候，可以展開(kāi)想象，但是設(shè)計(jì)的內(nèi)容如果大家都不明白，那這樣的設(shè)計(jì)相信是失敗的。今天就讓faceui為大家介紹ui設(shè)計(jì)原則。

　　這五點(diǎn)必須做好的ui設(shè)計(jì)原則

　　1、清晰的傳達(dá)

　　大概沒(méi)有什么會(huì)比一個(gè)令用戶常常感到模棱兩可的界面設(shè)計(jì)更糟糕的了。比如，有一種返回設(shè)計(jì)，當(dāng)切換到該頁(yè)面時(shí)，返回按鈕是一個(gè)x，按通常的理解，我認(rèn)為是關(guān)閉的意思。但當(dāng)我需要返回上一頁(yè)時(shí)，可能我會(huì)習(xí)慣性地去左上角尋找那個(gè)向左的箭頭按鈕，然而留給我的只有那個(gè)關(guān)閉按鈕。此時(shí)我會(huì)猶豫，如果點(diǎn)擊關(guān)閉按鈕，會(huì)出現(xiàn)什么狀況？我不得不去揣測(cè)設(shè)計(jì)師的意圖，是不是應(yīng)該將當(dāng)前界面理解為從上一個(gè)頁(yè)面打開(kāi)的子視圖？類似Popup的意思，所以我關(guān)閉該視圖，即重新顯示原本的界面了？

　　我并不是說(shuō)返回設(shè)計(jì)不能這么做，而是作為UI設(shè)計(jì)師需要在這么做之前就去考慮到可能帶給用戶的顧慮，因此你需要更加全面的思考，令你的設(shè)計(jì)意圖能清晰無(wú)誤地傳達(dá)給用戶。

　　2、明確并傳遞信息的反饋

　　當(dāng)用戶操作了某個(gè)動(dòng)作之后，他需要知道自己做了什么，操作是否已經(jīng)執(zhí)行等等。最簡(jiǎn)單的例子，當(dāng)用戶發(fā)表評(píng)論時(shí)，點(diǎn)擊提交按鈕后，隨即按鈕狀態(tài)發(fā)生變化，比如顏色變深，則用戶此時(shí)知道已經(jīng)按下按鈕。松開(kāi)鼠標(biāo)鍵或手指后，按鈕樣式恢復(fù)，告訴用戶已經(jīng)松開(kāi)按鈕。注意，此時(shí)即是需要反饋設(shè)計(jì)的時(shí)候了，用戶需要知道該評(píng)論是否已經(jīng)提交，大多數(shù)的做法是Loading Button的樣式，按鈕本身變?yōu)椴豢牲c(diǎn)擊狀態(tài)，并在按鈕內(nèi)部或外部相關(guān)區(qū)域顯示Loading信息，表明評(píng)論正在提交中，此后則顯示提交是否成功的信息。

　　你可以試著將以上反饋設(shè)計(jì)去掉，會(huì)出現(xiàn)什么情況？用戶點(diǎn)擊后無(wú)任何反饋信息的情況下，會(huì)誤認(rèn)為操作沒(méi)有成功，從而反復(fù)嘗試，如果程序上沒(méi)有做任何條件限制，很可能造成重復(fù)提交。

ui設(shè)計(jì)原則（圖片來(lái)自網(wǎng)絡(luò)）

　　3、保持整體設(shè)計(jì)的一致性

　　設(shè)計(jì)原則要貫穿整個(gè)產(chǎn)品，這包括視覺(jué)、交互等不同方面。從交互層面上來(lái)說(shuō)，表現(xiàn)為頁(yè)面切換方式、導(dǎo)航設(shè)計(jì)的一致性。視覺(jué)上，是指色彩、字體、圖標(biāo)等元素的一致性。沒(méi)有任何一個(gè)用戶在使用一款產(chǎn)品時(shí)，發(fā)現(xiàn)所在新頁(yè)面的導(dǎo)航居然變了，或者整體風(fēng)格都變了，從而陷入懵逼狀態(tài)。

　　如果你不希望你的網(wǎng)站或App看起來(lái)像是幾個(gè)不同產(chǎn)品拼湊出來(lái)的話，那么你需要做一個(gè)風(fēng)格指南（style-guide)。在Behance, Dribble或中國(guó)的站酷上，很多作品展示中都會(huì)看到如下所示的風(fēng)格指南。

　　4、當(dāng)猶豫不決時(shí)，使用公認(rèn)設(shè)計(jì)方案

　　創(chuàng)新設(shè)計(jì)是好事，但請(qǐng)別反人類。我見(jiàn)過(guò)擼UI不久的朋友，滿懷創(chuàng)新激情地將一個(gè)本該保持統(tǒng)一的App菜單按鈕，在不同頁(yè)面換了4個(gè)地方，并幻想出非常炫的展開(kāi)效果，然后陷入到了一個(gè)問(wèn)題中猶豫不決：在下一個(gè)新的頁(yè)面中，菜單按鈕放在哪會(huì)比較合適？

　　這樣的創(chuàng)新就好比是一個(gè)圓形車輪明明已經(jīng)可以很好的工作，卻要?jiǎng)?chuàng)新搞成六角形車輪，從而又衍生出另一個(gè)大麻煩：“轉(zhuǎn)起來(lái)，總是咯噔咯噔的，怎么解決？”。

　　靠譜的創(chuàng)新是在已驗(yàn)證的公認(rèn)設(shè)計(jì)方案基礎(chǔ)上，作出更好的改進(jìn)，而不是制造新的麻煩。所以，在UI設(shè)計(jì)中，第四基本原則就是遵循公認(rèn)設(shè)計(jì)方案，符合用戶已養(yǎng)成的交互習(xí)慣。

　　示例如下，對(duì)比京東和中國(guó)亞馬遜兩個(gè)網(wǎng)站的搜索框位置，都在頂部區(qū)域的首要位置。這樣的設(shè)計(jì)一定是基于用戶搜索習(xí)慣的分析數(shù)據(jù)不斷改進(jìn)驗(yàn)證而來(lái)，所以你大可不必在設(shè)計(jì)上逆其道而為之，相反，進(jìn)一步增強(qiáng)才更重要。

　　5、增強(qiáng)視覺(jué)層次

　　視覺(jué)層次，是我曾最初做國(guó)外項(xiàng)目設(shè)計(jì)時(shí)，聽(tīng)到同行提及最多的詞。相反，如果他們形容一個(gè)作品非常單調(diào)時(shí)，會(huì)用Plain。

　　那么什么是視覺(jué)層次？首先要強(qiáng)調(diào)一下信息可視化的概念。UI始終需要向用戶傳遞信息，那么這些信息需要通過(guò)各種設(shè)計(jì)元素、文字段落、圖片等表達(dá)出來(lái)，而他們的布局方式則決定了所關(guān)聯(lián)的信息的重要層次，即通過(guò)視覺(jué)表達(dá)信息層次化。通過(guò)下面的示例，你可以很清楚看出哪種設(shè)計(jì)更能突出需要強(qiáng)調(diào)的信息。

　　所以你必須根據(jù)產(chǎn)品的業(yè)務(wù)需求，來(lái)確定信息本身的重要層級(jí)，要知道哪些信息是需要強(qiáng)調(diào)的，那些是輔助的。在具體設(shè)計(jì)當(dāng)中，可以使用字體和字體大小區(qū)分、色彩差、留白。具體設(shè)計(jì)技巧今后詳聊，這里只作簡(jiǎn)單概括。

ui設(shè)計(jì)原則（圖片來(lái)自網(wǎng)絡(luò)）

　　如何理解UI的概念

　　首先，UI是指人與信息交互的媒介，它是信息產(chǎn)品的功能載體和典型特征。UI作為系統(tǒng)的可用形式而存在，比如以視覺(jué)為主體的界面，強(qiáng)調(diào)的是視覺(jué)元素的組織和呈現(xiàn)。這是物理表現(xiàn)層的設(shè)計(jì)，每一款產(chǎn)品或者交互形式都以這種形態(tài)出現(xiàn)，包括圖形、圖標(biāo)(Icon)、色彩、文字設(shè)計(jì)等，用戶通過(guò)它們使用系統(tǒng)。在這一層面，UI可以理解為User Interface，即用戶界面，這是UI作為人機(jī)交互的基礎(chǔ)層面。

　　其次，UI是指信息的采集與反饋、輸入與輸出，這是基于界面而產(chǎn)生的人與產(chǎn)品之間的交互行為。在這一層面，UlbJ以理解為User Interaction，即用戶交互，這是界面產(chǎn)生和存在的意義所在。人與非物質(zhì)產(chǎn)品的交互更多依賴于程序的無(wú)形運(yùn)作來(lái)實(shí)現(xiàn)，這種與界面匹配的內(nèi)部運(yùn)行機(jī)制，需要通過(guò)界面對(duì)功能的隱喻和引導(dǎo)來(lái)完成。因此，UI不僅要有精美的視覺(jué)表現(xiàn)，也要有方便快捷的操作，以符合用戶的認(rèn)知和行為習(xí)慣。

　　最后，UI的高級(jí)形態(tài)可以理解為User Invisible。對(duì)用戶而言，在這一層面UI是“不可見(jiàn)的”，這并非是指視覺(jué)上的不可見(jiàn)，而是讓用戶在界面之下與系統(tǒng)自然地交互，沉浸在他們喜歡的內(nèi)容和操作中，忘記了界面的存在（糟糕的設(shè)計(jì)則迫使用戶注意界面，而非內(nèi)容）。這需要更多地研究用戶心理和用戶行為，從用戶的角度來(lái)進(jìn)行界面結(jié)構(gòu)、行為、視覺(jué)等層面的設(shè)計(jì)。大數(shù)據(jù)的背景下，在信息空間中，交互會(huì)變得更加自由、自然并無(wú)處不在，科學(xué)技術(shù)、設(shè)計(jì)理念及多通道界面的發(fā)展，直至普適計(jì)算界面的出現(xiàn)，用戶體驗(yàn)到的交互是下意識(shí)甚至是無(wú)意識(shí)的。

　　以上就是faceui為大家介紹的關(guān)于ui設(shè)計(jì)原則的相關(guān)內(nèi)容。ui設(shè)計(jì)不是隨意的，創(chuàng)意是可以天馬行空，但是設(shè)計(jì)是需要遵循一定的原則才能得到大眾的認(rèn)可和理解，你覺(jué)得呢？