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

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：互聯(lián)網(wǎng)的一些事

　　如果你也是一枚剛?cè)腴T(mén)的交互設(shè)計(jì)師，是不是常有這樣一種感覺(jué)：不知從何下手，悶頭讀了一大堆書(shū)、學(xué)了一大堆軟件、畫(huà)了一大堆圖之后還是感覺(jué)心里不踏實(shí)，總害怕自己還缺點(diǎn)什么，恨不得要有本《交互設(shè)計(jì)學(xué)習(xí)大綱》就好了。出現(xiàn)這個(gè)問(wèn)題有兩個(gè)原因，一是交互設(shè)計(jì)師沒(méi)有可視性強(qiáng)的產(chǎn)物，交互設(shè)計(jì)師的產(chǎn)物一般是線(xiàn)框圖、流程圖、信息架構(gòu)圖、說(shuō)明文檔等等，但這些東西既不如視覺(jué)設(shè)計(jì)稿華麗精美，也不如程序代碼高貴冷艷，在外行人看來(lái)初級(jí)交互設(shè)計(jì)師和高級(jí)交互設(shè)計(jì)師畫(huà)的好像都差不多，輕易看不出你修煉到了幾層功力;第二個(gè)原因是交互設(shè)計(jì)是跨學(xué)科的專(zhuān)業(yè)，需要學(xué)的太多太雜，今天這位大神說(shuō)要學(xué)好PS，明天那位大神又說(shuō)要學(xué)程序，后天又有大神說(shuō)要學(xué)心理學(xué)，blablabla…信息量太大、太亂就會(huì)導(dǎo)致這種不知所措的局面。

　　今天，我制作了一份“交互設(shè)計(jì)師的知識(shí)架構(gòu)圖”，如下圖所示，該圖對(duì)交互設(shè)計(jì)師所需的知識(shí)儲(chǔ)備進(jìn)行了梳理，并按照交互設(shè)計(jì)的一般流程進(jìn)行排列，從需求分析開(kāi)始，到信息架構(gòu)、流程設(shè)計(jì)，到原型設(shè)計(jì)，再到可用性測(cè)試。以這樣的邏輯為大家介紹每一個(gè)環(huán)節(jié)涉及到的知識(shí)，化整為零，這樣，童鞋們也就可以采取逐個(gè)擊破的方法一步一個(gè)腳印學(xué)習(xí)交互設(shè)計(jì)，接下來(lái)我也會(huì)為大家推薦相應(yīng)環(huán)節(jié)涉及到的文章或者書(shū)籍，等你全部掌握之后，相信就不會(huì)再有不踏實(shí)的感覺(jué)了。

　　交互設(shè)計(jì)師的知識(shí)架構(gòu)圖

　　好，開(kāi)始為大家解讀這張圖。

　　需求分析

　　一般來(lái)說(shuō)，交互設(shè)計(jì)的第一個(gè)環(huán)節(jié)就是需求分析，需求分析主要指用戶(hù)研究、場(chǎng)景劇本、角色創(chuàng)建以及需求提煉。

　　首先，用戶(hù)研究的方法包括用戶(hù)訪(fǎng)談、調(diào)查問(wèn)卷、觀(guān)察、焦點(diǎn)訪(fǎng)談等。

　　其次，創(chuàng)建人物角色和場(chǎng)景劇本將有利于設(shè)計(jì)團(tuán)隊(duì)始終圍繞用戶(hù)目標(biāo)進(jìn)行設(shè)計(jì)，保證你的設(shè)計(jì)以用戶(hù)為中心，當(dāng)然，人物角色和場(chǎng)景劇本不是憑空想象的，而是基于充分的用戶(hù)研究提煉出來(lái)的。

　　以上兩塊知識(shí)在《About Face 3:交互設(shè)計(jì)精髓》這本書(shū)里都有詳細(xì)的介紹，大家一定要把這本書(shū)看完看懂。

　　最后，需求提煉這塊，我個(gè)人比較喜歡從“人、系統(tǒng)、環(huán)境”三個(gè)角度進(jìn)行分析提煉，但是需要注意的是，這三個(gè)角度可以看成是一個(gè)公式，要學(xué)會(huì)靈活運(yùn)用，針對(duì)不同的任務(wù)、對(duì)象，會(huì)用不同的名詞，比如針對(duì)一個(gè)實(shí)物產(chǎn)品，這個(gè)公式就變成“人、物、場(chǎng)景”，針對(duì)一個(gè)任務(wù)則是“人、目標(biāo)、場(chǎng)景”等等。需求提煉這塊大家可以參考《產(chǎn)品學(xué)堂：萬(wàn)能的產(chǎn)品策劃公式》,網(wǎng)上也有各種各樣的需求分析的方法，只要精通掌握一種就夠了，最重要的是要有自己的一套原則與流程，然后不斷地拿自己總結(jié)的方法去實(shí)踐。

