步步爲贏：交互設計全流程解析

舊瓶裝新酒，新的是作者從自身實踐中總結的經驗，有乾貨。 對phone端組件的分析也很詳盡，案例較新，值得一讀。

《步步爲贏》讀書分享丨交互設計入門的必讀書籍 文/廖爾摩斯（GZH：設計大偵探） “設計的美妙之處，在於它能點亮創意的天空。而交互設計是所有設計師都需要具備的一種意識和能力，它能夠使你的設計方案便於用戶理解和操作，從而快速達成目標，爲用戶、公司乃至社會創造更多價值。”這是《破繭成蝶》作者劉津給本書寫的序裏面的一句話。 我相信每一個UI設計師對“交互設計”這個詞語都不陌生，可能很多人對它的理解還只是畫原型、畫線框圖，但其實交互設計的知識，在我們製作作品集的時候就已經在運用了。我們去展示一個作品的時候，總少不了對用戶畫像、使用場景、設計目標和競品的分析。但是你有沒有想過，爲什麼我們要去討論用戶畫像、使用場景、設計目標嗎？討論這些的目的是什麼，對我們的設計又有什麼幫助？ 董尚昊《步步爲贏，交互設計全流程解析》這本書，將會通過9個交互設計必備技能告訴你，交互設計是什麼，交互設計應該怎麼做。他在序言裏說——希望這本書，可以爲你帶來價值。我已經收穫了，所以也想把這份收穫分享給你。 一、這本書講了什麼？ 1. 什麼是交互設計？ 1.1 設計的目的 在沒有讀這本書之前，其實我對交互設計的概念很模糊。因爲長期創業的緣故，工作非常雜，除了不寫代碼，我感覺自己其他事情都在幹。所以這是我第一次理解交互設計的概念，而當我讀完以後，我才發現，其實我乾的一直都是交互設計的活兒。 在瞭解交互設計之前，作者拋出了一個問題，那就是——設計的目的是什麼？說實話，這在我第一次閱讀的時候，給了我很大的衝擊。我們在過去的工作中，可能大部分人對設計的工作內容的理解都是完成原型圖的設計，做出高端大氣的頁面，精緻的圖標等等，但你可能很少去思考，設計的目的是什麼？ 作者舉了一個很經典的案例。在二戰時期爲英國空軍立下汗馬功勞的蚊式轟炸機，看上去很不起眼，甚至有點醜。但是當時這個飛機的英國設計師，充分考慮了生產飛機的材料“鋁”非常匱乏，於是採用了木材代替鋁材，正是這個看上去不起眼的改變，擺脫了大型冶煉工廠和專業機械的限制，減少了戰略資源的消耗，降低了製造難度和成本。最終，這款“身輕如燕”的木製轟炸機出動近4萬架次，投下10多萬顆炸彈，僅有254架被擊落，平均每2000架次行動纔會損失1架，戰損率只有一般轟炸機的1/3。 這是一個充分體現設計學科特性的生動案例：設計有着強烈的目的性，而設計師需要考慮現實情況，在一定的限制條件下進行創作。這一點也使設計與藝術有了鮮明的區別。設計的目的是滿足需要，而藝術的目的是表達藝術家對世界的看法。 所以如果你們認真看大偵探的產品拆解報告，你們會發現我每次都會在用戶需求分析這個章節，反覆強調一句話——設計的本質是解決需求。 1.2 交互設計的定義 交互設計中“交互”一詞，英文是interaction，其中inter是“互相”的意思，action就是“行動”，所以interaction直觀上解釋就是“互相的行動”，也就是主體行動一下，客體再行動一下，彼此往復，你來我往 交互設計之父艾倫·庫伯在其經典著作《About Face 4：交互設計精髓》裏對交互設計如此定義——交互設計是設計可互動的數字產品、環境、系統和服務的實踐。這個定義其實有點難理解，不是很具象，但這個定義告訴我們，交互設計覆蓋了很多領域，它和很多設計都有重疊，交集。作者他也整理了一個圖，從這個圖裏我們對交互設計會有更直觀的瞭解。 其次，作者舉了一個很接地氣的例子告訴我們交互設計是什麼。那就是我們大家無比熟悉的銀行ATM取款機。你有注意過嗎，當你去取款的時候，這個流程是非常直觀的。插卡、輸入密碼、選擇取錢、輸入金額，等待出鈔，取卡結束。這就是一個完整的ATM取現流程，這就是交互設計，它是有流程的，有動作的，需要用戶和機器一起協作完成的。 1.3 交互設計的能力模型 在傳統的互聯網產品開發流程中，交互設計處於產品需求和界面設計的中間。大家對他的理解呢，一般都是畫原型，畫線稿。但事實上畫原型只是交互設計師的一小部分工作，和產品經理分析、挖掘需求，制定產品的規劃，跟隨產品整個生命週期的設計，以及驗收最終的產品研發，纔是交互設計師真正的工作。我個人認爲，交互設計師是需求的設計翻譯官，把產品需求通過設計軟件繪製出來，從而讓產品、研發理解，最終上線給用戶使用，他就是這樣一個非常重要的角色。 交互設計師需要掌握什麼能力？作者整理了9個必備技能，分別是場景思維、用戶習慣和心智模型、設計目標、競品分析、流程設計、設計原則、設計規範、原型製作和可用性測試。這9個技能，其實也是本書的核心內容，我們在後面會慢慢講解。其次大家可以通過這個模型來作爲交互學習參考的工具，比如你現在只能畫原型，那麼你需要培養場景思維、學習競品分析，這樣你就能擁有了一個學習階梯，不斷提升自己實力。 1.4 互聯網大公司對交互設計師的要求 這一節其實挺有意思，作者他分析了阿里巴巴、騰訊、網易等大廠的20多個交互設計師招聘崗位。從崗位描述和崗位需求的分析，他如此總結道： 對於初級設計師，主要要求設計師能夠對某個功能做出合理、有效的交互方案。對於高級甚至專家級設計師，則需要從更宏觀的角度對App的交互設計進行支持，例如設計策略的制訂、設計規範的制訂、框架的制訂、成員能力的提高等。無論何種情況，交互設計基礎知識都是設計師不斷成長的根基。 說到這裏，我想起小時候學打球的時候，體育老師的第一件事就是教你如何拍球。很多人覺得無聊，拍球誰不會啊。但你最後發現，真正打得好的球員一定基礎功非常紮實的球員，而做設計，也是同樣的道理。如果對設計的基礎知識毫無概念，對不起，未來你一定會被淘汰。 2、設計分析技能這是本書的最重要、最核心的部分，作者針對交互設計需要掌握的設計分析能力模型做了全面的介紹，其中有很多非常形象的案例，當你讀完，你就會發現交互設計無處不在，交互設計真的非常重要。 2.1 目標用戶和場景 “理解用戶的期望、需要、動機是進行設計的基礎準備工作，它爲設計方案指明前進的方向，奠定成功的基礎。”任何一個產品，如果我們忽略了用戶真實的需求，那麼最終這個產品就會導致無人用的窘境。這對於B端、SAAS的產品設計來說，體會更深。 用戶的痛點是什麼，我們的產品如何設計解決？如果對用戶的需求挖掘不夠深，那麼這很可能就是一個僞需求。作者提供了一個製作用戶畫像的步驟，非常實用，你可以按照調查用戶、尋找關鍵變量、數據歸類的方式，最終形成一個清晰的用戶畫像。 作者分享了一個描述場景的公式，這是一個非常有價值的知識點。通過這個公式，在以後做用戶調研、產品分析的時候，我們可以直接套用，它可以幫你把用戶的使用場景描述得很清晰。 “場景=特定類型的用戶（Who）在某時間（When），某地點（Where），周圍出現了某些事物時（With What），萌發了某種需求（Desire），會想到通過某種手段（Method）來滿足需求。” 舉個簡單的例子：知生（用戶）在週五晚上（時間），在自己的臥室（地點），收到了設計大偵探直播的公告（出現某物），發現今天分享的是一直困擾他如何設計作品集的難題（需求），於是打開電腦（手段）進入直播間進行收聽。 最後作者還分享了用戶體驗地圖和用戶場景地圖的製作，這是對這兩種展示模型非常詳細的介紹，需要各位去細讀。 2.2 心智模型 心智模型是指一個人對某事物運作方式的思維過程，即一個人對世界的理解。 怎麼來理解心智呢，比如你在頂樓按電梯的時候，你會按好幾下，彷彿這樣電梯會上來的更快；再比如，你在瀏覽某個產品的時候，你發現有相機的圖標你就會下意識的明白他可以上傳拍照或者上傳圖片；還有像音樂產品的播放器頁，他們會設計成一個黑膠唱片的風格，讓用戶從聽覺和視覺都有沉浸式的體驗。 分衆傳媒創始人江南春有本書叫《搶佔心智》，他在那本書裏這樣解釋心智——只有擁有了人心，佔據了用戶的心智，品牌才能夠長盛不衰。我對本章心智模型的理解就是對用戶需求的挖掘。他們關心什麼、喜歡什麼、習慣什麼，如果你不去深入挖掘、研究，那麼你的設計就很有可能讓用戶不理解，成爲了自嗨型的設計。 網易雲音樂的負責人王詩沐曾經在《幕後產品》裏發表過這麼一個觀點——產品設計最忌諱的是隻瞭解自己熟悉領域的用戶，而對其他用戶羣視而不見。如果你不研究年輕用戶喜歡的二次元、娛樂時尚圈還有城鄉接合部的流行文化，那你很難體會到大衆用戶的需求。所以研究用戶，就是一個很大、需要長期持續性堅持的工作。 2.3 設計目標 我不知道你們有沒有這種感覺，當你沒有學習目標時候，你會焦頭爛額，不知道學什麼，怎麼學，即便你在BAT，你也會煩惱如何提升自己。但是當你有清晰的學習目標時候，哪怕公司再小，工資再低，你也會有非常強的動力。其實我們做設計，也是這樣的。 作爲設計師，想要解決問題、滿足需要，首先需要明確問題是什麼，而確立設計目標就是在設計之初，把要解決的問題用設計目標的形式確立下來。 設計目標又分爲產品目標和用戶目標，產品目標是從業務的角度出發，根據業務需求歸納得出的對需求的期望效果。用戶目標是設計師對用戶在使用某個功能時，希望滿足的需要的總結。 我早些年做商業設計的時候，沒有設計目標這意識，只關心甲方有多少錢，然後我能做多少事。但隨着競爭越來越大，客戶的選擇越來越多，你會發現，大家打出來的口號都是“幫助客戶成功”。而在分析客戶需求時候，幫助客戶梳理好業務目標特別重要。他的產品在生命週期的哪個階段，有多少預算，MVP版本需要達到什麼效果，只有設定好設計目標，項目才能推進。而且不同的設計目標，設計方案也會不一致。 2.4 競品分析 我相信任何設計師在做設計的時候，對競品的調研都是必不可少的步驟。說難聽點，大家都需要學會如何去“抄”，但這個“抄”不是讓你生搬硬套把別人的東西直接搬過來，而是從其他優秀產品身上取長補短。競品分析最大的作用，就是幫助我們，通過調研、拆解、分析去獲取優秀產品的設計經驗。如果你對順豐的拆解還有印象，我當時整理了一個快遞行業的產品功能圖譜，其實那就屬於競品分析的一個方法。 作者提供了三個常見的競品分析方法，對每個方法都做了詳細的介紹，各位只要花點時間，認真讀一下，就能輕鬆上手。張再旺老師寫過有一本書叫《有效競品分析》，那本書裏總結了很多競品分析的方法，後面我會分享，讓大家全面瞭解和提升競品分析的能力。 3、原型製作技能 3.1 設計流程 其實現在越來越多的UI設計師在關注B端，轉型到B端。其實做好B端的設計，核心的關鍵點就是要了解業務流程。比如一個醫療ERP，他的用戶角色有幾類，當用戶從前端提交報告，這個訂單如何流轉，後端怎麼分配，這就是業務流程。 作者總結了一個畫流程圖的萬能公式：發現→瞭解→操作→跟進。其實我自己並不擅長畫流程圖，但是通過這個公式，我發現降低了我的學習成本，對流程圖的繪製更清晰了。對流程圖的繪製工具，有Axure、Process On等專業工具，但其實我會直接使用Sketch等設計軟件直接上手，記住，工具不重要，掌握繪製流程圖的方法，以及看懂一個產品的業務流程是最重要的。 3.2 設計原則 這一章所分享的設計原則，其實和我們上次分享的《UI設計那些事兒》的12個設計基礎理論特別像。無論你是做UI設計還是交互設計，你的設計一定要遵循設計原則。 比如一致性，這就是要保證整個產品的設計統一，爲什麼我們要建立文本樣式、顏色樣式？這就是保證整個設計樣式統一的基礎。 再比如容錯性，爲什麼註冊的按鈕在你沒有輸入手機號碼的時候是置灰的，它就是通過這個細節告訴你，這個時候是不能點擊的。再比如你在支付寶輸入一個數字，它就會提示你是不是要轉賬，這就是預判用戶的預判，提醒用戶。 最後作者還提到羅賓·威廉姆斯的《寫給大家看的設計書》，我覺得這本書真的值得所有產品設計師的朋友觀看，哪怕你不做設計，但你掌握了最基礎的設計原則真的對你非常有幫助。 3.3 設計規範 設計規範這個章節，作者介紹了谷歌和蘋果各種常用的控件的使用方法，比如提示框、警告框、搜索、滑動器等等。這個部分偏實戰操作，需要細讀，大家可以當做一本詞典使用，在工作中隨時翻閱。 3.4 原型製作 我現在對交互原型有一個新的理解，那就是——對業務需求的設計翻譯。我特別喜歡做從0到1的產品，特別是在完成需求分析、確立好設計目標以後，我覺得那個時候去做交互設計真的很享受，你就是這個產品的創造者，它的功能怎麼實現，怎麼和用戶互動，完全是交互設計師去設計。 我認爲，原型設計這個環節，真的特別重要。有些項目，如果交互設計師有經驗，完全可以降低開發、運營的成本，降低產品的失敗率。所以如果越想節約成本的外包或者產品公司，一定要找一個經驗豐富的交互設計師，他可以幫你把產品開發週期、運營成本考慮進去。 3.5 可用性測試 在讀這個章節的時候，其實之前有個問題一直困擾着我。在我們開發自己SAAS產品的時候，我發現測試這個環節的工作量真的特別大。而且由於不同的人的理解能力不同，很多細節我的同事幾乎看不到，所以當我來體驗產品的時候我非常抓狂，爲什麼這麼弱智的BUG沒有發現，爲什麼這個功能被忽略了。那是我第一次重新認識測試的重要性。 對於交互設計師來說，千萬不要以爲只是把設計做好就結束了。一個優秀、合格的設計師，一定要跟隨這個產品的全生命週期研發，而且尤其要參與到可用性測試環節裏面。雖然有些公司有專門的測試工程師，但是作爲產品的設計者，有很多很多細節，只有交互設計師才能清楚。 作者在這個章節爲我們詳細介紹了可用性測試的方法，我讀完以後，對我真的很有啓發。我在隨後的醫療項目設計中，就借鑑了他的很多方法，製作測試原型、撰寫測試腳本等。 二、寫在後面的話 我提倡以學以致用的方法去讀書，那就是帶着問題去讀書，或者把讀書的收穫用來解決你當下的困惑，這樣纔不會因爲書本的篇幅過長或晦澀而無法堅持。 我之所以選擇《步步爲贏》這本書來分享學習交互設計，除了這本書的學習模型非常實用，還有一個原因是當我去讀這本書的時候，我閱讀起來真的非常輕鬆。整本書的內容、結構以及文筆的風格，都很容易看進去，由淺及深的方式，能讓我快速的對交互設計有全面的瞭解。所以這本書真的非常適合平時一提起讀書就毛骨悚然，但又很想學習提升的朋友。 如果你是一個傳統的UI設計師，從今天起，不要去等產品或交互的原型，你要走向前去，看看他們如何討論、分析需求，然後套用這個設計分析能力模型去思考，我們的產品是目標用戶是誰，在什麼場景使用，最後再應用到界面設計上。 如果你已經是一個交互設計師，那麼你可以查缺補漏，看看自己所掌握的知識模型，有沒有遺漏的，或者已經建立自己的方法論，那麼恭喜你，你已經是一個非常優秀的交互設計師。 如果你想製作一個設計作品集，那麼你完全可以利用本書的設計模型，從用戶分析到設計目標，從設計流程到原型製作，去把的設計思路、洞察、細節，“翻譯"給面試官、甲方。記住，再好的設計，如果缺乏深入的思考和有說服力的“翻譯”，它不會值錢。 董尚昊在本書的結尾，談到了設計師的自我修養，我個人非常認可。 “做設計是一個不斷學習、持續積累的過程，尤其是在迅速變化的互聯網行業。要爲自己工作，才能真正獲得成長，而當你持續成長的時候，你就會變得越來越值錢。” 如果你想學習提升，讀書，是這個時代最不需要花錢、成本最低的學習方式，而這本《步步爲贏》，分享給大家，希望你能有收穫！

