這是一次內(nèi)部分享，新部門(mén)的同學(xué)們希望我聊聊我過(guò)去從事的交互設(shè)計(jì)，做個(gè)了面對(duì)入門(mén)者等級(jí)的PPT，和各位簡(jiǎn)單聊了聊。發(fā)到微博上，也敦促自己對(duì)交互設(shè)計(jì)從業(yè)經(jīng)歷做個(gè)簡(jiǎn)單總結(jié)?！?lèi)似的文章，貌似自己在三年前也寫(xiě)過(guò)……

一. 什么是交互設(shè)計(jì)

要談什么是交互設(shè)計(jì)，先要了解這幾個(gè)概念。

網(wǎng)頁(yè)設(shè)計(jì)年代，大概是從2004年開(kāi)始熱起來(lái)了，等到我畢業(yè)的2006年，滿(mǎn)大街都已經(jīng)是電腦培訓(xùn)機(jī)構(gòu)，記得當(dāng)時(shí)北大青鳥(niǎo)的百日千才培訓(xùn)就在我每日下班必經(jīng)的十字路口。

網(wǎng)頁(yè)設(shè)計(jì)年代重視的是特效，說(shuō)白了就是特效背后的技術(shù)，君不見(jiàn)當(dāng)時(shí)的網(wǎng)頁(yè)是讓人看得眼花繚亂啊，這里bling bling閃閃的，漂浮框亂跳的。然后就是套各種網(wǎng)頁(yè)設(shè)計(jì)模版，做出很多復(fù)雜的類(lèi)似于右邊這種典型的政府網(wǎng)站出來(lái)。

美工時(shí)代：

網(wǎng)頁(yè)設(shè)計(jì)時(shí)代，大批的“美工”涌現(xiàn)。顯然人們有了更高的追求，光是bling bling的眼花繚亂的動(dòng)畫(huà)效果已經(jīng)看厭了，網(wǎng)頁(yè)也是需要裝飾美化的。雖然網(wǎng)頁(yè)設(shè)計(jì)論壇（www.68design.net)當(dāng)時(shí)很火，但是網(wǎng)頁(yè)設(shè)計(jì)師這個(gè)頭銜仍然是一廂情愿的叫法。大多數(shù)時(shí)候，仍然是老板和客戶(hù)嘴里的“美工”。

美工時(shí)代重視的是：視覺(jué)效果。并且，原來(lái)對(duì)網(wǎng)頁(yè)設(shè)計(jì)一竅不通的老板們紛紛成了資深的視覺(jué)鑒賞家。美工時(shí)代“美工”很痛苦——單純靠視覺(jué)效果去評(píng)價(jià)作品好壞，太主觀，太隨意。于是他們通常會(huì)做N個(gè)版本，反復(fù)修改，直至美工崩潰或者老板崩潰。

歷史邁入了偉大的UI年代。

大概是在2005年，我崇拜的網(wǎng)絡(luò)名人從擅長(zhǎng)鼠繪的小非變成了圖標(biāo)達(dá)人Rokey（時(shí)光倒流到2005年，我正在看這篇文章：靈感來(lái)源于生活－微軟亞洲工程院移動(dòng)設(shè)備組UI設(shè)計(jì)師張偉）。也自學(xué)了關(guān)于UI的若干知識(shí)，開(kāi)始迷戀起PS像素級(jí)的奇妙世界。

UI=User Interface. 已經(jīng)將User即用戶(hù)納入界面設(shè)計(jì)考慮的重要要素。但是對(duì)于精致、質(zhì)感的無(wú)極限的追求，依然會(huì)讓人顧此失彼，忘記了從用戶(hù)的視角去審視一個(gè)UI的作品。于是，經(jīng)常會(huì)看到雖然很精致，但是很難用的軟件界面。

用戶(hù)看到的部份，無(wú)可挑剔。但是實(shí)際上，使用的感受并不好。而感受部份，可以從幾個(gè)角度去闡釋?zhuān)?/p>

他們知道不知道這個(gè)是什么東西？他們感覺(jué)到迷惑嗎？

他們是否清楚能夠通過(guò)此物做什么？

是否清楚如何做到?

當(dāng)他們有興趣去嘗試時(shí)，他們知道如何開(kāi)始嗎？

