如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里 

UI（User Interface）即用戶界面，人機(jī)交互設(shè)計，不僅指用戶和界面，還包括用戶和界面之間的關(guān)系。具體指人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計，好的UI不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現(xiàn)軟件的定位和特點。

UI有三個方面： 圖形用戶界面GUI(Graphic User Interface)

用戶研究(User Experience)

交互設(shè)計師（Interaction Designer）

UED是以用戶為中心的一種設(shè)計手段，以用戶需求為目標(biāo)而進(jìn)行的設(shè)計。UED團(tuán)隊包括：交互設(shè)計師(Interaction Designer)、視覺設(shè)計師(Vision Designer)、用戶體驗設(shè)計師(User Experience Design)、用戶界面設(shè)計師(User Interface Design)和前端開發(fā)工程師(Web Developer)等。設(shè)計過程注重以用戶為中心，用戶體驗的概念從開發(fā)的最早期就開始進(jìn)入整個流程，并貫穿始終。

UI設(shè)計原則：

1.清晰度是首要工作 要想你設(shè)計的界面有效并被人喜歡，首先必須讓用戶能夠識別出它?讓用戶知道怎么使用它?比如當(dāng)用戶使用時，能夠預(yù)料到發(fā)生什么，并成功的與它交互。

2.讓界面處在用戶的掌控之中 保證界面處在用戶的掌控之中，讓用戶自己決定系統(tǒng)狀態(tài)，稍加引導(dǎo)，我想你會達(dá)到你希望的目標(biāo)。

3.直接操作的感覺是最好的 理想情況下，界面設(shè)計要簡潔，讓用戶有一個直接操作的感覺。

4.每個屏幕需要一個主題 我們設(shè)計的每一個畫面都應(yīng)該有單一的主題，這樣不僅能夠讓用戶使用到它真正的價值，也使得容易上手用起來也更方便，在必要的時候更容易進(jìn)行修改，這也是界面存在的理由。

5.勿讓次要動作喧賓奪主 每個屏幕包含一個主要動作的同時，可以有多個次要動作，但盡量不要讓它們喧賓奪主!所以在設(shè)計界面的時候，盡量減弱次要動作的視覺沖擊力，或者在主要動作完成之后再顯示出來。

6.自然過渡 界面的交互都是環(huán)環(huán)相扣的，所以設(shè)計時，要深思熟慮地考慮到交互的下一步。考慮到下一步的交互是怎樣的，并且通過設(shè)計將其實現(xiàn)。當(dāng)用戶已經(jīng)完成該做的步驟，不要讓他們不知所措，給他們自然而然繼續(xù)下去的方法，以達(dá)成目標(biāo)。

7.外觀追隨功能 人總是對符合期望的行為最感舒適。當(dāng)其他人、動物、事物或者軟件的行為始終符合我們的期望時，我們會感到與之關(guān)系良好。這也是與人打交道的設(shè)計應(yīng)該做到的。在實踐中，這意味著用戶只要看一眼就可以知道接下來將會有什么的動作發(fā)生，如果它看上去像個按鈕，那么它就應(yīng)該具備按鈕的功能。

8.恰當(dāng)?shù)慕M織視覺元素，減輕用戶的認(rèn)知負(fù)荷 恰當(dāng)?shù)亟M織視覺元素能夠化繁為簡，幫助他人更加快速簡單地理解你的表達(dá)，比如內(nèi)容上的包含關(guān)系。用方位和方向上的組織可以自然地表現(xiàn)元素間的關(guān)系。他們不必再琢磨元素間的關(guān)系，因為你已經(jīng)表現(xiàn)出來了。不要迫使用戶做出分辨，而是設(shè)計者用組織表現(xiàn)出來。

9.色彩不是決定性的因素 設(shè)計的時候不要將色彩視為決定性因素。色彩可以醒目，作為引導(dǎo)，但不應(yīng)該是做區(qū)別的唯一元素。在長篇閱讀或者長時間面對電腦屏幕的情況下，除了要強調(diào)的內(nèi)容，應(yīng)采用相對暗淡或柔和的背景色。