　　信息架構(gòu)和流程設(shè)計(jì)

　　這一塊需要掌握的知識(shí)有：流程圖和信息架構(gòu)圖的繪制、心理學(xué)、邏輯學(xué)。

　　流程圖和信息架構(gòu)圖都是為了表達(dá)交互設(shè)計(jì)的整體邏輯路徑的工具，一張好的流程圖或信息架構(gòu)圖對(duì)于團(tuán)隊(duì)溝通和開(kāi)拓思維都是很有幫助的。網(wǎng)上有很多相關(guān)的學(xué)習(xí)資料，但網(wǎng)上的文章通常會(huì)不夠系統(tǒng)、嚴(yán)謹(jǐn)，所以我再給大家推薦兩本書(shū)：《溝通設(shè)計(jì)之道》、《交互設(shè)計(jì)指南》。

　　層次任務(wù)分析法是流程設(shè)計(jì)中的一個(gè)重要方法，簡(jiǎn)單來(lái)說(shuō)，層次任務(wù)分析就是將一個(gè)任務(wù)進(jìn)行結(jié)構(gòu)化的分解，將用戶(hù)完成任務(wù)的過(guò)程所需要的每一種情況和每一個(gè)動(dòng)作進(jìn)行細(xì)化整理。這樣分析的好處是你可以進(jìn)一步理解用戶(hù)是如何使用產(chǎn)品、如何與產(chǎn)品和環(huán)境進(jìn)行交互的，保證設(shè)計(jì)的邏輯嚴(yán)謹(jǐn)性，最終使你的交互流程更加和人性化。層次任務(wù)分析法可以從這篇文章里學(xué)習(xí)個(gè)大概：《層次任務(wù)分析》 不過(guò)我并不覺(jué)得這篇文章非常嚴(yán)謹(jǐn)詳細(xì)，將來(lái)有機(jī)會(huì)我可能會(huì)用一篇文章來(lái)單獨(dú)為大家介紹這個(gè)方法。

　　心理學(xué)和邏輯學(xué)可以說(shuō)是交互設(shè)計(jì)師最重要的內(nèi)功，看起來(lái)比較高大上，可能會(huì)無(wú)從下手，但千萬(wàn)不要逃避和盲目亂學(xué)，要進(jìn)行系統(tǒng)的、循循漸進(jìn)的學(xué)習(xí)。比如心理學(xué)你可以依次學(xué)習(xí)色彩心理學(xué)、設(shè)計(jì)心理學(xué)、認(rèn)知心理學(xué)、行為心理學(xué)，交互設(shè)計(jì)師是以人為中心的，琢磨人的認(rèn)知、記憶心理對(duì)于提高你的設(shè)計(jì)質(zhì)量至關(guān)重要，推薦的書(shū)籍有唐納德諾曼的《設(shè)計(jì)心理學(xué)》，埃森克的《認(rèn)知心理學(xué)》，此外，同學(xué)們還可以看一下我之前的一篇文章：《交互設(shè)計(jì)與心理學(xué)》;邏輯學(xué)似乎就更加虛幻了，甚至?xí)X(jué)得這貨就像智商一樣無(wú)力回天，其實(shí)不是，一個(gè)人的邏輯思維是通過(guò)后天鍛煉的，邏輯思維的提高可以參考知乎上大神的回答：知乎：如何提高邏輯思維能力?書(shū)籍的話(huà)，可以參考這里：提高邏輯思維能力，有哪些書(shū)或者資料可以推薦的么?

　　原型設(shè)計(jì)

　　原型設(shè)計(jì)是交互設(shè)計(jì)師最主要的工作之一，也是交互設(shè)計(jì)師的最佳練兵場(chǎng)，因此，需要在這一塊儲(chǔ)備大量的知識(shí)，比如交互范式、設(shè)計(jì)原則、平臺(tái)規(guī)范、排版和草圖繪畫(huà)。

　　交互范式指交互方式(參考下圖)、交互元素(比如操作、窗口、控件、菜單、對(duì)話(huà)框)等。這些都是基本功，很多同學(xué)自信學(xué)有所成了，但面試的時(shí)候一問(wèn)控件的種類(lèi)和區(qū)別就胡亂回答一通，這是沒(méi)有系統(tǒng)學(xué)習(xí)的后果。

　　設(shè)計(jì)原則，這里指的是交互設(shè)計(jì)原則。這個(gè)就多了，可以說(shuō)數(shù)不勝數(shù)，而且每個(gè)人都有不同的版本，如果你是初學(xué)者，沒(méi)有特別好的辦法，推薦你先把《About Face 3：交互設(shè)計(jì)精髓》吃透，還是那句話(huà)，網(wǎng)上的知識(shí)是碎片化的，一味地看大神寫(xiě)的千把個(gè)字的文章容易消耗你的耐心、增加你的記憶負(fù)荷，而且到頭來(lái)還是不夠全面，所以先把權(quán)威的書(shū)籍吃透再說(shuō)。