當(dāng)他們開(kāi)始后，知道如何進(jìn)行下一步嗎？

當(dāng)不想要使用時(shí)，能夠快速明白如何退出嗎?

當(dāng)他們退出后，下次來(lái)用，是否需要重新去學(xué)習(xí)掌握如何操作？

每一步操作時(shí)，他們心理會(huì)感覺(jué)到愉悅還是枯燥乏味？

當(dāng)然，我們崇尚軟件操作過(guò)程中的效率，但是若用戶(hù)感覺(jué)到愉悅，也許就不會(huì)覺(jué)得效率太低，其實(shí)，效率是個(gè)相對(duì)的說(shuō)法。歸根結(jié)底，這就是用戶(hù)體驗(yàn)。

UED時(shí)代——用戶(hù)體驗(yàn)制勝

我們不缺技術(shù)，我們不缺另人震撼的視覺(jué)，這些雖然過(guò)去是我們孜孜追求的東西，如今已經(jīng)不足為奇。但是我們?nèi)庇脩?hù)來(lái)用，我們?nèi)庇脩?hù)持續(xù)來(lái)關(guān)注，我們?nèi)庇脩?hù)體驗(yàn)。用戶(hù)體驗(yàn)過(guò)去一直在產(chǎn)生影響，但是未能得到足夠的重視。

2007年，開(kāi)始關(guān)注www.ucdchina.com. UED是套方法論，UCD是指導(dǎo)思想——User-centered Design. 不再是BCD-Boss-Centered Design.老板說(shuō)了算，除非老板能夠代表目標(biāo)客戶(hù)。這和市場(chǎng)營(yíng)銷(xiāo)學(xué)發(fā)展的歷程有點(diǎn)像，從生產(chǎn)主導(dǎo)到市場(chǎng)主導(dǎo)。

以下是我在用戶(hù)體驗(yàn)設(shè)計(jì)？——是什么不是什么里用到的圖片。WEB2.0后，用戶(hù)的參與度越來(lái)越高，用戶(hù)從被動(dòng)的接受者變成了主筆，主編，攝影師，作家……他們是主角，使用中遇到問(wèn)題，當(dāng)然不可能靠網(wǎng)站的客服電話(huà)或幫助教程搞定，他們需要自助，所以，降低使用門(mén)檻，消除使用障礙，吸引他們重復(fù)使用，是每個(gè)網(wǎng)站致力的方向。

以下是在用戶(hù)體驗(yàn)設(shè)計(jì)答疑對(duì)話(huà)（半吊子和純外行）一文中的配圖。從廣義來(lái)講，一個(gè)網(wǎng)站的任何部門(mén)都是在為用戶(hù)體驗(yàn)服務(wù)，從戰(zhàn)略層的布局開(kāi)始，用戶(hù)體驗(yàn)已經(jīng)開(kāi)始。而狹義的用戶(hù)體驗(yàn)設(shè)計(jì)，也就是UED部門(mén)做的事情，大部分是圍繞到結(jié)構(gòu)、框架以及表面層。

UED部門(mén)的組織架構(gòu)基本如下，解決用戶(hù)易用（交互、文案），以及想用（視覺(jué)，交互）的問(wèn)題。而用戶(hù)研究是幫我們看清用戶(hù)特征、洞察及挖掘用戶(hù)需求，前端是偉大的實(shí)現(xiàn)者。

那么，交互設(shè)計(jì)到底是什么呢？

我突然打了一下你，你肯定會(huì)有一定的反應(yīng)。首先，你的表現(xiàn)會(huì)吃驚或者生氣，你的吃驚或者生氣的程度也會(huì)受我下手的輕重和方式影響。我對(duì)你的反應(yīng)會(huì)有一定的預(yù)期，下手的時(shí)候，沒(méi)有期望你會(huì)突然哈哈大笑。這就是人與人之間的交互。

人和物也是一樣，我按下電視的開(kāi)關(guān)鍵，我預(yù)期電視會(huì)打開(kāi)。電視如期望發(fā)生運(yùn)轉(zhuǎn)。若我按下電視的開(kāi)關(guān)鍵，突然電視成了靜音，這就是非期望的交互行為。

二. 為什么需要交互設(shè)計(jì)？

