“設計的美妙之處，在于它能點亮創意的天空。而交互設計是所有設計師都需要具備的一種意識和能力，它能夠使你的設計方案便于用戶理解和操作，從而快速達成目標，為用戶、公司乃至社會創造更多價值。”這是《破繭成蝶》作者劉津給本書寫的序里面的一句話。

拓展閱讀：

我相信每一個 UI 設計師對“交互設計”這個詞語都不陌生，可能很多人對它的理解還只是畫原型、畫線框圖，但其實交互設計的知識，在我們制作作品集的時候就已經在運用了。我們去展示一個作品的時候，總少不了對用戶畫像、使用場景、設計目標和競品的分析。但是你有沒有想過，為什么我們要去討論用戶畫像、使用場景、設計目標嗎？討論這些的目的是什么，對我們的設計又有什么幫助？

董尚昊《步步為贏，交互設計全流程解析》這本書，將會通過 9 個交互設計必備技能告訴你，交互設計是什么，交互設計應該怎么做。他在序言里說——希望這本書，可以為你帶來價值。我已經收獲了，所以也想把這份收獲分享給你。

這本書講了什么？

1. 什么是交互設計？

設計的目的

在沒有讀這本書之前，其實我對交互設計的概念很模糊。因為長期創業的緣故，工作非常雜，除了不寫代碼，我感覺自己其他事情都在干。所以這是我第一次理解交互設計的概念，而當我讀完以后，我才發現，其實我干的一直都是交互設計的活兒。

在了解交互設計之前，作者拋出了一個問題，那就是——設計的目的是什么？說實話，這在我第一次閱讀的時候，給了我很大的沖擊。我們在過去的工作中，可能大部分人對設計的工作內容的理解都是完成原型圖的設計，做出高端大氣的頁面，精致的圖標等等，但你可能很少去思考，設計的目的是什么？

作者舉了一個很經典的案例。在二戰時期為英國空軍立下汗馬功勞的蚊式轟炸機，看上去很不起眼，甚至有點丑。但是當時這個飛機的英國設計師，充分考慮了生產飛機的材料“鋁”非常匱乏，于是采用了木材代替鋁材，正是這個看上去不起眼的改變，擺脫了大型冶煉工廠和專業機械的限制，減少了戰略資源的消耗，降低了制造難度和成本。最終，這款“身輕如燕”的木制轟炸機出動近 4 萬架次，投下 10 多萬顆炸彈，僅有 254 架被擊落，平均每 2000 架次行動才會損失 1 架，戰損率只有一般轟炸機的 1/3。

這是一個充分體現設計學科特性的生動案例：設計有著強烈的目的性，而設計師需要考慮現實情況，在一定的限制條件下進行創作。這一點也使設計與藝術有了鮮明的區別。設計的目的是滿足需要，而藝術的目的是表達藝術家對世界的看法。

所以如果你們認真看大偵探的產品拆解報告，你們會發現我每次都會在用戶需求分析這個章節，反復強調一句話——設計的本質是解決需求。

交互設計的定義

交互設計中“交互”一詞，英文是 interaction，其中 inter 是“互相”的意思，action 就是“行動”，所以 interaction 直觀上解釋就是“互相的行動”，也就是主體行動一下，客體再行動一下，彼此往復，你來我往。交互設計之父艾倫·庫伯在其經典著作《About Face 4：交互設計精髓》里對交互設計如此定義——交互設計是設計可互動的數字產品、環境、系統和服務的實踐。這個定義其實有點難理解，不是很具象，但這個定義告訴我們，交互設計覆蓋了很多領域，它和很多設計都有重疊、交集。作者他也整理了一個圖，從這個圖里我們對交互設計會有更直觀的了解。

其次，作者他舉了一個很接地氣的例子告訴我們交互設計是什么。那就是我們大家無比熟悉的銀行 ATM 取款機。你有注意過嗎，當你去取款的時候，這個流程是非常直觀的。插卡、輸入密碼、選擇取錢、輸入金額，等待出鈔，取卡結束。這就是一個完整的 ATM 取現流程，這就是交互設計，它是有流程的，有動作的，需要用戶和機器一起協作完成的。

交互設計的能力模型

