轉崗交互前，我做了哪些準備（上）

目錄

一、我為什麼要轉崗交互設計？

二、交互設計師的產出物是什麼？

三、我做了哪些準備？
階段一|紮根

階段二| 擴展

階段三| 破界

四、初級交互設計師要注意什麼？

相信被這個標題吸引進來的，大部分都是想學習或想轉崗交互設計的朋友，今天我借助文章的形式，來聊一聊我的親身經歷：如何從UI設計轉崗交互設計？這期間我的學習方法是怎樣的？

先摸一針雞血：去年通過“站酷”會經常輸出一些交互設計系列的文章，於是很多朋友加我微信問到“你是如何學習交互設計的？”、“從UI設計轉交互設計應該如何做啊，好迷茫~”等一系列問題，是的，我之前也被這些問題困擾著，直到大膽邁出那一步才知道行動是解決問題的根源，我一個草根UI設計師都能夠順利轉型（目前在世界500強企業擔任交互設計師），為什麼你不可以？

一、我為什麼要轉崗交互設計？

在資源有限的團隊中，一般是優秀的產品經理或UI設計師會重疊負責交互設計師的部分工作，但對於中大型的產品團隊而言，會將崗位職責細分更明確，所以交互設計師其實是連接產品經理、UI設計師和開發上下游的一個中間崗位，他是承上啟下、聚焦體驗的重要崗位，主要工作是分析需求、聚焦用戶體驗，將分散的文字需求，甚至是口頭需求，轉化為能讓用戶易用的產品界面，並研究用合適的設計手段，解決用戶更多使用中的問題點。

交互設計師的存在，就是為了給產品提供更合適的解決方案，權衡產品訴求和用戶訴求之間的關係，從中尋找設計的平衡點。如果說UI設計讓用戶知道產品是什麼，那交互設計就是讓用戶懂得做什麼、如何做。所以，它不會將全部的精力放在界面表現層上，而是探索更多方案的可行性，深入到框架層、架構層裡面，探索產品/界面/場景/用戶/設備/系統六者之間的關係。

正因如此，我不想把所有的腦細胞都消耗在像素、顏色、圖標上，不想一直處於被動研究方案的位置，不想處於一個積極的方案接收者，我想主動挖掘用戶場景和痛點、想成為一個方案製定者、想更緊密的將產品和用戶鏈接起來。純UI的時代已經過去，如果我不花時間去轉型，幾年後我可能就是一個只會擼擼皮膚的“小美工”。

看到這有人會說，UI設計也可以推動方案、創造價值呀，是的，這點我非常贊同，也沒有說UI設計哪裡不好，可能是我做的不夠優秀吧，我身邊也有很多朋友是UI領域的專家，從他們身上我看到了“任何一個領域只要你肯花時間去沉澱，都會做的非常優秀”的案例，而我就是不願意在UI上展現自己的精神小伙~

另外交互設計是一門多元學科，它能倒逼著我去接觸未知領域，這也非常符合自己喜歡探索的性格，同時我也是一個把溝通和分享當作樂趣的人，自我度量一番後，發現交互崗相比UI崗更適合自己去深耕。有了這2大刺激點之後，我才開始尋找學習交互設計的途徑，而不是盲目跟風。寫到這裡我還是本著負責任的態度囉嗦一句，避免那些不適合的人說被這篇文章誤導了：無論是轉行還是轉崗，一定要先了解清楚將來要做的事情適不適合自己，有沒有自律能力去鑽研，三思而後行，不要聽風就是雨。

中途我也嘗試過報一些網課，久而久之發現他們講的都是概念化、工具化的東西，總不可能會畫個原型圖，會用Axure連個線，知道交互設計的工作流程，就能說自己是交互設計師了吧，裡面必然有一些方法、思維、理論是需要自己花時間去沉澱和梳理的，而網課只能帶你入門、幫助你造就輪廓，但成就不了你的深度學習，恰好這些核心的東西就是自身能力和今後工作中的根基。

二、交互設計師的產出物是什麼？

最早我對“交互設計要幹什麼”有一個眾所周知的誤解：

1.整一套超級炫酷的動效，學習交互動效將是我淫生的目標；