　　平臺(tái)規(guī)范。從終端上看，平臺(tái)分為PC、手機(jī)、平板電腦等，從系統(tǒng)上看又分為Windows,Mac,IOS,Windows Phone,Android等，每一個(gè)平臺(tái)都有相應(yīng)的設(shè)計(jì)規(guī)范，想做交互設(shè)計(jì)師就得先把他們掌握了，另外，這些規(guī)范通常都是英文，而中文的翻譯一般都比較難找，并且網(wǎng)友的翻譯有參差不齊的風(fēng)險(xiǎn)，所以親們一定要學(xué)好英語(yǔ)，這點(diǎn)也很重要!

　　排版和草圖繪畫(huà)。受過(guò)專(zhuān)業(yè)的排版訓(xùn)練的交互設(shè)計(jì)師會(huì)有很大的優(yōu)勢(shì)，因?yàn)榕虐娌粌H需要一定的審美感覺(jué)，也需要扎實(shí)的視覺(jué)理論基礎(chǔ)和邏輯思維甚至心理學(xué)理論，排版其實(shí)也是一種交互設(shè)計(jì)，是讀者與作品在視覺(jué)上的交互。另外草圖繪畫(huà)是一個(gè)加分項(xiàng)，畫(huà)的一手漂亮的草圖會(huì)讓團(tuán)隊(duì)溝通更加，不過(guò)，這里的草圖不是素描草圖，不是對(duì)某一個(gè)物品進(jìn)行精雕細(xì)琢，而是簡(jiǎn)筆畫(huà)。下圖是著名交互設(shè)計(jì)師比爾·維普蘭克畫(huà)的，他對(duì)圖形和手繪草圖有一種驚人的表現(xiàn)能力，他可以在談話(huà)的同時(shí)，隨時(shí)用手繪的方法勾勒出草圖來(lái)說(shuō)明其觀(guān)點(diǎn)。這是我在看《交互設(shè)計(jì)概論》時(shí)看到的，當(dāng)時(shí)我簡(jiǎn)直被迷暈了，這技能太牛了!于是我也去學(xué)簡(jiǎn)筆畫(huà)，不過(guò)學(xué)的斷斷續(xù)續(xù)，至今還是菜的一逼。

　　比爾·維普蘭克畫(huà)的草圖

　　可用性測(cè)試。這一塊推薦大家先把《可用性工程》這本書(shū)看完，不過(guò)這本書(shū)可能由于翻譯的原因，看起來(lái)會(huì)有一點(diǎn)吃力，大家可以先看網(wǎng)易UEDC的這篇文章了解一下:《簡(jiǎn)單快速的可用性測(cè)試》。

　　當(dāng)然，理論終究是不夠的，學(xué)習(xí)理論之后，要進(jìn)行大量的實(shí)踐來(lái)鞏固，再總結(jié)出自己的一套流程與方法。

　　視覺(jué)設(shè)計(jì)與程序設(shè)計(jì)

　　基礎(chǔ)加分項(xiàng)，既是加分項(xiàng)，也是基本功。不是說(shuō)必須學(xué)好視覺(jué)和代碼，但多少會(huì)一點(diǎn)對(duì)你有很大的好處，比如有利于與團(tuán)隊(duì)的其他人員溝通，有利于選擇更合理更現(xiàn)實(shí)的交互方案。我建議大家學(xué)一下PS、AI、Axure、PPT和AE等軟件，有時(shí)間的話(huà)再學(xué)一學(xué)C語(yǔ)音/Java，HTML+CSS+Javascript.

　　最后也是最重要的

　　這篇文章僅僅是在知識(shí)架構(gòu)上給大家做一個(gè)整理和歸納，雖然也推薦了不少適合新手入門(mén)的書(shū)籍和文章給大家，但僅僅看這些書(shū)籍和文章肯定是不夠的，還需要進(jìn)行大量的實(shí)踐和體驗(yàn)，交互設(shè)計(jì)不像學(xué)習(xí)一個(gè)軟件可以短期大幅度提高，更需要的是長(zhǎng)期積累，平時(shí)應(yīng)該經(jīng)常去看別人的優(yōu)秀設(shè)計(jì)，去體驗(yàn)各種app，網(wǎng)站，平臺(tái)，要積累大量的素材，要不斷地總結(jié)經(jīng)驗(yàn)，并且將經(jīng)驗(yàn)運(yùn)用于實(shí)戰(zhàn)中。若這篇文章能為你提供一丁點(diǎn)的幫助，我也十分欣慰。