在傳統的互聯網產品開發流程中，交互設計處于產品需求和界面設計的中間。大家對他的理解呢，一般都是畫原型，畫線稿。但事實上畫原型只是交互設計師的一小部分工作，和產品經理一起分析從中挖掘需求，制定產品的規劃，跟隨產品整個生命周期的設計，以及驗收最終的產品研發，才是交互設計師真正的工作。我個人認為，交互設計師是需求的設計翻譯官，把產品需求通過設計軟件繪制出來，從而讓產品、研發理解，最終上線給用戶使用，他就是這樣一個非常重要的角色。

交互設計師需要掌握什么能力？作者整理了 9 個必備技能，分別是場景思維、用戶習慣和心智模型、設計目標、競品分析、流程設計、設計原則、設計規范、原型制作和可用性測試。這 9 個技能，其實也是本書的核心內容，我們在后面會慢慢講解。其次大家可以通過這個模型來作為交互學習參考的工具，比如你現在只能畫原型，那么你需要培養場景思維、學習競品分析，這樣你就能擁有了一個學習階梯，不斷提升自己實力。

互聯網大公司對交互設計師的要求

這一節其實挺有意思，作者他分析了阿里巴巴、騰訊、網易等大廠的 20 多個交互設計師招聘崗位。從崗位描述和崗位需求的分析，他如此總結道：

對于初級設計師，主要要求設計師能夠對某個功能做出合理、有效的交互方案。對于高級甚至專家級設計師，則需要從更宏觀的角度對 App 的交互設計進行支持，例如設計策略的制訂、設計規范的制訂、框架的制訂、成員能力的提高等。無論何種情況，交互設計基礎知識都是設計師不斷成長的根基。

說到這里，我想起小時候學打球的時候，體育老師的第一件事就是教你如何拍球。很多人覺得無聊，拍球誰不會啊。但你最后發現，真正打得好的球員一定基礎功非常扎實的球員，而做設計，也是同樣的道理。如果對設計的基礎知識毫無概念，對不起，未來你一定會被淘汰。

2. 設計分析技能

這是本書的最重要、最核心的部分，作者針對交互設計需要掌握的設計分析能力模型做了全面的介紹，其中有很多非常形象的案例，當你讀完，你就會發現交互設計無處不在，交互設計真的非常重要。

目標用戶和場景

“理解用戶的期望、需要、動機是進行設計的基礎準備工作，它為設計方案指明前進的方向，奠定成功的基礎?！比魏我粋€產品，如果我們忽略了用戶真實的需求，那么最終這個產品就會導致無人用的窘境。這對于 B 端、SAAS 的產品設計來說，體會更深。

用戶的痛點是什么，我們的產品如何設計解決？如果對用戶的需求挖掘不夠深，那么這很可能就是一個偽需求。作者提供了一個制作用戶畫像的步驟，非常實用，你可以按照調查用戶、尋找關鍵變量、數據歸類的方式，最終形成一個清晰的用戶畫像。

作者分享了一個描述場景的公式，這是一個非常有價值的知識點。通過這個公式，在以后做用戶調研、產品分析的時候，我們可以直接套用，它可以幫你把用戶的使用場景描述得很清晰。

“場景=特定類型的用戶（Who）在某時間（When），某地點（Where），周圍出現了某些事物時（With What），萌發了某種需求（Desire），會想到通過某種手段（Method）來滿足需求?！?br /> 舉個簡單的例子：知生（用戶）在周五晚上（時間），在自己的臥室（地點），收到了設計大偵探直播的公告（出現某物），發現今天分享的是一直困擾他如何設計作品集的難題（需求），于是打開電腦（手段）進入直播間進行收聽。

最后作者還分享了用戶體驗地圖和用戶場景地圖的制作，這是對這兩種展示模型非常詳細的介紹，需要各位去細讀。

心智模型

心智模型是指一個人對某事物運作方式的思維過程，即一個人對世界的理解。

怎么來理解心智呢，比如你在頂樓按電梯的時候，你會按好幾下，仿佛這樣電梯會上來的更快；再比如，你在瀏覽某個產品的時候，你發現有相機的圖標你就會下意識的明白他可以上傳拍照或者上傳圖片；還有像音樂產品的播放器頁，他們會設計成一個黑膠唱片的風格，讓用戶從聽覺和視覺都有沉浸式的體驗。