2.做一套差異化的界面，我為自己代言；

3.用最短的頁面流程或最少的點擊次數來衡量這個方案好與壞；

4.做交互設計終於可以不用在乎高保真了，愛誰誰；

...

我相信這種錯誤的認知很多朋友都經歷過，這是扭曲了對交互設計的理解，交互設計是產品流程和結構的設計，所有的工作內容都是圍繞用戶行為去設計的，讓用戶更方便、更有效率的去完成目標任務，並獲得愉快的用戶體驗，除了屏幕上的交互設計外，還有語音交互、手勢交互等（本文僅涉及屏幕交互）。作為一名交互設計師，首先要知道如何表達設計方案，在實際項目中，交互設計師是一位富有邏輯性的表達角色，除了在評審和溝通之外，產出物就是表達方案最有力的“語言”，它們是思考結果的載體，承載著設計師的想法和方案，通常以文檔的形式輸出，下面就羅列一些常見的產出物（僅供參考，畢竟每個公司的用人要求不一樣）：

交互設計文檔：交互設計文檔（DRD）是交互設計師的重要產出物，主要用於承載詳細的設計方案，完整併規範的文檔能體現出設計師的基本功和專業能力，也能幫助你屢清楚設計思路、沉澱項目經驗。交互說明文檔主要傳遞給產品團隊的上下游人員：產品經理、UI設計師、開發、測試，有的還需要交付給甲方，甚至是匯報給領導，比如我之前的上級會不定期抽查各設計師的交互文檔，檢查文檔是否規範、方案描述是否詳細等。一份詳細的交互說明文檔包含了：封面、更新日誌、文檔圖例、設計思路、原型圖、流程圖、交互說明、信息/功能架構、組件規範。

競品分析報告：競品分析就是對競爭對手的產品進行分析，交互設計師在產品團隊中，一般是對同類產品把玩最多的人，是帶著研究目的去把玩的，因此會定期輸出競品分析報告同步給產品團隊，為今後的迭代內容沉澱一份依據，同時也能培養設計師對產品的分析能力。競品分析隨時都可以做，只不過深度和廣度不一樣而已，可以做一份全面的報告用於熟悉產品、推動優化，也可以在設計中進行碎片化的分析，事後整理成文檔，比如這次迭代要優化支付流程，就可以先拿其他產品的支付流程進行對比，吸取他們的優點做成自己的方案。

產品體驗報告：產品體驗報告是體驗者在深入了解某個產品的商業模式、目標用戶、使用場景、市場現狀、產品功能、交互體驗以及視覺風格後，全方位總結出來的圖文報告，這裡的“體驗者”可以是運營、產品、交互、UI、開發等產品相關人員，但還是非常建議交互設計師主動去做，因為它能幫助你快速了解你所負責產品的“血、肉、骨、膚”，它可以結合競品分析一起輸出。

用研類文檔：如果產品設計不以用戶為核心，一味解決產品訴求，那麼很難做出優秀的用戶體驗，好的產品能夠滿足用戶需求並不斷尋找新的用戶場景，設計師的職責就是定義並設計產品，是權衡產品訴求和用戶訴求的角色，也就是說需要滿足產品目標，同樣也要考慮用戶體驗，產品目標很好理解，即產品需要通過這個功能or產品完成什麼指標，而用戶體驗則需要將注意力聚焦在用戶研究上，否則可能會為了自己而設計，這種強烈的主觀意識很難保證決策是否正確，因此交互設計師一般會參與甚至組織用戶調研，然後將調研的結果整理成文檔傳遞給產品團隊，常見的用研工具有：用戶訪談、問卷調查、數據分析、A/B測試、可用性測試、用戶體驗地圖、桌面研究等

測試驗收類文檔：測試類文檔主要體現在設計驗收和設計自查。設計驗收即迭代發布前的設計走查，一是功能測試，檢驗產品的功能和流程是否按交互稿實現，功能是否異常，我常用的做法是為功能和流程編寫測試用例，因此會產出“測試用例文檔”，協助測試人員完成發布前的把關，一起享受給開發提BUG的快感。