交互設計入門書。有比較清晰的定義，具體設計步驟的大綱不是很清晰，略重複，需要自己梳理一遍。很多細節問題的處理上提供了思路，能吸取到不少經驗。 以下爲摘錄： 1. 交互設計師處理的就是用戶與這些關鍵節點的互動，讓用戶知道自己現在所處狀態、該做什麼、操作之後有何種效果這三種關鍵信息，輔助用戶完成任務。 2. 設計有兩個步驟。第一步：理解用戶的期望、需要、動機，並理解業務、技術和行業上的需求與限制。第二步：將這些知道的東西轉化爲對產品的規劃（或者產品本身），使產品的形式、內容和行爲變得有用、能用、令人嚮往，並且在經濟和技術上可行。 3. 做到準確理解用戶的期望、需要、動機，需要做到兩點：一是需要明確目標用戶是誰；二是需要運用場景的方法還原用戶的使用情景，以便更好地理解用戶的需要。 4. 場景=特定類型的用戶（Who）在某時間（When），某地點（Where），周圍出現了某些事物時（With What），萌發了某種需求（Desire），會想到通過某種手段（Method）來滿足需求。 5. 一個優秀的設計方案需要達到以下四項標準。①恰當的吸引力：功能入口的吸引力程度與功能的重要性成正比。②容易理解：用戶一看便知按鈕、元素等的狀態和可能的操作方法。③正確的表現模型：設計師需提供給用戶一個正確的概念模型，使操作鍵鈕的設計與操作結果保持一致。④反饋：用戶能夠接收到有關操作結果的完整的、持續的反饋信息。 6. 設計師可以通過這4個方向的問題，逐步瞭解需求的各個方面，並從中總結出需求的產品目標。這4個方向的問題是：①爲什麼會產生這樣的需求？需求是怎麼發現的？要解決怎樣的問題？目標是什麼？②業務方針對目標提出的（產品）解決方案是什麼？具體是怎麼想的？是否還有想要解決的問題沒想好方案的？③該業務經驗性的特點有哪些？是否有數據或報告？產品/品類特色是什麼？何種內容轉化率高、點擊率高？④業務後續規劃的藍圖是怎樣的？ 7. 在設計流程時的萬能公式：發現→瞭解→操作→跟進