人可以經(jīng)由訓(xùn)練，改變自己對(duì)于行為的反饋，比如，媽媽教育嬰兒對(duì)于他人的禮物回報(bào)以“謝謝”和微笑，不要跟著陌生叔叔走等。如果你送一個(gè)小孩子禮物，他卻對(duì)于大罵，你會(huì)覺(jué)得這個(gè)小子怎么這么沒(méi)教養(yǎng)。

機(jī)器、系統(tǒng)沒(méi)有生命力，則需要被賦予對(duì)于各種行為的反饋機(jī)制。將用戶(hù)的期望賦予給它，讓它給出合理的反饋行為。

然而不幸的是，我們的生活里，沒(méi)有教養(yǎng)的產(chǎn)品實(shí)在太多太多……

上圖左側(cè)是一個(gè)杯子。我讓現(xiàn)場(chǎng)的同學(xué)猜這個(gè)杯子的成本價(jià)，答案集中在10元左右。但是不幸的是，我為這個(gè)杯子花費(fèi)了不下600元。原因正在于不良交互。

杯子的把手處僅容兩個(gè)手指塞入，當(dāng)?shù)谷霟岵韬?，我端起此杯，把手上部是光滑無(wú)比的玻璃，而手指又被杯壁燙了一下，結(jié)果杯子傾斜，將熱茶倒入了筆記本電腦鍵盤(pán)里——修鍵盤(pán)花費(fèi)了580元。

考慮到這里，設(shè)計(jì)杯子的設(shè)計(jì)師可以考慮把把手做成磨砂玻璃，增加賣(mài)點(diǎn)。

上圖是公司內(nèi)部的門(mén)?；旧先€(gè)衛(wèi)生間都要從此門(mén)經(jīng)過(guò)，那么基本上每個(gè)員工每天進(jìn)出此門(mén)不下6次吧。在場(chǎng)的同學(xué)聲稱(chēng)每次都很緊張——為什么？怕被撞啊。你看不到對(duì)面有沒(méi)有人，怕推門(mén)撞別人。自己也擔(dān)心被人撞。所以，途徑此門(mén)，瞳孔會(huì)不會(huì)由于緊張放大呢？還有，此門(mén)推也可拉也可，上面的“拉”字其實(shí)形同虛設(shè)。

每天反復(fù)扇動(dòng)，座位靠近此門(mén)的同學(xué)們夏天感覺(jué)到熱，冬天感覺(jué)到冷。嚴(yán)重不低碳環(huán)保。

原因也是不良交互設(shè)計(jì)。

改進(jìn)此門(mén)，可以設(shè)置透明的玻璃窗?；蛘哂米詣?dòng)開(kāi)啟的推拉門(mén)代替。

上面是一個(gè)電梯事件。要知道電梯是個(gè)最講究習(xí)慣統(tǒng)一的地方。你要經(jīng)常在不同的大樓用不同的電梯。若A電梯用這種按鍵，B電梯用那種按鍵，基本上你都要重新適應(yīng)。然而這個(gè)適應(yīng)你又無(wú)法持續(xù)，因?yàn)槟愕搅薈電梯，仍然要重新學(xué)習(xí)。所以電梯的按鍵設(shè)計(jì)，基本上要有行業(yè)標(biāo)準(zhǔn)的。

然而華星路的創(chuàng)業(yè)大廈就是特立獨(dú)行的。大多數(shù)電梯將開(kāi)門(mén)、關(guān)門(mén)的按鍵放到了數(shù)字鍵的上部。而創(chuàng)業(yè)大廈則是將報(bào)警按鍵放到此處，開(kāi)門(mén)關(guān)門(mén)則放到了數(shù)字鍵的最下方。

我2008年到阿里巴巴上班（當(dāng)時(shí)公司就在創(chuàng)業(yè)大廈），覺(jué)得這里的同事很不友好。好幾次晚到一步，電梯門(mén)即將合上，我大步向前，邊跑邊叫等一下。里面的人面帶笑容，靠門(mén)的MM伸手一按鍵，電梯門(mén)無(wú)情地關(guān)上了。