二是界面測試，也可以叫視覺走查，主要是對產品每個頁面、狀態進行UI還原度的排查，將實現出來的版本與高保真進行對比，這塊主要還是UI設計師去做，交互設計師也可以協助完成，畢竟表現層也是用戶體驗中至關重要的一層，產出物一般是“視覺驗收清單”。設計驗收方面的文檔主要基於公司的協作流程來評定是否需要，比如有的直接將問題轉成JIRA單等，就可以省略出文檔這一步。而設計自查就是“交互自查表”，根據自查表裡的場景和狀態，在正式開發之前對設計稿進行問題排查，避免有遺漏的狀態或流程。

數據追踪：關注數據不僅僅是產品經理或運營人員的“專利”，作為交互設計師也需要掌握這方面的基本技能（線框仔除外），通過數據來幫助我們產出更貼近用戶行為的設計，它可以監測產品迭代中的問題點，從而找到設計點，也可以為後續的產品迭代提供方向和參考，對於平時不關注數據的設計師來說，經常在出方案時專注於表現層的優化，而忽略了真實的用戶行為，所以設計師關注用戶行為不僅能夠驗證設計結果，還能對產品體驗不斷打磨，精細化提升用戶體驗。獲取一些常用的行為數據可以通過第三方監測平台接入，還可以將你想監測的數據統計到“用戶行為統計表”上，然後讓開發同學跟隨迭代一起埋進去，最後再根據回傳的數據進行數據分析，相應的產出分析報告。

建立規範：一是設計規範，這關乎到多方協同和工作效率的問題，0到1的C端產品可以先參考iOS和MD的設計規範，後續再與UI設計師、前端同學共同製定自家產品的規範，甚至是建立設計系統，包括像Vant這類的移動端規範都可以參考。而B端產品可沿用ant、element的設計規範，這些都是非常成熟的規範了，如果仍然無法滿足業務，則單獨出一套規範讓前端封裝。

二是製作一套自己的元件庫，將元素組件化，方便後期調用，完整的元件庫能大大減少不必要的設計成本，將重點放在設計方案和對用戶的思考上，而不是在原型圖上扣像素，假設一個頁面的元件覆蓋率有80%以上，那繪製整套原型能節約多少時間？答案顯而易見。

其他：除了上面常見的產出物以外，還有一些也會涉及到，具體要看公司對崗位的要求，比如有的崗位要求製作高保真原型、匯報用的高質量可交互demo、評審記錄、設計計劃、動效說明、其他文檔等（畢竟打工仔是跟隨環境發生變化的）。

三、我做了哪些準備？

之前看過一些非常細緻的交互設計知識樹，發現上面有很多“抽象”的點，比如溝通能力、學習心態、探索心態...emmmm，這些確實是設計師的軟實力，但這種能力一般都是通過經歷、項目、性格或刻意練習等方面沉澱下來的，不是說看幾篇文章就可以入門了，所以我下面就不談這些抽象的軟實力，展開聊一聊我實踐過並嚐到甜頭的學習方法，如果覺得對你有幫助，完全可以拿它們做成你自己的知識樹，然後逐個攻破：

階段一|紮根

1.死皮賴臉去問問問

我很感謝在轉交互崗前期階段的那位同桌，他是設計領域的前輩，在交互設計方面的認知和思維一直吸引著我，可以說是我的引路人，記得當時我剛入行沒幾年，正是學習勁頭非常飢渴的時候，下決心轉崗交互後，就一直厚著臉皮去做這件事，每次擼完高保真都會轉過頭找他討論一番，琢磨他的觀點和思維方式，大到整個設計流程的討論，小到一個組件的使用，業餘也會主動粘著他聊聊交互設計和對產品的看法，雖然期間有些問題我心裡有答案，但還是想听聽別人的看法，於是裝模作樣的拋出幾個問題和對方溝通，事後就是一杯奶茶一頓飯草草了事，因為急忙回家要把今天學到的東西記到小本本上（手寫，易消化），那段時間睡覺時，腦子裡還在做筆記，這種狀態持續了有整整大半年，這些思維也成為了後面進階學習的基礎。如果大家身邊有這類願意分享的同事，真的會事半功倍，願你珍惜，倘若無緣也沒關係，只要你肯邁入這個圈子，線上也有很多前輩、大佬，這些都是你學習的資源。另外，我並不是完全借助他人順利轉型的，最關鍵的還是要自律學習、深度思考（接著往下看就明白了）。