感覺關於可用性測試的那個部分寫的不錯，還挺詳盡的。關於設計規範部分描述ios 和material design 關於模態適用場景差異也描述得不錯。還有關於部分用戶引導和發現的內容，如禁用狀態下用戶點擊操作其實也應該給予反饋。

前部分，分享互聯網從業經驗，重點講述了交互設計師的職責、職責輸出等。 後部分，拿iOS、Material Design設計規範，介紹了各種組件、控件。

墓誌銘：一個優秀的交互設計師，永遠是產品利益和用戶體驗的平衡者。 一、理清需求的方法論 * 需求的來源和目標 * 需求方的解決方案；有沒有待解決的問題還有麼有方案？ * 業務經驗和數據 * 業務藍圖 * 定位的主要目標用戶是誰，選取得是否合理，爲他們帶來的核心價值是什麼？爲公司帶來的核心價值是什麼 * 整個業務流程是怎麼樣？盈利模式是什麼 * 行業/市場情況怎麼樣？未來地區趨勢呢？ * 競爭對手是誰？我們跟競爭對手相比核心競爭力在哪裏？ * 核心策略方向是否真的有效？發力重點是否合理？ 二、總結一個在設計流程時的萬能公式： * 發現 > 瞭解 > 操作 > 跟進 三、優秀的設計方案需要滿足四個標準的萬能公式： * 恰當的吸引力：功能入口的西印度與功能的重要性成正比（發現） * 容易理解：用戶一看便知按鈕、元素等的狀態和可能的操作方法。（瞭解） * 正確的表現模型：設計師需要提供給用戶一個正確的概念模型，使操作鍵的設計與操作結果保持一致。（操作） * 反饋：用戶能夠接收到有關操作結果的完整、持續的反饋信息。（跟進） 四、交互設計師5個原則 * 一致性 * 容錯性 * 使用正確的符號 * 及時反饋 * 通用設計原則 五、可用性測試的7大步驟 * 測試前思考 * 製作測試原型 * 撰寫測試腳本：描述場景和任務及目標，滿意度調查 * 招募測試者 * 設置測試環境 * 預測試和正式測試 * 測試結果統計分析：任務操作時犯錯、任務完成情況記錄、任務完成時間記錄、任務完成路徑記錄這些收集後總結關鍵問題、重要問題、次要問題 六、撰寫可用性測試報告關鍵詞 * 背景介紹、測試方法、測試結果 七、如何展現設計思路？ * 項目介紹、目標用戶定義、場景分析、設計目標定義、競品分析、流程圖、交互方案、方案效果（通過數據/用戶反饋來說明） 八、交互設計師解決問題的常用方法 * 可用性測試、用戶體驗地圖、用戶訪談、數據分析。

