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

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

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

用戶研究(User Experience)

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

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

UI設(shè)計(jì)原則：

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

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

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

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

5.勿讓次要?jiǎng)幼餍e奪主 每個(gè)屏幕包含一個(gè)主要?jiǎng)幼鞯耐瑫r(shí)，可以有多個(gè)次要?jiǎng)幼?，但盡量不要讓它們喧賓奪主!所以在設(shè)計(jì)界面的時(shí)候，盡量減弱次要?jiǎng)幼鞯囊曈X沖擊力，或者在主要?jiǎng)幼魍瓿芍笤亠@示出來。

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

7.外觀追隨功能 人總是對(duì)符合期望的行為最感舒適。當(dāng)其他人、動(dòng)物、事物或者軟件的行為始終符合我們的期望時(shí)，我們會(huì)感到與之關(guān)系良好。這也是與人打交道的設(shè)計(jì)應(yīng)該做到的。在實(shí)踐中，這意味著用戶只要看一眼就可以知道接下來將會(huì)有什么的動(dòng)作發(fā)生，如果它看上去像個(gè)按鈕，那么它就應(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)系，因?yàn)槟阋呀?jīng)表現(xiàn)出來了。不要迫使用戶做出分辨，而是設(shè)計(jì)者用組織表現(xiàn)出來。

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

10.內(nèi)嵌“幫助”選項(xiàng) 在理想的用戶界面，“幫助”選項(xiàng)是不必要出現(xiàn)的，因?yàn)橛脩艚缑婺軌蛴行У刂敢脩魧W(xué)習(xí)。類似“下一步”實(shí)際上就是在上下文情境中內(nèi)嵌的“幫助”，并且只在用戶需要的時(shí)候出現(xiàn)在適當(dāng)?shù)奈恢?，其他時(shí)候都是隱藏的。

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

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

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

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

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

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

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

小小的改動(dòng)，只要符合用戶的想法，可大大提升點(diǎn)擊率。

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

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

工作流程：

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

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

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

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

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

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

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

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

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

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

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

第一階段：a、有一個(gè)想法

b、通過低保真分享這個(gè)想法

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

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

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

b、改進(jìn)

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

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

e、測試

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

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

BS視覺設(shè)計(jì)

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

通用原則：

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

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

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

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

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

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

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

界面用色規(guī)范：

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

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

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

總結(jié)起來：

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

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

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

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

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

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

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