2.給腦瓜子強行注入設計思維

（1）靜下心來“吃”書

記得之前面試過一位設計師，我問他“最近在看什麼書”，他回答“平時不看書，更喜歡看社區或公眾號裡的文章”，因為他感覺信息更新太快了，可以隨時隨地通過搜索找到自己想要的東西，而看書很慢，不是一個效率的學習方式。事後我還是不明白到底是社會變浮躁了？還是設計師太心急了？社區和公眾號裡碎片化的文章的確也是一種非常高效的學習方式，但它們更多是解決你及時性的問題，起到補充或輔助你認知的作用，不能形成整套的設計體系和思維，而書籍都是前輩們將碎片化的知識和項目經驗梳理成一套完整的設計理論，白嫖的東西你不要？所以非常建議設計師通過書籍+碎片化文章的組合方式來學習，而不是投機打靶。

沉澱知識才能在將來高強度的工作中，幫助我們用最短的時間做最合理的決定，“吃”書，才能建立起自己獨有的思維模式。產品設計、用戶體驗類的書籍有很多都值得我們細細品嚐，如果你能把其中一本書反复閱讀，吃透裡面的知識體系，這也是一件很可怕的事。

（2）讀懂並運用主流的設計原則

在交互設計領域有很多經過時間檢驗過的定律來作為設計的指導原則，他能夠幫助交互設計師發現產品中的易用性問題，還可以根據這些原則從設計的角度提升用戶滿意度。交互設計師在製定方案的過程中會經歷非常多的決策階段，大到一個功能流程的閉環設計，小到思考一個元素的最合理佈局，在這些場景中，我們首選的解決方案當然是更適合當前功能特性和使用場景的方案，如果沒有合適的方案或者在幾種方案面前猶豫不決時，一般都會選擇遵守設計規則和接近設計規則的那個方案，這些所謂的規則也是交互設計師必須掌握的基本思考方式，相當於我們日常生活中的“常識”，你不得不學。

設計原則有很多，甚至有相通的地方，下面就列舉一些主流的設計原則供大家學習：人機交互五大原則、WEB界面設計六大原則、交互設計七大定律、尼爾森十大可用性原則、格式塔原理、無障礙設計、微信小程序設計原則、Ant Design設計原則、iOS設計原則、Material Design設計原則等。

（3）掌握常見的設計方法論

設計方法論即設計師在出方案時，利用某種方法為我們提供明確的框架與步驟，也就是所謂的“套路”，我們都知道設計方案要做到有理有據，不能憑空想像，所以方法論也是設計師產出方案時的一大利器，但也是一柄雙刃劍，在提供思路的同時也會約束我們的創新，所以靈活應用方法論，把它們變成適合自己的一套“兵器”，是成為資深設計師的必經之路。

設計的細分領域很廣，每個領域都有不同的方法論，並非所有的“套路”都適用於你經手的項目，這裡列舉一些常見的方法論：SWOT分析法、5W1H分析法、交互設計四策略、四象限法則、雙鑽模型、KANO模型、用戶增長模型、成癮模型、情緒版、用戶體驗旅程圖、可用性測試、卡片分類等。

3.熟悉各端組件庫和設計規範

產品結構是由一個個功能點組成，完成這些功能點是靠用戶流程，而用戶流程又由各個頁面支撐著，最後的頁面才由各種組件和元素構成，因此組件的使用對於交互設計師來說是必須掌握的技能，一個合適的組件能夠提直接影響用戶的使用感受，並且能為將來整個設計規範的打造也有著代表意義，甚至一個合適的組件能夠提高關鍵流程的轉化率。什麼場景用什麼樣組件？這些組件的利弊分別是什麼？各端組件有著什麼樣的差異？這個組件對承載業務的延展性如何？前端擴展該組件的落地成本高不高？面對一個設計點，你能想到幾種可以使用的組件？有沒有合適的方案？比如組件與組件之間的交互關係等，這些都應該是設計師出方案時要考慮的事情。

