@正兒八經(jīng)的盧小盹兒 ：交互設(shè)計(jì)初體驗(yàn)系列是我在從事交互設(shè)計(jì)半年多的時(shí)間里在工作中和自我學(xué)習(xí)中積累的一些關(guān)于它的思考和經(jīng)驗(yàn)，也是對(duì)自己今年工作上的獲得的成長(zhǎng)和收獲的一個(gè)小結(jié)。適合初級(jí)的交互設(shè)計(jì)師和對(duì)交互設(shè)計(jì)感興趣的同學(xué)閱讀，很多欠缺的地方希望能和大家多交流。

交互設(shè)計(jì)師這個(gè)職業(yè)似乎是這幾年才開(kāi)始在中國(guó)的一些公司慢慢出現(xiàn)，正處在一個(gè)發(fā)展的階段。之前也很少聽(tīng)到有關(guān)于這個(gè)職業(yè)的介紹和培訓(xùn)。而這兩年隨著“用戶體驗(yàn)”越來(lái)越多的被運(yùn)用到產(chǎn)品的設(shè)計(jì)和商業(yè)的發(fā)展中，交互設(shè)計(jì)也在被更多的公司和企業(yè)所重視，雖然依然有很多的老板依然分不清UI和UE的差別，依然有很多公司里，交互和產(chǎn)品經(jīng)理是同一個(gè)人，交互和視覺(jué)也是同一個(gè)人。

在中國(guó)，設(shè)有交互設(shè)計(jì)這個(gè)專業(yè)的大學(xué)目前也只有兩個(gè)學(xué)校：江南大學(xué)和香港理工大學(xué)。而我作為一個(gè)插畫(huà)設(shè)計(jì)專業(yè)出身的交互新人，在畢業(yè)之后沒(méi)有去做美工也沒(méi)有去當(dāng)插畫(huà)師，而是順應(yīng)著自己的興趣和一點(diǎn)點(diǎn)的幸運(yùn)進(jìn)入到這個(gè)行業(yè)，如今我已經(jīng)是個(gè)半歲多的交互設(shè)計(jì)師，雖然沒(méi)有在一個(gè)大的公司參與更多有挑戰(zhàn)的項(xiàng)目，但是依然在這半年里在自己的工作和實(shí)踐中積累了一些經(jīng)驗(yàn)和心得體會(huì)。之所以不知天高地厚的在這里和大家分享自己的交互初體驗(yàn)，并不是因?yàn)橛卸嗝磁５拈啔v和多么成功的項(xiàng)目。從畢業(yè)時(shí)的迷茫徘徊到現(xiàn)在篤定自信的堅(jiān)持選擇交互設(shè)計(jì)這個(gè)職業(yè)作為我未來(lái)職業(yè)生涯的開(kāi)端，一路的抉擇和思考，不斷的突破和打破自己，每一個(gè)挑戰(zhàn)和成長(zhǎng)，感悟和堅(jiān)定都使我擁有一份勇氣和責(zé)任在這里和大家一同分享一同成長(zhǎng)，希望能給初入交互設(shè)計(jì)行業(yè)的新人或者有興趣加入到這個(gè)行業(yè)的新人一點(diǎn)建議和啟發(fā)，也是對(duì)自己從事交互設(shè)計(jì)行業(yè)以來(lái)的一點(diǎn)總結(jié)吧，歡迎大家拍磚吐槽，和我交流。

交互設(shè)計(jì)師是做什么的？

關(guān)于交互設(shè)計(jì)師的解釋，引用在《破繭成蝶》中作者向他的朋友介紹自己職業(yè)的時(shí)候的一段話：“我是一名建筑設(shè)計(jì)師，不過(guò)我不設(shè)計(jì)房子，我設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品，比如產(chǎn)品的結(jié)構(gòu)、信息層級(jí)、使用流程等?！边@樣說(shuō)，可能對(duì)于大多數(shù)不曾接觸過(guò)這個(gè)行業(yè)的人還是有些難以理解，那我就先以大多數(shù)人比較了解的視覺(jué)設(shè)計(jì)師作為對(duì)比來(lái)講一下它和交互設(shè)計(jì)師的區(qū)別，再通過(guò)幾個(gè)例子的對(duì)比來(lái)為你解答這個(gè)問(wèn)題。