這里的人都太不友好了——直到有一次我上了電梯，電梯門(mén)即將關(guān)閉時(shí)，有幾個(gè)遲到的同事飛奔過(guò)來(lái)，我二話(huà)不說(shuō)，直接按開(kāi)門(mén)鍵——叮呤呤，居然響起了鈴聲，有個(gè)聲音問(wèn)：什么事？我定睛一看，原來(lái)本以為是開(kāi)門(mén)鍵的地方，是個(gè)報(bào)警的按鍵！原來(lái)如此！

上圖右下方我寫(xiě)了一個(gè)HISTORY, 歷史。這是開(kāi)個(gè)玩笑。假設(shè)某人暗戀已久的人向TA飛奔過(guò)來(lái)，希望電梯等一下，結(jié)果由于此不良設(shè)計(jì)，讓這個(gè)暗戀的人心存糾結(jié)，錯(cuò)過(guò)美好姻緣。本來(lái)兩個(gè)人結(jié)合有可能生出一個(gè)能夠改變歷史的天才，結(jié)果錯(cuò)失了。

原因正是不良交互設(shè)計(jì)。

上圖是今年去千島湖outting拍的酒店里的門(mén)以及開(kāi)關(guān)。酒店的門(mén)打開(kāi)貌似是在教我們做肢體協(xié)調(diào)操，需要兩個(gè)手同時(shí)按指示操作才能打開(kāi)。試問(wèn)門(mén)的安全性在于防止外面的人破門(mén)而入，不是為了防止屋內(nèi)的人出門(mén)。不曉得這個(gè)過(guò)度設(shè)計(jì)有何作用?？傊瑡寢尣辉俑野研『⒆恿粼诜块g自己不帶房卡出門(mén)。因?yàn)橐粋€(gè)8歲以下的孩子，基本上不會(huì)開(kāi)此門(mén)。

右下角是大部份酒店都有的變態(tài)的燈。你不知道什么狀態(tài)是開(kāi)，什么狀態(tài)是關(guān)。當(dāng)然，由于酒店系統(tǒng)，某處燈光是由多個(gè)按鍵控制，無(wú)法用統(tǒng)一的交互解決。但是這是系統(tǒng)的問(wèn)題，不是用戶(hù)的問(wèn)題。

網(wǎng)頁(yè)上的無(wú)教養(yǎng)的表現(xiàn)更多了……

某日我看到一封郵件。我大概一瞄，我就看到幾個(gè)關(guān)鍵詞：免費(fèi)，即可獲得，10元，立即領(lǐng)取。

(我和大部分用戶(hù)一樣，不會(huì)逐字去閱讀什么什么介紹，基本上都是在抓關(guān)鍵詞，要提高效率，請(qǐng)精簡(jiǎn)網(wǎng)頁(yè)文案，強(qiáng)調(diào)文案重點(diǎn))。

但是，當(dāng)我點(diǎn)擊立即領(lǐng)取之后，直接給我一個(gè)添堵的頁(yè)面：我沒(méi)有資格。（文案的重要性?。?/p>

我不知道是不是不登陸造成的，當(dāng)時(shí)的設(shè)計(jì)應(yīng)該考慮各種風(fēng)險(xiǎn)給出周全的解決方案。

從數(shù)據(jù)上去看，也許會(huì)看到活動(dòng)的轉(zhuǎn)化率很低很低，也許活動(dòng)方會(huì)認(rèn)為是投放人群不對(duì)，頁(yè)面不夠吸引人，或者10元的力度不夠等等。但是只要認(rèn)真去找問(wèn)題，也許會(huì)發(fā)現(xiàn)不良交互產(chǎn)生了嚴(yán)重影響。

當(dāng)然，我還搞不明白，像UIGARDEN這種盈利模式單一急需用戶(hù)注冊(cè)的網(wǎng)站為何會(huì)在注冊(cè)頁(yè)面和用戶(hù)過(guò)不去。

你鏈接不上GMAIL的服務(wù)器是你的不對(duì)，別說(shuō)用戶(hù)的EMAIL是無(wú)效的好不？

所以，我們需要交互設(shè)計(jì)去做什么呢？

1. 發(fā)現(xiàn)并解決問(wèn)題

上面的那些交互的問(wèn)題，交互設(shè)計(jì)師需要發(fā)現(xiàn)并有一套方法去解決。

2. 平衡——引入用戶(hù)視角和方法。

3. 控制成本，降低風(fēng)險(xiǎn)