市面上有很多成熟的組件庫和設計規範可以供設計師和開發調用，比如Ant Design、element UI、Vant等，但不能因為有現成的東西你就不去研究它，這就是拿來即用，久而久之設計師變成了“搬運工”。當你去思考這些組件之間的交互關係和設計規範時，別只顧著看樣式，而要將前面說的設計思維和理論套進去，甚至還可以將對組件的研究整理成學習筆記，加深對它們的印象。

4.項目中主動培養流程思維、場景思維

“起初做UI設計時，接到原型方案後立馬就開始動手，原型有哪些頁面，高保真就出哪幾個頁面，從來不會思考這個方案是由什麼引發的？整個頁面流是如何跑通的？真實的使用場景有哪些？前端與後台的交互流程是怎樣的？”，這是初級設計師經常忽略的點。如果你的思考範圍只停留現在單個頁面或某個元素的美化上，對整套原型方案沒有自己的看法，那瓶頸永遠都無法突破，因為你只是依葫蘆畫瓢的上色、擼圖標，這就是為什麼很多設計師只停留在執行層面，但還整天抱怨公司不給機會的原因，想往交互設計師轉崗、或晉升高級設計師，就必須突破這樣的局面。

流程思維和場景思維是可以利用實際項目做刻意練習的，比如今天你接到一個註冊登錄的原型流，這時你就可以縱觀整個流程，同理心思考有沒有遺漏的場景或關鍵節點，為什麼要這樣設計等等，然後重新去梳理自己的一套流程。在功能交互上，刻意去畫流程圖，養成畫流程圖的習慣，因為這個工具能有效的幫助你梳理頁面邏輯和功能邏輯，也是產品經理和交互設計師的必備技能，方案評審時，拿出2套設計方案，一套是你上游給你的思路，另一套是你自己梳理的思路，即便沒採用你的方案也沒關係，試錯就是成長。我當初轉崗交互設計的前一年，基本每次迭代都會刻意去畫流程圖和線框圖，用來思考不同方案的可行性，久而久之，產品經理接到的一些需求就直接丟給我全盤梳理（實踐是靠自己爭取的）。

5.定期進行產品賞析，將上面說的幾點融入到研究過程中

要說如何提高設計眼界，最好的辦法就是去欣賞作品，做UI設計時為了塑形審美能力，每天會看大量的設計作品並按分類收藏起來，而交互設計師不止要欣賞產品的視覺方面，更需要了解產品邏輯和功能體驗，所以需要你親手去感受這個產品的內在和外在，另外，產品賞析可以很好的鍛煉設計師的分析能力，幫助你今後做產品改版。我的做法是每周至少挑選2個優秀的產品上手“把玩”，最好是競品或者同領域的產品，這樣能直接幫助到你做項目。 “把玩”是有目的性的，比如剖析某個產品的功能流程和交互體驗，把你覺得有趣的設計點記錄下來，再寫上一段自己的總結或建議，如果你有不同的方案也可以畫線框圖或流程圖做深度研究，甚至可以把2個競品放在一起審視，分析他們的流程為什麼做的不一樣，反復問自己“為什麼”，漸漸的你就能從產品的表面解析到產品的業務。

更自律的做法是主動給自己佈置作業，比如本週內要找到10個能超越用戶預期的設計點，可以是一個流程，也可以是一個頁面或微交互。自律性差的同學選擇加入一些研究產品體驗的打卡群也是非常不錯的，通過外部環境監督你。當有了這些思考和產出後，建議整理成筆記分享出去討論，也聽聽別人的讚美和吐槽，因為這些能逼著你繼續思考，否則就是閉門造車。

6.嘗試輸出設計改版，養成項目复盤的好習慣

前面有提到設計思維、組件庫、設計規範、流程圖和產品賞析，下面就可以利用前面所沉澱的基礎來嘗試做一些設計改版，先從優化一個頁面的佈局、控件和信息架構開始，再逐漸深入到一個功能流程、大模塊，最後到整個產品的體驗改版，這裡的改版就不要再沉迷於視覺表現層了，也不要扣像素，而是把心思放在輸出原型方案上，重點思考你的方案如何更好的滿足用戶需求。改版的素材來源有很多，一是前面提到的產品賞析，把你認為不合理的設計點嘗試優化。

