UI知識(shí)，新手如何自學(xué)交互設(shè)計(jì)

經(jīng)常有人問(wèn)我新手如何自學(xué)交互設(shè)計(jì)，我之前也錄過(guò)一個(gè)視頻給大家，沒(méi)想到放到網(wǎng)上后點(diǎn)擊率很高，看來(lái)對(duì)新人是的確有幫助的。所以今天再次針對(duì)這個(gè)問(wèn)題做闡述，修正了第一版的一些內(nèi)容，也更具有針對(duì)性。

以上七點(diǎn)是我歸納的大家在學(xué)習(xí)和工作中經(jīng)常感到困惑的問(wèn)題，下面就逐一解答。

一、令人眼花繚亂的專業(yè)術(shù)語(yǔ)

專業(yè)術(shù)語(yǔ)這個(gè)問(wèn)題的確令人頭疼，來(lái)看看下面的對(duì)應(yīng)關(guān)系：

在這四對(duì)關(guān)系中，GUI對(duì)應(yīng)界面視覺(jué)（畫icon，畫視覺(jué)效果）、PM對(duì)應(yīng)產(chǎn)品經(jīng)理是比較準(zhǔn)確的，但是UI這個(gè)詞相對(duì)來(lái)說(shuō)就比較混亂了。有人認(rèn)為UI是視覺(jué)設(shè)計(jì)，有人認(rèn)為UI是交互設(shè)計(jì)，這是有一定的歷史原因的。在很多的大公司里，我指的是諸如騰訊、阿里、百度、谷歌這樣的巨頭，它們的UI分工是很明確的，指的就是交互設(shè)計(jì)，交互設(shè)計(jì)師的主要任務(wù)就是發(fā)掘需求以及根據(jù)需求來(lái)進(jìn)行構(gòu)架。但是在一些小公司里是沒(méi)有專門的交互設(shè)計(jì)的崗位的，UI設(shè)計(jì)師通常既要做交互也要做視覺(jué)，這就造成了UI的指向不是很明確。所以有時(shí)候很多同學(xué)找我說(shuō)要學(xué)UI，我其實(shí)不太清楚他們到底是想學(xué)視覺(jué)還是交互的。

UE這個(gè)詞常見于一些大公司，它其實(shí)只是為了跟UI有區(qū)分，指的真的就是交互設(shè)計(jì)師。但是UE在做交互的同時(shí)也多參與一些用戶研究的內(nèi)容，這樣的崗位一般只有規(guī)模比較大的公司才設(shè)置。在很多公司里，發(fā)展到后期你可能既是交互設(shè)計(jì)師也是產(chǎn)品經(jīng)理，因?yàn)榻换ピO(shè)計(jì)師和產(chǎn)品經(jīng)理在前期的工作任務(wù)中，特別是對(duì)需求的把控上，有很多是重合的。這就是四個(gè)名詞所代表的意思了。

二、交互和視覺(jué)如何分工

下面我們?cè)賮?lái)看看視覺(jué)設(shè)計(jì)師和交互設(shè)計(jì)師工作職責(zé)的差異，下圖形象的展示了兩者不同的任務(wù)：

視覺(jué)設(shè)計(jì)主要包括Logo、界面元素、圖標(biāo)（icon）、色彩與字體、形狀與尺寸以及視覺(jué)效果設(shè)計(jì)，它的關(guān)注點(diǎn)是“界面”，把界面更好地呈現(xiàn)出來(lái)。雖然我在視覺(jué)設(shè)計(jì)下方標(biāo)注了“關(guān)注美麗”，但這只是區(qū)別于交互設(shè)計(jì)來(lái)說(shuō)的，光是“美麗”是不夠的，還要注意信息的可讀性和易讀性。視覺(jué)設(shè)計(jì)與平面設(shè)計(jì)不同，比如說(shuō)給一個(gè)房地產(chǎn)公司做宣傳海報(bào)，雇主要求海報(bào)視覺(jué)上打動(dòng)人，文案也要有亮點(diǎn)吸引人，這是平面設(shè)計(jì)；但是GUI的話，不管是做手機(jī)的APP還是WEB也好TV也好，要考慮到每一條信息都是要給用戶讀取的，這就要求視覺(jué)要有穩(wěn)定性，不能有些易讀有些難讀。