讀完這本書的我此時正處在尋找實習工作，確定未來職業的時候，對於交互設計這個行業有着隱隱的喜歡但又有着很多不知所措。文中的很多經驗之談讓我對交互設計的認識清晰了不少，並且文中的案例也舉得很恰當生動。我十分贊同裏面的一個觀點，設計的目的是滿足需要，交互設計的意義就在於此，滿足用戶的需要。對我來說交互設計最難的一點是揣測用戶的心理，用合理的方案滿足用戶的需求。希望以後我能夠成爲一名合格的交互設計師，併爲了自己而工作，從工作中獲得成就感。在此謝謝作者。

這本書很細啊。美中不足是偏app端 如果有pc端例子就更好了

入門不該是投機取巧。全是拼湊過時的公衆號文章，看似面面俱到，實際全是不知所以然的所謂“通用方法”，我相信這樣的設計師和這樣的書都不會長久。

《步步爲贏》以前系統性學過ui，沒學過交互，因爲公司只有ui和產品，沒有交互設計師。所以，產品經理的原型文檔需要寫交互設計，這個是需要專門的時間去做設計，任何交互都是需要用心去做。比如導航，提示，彈窗，跳轉，按鈕，圖標，文字。b端也需要，像做c端產品一樣，多爲用戶思考，用戶少思考，dont make me think。對功能要剋制，less is more。