10.內(nèi)嵌“幫助”選項 在理想的用戶界面，“幫助”選項是不必要出現(xiàn)的，因為用戶界面能夠有效地指引用戶學(xué)習(xí)。類似“下一步”實際上就是在上下文情境中內(nèi)嵌的“幫助”，并且只在用戶需要的時候出現(xiàn)在適當(dāng)?shù)奈恢?，其他時候都是隱藏的。

11.針對現(xiàn)有問題去完善界面 人們總是尋求各種方案去解決已經(jīng)存在的問題，而不是潛在的或者未來的問題。一旦你的用戶界面愈加完善，會有更多的用戶愿意使用你的界面。

12.優(yōu)秀的設(shè)計是無形的 優(yōu)秀的設(shè)計通常會被它的用戶所忽略。其中的一個原因是這個設(shè)計非常成功，以至于它的用戶專注于完成自己的目標(biāo)而忽略了自己面對的界面，用戶順利達(dá)成自己的目標(biāo)后，他們會很滿意地退出界面。但是作為設(shè)計師，這可能會有點不公平，當(dāng)我們的設(shè)計很優(yōu)秀的時候，我們不會受到很多阿諛奉承。當(dāng)然，優(yōu)秀的設(shè)計師不會去介意這些，因為他們心里明白，滿意的用戶往往都是沉默的。

13.多領(lǐng)域?qū)W習(xí)，借鑒其他學(xué)科 視覺、平面設(shè)計、排版、文案、信息結(jié)構(gòu)以及可視化，所有的這些知識領(lǐng)域都應(yīng)該是界面設(shè)計應(yīng)該包含的內(nèi)容，設(shè)計師對這些知識都應(yīng)該有所涉獵或者比較專長。設(shè)計師的眼光要長遠(yuǎn)，要能從看似無關(guān)的學(xué)科中學(xué)習(xí)，比如出版、編程、裝訂、滑板、消防甚至空手道。

14.界面的存在必須有所用途 在大多數(shù)設(shè)計領(lǐng)域，界面設(shè)計成功的要素就是有用戶使用它。打個比方，一把漂亮的椅子，雖然精美但坐著不舒服，那么用戶不會選擇使用它，它也就是失敗的設(shè)計。界面設(shè)計僅僅能夠滿足其設(shè)計者的虛榮心是不夠的：它必須要有用!

總結(jié)：始終以用戶體驗為中心。界面設(shè)計不是獨立的，是產(chǎn)品經(jīng)理、交互設(shè)計、開發(fā)共同討論的結(jié)果。

有這么一種說法：UI有別與平面設(shè)計，平面是UI的一小部分，平面設(shè)計一般是實物產(chǎn)品，采用的是cmyk色彩模式，設(shè)計上給人驚艷、驚奇的感覺。而UI是無形的產(chǎn)品，用于電腦、手機(jī)等，采用rgb模式，更多的是追求不被察覺，形式依從于內(nèi)容，清晰，依從，有層次。畢竟我們的互聯(lián)網(wǎng)產(chǎn)品不只是給你看的，是給人用的。

視覺、交互都是服務(wù)于用戶體驗，首先是好用、易用然后是美觀，解決問題是首要的，用戶同樣可以引導(dǎo)產(chǎn)品的方向。

小小的改動，只要符合用戶的想法，可大大提升點擊率。

當(dāng)你關(guān)注用戶時，他們會告訴你如何使產(chǎn)品更好。

草圖勾勒出你的想法，多溝通，勝過埋頭苦干。

工作流程：

1、產(chǎn)品定位和市場分析 市場定位、產(chǎn)品定義、用戶群體、運營方式等。

2、用戶研究和分析 分析用戶的使用使用特征、情感、習(xí)慣、心里需求等，提出用戶研究報告和可用性建議。

3、架構(gòu)設(shè)計 界面交互和流程設(shè)計，根據(jù)可用性分析結(jié)果制定交互方式、操作和跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素等。目錄體系的邏輯分類和詞語定義是用戶易于理解和操作的前提，

4、交互設(shè)計 目的是讓用戶簡單實用，手繪或者axcure制作原型圖，最好是可以跳轉(zhuǎn)的加上交互說明。

5、界面設(shè)計 在架構(gòu)設(shè)計和原型圖基礎(chǔ)上，參照用戶群的心理模型和任務(wù)達(dá)成進(jìn)行視覺設(shè)計。色調(diào)、界面布局、風(fēng)格、圖標(biāo)等是這個階段的關(guān)鍵。