作為交互設(shè)計(jì)師更關(guān)注的是“邏輯”，在做設(shè)計(jì)的時(shí)候?qū)嶋H上是在建立一種體系。也就是說(shuō)在設(shè)計(jì)產(chǎn)品的時(shí)候要考慮出口入口、尋找需要元素、如何操作等等。所以說(shuō)交互設(shè)計(jì)師前期需要進(jìn)行需求分析，要更好地區(qū)理解和分析用戶的需求，然后要進(jìn)行信息構(gòu)架，畢竟需求最終要反映在信息構(gòu)架上面。什么是信息構(gòu)架呢？你看我們使用的手機(jī)，圖片有自己的固定位置，導(dǎo)航有自己固定的位置，文字、說(shuō)明也有固定的位置，這些東西就是由信息構(gòu)架來(lái)決定的。還要說(shuō)明的是文案，這也是屬于交互設(shè)計(jì)范疇的，因?yàn)榻缑嫘枰O(shè)計(jì)一些信息被用戶讀取。

所以說(shuō)基本上交互是帶著視覺(jué)前進(jìn)的，因?yàn)榻换ヒ獙?duì)最終的體驗(yàn)負(fù)責(zé)，而視覺(jué)也是體驗(yàn)的一部分。

三、工作的流程

下面來(lái)談?wù)劜煌娜藛T在具體工作中的分工：

先來(lái)看產(chǎn)品經(jīng)理，產(chǎn)品經(jīng)理要對(duì)項(xiàng)目的最終的結(jié)果負(fù)責(zé)。產(chǎn)品經(jīng)理一般來(lái)說(shuō)要為項(xiàng)目背黑鍋，比如老板要求三個(gè)月做出產(chǎn)品并且目標(biāo)用戶達(dá)到十萬(wàn)，那么這些任務(wù)就落到產(chǎn)品經(jīng)理的身上。

然后產(chǎn)品經(jīng)理對(duì)交互設(shè)計(jì)師的要求可能就是要保證產(chǎn)品的構(gòu)架清晰，有良好的體驗(yàn)。那么交互設(shè)計(jì)師要根據(jù)這些要求去挖掘其他的需求，然后根據(jù)用戶的反饋或者是迭代的一些東西做一個(gè)完美的信息構(gòu)架，把信息先設(shè)計(jì)出來(lái)。哪塊放導(dǎo)航，哪塊放圖片，哪塊放主體內(nèi)容，到底采用什么樣的結(jié)構(gòu)，這些都是要考慮的。

交互設(shè)計(jì)進(jìn)行到0.5版本時(shí)，即把產(chǎn)品的大體結(jié)構(gòu)設(shè)計(jì)出來(lái)后，這時(shí)視覺(jué)設(shè)計(jì)師和開發(fā)人員就可以加入進(jìn)來(lái)了。視覺(jué)設(shè)計(jì)師開始畫界面，根據(jù)信息把視覺(jué)呈現(xiàn)出來(lái)，比如重要的信息顏色可能更醒目一點(diǎn)，同時(shí)保證視覺(jué)流的平衡，總之為最終的“美麗”服務(wù)；開發(fā)人員的職責(zé)就是實(shí)現(xiàn)效果。進(jìn)入1.0版本，視覺(jué)效果做好后做高保真的迭代呈現(xiàn)給用戶或上級(jí)等。這時(shí)候測(cè)試人員也要跟進(jìn)了，做一些可用性測(cè)試、bug測(cè)試以及體驗(yàn)測(cè)試。

我講的比較籠統(tǒng)，只是把大致的流程梳理一下，讓大家看到各個(gè)角色是怎么分配的，因?yàn)榭紤]到新人講得太細(xì)的話也不一定能夠明白。

四、視覺(jué)類UI的自學(xué)

視覺(jué)類UI我們稱之為GUI，從軟件篇來(lái)看的話，有些培訓(xùn)機(jī)構(gòu)是有點(diǎn)坑人的（這里就不點(diǎn)名了），因?yàn)榇蟛糠止局灰肞S就可以了，即精確地把圖片畫出來(lái)然后切圖。交互設(shè)計(jì)師一般用PTT和AXUR來(lái)做原型，這三款軟件基本上就可以覆蓋你的職業(yè)生涯了。但是很多培訓(xùn)結(jié)構(gòu)卻讓學(xué)員花費(fèi)大量的金錢和時(shí)間學(xué)習(xí)軟件。剩下的一下軟件像AE/flash屬于錦上添花的技能：AE可以輸出高保真原型動(dòng)畫，便于展示你的想法；flash可以做高保真的交互動(dòng)畫。其實(shí)這些東西在企業(yè)里是有研發(fā)人員協(xié)助你完成的，所以會(huì)更好，不會(huì)也無(wú)大礙。IOS是有專門的軟件處理高保真原型的，可以現(xiàn)用現(xiàn)學(xué)，不太復(fù)雜。