UI設(shè)計(jì)師所接觸的方面有多廣

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

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

                        用戶(hù)研究(User Experience)

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

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

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

1.清晰度是首要工作  要想你設(shè)計(jì)的界面有效并被人喜歡，首先必須讓用戶(hù)能夠識(shí)別出它?讓用戶(hù)知道怎么使用它?比如當(dāng)用戶(hù)使用時(shí)，能夠預(yù)料到發(fā)生什么，并成功的與它交互。 
2.讓界面處在用戶(hù)的掌控之中  保證界面處在用戶(hù)的掌控之中，讓用戶(hù)自己決定系統(tǒng)狀態(tài)，稍加引導(dǎo)，我想你會(huì)達(dá)到你希望的目標(biāo)。
3.直接操作的感覺(jué)是最好的  理想情況下，界面設(shè)計(jì)要簡(jiǎn)潔，讓用戶(hù)有一個(gè)直接操作的感覺(jué)。
4.每個(gè)屏幕需要一個(gè)主題  我們?cè)O(shè)計(jì)的每一個(gè)畫(huà)面都應(yīng)該有單一的主題，這樣不僅能夠讓用戶(hù)使用到它真正的價(jià)值，也使得容易上手用起來(lái)也更方便，在必要的時(shí)候更容易進(jìn)行修改，這也是界面存在的理由。
5.勿讓次要?jiǎng)幼餍e奪主  每個(gè)屏幕包含一個(gè)主要?jiǎng)幼鞯耐瑫r(shí)，可以有多個(gè)次要?jiǎng)幼?，但盡量不要讓它們喧賓奪主!所以在設(shè)計(jì)界面的時(shí)候，盡量減弱次要?jiǎng)幼鞯囊曈X(jué)沖擊力，或者在主要?jiǎng)幼魍瓿芍笤亠@示出來(lái)。
6.自然過(guò)渡  界面的交互都是環(huán)環(huán)相扣的，所以設(shè)計(jì)時(shí)，要深思熟慮地考慮到交互的下一步?？紤]到下一步的交互是怎樣的，并且通過(guò)設(shè)計(jì)將其實(shí)現(xiàn)。當(dāng)用戶(hù)已經(jīng)完成該做的步驟，不要讓他們不知所措，給他們自然而然繼續(xù)下去的方法，以達(dá)成目標(biāo)。 
7.外觀追隨功能  人總是對(duì)符合期望的行為最感舒適。當(dāng)其他人、動(dòng)物、事物或者軟件的行為始終符合我們的期望時(shí)，我們會(huì)感到與之關(guān)系良好。這也是與人打交道的設(shè)計(jì)應(yīng)該做到的。在實(shí)踐中，這意味著用戶(hù)只要看一眼就可以知道接下來(lái)將會(huì)有什么的動(dòng)作發(fā)生，如果它看上去像個(gè)按鈕，那么它就應(yīng)該具備按鈕的功能。 
8.恰當(dāng)?shù)慕M織視覺(jué)元素，減輕用戶(hù)的認(rèn)知負(fù)荷  恰當(dāng)?shù)亟M織視覺(jué)元素能夠化繁為簡(jiǎn)，幫助他人更加快速簡(jiǎn)單地理解你的表達(dá)，比如內(nèi)容上的包含關(guān)系。用方位和方向上的組織可以自然地表現(xiàn)元素間的關(guān)系。他們不必再琢磨元素間的關(guān)系，因?yàn)槟阋呀?jīng)表現(xiàn)出來(lái)了。不要迫使用戶(hù)做出分辨，而是設(shè)計(jì)者用組織表現(xiàn)出來(lái)。 
9.色彩不是決定性的因素  設(shè)計(jì)的時(shí)候不要將色彩視為決定性因素。色彩可以醒目，作為引導(dǎo)，但不應(yīng)該是做區(qū)別的唯一元素。在長(zhǎng)篇閱讀或者長(zhǎng)時(shí)間面對(duì)電腦屏幕的情況下，除了要強(qiáng)調(diào)的內(nèi)容，應(yīng)采用相對(duì)暗淡或柔和的背景色。 
10.內(nèi)嵌“幫助”選項(xiàng)  在理想的用戶(hù)界面，“幫助”選項(xiàng)是不必要出現(xiàn)的，因?yàn)橛脩?hù)界面能夠有效地指引用戶(hù)學(xué)習(xí)。類(lèi)似“下一步”實(shí)際上就是在上下文情境中內(nèi)嵌的“幫助”，并且只在用戶(hù)需要的時(shí)候出現(xiàn)在適當(dāng)?shù)奈恢茫渌麜r(shí)候都是隱藏的。 
11.針對(duì)現(xiàn)有問(wèn)題去完善界面  人們總是尋求各種方案去解決已經(jīng)存在的問(wèn)題，而不是潛在的或者未來(lái)的問(wèn)題。一旦你的用戶(hù)界面愈加完善，會(huì)有更多的用戶(hù)愿意使用你的界面。 
12.優(yōu)秀的設(shè)計(jì)是無(wú)形的  優(yōu)秀的設(shè)計(jì)通常會(huì)被它的用戶(hù)所忽略。其中的一個(gè)原因是這個(gè)設(shè)計(jì)非常成功，以至于它的用戶(hù)專(zhuān)注于完成自己的目標(biāo)而忽略了自己面對(duì)的界面，用戶(hù)順利達(dá)成自己的目標(biāo)后，他們會(huì)很滿(mǎn)意地退出界面。但是作為設(shè)計(jì)師，這可能會(huì)有點(diǎn)不公平，當(dāng)我們的設(shè)計(jì)很優(yōu)秀的時(shí)候，我們不會(huì)受到很多阿諛?lè)畛?。?dāng)然，優(yōu)秀的設(shè)計(jì)師不會(huì)去介意這些，因?yàn)樗麄冃睦锩靼祝瑵M(mǎn)意的用戶(hù)往往都是沉默的。 
13.多領(lǐng)域?qū)W習(xí)，借鑒其他學(xué)科  視覺(jué)、平面設(shè)計(jì)、排版、文案、信息結(jié)構(gòu)以及可視化，所有的這些知識(shí)領(lǐng)域都應(yīng)該是界面設(shè)計(jì)應(yīng)該包含的內(nèi)容，設(shè)計(jì)師對(duì)這些知識(shí)都應(yīng)該有所涉獵或者比較專(zhuān)長(zhǎng)。設(shè)計(jì)師的眼光要長(zhǎng)遠(yuǎn)，要能從看似無(wú)關(guān)的學(xué)科中學(xué)習(xí)，比如出版、編程、裝訂、滑板、消防甚至空手道。
14.界面的存在必須有所用途  在大多數(shù)設(shè)計(jì)領(lǐng)域，界面設(shè)計(jì)成功的要素就是有用戶(hù)使用它。打個(gè)比方，一把漂亮的椅子，雖然精美但坐著不舒服，那么用戶(hù)不會(huì)選擇使用它，它也就是失敗的設(shè)計(jì)。界面設(shè)計(jì)僅僅能夠滿(mǎn)足其設(shè)計(jì)者的虛榮心是不夠的：它必須要有用! 

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

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

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

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

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

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

工作流程：

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

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

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

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

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

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

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

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

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

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

設(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)沒(méi)有終點(diǎn)。

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

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

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

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

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

      b、改進(jìn) 

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

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

     e、測(cè)試 
 

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

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

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

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

通用原則：

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

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

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

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

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

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

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

界面用色規(guī)范：

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

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

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

總結(jié)起來(lái)：

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

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

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

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

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

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