分眾傳媒創始人江南春有本書叫《搶占心智》，他在那本書里這樣解釋心智——只有擁有了人心，占據了用戶的心智，品牌才能夠長盛不衰。我對本章心智模型的理解就是對用戶需求的挖掘。他們關心什么、喜歡什么、習慣什么，如果你不去深入挖掘、研究，那么你的設計就很有可能讓用戶不理解，成為了自嗨型的設計。

網易云音樂的負責人王詩沐曾經在《幕后產品》里發表過這么一個觀點——產品設計最忌諱的是只了解自己熟悉領域的用戶，而對其他用戶群視而不見。如果你不研究年輕用戶喜歡的二次元、娛樂時尚圈還有城鄉接合部的流行文化，那你很難體會到大眾用戶的需求。所以研究用戶，就是一個很大、需要長期持續性堅持的工作。

設計目標

我不知道你們有沒有這種感覺，當你沒有學習目標時候，你會焦頭爛額，不知道學什么，怎么學，即便你在 BAT，你也會煩惱如何提升自己。但是當你有清晰的學習目標時候，哪怕公司再小，工資再低，你也會有非常強的動力。其實我們做設計，也是這樣的。

作為設計師，想要解決問題、滿足需要，首先需要明確問題是什么，而確立設計目標就是在設計之初，把要解決的問題用設計目標的形式確立下來。設計目標又分為產品目標和用戶目標，產品目標是從業務的角度出發，根據業務需求歸納得出的對需求的期望效果。用戶目標是設計師對用戶在使用某個功能時，希望滿足的需要的總結。

我早些年做商業設計的時候，沒有設計目標這意識，只關心甲方有多少錢，以及我能做多少事。但隨著競爭越來越大，客戶的選擇越來越多，你會發現，大家打出來的口號都是“幫助客戶成功”。而在分析客戶需求時候，幫助客戶梳理好業務目標特別重要。他的產品在生命周期的哪個階段，有多少預算，MVP 版本需要達到什么效果，只有設定好設計目標，項目才能推進。而且不同的設計目標，設計方案也會不一致。

競品分析

我相信任何設計師在做設計的時候，對競品的調研都是必不可少的步驟。說難聽點，大家都需要學會如何去“抄”，但這個“抄”不是讓你生搬硬套把別人的東西直接搬過來，而是從其他優秀產品身上取長補短。競品分析最大的作用，就是幫助我們，通過調研、拆解、分析去獲取優秀產品的設計經驗。如果你對順豐的拆解還有印象，我當時整理了一個快遞行業的產品功能圖譜，其實那就屬于競品分析的一個方法。

作者提供了三個常見的競品分析方法，對每個方法都做了詳細的介紹，各位只要花點時間，認真讀一下，就能輕松上手。張再旺老師寫過有一本書叫《有效競品分析》，那本書里總結了很多競品分析的方法，后面我會分享，讓大家全面了解和提升競品分析的能力。

3. 原型制作技能

設計流程

其實現在越來越多的 UI 設計師在關注 B 端，轉型到 B 端。其實做好 B 端的設計，核心的關鍵點就是要了解業務流程。比如一個醫療 ERP，他的用戶角色有幾類，當用戶從前端提交報告，這個訂單如何流轉，后端怎么分配，這就是業務流程。

作者總結了一個畫流程圖的萬能公式：發現→了解→操作→跟進。其實我自己并不擅長畫流程圖，但是通過這個公式，我發現降低了我的學習成本，對流程圖的繪制更清晰了。對流程圖的繪制工具，有Axure、Process On等專業工具，但其實我會直接使用Sketch等設計軟件直接上手，記住，工具不重要，掌握繪制流程圖的方法，以及看懂一個產品的業務流程是最重要的。

設計原則

這一章所分享的設計原則，其實和我們上次分享的《UI 設計那些事兒》的 12 個設計基礎理論特別像。無論你是做 UI 設計還是交互設計，你的設計一定要遵循設計原則。比如一致性，這就是要保證整個產品的設計統一，為什么我們要建立文本樣式、顏色樣式？這就是保證整個設計樣式統一的基礎。再比如容錯性，為什么注冊的按鈕在你沒有輸入手機號碼的時候是置灰的，它就是通過這個細節告訴你，這個時候是不能點擊的。再比如你在支付寶輸入一個數字，它就會提示你是不是要轉賬，這就是預判用戶的預判，提醒用戶。