在開(kāi)始先了解一下GUI（視覺(jué)設(shè)計(jì)師）和UE（交互設(shè)計(jì)師）之間的區(qū)別。作為一個(gè)初入交互設(shè)計(jì)行業(yè)的人來(lái)說(shuō)在這上面多少會(huì)對(duì)有一些困惑，我也曾掙扎過(guò)，在想是放棄做交互繼續(xù)做視覺(jué)還是繼續(xù)堅(jiān)持最初的選擇。原因在于，第一：在工作中，交互設(shè)計(jì)師的產(chǎn)物一般都是線框圖，流程圖，信息構(gòu)架，交互文檔等可視性沒(méi)那么強(qiáng)的產(chǎn)物，大部分的時(shí)間是用在調(diào)研，和小組成員腦暴、思考分析、畫(huà)圖。比如這樣

但是視覺(jué)設(shè)計(jì)師的工作似乎看起來(lái)就更有意思一些，它所設(shè)計(jì)出的結(jié)果似乎每個(gè)人都能一定的發(fā)言權(quán)，并且都可以根據(jù)自己的主觀感受做出評(píng)價(jià)，比如下面這幾張海報(bào)：

是不是很賞心悅目呢，但是欣賞完之后，除了贊嘆設(shè)計(jì)師的別具匠心和大開(kāi)的腦洞，但它們似乎并不能為你解決什么問(wèn)題。

那么究竟視覺(jué)設(shè)計(jì)和交互設(shè)計(jì)在內(nèi)容和關(guān)注點(diǎn)上有哪些不同呢？

?體驗(yàn)的時(shí)代的交互設(shè)計(jì)

上周末去參加了TEDxcaohejing名為“體驗(yàn)者”的交流大會(huì)，到場(chǎng)的五位嘉賓分別從他們的各自的領(lǐng)域向我們介紹在他們工作的過(guò)程中如何將“體驗(yàn)”二字貫徹到實(shí)際的項(xiàng)目中去，從而得到用戶口碑和商業(yè)盈利上的提升。用戶的主導(dǎo)權(quán)越來(lái)越重，決定用戶二次消費(fèi)的很大一部分原因就是在于第一次使用時(shí)的用戶體驗(yàn)好壞與否。不得不說(shuō)，現(xiàn)在已然是一個(gè)“體驗(yàn)的時(shí)代”，那么交互設(shè)計(jì)在這個(gè)體驗(yàn)的時(shí)代究竟在體現(xiàn)怎樣的價(jià)值，在扮演著什么樣的角色呢？

在過(guò)去，人們獲取信息的方式主要依靠電視新聞、廣播和報(bào)紙來(lái)獲取信息，這是信息in the past的時(shí)代；而現(xiàn)在，web2.0時(shí)代的到來(lái)，智能手機(jī)的普及4G網(wǎng)絡(luò)的覆蓋，讓越來(lái)越多的人感受到移動(dòng)端網(wǎng)帶給我們的便捷和獲取信息的高效，任何新聞都不再是單一渠道發(fā)布，我們獲取信息的方式越來(lái)越多，我們接受新鮮事物的速度也越來(lái)越快，越來(lái)越多新的商業(yè)模式開(kāi)始衍生，越來(lái)越多的常態(tài)用戶被改造，我們想知道的可以立馬知道，我們想買(mǎi)的東西也能在互聯(lián)網(wǎng)上立馬找到，所有的有形的無(wú)形的事物都被集中在一塊塊的電子屏幕后面被我們?yōu)g覽，而我們獲取這些信息最常用的途徑就是手機(jī)，移動(dòng)端開(kāi)始成為整合服務(wù)的入口，成為連接人和服務(wù)的最佳入口，現(xiàn)在是一個(gè)信息in the now的時(shí)代。那么在這樣一個(gè)信息快速流通，人們?cè)絹?lái)越焦慮，越來(lái)越?jīng)]耐心的時(shí)代，不再會(huì)有人心甘情愿盯著一個(gè)沒(méi)有提示并且勻速加載的進(jìn)度條一等等幾個(gè)小時(shí)，比如這樣

也沒(méi)有人會(huì)對(duì)一個(gè)不知道到底要表達(dá)什么，操作后會(huì)發(fā)生什么的頁(yè)面進(jìn)行操作，比如這樣

