轉載請註明來處，關注我，請點擊：http://weibo.com/heidixie
這是一次內部分享，新部門的同學們希望我聊聊我過去從事的交互設計，做個了面對入門者等級的PPT，和各位簡單聊了聊。發到微博上，也敦促自己對交互設計從業經歷做個簡單總結。——類似的文章，貌似自己在三年前也寫過……
一. 什麼是交互設計
要談什麼是交互設計，先要了解這幾個概念。
網頁設計年代，大概是從2004年開始熱起來了，等到我畢業的2006年，滿大街都已經是電腦培訓機構，記得當時北大青鳥的百日千才培訓就在我每日下班必經的十字路口。
網頁設計年代重視的是特效，說白了就是特效背後的技術，君不見當時的網頁是讓人看得眼花繚亂啊，這裏bling bling閃閃的，漂浮框亂跳的。然後就是套各種網頁設計模版，做出很多複雜的類似於右邊這種典型的政府網站出來。
美工時代：
網頁設計時代，大批的“美工”涌現。顯然人們有了更高的追求，光是bling bling的眼花繚亂的動畫效果已經看厭了，網頁也是需要裝飾美化的。雖然網頁設計論壇(www.68design.net)當時很火，但是網頁設計師這個頭銜仍然是一廂情願的叫法。大多數時候，仍然是老闆和客戶嘴裏的“美工”。
美工時代重視的是：視覺效果。並且，原來對網頁設計一竅不通的老闆們紛紛成了資深的視覺鑑賞家。美工時代“美工”很痛苦——單純靠視覺效果去評價作品好壞，太主觀，太隨意。於是他們通常會做N個版本，反覆修改，直至美工崩潰或者老闆崩潰。
歷史邁入了偉大的UI年代。
大概是在2005年，我崇拜的網絡名人從擅長鼠繪的小非變成了圖標達人Rokey(時光倒流到2005年，我正在看這篇文章：靈感來源於生活-微軟亞洲工程院移動設備組UI設計師張偉)。也自學了關於UI的若干知識，開始迷戀起PS像素級的奇妙世界。
UI=User Interface. 已經將User即用戶納入界面設計考慮的重要要素。但是對於精緻、質感的無極限的追求，依然會讓人顧此失彼，忘記了從用戶的視角去審視一個UI的作品。於是，經常會看到雖然很精緻，但是很難用的軟件界面。
用戶看到的部份，無可挑剔。但是實際上，使用的感受並不好。而感受部份，可以從幾個角度去闡釋：
● 他們知道不知道這個是什麼東西?他們感覺到迷惑嗎?
● 他們是否清楚能夠通過此物做什麼?
● 是否清楚如何做到?
● 當他們有興趣去嘗試時，他們知道如何開始嗎?
● 當他們開始後，知道如何進行下一步嗎?
● 當不想要使用時，能夠快速明白如何退出嗎?
● 當他們退出後，下次來用，是否需要重新去學習掌握如何操作?
● 每一步操作時，他們心理會感覺到愉悅還是枯燥乏味?
當然，我們崇尚軟件操作過程中的效率，但是若用戶感覺到愉悅，也許就不會覺得效率太低，其實，效率是個相對的說法。歸根結底，這就是用戶體驗。
UED時代——用戶體驗制勝
我們不缺技術，我們不缺另人震撼的視覺，這些雖然過去是我們孜孜追求的東西，如今已經不足爲奇。但是我們缺用戶來用，我們缺用戶持續來關注，我們缺用戶體驗。用戶體驗過去一直在產生影響，但是未能得到足夠的重視。
2007年，開始關注www.ucdchina.com. UED是套方法論，UCD是指導思想——User-centered Design. 不再是BCD-Boss-Centered Design.老闆說了算，除非老闆能夠代表目標客戶。這和市場營銷學發展的歷程有點像，從生產主導到市場主導。
以下是我在用戶體驗設計?——是什麼不是什麼裏用到的圖片。WEB2.0後，用戶的參與度越來越高，用戶從被動的接受者變成了主筆，主編，攝影師，作家……他們是主角，使用中遇到問題，當然不可能靠網站的客服電話或幫助教程搞定，他們需要自助，所以，降低使用門檻，消除使用障礙，吸引他們重複使用，是每個網站致力的方向。
以下是在用戶體驗設計答疑對話(半吊子和純外行)一文中的配圖。從廣義來講，一個網站的任何部門都是在爲用戶體驗服務，從戰略層的佈局開始，用戶體驗已經開始。而狹義的用戶體驗設計，也就是UED部門做的事情，大部分是圍繞到結構、框架以及表面層。
UED部門的組織架構基本如下，解決用戶易用(交互、文案)，以及想用(視覺，交互)的問題。而用戶研究是幫我們看清用戶特徵、洞察及挖掘用戶需求，前端是偉大的實現者。
文案對於用戶體驗的重要性經常被忽視，所以，文案撰寫在UED團隊是很稀缺的資源。目前據我瞭解，只有支付寶的UED團隊有此配置，其他團隊大部分是由產品經理擔任此職。
那麼，交互設計到底是什麼呢?
我突然打了一下你，你肯定會有一定的反應。首先，你的表現會吃驚或者生氣，你的吃驚或者生氣的程度也會受我下手的輕重和方式影響。
我呢，對你的反應會有一定的預期，下手的時候，沒有期望你會突然哈哈大笑——這就是人與人之間的交互。
人和物也是一樣，我按下電視的開關鍵，我預期電視會打開，並且電視如期望發生運轉。若我按下電視的開關鍵，突然電視成了靜音，這就是非期望的交互行爲。
二. 爲什麼需要交互設計?
人可以經由訓練，改變自己對於行爲的反饋，比如，媽媽教育嬰兒對於他人的禮物回報以“謝謝”和微笑，不要跟着陌生叔叔走等。如果你送一個小孩子禮物，他卻對於大罵，你會覺得這個小子怎麼這麼沒教養。
機器、系統沒有生命力，則需要被賦予對於各種行爲的反饋機制。將用戶的期望賦予給它，讓它給出合理的反饋行爲。
然而不幸的是，我們的生活裏，沒有教養的產品實在太多太多……
上圖左側是一個杯子。我讓現場的同學猜這個杯子的成本價，答案集中在10元左右。但是不幸的是，我爲這個杯子花費了不下600元。原因正在於不良交互。
杯子的把手處僅容兩個手指塞入，當倒入熱茶後，我端起此杯，把手上部是光滑無比的玻璃，而手指又被杯壁燙了一下，結果杯子傾斜，將熱茶倒入了筆記本電腦鍵盤裏——修鍵盤花費了580元。
考慮到這裏，設計杯子的設計師可以考慮把把手做成磨砂玻璃，增加賣點。
上圖是公司內部的門。基本上去個衛生間都要從此門經過，那麼基本上每個員工每天進出此門不下6次吧。
在場的同學聲稱每次都很緊張——爲什麼?怕被撞啊。你看不到對面有沒有人，怕推門撞別人。自己也擔心被人撞。所以，途徑此門，瞳孔會不會由於緊張放大呢?還有，此門推也可拉也可，上面的“拉”字其實形同虛設。
每天反覆扇動，座位靠近此門的同學們夏天感覺到熱，冬天感覺到冷。嚴重不低碳環保。
原因也是不良交互設計。
改進此門，可以設置透明的玻璃窗。或者用自動開啓的推拉門代替。
上面是一個電梯事件。要知道電梯是個最講究習慣統一的地方。你要經常在不同的大樓用不同的電梯。若A電梯用這種按鍵，B電梯用那種按鍵，基本上你都要重新適應。然而這個適應你又無法持續，因爲你到了C電梯，仍然要重新學習。所以電梯的按鍵設計，基本上要有行業標準的。
然而華星路的創業大廈就是特立獨行的。大多數電梯將開門、關門的按鍵放到了數字鍵的上部。而創業大廈則是將報警按鍵放到此處，開門關門則放到了數字鍵的最下方。
我2008年到阿里巴巴上班(當時公司就在創業大廈)，覺得這裏的同事很不友好。好幾次晚到一步，電梯門即將合上，我大步向前，邊跑邊叫等一下。裏面的人面帶笑容，靠門的MM伸手一按鍵，電梯門無情地關上了。
這裏的人都太不友好了——我一直懷抱如此惡念。直到有一次我上了電梯，電梯門即將關閉時，有幾個遲到的同事飛奔過來，我二話不說，直接按開門鍵——叮呤呤，居然響起了鈴聲，有個聲音問：什麼事?我定睛一看，原來本以爲是開門鍵的地方，是個報警的按鍵!原來如此!
上圖右下方我寫了一個HISTORY, 歷史。這是開個玩笑。假設某人暗戀已久的人向TA飛奔過來，希望電梯等一下，結果由於此不良設計，讓這個暗戀的人心存糾結，錯過美好姻緣。本來兩個人結合有可能生出一個能夠改變歷史的天才，結果錯失了。
去年11月底我再去創業大廈，發現此電梯的故事還在繼續——畢竟更換電梯成本太高了!而且在報警的按鈕下方，被保安貼了一張醒目的即時貼，上面寫着幾個大字：這是報警用的!哈哈，看來保安也不堪忍受“假報警”。但是沒用，貼着這個提示並不能有效阻止錯誤發生——用戶首先是憑藉習慣，其次纔是認知和學習。
原因正是不良交互設計。
上圖是今年去千島湖outting拍的酒店裏的門以及開關。酒店的門打開貌似是在教我們做肢體協調操，需要兩個手同時按指示操作才能打開。試問門的安全性在於防止外面的人破門而入，不是爲了防止屋內的人出門。不曉得這個過度設計有何作用。總之，媽媽不再敢把小孩子留在房間自己不帶房卡出門。因爲一個8歲以下的孩子，基本上不會開此門。
右下角是大部份酒店都有的變態的燈。你不知道什麼狀態是開，什麼狀態是關。當然，由於酒店系統，某處燈光是由多個按鍵控制，無法用統一的交互解決。但是這是系統的問題，不是用戶的問題。
網頁上的無教養的表現更多了……
某日我看到一封郵件。我大概一瞄，我就看到幾個關鍵詞：免費，即可獲得，10元，立即領取。
(我和大部分用戶一樣，不會逐字去閱讀什麼什麼介紹，基本上都是在抓關鍵詞，要提高效率，請精簡網頁文案，強調文案重點)。
但是，當我點擊立即領取之後，直接給我一個添堵的頁面：我沒有資格。(文案的重要性!)
我不知道是不是不登陸造成的，當時的設計應該考慮各種風險給出周全的解決方案。
從數據上去看，也許會看到活動的轉化率很低很低，也許活動方會認爲是投放人羣不對，頁面不夠吸引人，或者10元的力度不夠等等。但是隻要認真去找問題，也許會發現不良交互產生了嚴重影響。
當然，我還搞不明白，像UIGARDEN這種盈利模式單一急需用戶註冊的網站爲何會在註冊頁面和用戶過不去。
你鏈接不上GMAIL的服務器是你的不對，別說用戶的EMAIL是無效的好不?
再看麥考林糟糕的經歷，我不知道具體的數據如何，但是麥考林肯定有大量非商品質量問題，也非服務問題造成的退貨。
也是由於糟糕的交互設計引起的。
我填寫了收貨地址後，上圖是讓我指定送貨方式。麥考林給出了兩個方式可選，我毫不猶豫選擇了郵局方式——因爲EMS太貴了嘛。誰知道這郵局還真的是郵局——5天后，我收到前臺給我簽收的一個包裹單，讓我去郵局憑藉身份證領取包裹。要知道，快遞送貨上門時代，我怎麼可能去郵局領包裹?打電話給麥網，客服小姐說，因爲我的收貨地址不支持快遞，所以只能讓我選郵局。
我這才知道是怎麼回事。原來麥網爲了解決用戶選的配送方式不可用的問題(淘寶也經常存在這個問題)，故作聰明使用了郵編去匹配配送方式的方法。我填寫的郵編他們系統解讀不支持快遞，因此下個頁面就不給我這個選項。
郵編在今天已經是用戶認爲很不重要的字段，他們會不確認就隨便寫。另外，麥網要避免這個問題，也可以讓顧客明白有哪些配送方式不可用且告訴原因而不是簡單隱藏了事。
所以，我們需要交互設計去做什麼呢?
1. 發現並解決這些問題
上面的那些交互的問題，有些人根本發現不了。有些人發現了並不知道如何解決嗯。
交互設計師需要發現並有一套方法去解決。
2. 平衡——引入用戶視角和方法。還是那個老圖：
3. 控制成本，降低風險
交互的系統方法，讓交互的輸出物快速迭代呈現，並且低成本。不需要開發，不需要視覺，就能夠將抽象的想法具像呈現原型，方便的且低成本的工作方法，方便項目組進行多種可能性的探索。
在一輪輪的評審和討論中讓決策人和參與方根據項目的階段逐步聚焦。最終輸出一個最終版的原型。
4. 術業有專攻
當然，產品經理和視覺設計師若有可能多做一些，也可以不需要交互設計師。事實上，大多數創業型的公司，確實是沒有交互設計師的。但這不意味着交互設計缺失，有可能是產品經理或者視覺承擔了此階段的工作。但是，產品經理在平衡商業和用戶的點上，往往會更多站在老闆或者KPI的角度，而視覺設計師感性大於理性，更加糾結於各種視覺細節，會不自覺在項目前期就引入太多視覺元素，讓項目組在討論中偏離核心方向。
總歸來說，他們的專攻方向是不一樣的。
三. 什麼是交互設計
我個人認爲交互設計師的工作圍繞以上四件事情展開。入門的人，很容易將重點落到第二點：快速迭代呈現上，所以他們會直接問：你們都用什麼工具?能給我們培訓一下工具嗎?
其實工具真的不是重點，想法若有，發現白紙和筆都是最好的工具。所以進階的交互設計師後來會明白這一點，他們會迴歸到需求本源：這是什麼?爲什麼要做?我們要解決的是什麼問題?非要如此解決嗎?
舉個例子，若有需求方說：幫我設計一個花瓶。小A設計師就直接去做花瓶去了。小B多問了幾句：多大的花瓶?什麼材質的?什麼時候要?預算是多少?小C則問：你要花瓶做什麼的?是放鮮花還是做室內裝飾用的?小A肯定做出了花瓶，但是未必是顧客想要的。小B也做了花瓶，顧客也買單了，已經合格了。但是小C則有可能讓顧客驚喜。顧客表面要的是花瓶，但是實際上是在尋求一種解決方案。他要解決的問題有可能是風水問題，有可能是美化家庭，有可能是裝一束鮮花……若不瞭解這個背後，你也許只能給他一個花瓶，而不是其他的更加適合他但是他描述不出來的，甚至沒意識到的。
在實踐中，我曾遇到一個需求，在一個新的頻道即將發佈前，需要做一個預熱頁面。這個預熱頁面比正式的頁面提前幾天發佈。運營同事說需要提前讓目標顧客知道一個新的頻道要上線了，那麼原來的設想就是在這個頁面上介紹一下新的頻道，以及新頻道上線後的精彩活動。
追問：你的目標是讓這些人知道有這件事情，還是讓他們知道有這件事情並且在頻道發佈後回訪呢?需求是後者。那麼一個簡單的介紹頁面只能達到前者的目標。這羣人知道這件事情，但是一週後就會淡忘這件事情，這羣人絕大多數不會成爲正式頻道發佈後造訪的那撥人，那爲何還提前預熱?要達成後者的目標，我們則需要放鉤子，比如在預熱期間讓用戶搶積分，免費送積分，折扣券等，並且限定了積分或者折扣券只在正式發佈那天有效等。
數據可以看出一些需求，但是數據是個有意思的武器。武器可以讓用戶的行爲顯像化直觀化，但是你依然不瞭解這些數據的背後有什麼樣的顧客行爲。比如，數據顯示某購物網站主流用戶也許是集中在25歲到29歲。這是個事實。那麼我們的產品有可能會認爲就是要滿足這類顧客的需求。但是有可能是我們在設計上太偏重這個階段的用戶羣，讓其他用戶更難去用我們的產品。
另外，交互要始終平衡的除了商業與用戶、技術，就是ROI， 也即投入產出比。
解決一個問題，滿足一個需求，有多種方法。有的屬於過度設計。有的屬於隔靴搔癢——需要多搔很長時間才能解決問題。所以交互需要有四兩撥千金的意識，在探索階段，不放過一個靈感，多做一些探索去求尋最佳解決方案。在後期則當快刀斬亂麻，當斷則斷。
交互設計師的工作——
在整個項目流程中，交互則在四個階段有不同程度的參與，並且這幾個階段並不是嚴格的串行，而是並行中迭代的。
1. 需求階段
參與討論，瞭解並挖掘需求。進行用戶需求分析(也會與BI部門以及用研配合，走訪用戶，做用戶調研等)，任務分析，提供網站架構圖(site map), 網頁流程圖(page flow)等，協助產品經理細化需求，從BRD(商業需求文檔)到PRD(產品需求文檔).
2. 原型階段
同步PRD進程，輸出各階段所需的產品原型，也即線框圖(Wireframe). 探索滿足需求的各種解決方案(包括任務流以及單頁面交互)，並組織評審和討論會，在評審和討論後，輸出一個確認版的線框圖以及交互說明文檔。
此階段若有必要，也會配合用研進行可用性測試，以便提前發現問題。
3. 視覺-前端以及開發階段
演變成爲UED內部項目經理，對UED整體時間進度負責，講解需求，答疑，驗收視覺以及前端、開發成果。根據他們的反饋，改進交互設計，並與產品經理協調。
4. 優化階段
觀測核心數據變化，進行可用性測試和用戶調研，以便優化下個版本。
先到這裏，下一篇分享下交互常用的工具和方法。繼續關注哦～
圍觀: 26798次 | 責任編輯：包子