交互的系統(tǒng)方法，讓交互的輸出物快速迭代呈現(xiàn)，并且低成本。不需要開(kāi)發(fā)，不需要視覺(jué)，就能夠?qū)⒊橄蟮南敕ň呦癯尸F(xiàn)原型，方便的且低成本的工作方法，方便項(xiàng)目組進(jìn)行多種可能性的探索。

在一輪輪的評(píng)審和討論中讓決策人和參與方根據(jù)項(xiàng)目的階段逐步聚焦。最終輸出一個(gè)最終版的原型。

4. 術(shù)業(yè)有專(zhuān)攻

當(dāng)然，產(chǎn)品經(jīng)理和視覺(jué)設(shè)計(jì)師若有可能多做一些，也可以不需要交互設(shè)計(jì)師。事實(shí)上，大多數(shù)創(chuàng)業(yè)型的公司，確實(shí)是沒(méi)有交互設(shè)計(jì)師的。但這不意味著交互設(shè)計(jì)缺失，有可能是產(chǎn)品經(jīng)理或者視覺(jué)承擔(dān)了此階段的工作。但是，產(chǎn)品經(jīng)理在平衡商業(yè)和用戶(hù)的點(diǎn)上，往往會(huì)更多站在老板或者KPI的角度，而視覺(jué)設(shè)計(jì)師感性大于理性，更加糾結(jié)于各種視覺(jué)細(xì)節(jié)，會(huì)不自覺(jué)在項(xiàng)目前期就引入太多視覺(jué)元素，讓項(xiàng)目組在討論中偏離核心方向。

總歸來(lái)說(shuō)，他們的專(zhuān)攻方向是不一樣的。

三. 什么是交互設(shè)計(jì)

我個(gè)人認(rèn)為交互設(shè)計(jì)師的工作圍繞以上四件事情展開(kāi)。入門(mén)的人，很容易將重點(diǎn)落到第二點(diǎn)：快速迭代呈現(xiàn)上，所以他們會(huì)直接問(wèn)：你們都用什么工具？能給我們培訓(xùn)一下工具嗎？
其實(shí)工具真的不是重點(diǎn)，想法若有，發(fā)現(xiàn)白紙和筆都是最好的工具。所以進(jìn)階的交互設(shè)計(jì)師后來(lái)會(huì)明白這一點(diǎn)，他們會(huì)回歸到需求本源：這是什么？為什么要做？我們要解決的是什么問(wèn)題？非要如此解決嗎？