二是公司項目的改版，因為實際上線的方案都是以商業為目的，可能當時我們有更好的想法，但是由於種種原因導致無法落地，不過事後可以抽出時間將你的想法做成交互原型，順便把本次迭代的東西复盤，這是沉澱項目最好的方式。在改版過程中，腦瓜子會臨時蹦出很多問題，甚至對方案的選擇特別糾結，這正好利用前面講到的理論來衡量它們。交互設計是一個實踐性很強的專業，行動會激發思考，也會逼著你去尋找答案，這其實就是一個理論+實踐的學習過程。最後將你改版的方案仔細整理成一份完整的交互設計文檔，改版前的設計也可以放進去做對比，將它們一起發出去討論，讓前輩或同事幫忙提出建設性的問題（臉皮厚一點，學到都是你自己的，實在不行知識付費也不為過）。

7.走出去，看看別人的思考方式和成果

上面說到的準備工作，你專注行動幾個月後，就會具備一定的思考能力和動手能力，但在這期間大部分都是閉關修煉，所以還是需要你“走出去看看”，比如參加線上線下的公開課、分享會，甚至是加入一個學習氛圍好的星球、討論小組等等，去看看別人的思考方式和設計成果是怎樣的，從中取長補短，還可以適當接觸一些產品設計、服務設計、行為設計、用戶心理類的知識點，盡量多拓展自己的思維邊界，不要只迷戀於屏幕上的思考，畢竟交互設計中有很多場景是來源於生活的。

8.掌握主流設計工具

市面上的設計工具五花八門，每個人的使用習慣也不一樣，沒必要浪費時間在裡面挑來挑去，輸出物的質量才是關鍵。所以我們對工具的學習，圍繞2個原則即可，一是掌握主流的設計工具，因為大部分人都在用，主流工具學會了，其他工具上手也是相通的。二是掌握現有團隊在用的，工具的作用就是提高個人產出效率和團隊協作效率，根據團隊的要求去掌握相關工具。下面羅列一些我常用的工具：

• 筆+紙

我一直認為筆和紙是設計師最好的朋友，在正式輸出原型前，我很喜歡帶著筆和紙去溝通需求，因為它們能讓設計師在短時間內“敏捷式腦暴”、快速輸出想法、低成本試錯（塗塗改改又重做）。

• 原型工具：Axure、Sketch

Axure一直是主流的原型工具，也是我最早接觸的第一款原型工具，裡面調用元件庫、畫流程圖，用於輸出交互文檔，導出超鏈接、html、word都非常方便，雖然現在很多工具能夠在交互演示方面替代它，但因為使用的人很多，所以也捨不得刪除；

Sketch的定位雖然是“專業的UI設計軟件”，保留它的主要原因是能夠無縫搭配Flinto或Principle來幫助我輸出高保真演示稿，另外裡面強大的第三方插件和組件庫能夠拉近我和UI設計師的“生活距離”。

• 動效工具：Flinto或Principle

這2款工具是我從事UI設計時就掌握的軟件，最大的特點就是交互動效還原度極高，可以同步到手機上預覽，感受真實的交互效果，在方案評審時，省去了很多文字描述，把落地想法傳遞給前端同學也非常直觀。

• 演示匯報工具：Keynote或PowerPoint

ppt一直是互聯網人不可缺少的技能，除了平時的分享會、方案匯報、項目复盤、述職等場景經常用到之外，它還可以用於實現交互動畫，撰寫用研報告、體驗報告、競品分析報告等。

關注我，持續更新中...

由於文章篇幅過長，會分為上下2個部分敞開聊，本次主要分享了我轉崗的初衷、產出物以及如何“打基礎”，下半部分會繼續通過“站酷”來分享，主要圍繞技能擴展、破界成長和初級交互設計師的注意事項去分享，裡面涉及了用研、總結方法和我的衷心建議。

希望對你有所幫助，聽說點贊+收藏+關注是一條龍服務~