還有讓選擇恐懼癥的你不禁菊花一緊的設(shè)計(jì)，這個(gè)應(yīng)該很多人都眼熟的

這些設(shè)計(jì)已經(jīng)足以使本寶寶的心肌梗賽了，何談?dòng)脩趔w驗(yàn)?zāi)?？那么好的交互設(shè)計(jì)究竟可以做些什么呢？如何才能避免這些令人心塞的設(shè)計(jì)以提高用戶的體驗(yàn)？

交互設(shè)計(jì)似乎經(jīng)常會(huì)和用戶體驗(yàn)一起被提起,那么用戶體驗(yàn)又是什么呢？很多人會(huì)用一些晦澀難懂的專業(yè)詞匯來(lái)解釋，其實(shí)一句話就是：“你在使用產(chǎn)品時(shí)的主觀感受?！倍玫慕换ピO(shè)計(jì)自然就是可以提升用戶設(shè)計(jì)體驗(yàn)而做的設(shè)計(jì)了，在這里分享一個(gè)視頻，用三分鐘告訴你什么是用戶體驗(yàn)，然后我們?cè)俳又慕换ピO(shè)計(jì)到底在做些什么。鏈接在此?http://meia.me/course/168058

然后再放出幾個(gè)最常見(jiàn)的例子來(lái)看看好的交互設(shè)計(jì)會(huì)如何做。

以上是截取的某寶web端上的單品購(gòu)買(mǎi)頁(yè)面，如果今年雙十一天貓960多億的交易額也有你貢獻(xiàn)的一份，先憋急著喊剁手，先來(lái)思考一下馬大叔家的設(shè)計(jì)師們都做了些什么，為什么購(gòu)物車的按鈕會(huì)一直懸浮在頂部，為什么花費(fèi)大量的空間去提升用戶的信任度，為什么購(gòu)物車和加入收藏的按鈕顏色不一樣？那些你曾不注意過(guò)小細(xì)節(jié)往往就是引領(lǐng)著你走向剁手者聯(lián)盟的關(guān)鍵啊親！！這些都是交互設(shè)計(jì)需要思考的問(wèn)題。

上面是微信的公共平臺(tái)的注冊(cè)頁(yè)面的反饋提醒，每操作到下一步，它就會(huì)對(duì)于上面的錯(cuò)誤輸入給出及時(shí)的反饋并給出解釋，這讓我覺(jué)得很容易就知道自己哪里做錯(cuò)了并且知道如何修正。

以上的例子對(duì)比，應(yīng)該能讓你大概知道如何區(qū)分什么是好的交互設(shè)計(jì)什么是不好的交互設(shè)計(jì)了。而一個(gè)好的交互設(shè)計(jì)師，是能夠幫助用戶高效愉悅的完成產(chǎn)品最初所設(shè)想的任務(wù)而不受任何阻礙和打擊，使你的產(chǎn)品設(shè)計(jì)更加符合用戶的心智模型。如果你是做電商，你就需要知道你面對(duì)的用戶是哪幾種類型的人，都有什么樣的購(gòu)物習(xí)慣，他們一般在什么情景下最容易做出購(gòu)買(mǎi)決策，什么情景下最容易放棄。如何引導(dǎo)他們做出決策，如何讓他們對(duì)無(wú)形的商品產(chǎn)生信任并為之付出消費(fèi)，這些看似和交互設(shè)計(jì)沒(méi)什么太大的聯(lián)系的，往往都和交互設(shè)計(jì)師的工作密不可分。

第一期的分享總結(jié)就到這里啦，下一章將和大家聊聊交互職業(yè)生涯的不同階段所面對(duì)的難題以及交互設(shè)計(jì)師需掌握的幾個(gè)能力和快速成長(zhǎng)的方法。雖然能力有限寫(xiě)的不夠好，但是希望能或多或少給你們帶來(lái)一些小小的啟發(fā)和幫助。

有問(wèn)題可以加作者私人微信：mollylulu263

歡迎關(guān)注作者集創(chuàng)人喵卡的微信公眾號(hào)喲：

【為了這8個(gè)指南也得存書(shū)簽！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開(kāi)發(fā)：《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開(kāi)發(fā)？》
5. 摳圖技巧：《從菜鳥(niǎo)到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門(mén)！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

作者：@正兒八經(jīng)的盧小盹兒

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量107萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com