最后作者還提到羅賓·威廉姆斯的《寫給大家看的設計書》，我覺得這本書真的值得所有產品設計師的朋友觀看，哪怕你不做設計，但你掌握了最基礎的設計原則真的對你非常有幫助。

設計規范

設計規范這個章節，作者介紹了谷歌和蘋果各種常用的控件的使用方法，比如提示框、警告框、搜索、滑動器等等。這個部分偏實戰操作，需要細讀，大家可以當做一本詞典使用，在工作中隨時翻閱。

原型制作

我現在對交互原型有一個新的理解，那就是——對業務需求的設計翻譯。我特別喜歡做從0到1的產品，特別是在完成需求分析、確立好設計目標以后，我覺得那個時候去做交互設計真的很享受，你就是這個產品的創造者，它的功能怎么實現，怎么和用戶互動，完全是交互設計師去設計。

我認為，原型設計這個環節，真的特別重要。有些項目，如果交互設計師有經驗，完全可以降低開發、運營的成本，降低產品的失敗率。所以如果越想節約成本的外包或者產品公司，一定要找一個經驗豐富的交互設計師，他可以幫你把產品開發周期、運營成本考慮進去。

可用性測試

在讀這個章節的時候，其實之前有個問題一直困擾著我。在我們開發自己 SAAS 產品的時候，我發現測試這個環節的工作量真的特別大。而且由于不同的人的理解能力不同，很多細節我的同事幾乎看不到，所以當我來體驗產品的時候我非常抓狂，為什么這么弱智的 BUG 沒有發現，為什么這個功能被忽略了。那是我第一次重新認識測試的重要性。

對于交互設計師來說，千萬不要以為只是把設計做好就結束了。一個優秀、合格的設計師，一定要跟隨這個產品的全生命周期研發，而且尤其要參與到可用性測試環節里面。雖然有些公司有專門的測試工程師，但是作為產品的設計者，有很多很多細節，只有交互設計師才能清楚。

作者在這個章節為我們詳細介紹了可用性測試的方法，我讀完以后，對我真的很有啟發。我在隨后的醫療項目設計中，就借鑒了他的很多方法，制作測試原型、撰寫測試腳本等。

寫在后面的話

我提倡以學以致用的方法去讀書，那就是帶著問題去讀書，或者把讀書的收獲用來解決你當下的困惑，這樣才不會因為書本的篇幅過長或晦澀而無法堅持。我之所以選擇《步步為贏》這本書來分享學習交互設計，除了這本書的學習模型非常實用，還有一個原因是當我去讀這本書的時候，我閱讀起來真的非常輕松。整本書的內容、結構以及文筆的風格，都很容易看進去，由淺及深的方式，能讓我快速的對交互設計有全面的了解。所以這本書真的非常適合平時一提起讀書就毛骨悚然，但又很想學習提升的朋友。

如果你是一個傳統的 UI 設計師，從今天起，不要去等產品或交互的原型，你要走向前去，看看他們如何討論、分析需求，然后套用這個設計分析能力模型去思考，我們的產品目標用戶是誰，在什么場景使用，最后再應用到界面設計上。如果你已經是一個交互設計師，那么你可以查缺補漏，看看自己所掌握的知識模型，有沒有遺漏的，如果已經建立自己的方法論，那么恭喜你，你已經是一個非常優秀的交互設計師。如果你想制作一個設計作品集，那么你完全可以利用本書的設計模型，從用戶分析到設計目標，從設計流程到原型制作，去把設計思路、洞察、細節，“翻譯"給面試官、甲方。記住，再好的設計，如果缺乏深入的思考和有說服力的“翻譯”，它不會值錢。

董尚昊在本書的結尾，談到了設計師的自我修養，我個人非常認可。

“做設計是一個不斷學習、持續積累的過程，尤其是在迅速變化的互聯網行業。要為自己工作，才能真正獲得成長，而當你持續成長的時候，你就會變得越來越值錢。”

如果你想學習提升，讀書，是這個時代最不需要花錢、成本最低的學習方式，所以我把這本《步步為贏》分享給大家，希望你能有收獲！