6、界面輸出（切圖） 配合開發(fā)人員做好設(shè)計的實現(xiàn)。

7、完善工作 這個階段是很多部門共同參與的，包括可用性的循環(huán)研究，用戶體驗回饋、測試回饋，同時，UI也應(yīng)該把一些可行性建議進(jìn)行完善。

總結(jié)：UI設(shè)計師如何與團(tuán)隊各部門配合，并發(fā)揮應(yīng)有的作用非常重要，一名合格的UI設(shè)計師應(yīng)該貫穿整個流程，而非單純的圖形界面設(shè)計。

沒有什么工具是固定或必須采用的，只有當(dāng)你不為選擇什么工具而發(fā)愁的時候，你才能把精力集中在產(chǎn)品上。

團(tuán)隊協(xié)作能夠營造一個良好的氛圍，使產(chǎn)品的設(shè)計過程更加容易，敞開心扉，采納別人的創(chuàng)意過程，經(jīng)驗、直覺。

設(shè)計互聯(lián)網(wǎng)產(chǎn)品與制造實物產(chǎn)品之間存在很大差別，因為互聯(lián)網(wǎng)產(chǎn)品是基于軟件基礎(chǔ)的數(shù)字化產(chǎn)品，它是動態(tài)的、可變的，互聯(lián)網(wǎng)產(chǎn)品永遠(yuǎn)沒有終點。

第一階段：a、有一個想法

b、通過低保真分享這個想法

c、啟動開發(fā)，先有個功能模型嘗試使用

d、UI設(shè)計，美觀易用

第二階段：a、再次分享，思考從設(shè)計角度看起來真實

b、改進(jìn)

c、在功能和數(shù)據(jù)上調(diào)整和核驗

d、分享該產(chǎn)品

e、測試

網(wǎng)站目標(biāo)/用戶需求——功能/內(nèi)容需要——交互信息架構(gòu)——界面設(shè)計/導(dǎo)航設(shè)計——視覺設(shè)計/內(nèi)容優(yōu)化

之所以我們現(xiàn)在頁面感覺這么雜亂無章，就是沒有一個統(tǒng)一的規(guī)劃設(shè)計、視覺規(guī)范，都是零零散散的增加。

BS視覺設(shè)計

界面美觀、操作易用性、維護(hù)成本低是評價 B/S 系統(tǒng)的關(guān)鍵。

通用原則：

1、需求導(dǎo)向原則 界面設(shè)計要一切以滿足需求為第一準(zhǔn)則。

2、易用性原則 用戶不用查閱幫助，就知道界面的功能，進(jìn)行相關(guān)的操作。

3、合理性原則 盡量在界面的對角線及其左上角四分之一處放置用戶關(guān)心的操作和界面元素。

4、協(xié)調(diào)性原則 長寬接近黃金比例，布局合理，不易過于密集，或空曠，合理利用空間。

5、容錯性原則 對用戶的某些操作可能發(fā)生的嚴(yán)重后果有相應(yīng)的提醒或補救措施，或回到原來的正確狀態(tài)。

6、一致性原則 保持統(tǒng)一的界面操作方式、色彩、布局等方面的一致性，減少用戶的記憶負(fù)擔(dān)。

7、用最少的操作步驟實現(xiàn)目標(biāo)功能 鼠標(biāo)移動距離最短為原則，相同或相近的功能菜單放在同一位置。

界面用色規(guī)范：

1、設(shè)計要符合公司的經(jīng)營理念，VI規(guī)范，

2、對于用戶長時間使用的系統(tǒng)，切記 顏色過于花哨艷麗，致使用戶易產(chǎn)生視覺疲勞，妨礙視覺交互。

3、用戶界面風(fēng)格要保持一致，同一功能或者類型的字體要一致。

總結(jié)起來：

產(chǎn)品制作人，寫產(chǎn)品計劃書；

用戶體驗研究員，做調(diào)查分析；

信息架構(gòu)師，設(shè)計產(chǎn)品架構(gòu)；

交互設(shè)計師，做交互文檔（原型圖）

視覺設(shè)計師，頁面設(shè)覺設(shè)計；

前端工程師，前端開發(fā)。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)