舉個(gè)例子，若有需求方說(shuō)：幫我設(shè)計(jì)一個(gè)花瓶。小A設(shè)計(jì)師就直接去做花瓶去了。小B多問(wèn)了幾句：多大的花瓶？什么材質(zhì)的？什么時(shí)候要？預(yù)算是多少？小C則問(wèn)：你要花瓶做什么的？是放鮮花還是做室內(nèi)裝飾用的？小A肯定做出了花瓶，但是未必是顧客想要的。小B也做了花瓶，顧客也買(mǎi)單了，已經(jīng)合格了。但是小C則有可能讓顧客驚喜。顧客表面要的是花瓶，但是實(shí)際上是在尋求一種解決方案。他要解決的問(wèn)題有可能是風(fēng)水問(wèn)題，有可能是美化家庭，有可能是裝一束鮮花……若不了解這個(gè)背后，你也許只能給他一個(gè)花瓶，而不是其他的更加適合他但是他描述不出來(lái)的，甚至沒(méi)意識(shí)到的。
在實(shí)踐中，我曾遇到一個(gè)需求，在一個(gè)新的頻道即將發(fā)布前，需要做一個(gè)預(yù)熱頁(yè)面。這個(gè)預(yù)熱頁(yè)面比正式的頁(yè)面提前幾天發(fā)布。運(yùn)營(yíng)同事說(shuō)需要提前讓目標(biāo)顧客知道一個(gè)新的頻道要上線(xiàn)了，那么原來(lái)的設(shè)想就是在這個(gè)頁(yè)面上介紹一下新的頻道，以及新頻道上線(xiàn)后的精彩活動(dòng)。
追問(wèn)：你的目標(biāo)是讓這些人知道有這件事情，還是讓他們知道有這件事情并且在頻道發(fā)布后回訪(fǎng)呢？需求是后者。那么一個(gè)簡(jiǎn)單的介紹頁(yè)面只能達(dá)到前者的目標(biāo)。這群人知道這件事情，但是一周后就會(huì)淡忘這件事情，這群人絕大多數(shù)不會(huì)成為正式頻道發(fā)布后造訪(fǎng)的那撥人，那為何還提前預(yù)熱？要達(dá)成后者的目標(biāo)，我們則需要放鉤子，比如在預(yù)熱期間讓用戶(hù)搶積分，免費(fèi)送積分，折扣券等，并且限定了積分或者折扣券只在正式發(fā)布那天有效等。
數(shù)據(jù)可以看出一些需求，但是數(shù)據(jù)是個(gè)有意思的武器。武器可以讓用戶(hù)的行為顯像化直觀化，但是你依然不了解這些數(shù)據(jù)的背后有什么樣的顧客行為。比如，數(shù)據(jù)顯示某購(gòu)物網(wǎng)站主流用戶(hù)也許是集中在25歲到29歲。這是個(gè)事實(shí)。那么我們的產(chǎn)品有可能會(huì)認(rèn)為就是要滿(mǎn)足這類(lèi)顧客的需求。但是有可能是我們?cè)谠O(shè)計(jì)上太偏重這個(gè)階段的用戶(hù)群，讓其他用戶(hù)更難去用我們的產(chǎn)品。
另外，交互要始終平衡的除了商業(yè)與用戶(hù)、技術(shù)，就是ROI， 也即投入產(chǎn)出比。
解決一個(gè)問(wèn)題，滿(mǎn)足一個(gè)需求，有多種方法。有的屬于過(guò)度設(shè)計(jì)。有的屬于隔靴搔癢——需要多搔很長(zhǎng)時(shí)間才能解決問(wèn)題。所以交互需要有四兩撥千金的意識(shí)，在探索階段，不放過(guò)一個(gè)靈感，多做一些探索去求尋最佳解決方案。在后期則當(dāng)快刀斬亂麻，當(dāng)斷則斷。
交互設(shè)計(jì)師的工作——

在整個(gè)項(xiàng)目流程中，交互則在四個(gè)階段有不同程度的參與，并且這幾個(gè)階段并不是嚴(yán)格的串行，而是并行中迭代的。

1. 需求階段
參與討論，了解并挖掘需求。進(jìn)行用戶(hù)需求分析（也會(huì)與BI部門(mén)以及用研配合，走訪(fǎng)用戶(hù)，做用戶(hù)調(diào)研等），任務(wù)分析，提供網(wǎng)站架構(gòu)圖（site map）, 網(wǎng)頁(yè)流程圖（page flow）等，協(xié)助產(chǎn)品經(jīng)理細(xì)化需求，從BRD(商業(yè)需求文檔)到PRD（產(chǎn)品需求文檔）.

2. 原型階段
同步PRD進(jìn)程，輸出各階段所需的產(chǎn)品原型，也即線(xiàn)框圖（Wireframe）. 探索滿(mǎn)足需求的各種解決方案（包括任務(wù)流以及單頁(yè)面交互），并組織評(píng)審和討論會(huì)，在評(píng)審和討論后，輸出一個(gè)確認(rèn)版的線(xiàn)框圖以及交互說(shuō)明文檔。
此階段若有必要，也會(huì)配合用研進(jìn)行可用性測(cè)試，以便提前發(fā)現(xiàn)問(wèn)題。

3. 視覺(jué)-前端以及開(kāi)發(fā)階段
演變成為UED內(nèi)部項(xiàng)目經(jīng)理，對(duì)UED整體時(shí)間進(jìn)度負(fù)責(zé)，講解需求，答疑，驗(yàn)收視覺(jué)以及前端、開(kāi)發(fā)成果。根據(jù)他們的反饋，改進(jìn)交互設(shè)計(jì)，并與產(chǎn)品經(jīng)理協(xié)調(diào)。

4. 優(yōu)化階段
觀測(cè)核心數(shù)據(jù)變化，進(jìn)行可用性測(cè)試和用戶(hù)調(diào)研，以便優(yōu)化下個(gè)版本。

先到這里，下一篇分享下交互常用的工具和方法。繼續(xù)關(guān)注哦～

來(lái)源：http://heidixie.blog.sohu.com/186686158.html