相信被這個(gè)標(biāo)題吸引進(jìn)來(lái)的，大部分都是想學(xué)習(xí)或想轉(zhuǎn)崗交互設(shè)計(jì)的朋友，今天我借助文章的形式，來(lái)聊一聊我的親身經(jīng)歷：如何從UI設(shè)計(jì)轉(zhuǎn)崗交互設(shè)計(jì)？這期間我的學(xué)習(xí)方法是怎樣的？

先摸一針雞血：去年通過(guò)公眾號(hào)會(huì)經(jīng)常輸出一些交互設(shè)計(jì)系列的文章，于是很多朋友加我微信問(wèn)到“你是如何學(xué)習(xí)交互設(shè)計(jì)的？”、“從UI設(shè)計(jì)轉(zhuǎn)交互設(shè)計(jì)應(yīng)該如何做啊，好迷茫~”等一系列問(wèn)題，是的，我之前也被這些問(wèn)題困擾著，直到大膽邁出那一步才知道行動(dòng)是解決問(wèn)題的根源，我一個(gè)草根UI設(shè)計(jì)師都能夠順利轉(zhuǎn)型（目前在世界500強(qiáng)企業(yè)擔(dān)任交互設(shè)計(jì)師），為什么你不可以？

目錄：

一、我為什么要轉(zhuǎn)崗交互設(shè)計(jì)？

二、交互設(shè)計(jì)師的產(chǎn)出物是什么？

三、我做了哪些準(zhǔn)備？

階段一 | 扎根

階段二 | 擴(kuò)展

階段三 | 破界

四、初級(jí)交互設(shè)計(jì)師要注意什么？

一、我為什么要轉(zhuǎn)崗交互設(shè)計(jì)？

在資源有限的團(tuán)隊(duì)中，一般是優(yōu)秀的產(chǎn)品經(jīng)理或UI設(shè)計(jì)師會(huì)重疊負(fù)責(zé)交互設(shè)計(jì)師的部分工作，但對(duì)于中大型的產(chǎn)品團(tuán)隊(duì)而言，會(huì)將崗位職責(zé)細(xì)分更明確。所以交互設(shè)計(jì)師其實(shí)是連接產(chǎn)品經(jīng)理、UI設(shè)計(jì)師和開(kāi)發(fā)上下游的一個(gè)中間崗位，他是承上啟下、聚焦體驗(yàn)的重要崗位。主要工作是分析需求、聚焦用戶(hù)體驗(yàn)，將分散的文字需求，甚至是口頭需求，轉(zhuǎn)化為能讓用戶(hù)易用的產(chǎn)品界面，并研究用合適的設(shè)計(jì)手段，解決用戶(hù)更多使用中的問(wèn)題點(diǎn)。

交互設(shè)計(jì)師的存在，就是為了給產(chǎn)品提供更合適的解決方案，權(quán)衡產(chǎn)品訴求和用戶(hù)訴求之間的關(guān)系，從中尋找設(shè)計(jì)的平衡點(diǎn)。如果說(shuō)UI設(shè)計(jì)讓用戶(hù)知道產(chǎn)品是什么，那交互設(shè)計(jì)就是讓用戶(hù)懂得做什么、如何做。

所以，它不會(huì)將全部的精力放在界面表現(xiàn)層上，而是探索更多方案的可行性，深入到框架層、架構(gòu)層里面，探索產(chǎn)品/界面/場(chǎng)景/用戶(hù)/設(shè)備/系統(tǒng)六者之間的關(guān)系。

正因如此，我不想把所有的腦細(xì)胞都消耗在像素、顏色、圖標(biāo)上，不想一直處于被動(dòng)研究方案的位置，不想處于一個(gè)積極的方案接收者，我想主動(dòng)挖掘用戶(hù)場(chǎng)景和痛點(diǎn)、想成為一個(gè)方案制定者、想更緊密的將產(chǎn)品和用戶(hù)鏈接起來(lái)。純UI的時(shí)代已經(jīng)過(guò)去，如果我不花時(shí)間去轉(zhuǎn)型，幾年后 我可能就是一個(gè)只會(huì)擼擼皮膚的“小美工”。

看到這有人會(huì)說(shuō)，UI設(shè)計(jì)也可以推動(dòng)方案、創(chuàng)造價(jià)值呀，是的，這點(diǎn)我非常贊同，也沒(méi)有說(shuō)UI設(shè)計(jì)哪里不好，可能是我做的不夠優(yōu)秀吧，我身邊也有很多朋友是UI領(lǐng)域的專(zhuān)家，從他們身上我看到了“任何一個(gè)領(lǐng)域只要你肯花時(shí)間去沉淀，都會(huì)做的非常優(yōu)秀”的案例，而我就是不愿意在UI上展現(xiàn)自己的精神小伙~

另外交互設(shè)計(jì)是一門(mén)多元學(xué)科，它能倒逼著我去接觸未知領(lǐng)域，這也非常符合自己喜歡探索的性格，同時(shí)我也是一個(gè)把溝通和分享當(dāng)作樂(lè)趣的人，自我度量一番后，發(fā)現(xiàn)交互崗相比UI崗更適合自己去深耕。有了這2大刺激點(diǎn)之后，我才開(kāi)始尋找學(xué)習(xí)交互設(shè)計(jì)的途徑，而不是盲目跟風(fēng)。寫(xiě)到這里我還是本著負(fù)責(zé)任的態(tài)度啰嗦一句，避免那些不適合的人說(shuō)被這篇文章誤導(dǎo)了：無(wú)論是轉(zhuǎn)行還是轉(zhuǎn)崗，一定要先了解清楚將來(lái)要做的事情適不適合自己，有沒(méi)有自律能力去鉆研，三思而后行，不要聽(tīng)風(fēng)就是雨。

中途我也嘗試過(guò)報(bào)一些網(wǎng)課，久而久之發(fā)現(xiàn)他們講的都是概念化、工具化的東西，總不可能會(huì)畫(huà)個(gè)原型圖，會(huì)用Axure連個(gè)線(xiàn)，知道交互設(shè)計(jì)的工作流程，就能說(shuō)自己是交互設(shè)計(jì)師了吧，里面必然有一些方法、思維、理論是需要自己花時(shí)間去沉淀和梳理的，而網(wǎng)課只能帶你入門(mén)、幫助你造就輪廓，但成就不了你的深度學(xué)習(xí)，恰好這些核心的東西就是自身能力和今后工作中的根基。

二、交互設(shè)計(jì)師的產(chǎn)出物是什么？

最早我對(duì)“交互設(shè)計(jì)要干什么”有一個(gè)眾所周知的誤解：

1. 整一套超級(jí)炫酷的動(dòng)效，學(xué)習(xí)交互動(dòng)效將是我淫生的目標(biāo)；
2. 做一套差異化的界面，我為自己代言；
3. 用最短的頁(yè)面流程或最少的點(diǎn)擊次數(shù)來(lái)衡量這個(gè)方案好與壞；
4. 做交互設(shè)計(jì)終于可以不用在乎高保真了，愛(ài)誰(shuí)誰(shuí)；
5. ……

我相信這種錯(cuò)誤的認(rèn)知很多朋友都經(jīng)歷過(guò)，這是扭曲了對(duì)交互設(shè)計(jì)的理解，交互設(shè)計(jì)是產(chǎn)品流程和結(jié)構(gòu)的設(shè)計(jì)，所有的工作內(nèi)容都是圍繞用戶(hù)行為去設(shè)計(jì)的，讓用戶(hù)更方便、更有效率的去完成目標(biāo)任務(wù)，并獲得愉快的用戶(hù)體驗(yàn)，除了屏幕上的交互設(shè)計(jì)外，還有語(yǔ)音交互、手勢(shì)交互等（本文僅涉及屏幕交互）。

作為一名交互設(shè)計(jì)師，首先要知道如何表達(dá)設(shè)計(jì)方案，在實(shí)際項(xiàng)目中，交互設(shè)計(jì)師是一位富有邏輯性的表達(dá)角色，除了在評(píng)審和溝通之外，產(chǎn)出物就是表達(dá)方案最有力的“語(yǔ)言”，它們是思考結(jié)果的載體，承載著設(shè)計(jì)師的想法和方案，通常以文檔的形式輸出。

下面就羅列一些常見(jiàn)的產(chǎn)出物（僅供參考，畢竟每個(gè)公司的用人要求不一樣）：

交互設(shè)計(jì)文檔：交互設(shè)計(jì)文檔（DRD）是交互設(shè)計(jì)師的重要產(chǎn)出物，主要用于承載詳細(xì)的設(shè)計(jì)方案，完整并規(guī)范的文檔能體現(xiàn)出設(shè)計(jì)師的基本功和專(zhuān)業(yè)能力，也能幫助你屢清楚設(shè)計(jì)思路、沉淀項(xiàng)目經(jīng)驗(yàn)。交

互說(shuō)明文檔主要傳遞給產(chǎn)品團(tuán)隊(duì)的上下游人員：產(chǎn)品經(jīng)理、UI設(shè)計(jì)師、開(kāi)發(fā)、測(cè)試，有的還需要交付給甲方，甚至是匯報(bào)給領(lǐng)導(dǎo)。比如我之前的上級(jí)會(huì)不定期抽查各設(shè)計(jì)師的交互文檔，檢查文檔是否規(guī)范、方案描述是否詳細(xì)等。一份詳細(xì)的交互說(shuō)明文檔包含了：封面、更新日志、文檔圖例、設(shè)計(jì)思路、原型圖、流程圖、交互說(shuō)明、信息/功能架構(gòu)、組件規(guī)范。

競(jìng)品分析報(bào)告：競(jìng)品分析就是對(duì)競(jìng)爭(zhēng)對(duì)手的產(chǎn)品進(jìn)行分析，交互設(shè)計(jì)師在產(chǎn)品團(tuán)隊(duì)中，一般是對(duì)同類(lèi)產(chǎn)品把玩最多的人，是帶著研究目的去把玩的，因此會(huì)定期輸出競(jìng)品分析報(bào)告同步給產(chǎn)品團(tuán)隊(duì)，為今后的迭代內(nèi)容沉淀一份依據(jù)，同時(shí)也能培養(yǎng)設(shè)計(jì)師對(duì)產(chǎn)品的分析能力。

競(jìng)品分析隨時(shí)都可以做，只不過(guò)深度和廣度不一樣而已，可以做一份全面的報(bào)告用于熟悉產(chǎn)品、推動(dòng)優(yōu)化。也可以在設(shè)計(jì)中進(jìn)行碎片化的分析，事后整理成文檔，比如這次迭代要優(yōu)化支付流程，就可以先拿其他產(chǎn)品的支付流程進(jìn)行對(duì)比，吸取他們的優(yōu)點(diǎn)做成自己的方案。

產(chǎn)品體驗(yàn)報(bào)告：產(chǎn)品體驗(yàn)報(bào)告是體驗(yàn)者在深入了解某個(gè)產(chǎn)品的商業(yè)模式、目標(biāo)用戶(hù)、使用場(chǎng)景、市場(chǎng)現(xiàn)狀、產(chǎn)品功能、交互體驗(yàn)以及視覺(jué)風(fēng)格后，全方位總結(jié)出來(lái)的圖文報(bào)告，這里的“體驗(yàn)者”可以是運(yùn)營(yíng)、產(chǎn)品、交互、UI、開(kāi)發(fā)等產(chǎn)品相關(guān)人員。但還是非常建議交互設(shè)計(jì)師主動(dòng)去做，因?yàn)樗軒椭憧焖倭私饽闼?fù)責(zé)產(chǎn)品的“血、肉、骨、膚”，它可以結(jié)合競(jìng)品分析一起輸出。

用研類(lèi)文檔：如果產(chǎn)品設(shè)計(jì)不以用戶(hù)為核心，一味解決產(chǎn)品訴求，那么很難做出優(yōu)秀的用戶(hù)體驗(yàn)，好的產(chǎn)品能夠滿(mǎn)足用戶(hù)需求并不斷尋找新的用戶(hù)場(chǎng)景，設(shè)計(jì)師的職責(zé)就是定義并設(shè)計(jì)產(chǎn)品，是權(quán)衡產(chǎn)品訴求和用戶(hù)訴求的角色。也就是說(shuō)需要滿(mǎn)足產(chǎn)品目標(biāo)，同樣也要考慮用戶(hù)體驗(yàn)，產(chǎn)品目標(biāo)很好理解，即產(chǎn)品需要通過(guò)這個(gè)功能or產(chǎn)品完成什么指標(biāo)。

而用戶(hù)體驗(yàn)則需要將注意力聚焦在用戶(hù)研究上，否則可能會(huì)為了自己而設(shè)計(jì)，這種強(qiáng)烈的主觀(guān)意識(shí)很難保證決策是否正確。因此交互設(shè)計(jì)師一般會(huì)參與甚至組織用戶(hù)調(diào)研，然后將調(diào)研的結(jié)果整理成文檔傳遞給產(chǎn)品團(tuán)隊(duì)，常見(jiàn)的用研工具有：用戶(hù)訪(fǎng)談、問(wèn)卷調(diào)查、數(shù)據(jù)分析、A/B測(cè)試、可用性測(cè)試、用戶(hù)體驗(yàn)地圖、桌面研究等。

測(cè)試驗(yàn)收類(lèi)文檔：測(cè)試類(lèi)文檔主要體現(xiàn)在設(shè)計(jì)驗(yàn)收和設(shè)計(jì)自查。

設(shè)計(jì)驗(yàn)收即迭代發(fā)布前的設(shè)計(jì)走查：

• 一是功能測(cè)試，檢驗(yàn)產(chǎn)品的功能和流程是否按交互稿實(shí)現(xiàn)，功能是否異常，我常用的做法是為功能和流程編寫(xiě)測(cè)試用例，因此會(huì)產(chǎn)出“測(cè)試用例文檔”，協(xié)助測(cè)試人員完成發(fā)布前的把關(guān)，一起享受給開(kāi)發(fā)提BUG的快感。
• 二是界面測(cè)試，也可以叫視覺(jué)走查，主要是對(duì)產(chǎn)品每個(gè)頁(yè)面、狀態(tài)進(jìn)行UI還原度的排查，將實(shí)現(xiàn)出來(lái)的版本與高保真進(jìn)行對(duì)比，這塊主要還是UI設(shè)計(jì)師去做，交互設(shè)計(jì)師也可以協(xié)助完成，畢竟表現(xiàn)層也是用戶(hù)體驗(yàn)中至關(guān)重要的一層，產(chǎn)出物一般是“視覺(jué)驗(yàn)收清單”。

設(shè)計(jì)驗(yàn)收方面的文檔主要基于公司的協(xié)作流程來(lái)評(píng)定是否需要，比如有的直接將問(wèn)題轉(zhuǎn)成JIRA單等，就可以省略出文檔這一步。而設(shè)計(jì)自查就是“交互自查表”，根據(jù)自查表里的場(chǎng)景和狀態(tài)，在正式開(kāi)發(fā)之前 對(duì)設(shè)計(jì)稿進(jìn)行問(wèn)題排查，避免有遺漏的狀態(tài)或流程。

數(shù)據(jù)追蹤：關(guān)注數(shù)據(jù)不僅僅是產(chǎn)品經(jīng)理或運(yùn)營(yíng)人員的“專(zhuān)利”，作為交互設(shè)計(jì)師也需要掌握這方面的基本技能（線(xiàn)框仔除外），通過(guò)數(shù)據(jù)來(lái)幫助我們產(chǎn)出更貼近用戶(hù)行為的設(shè)計(jì)，它可以監(jiān)測(cè)產(chǎn)品迭代中的問(wèn)題點(diǎn)，從而找到設(shè)計(jì)點(diǎn)，也可以為后續(xù)的產(chǎn)品迭代提供方向和參考。對(duì)于平時(shí)不關(guān)注數(shù)據(jù)的設(shè)計(jì)師來(lái)說(shuō)，經(jīng)常在出方案時(shí)專(zhuān)注于表現(xiàn)層的優(yōu)化，而忽略了真實(shí)的用戶(hù)行為。所以設(shè)計(jì)師關(guān)注用戶(hù)行為不僅能夠驗(yàn)證設(shè)計(jì)結(jié)果，還能對(duì)產(chǎn)品體驗(yàn)不斷打磨，精細(xì)化提升用戶(hù)體驗(yàn)。

獲取一些常用的行為數(shù)據(jù)可以通過(guò)第三方監(jiān)測(cè)平臺(tái)接入，還可以將你想監(jiān)測(cè)的數(shù)據(jù)統(tǒng)計(jì)到“用戶(hù)行為統(tǒng)計(jì)表”上，然后讓開(kāi)發(fā)同學(xué)跟隨迭代一起埋進(jìn)去，最后再根據(jù)回傳的數(shù)據(jù)進(jìn)行數(shù)據(jù)分析，相應(yīng)的產(chǎn)出分析報(bào)告。

建立規(guī)范：

一是設(shè)計(jì)規(guī)范，這關(guān)乎到多方協(xié)同和工作效率的問(wèn)題，0到1的C端產(chǎn)品可以先參考iOS和MD的設(shè)計(jì)規(guī)范，后續(xù)再與UI設(shè)計(jì)師、前端同學(xué)共同制定自家產(chǎn)品的規(guī)范，甚至是建立設(shè)計(jì)系統(tǒng)，包括像Vant這類(lèi)的移動(dòng)端規(guī)范都可以參考。而B(niǎo)端產(chǎn)品可沿用ant、element的設(shè)計(jì)規(guī)范，這些都是非常成熟的規(guī)范了，如果仍然無(wú)法滿(mǎn)足業(yè)務(wù)，則單獨(dú)出一套規(guī)范讓前端封裝。

二是制作一套自己的元件庫(kù)，將元素組件化，方便后期調(diào)用，完整的元件庫(kù)能大大減少不必要的設(shè)計(jì)成本，將重點(diǎn)放在設(shè)計(jì)方案和對(duì)用戶(hù)的思考上，而不是在原型圖上扣像素，假設(shè)一個(gè)頁(yè)面的元件覆蓋率有80%以上，那繪制整套原型能節(jié)約多少時(shí)間？答案顯而易見(jiàn)。

其他：除了上面常見(jiàn)的產(chǎn)出物以外，還有一些也會(huì)涉及到，具體要看公司對(duì)崗位的要求，比如有的崗位要求制作高保真原型、匯報(bào)用的高質(zhì)量可交互demo、評(píng)審記錄、設(shè)計(jì)計(jì)劃、動(dòng)效說(shuō)明、其他文檔等（畢竟打工仔是跟隨環(huán)境發(fā)生變化的）。

三、我做了哪些準(zhǔn)備？

之前看過(guò)一些非常細(xì)致的交互設(shè)計(jì)知識(shí)樹(shù)，發(fā)現(xiàn)上面有很多“抽象”的點(diǎn)，比如溝通能力、學(xué)習(xí)心態(tài)、探索心態(tài)……emmmm，這些確實(shí)是設(shè)計(jì)師的軟實(shí)力，但這種能力一般都是通過(guò)經(jīng)歷、項(xiàng)目、性格或刻意練習(xí)等方面沉淀下來(lái)的，不是說(shuō)看幾篇文章就可以入門(mén)了。

所以我下面就不談這些抽象的軟實(shí)力，展開(kāi)聊一聊我實(shí)踐過(guò) 并嘗到甜頭的學(xué)習(xí)方法，如果覺(jué)得對(duì)你有幫助，完全可以拿它們做成你自己的知識(shí)樹(shù)，然后逐個(gè)攻破：

階段一：扎根

（1）死皮賴(lài)臉去問(wèn)問(wèn)問(wèn)

我很感謝在轉(zhuǎn)交互崗前期階段的那位同桌，他是設(shè)計(jì)領(lǐng)域的前輩，在交互設(shè)計(jì)方面的認(rèn)知和思維一直吸引著我，可以說(shuō)是我的引路人。記得當(dāng)時(shí)我剛?cè)胄袥](méi)幾年，正是學(xué)習(xí)勁頭非常饑渴的時(shí)候，下決心轉(zhuǎn)崗交互后，就一直厚著臉皮去做這件事，每次擼完高保真都會(huì)轉(zhuǎn)過(guò)頭找他討論一番，琢磨他的觀(guān)點(diǎn)和思維方式，大到整個(gè)設(shè)計(jì)流程的討論，小到一個(gè)組件的使用。

業(yè)余也會(huì)主動(dòng)粘著他聊聊交互設(shè)計(jì)和對(duì)產(chǎn)品的看法，雖然期間有些問(wèn)題我心里有答案，但還是想聽(tīng)聽(tīng)別人的看法。于是裝模作樣的拋出幾個(gè)問(wèn)題和對(duì)方溝通，事后就是一杯奶茶一頓飯草草了事，因?yàn)榧泵丶乙呀裉鞂W(xué)到的東西記到小本本上（手寫(xiě)，易消化），那段時(shí)間睡覺(jué)時(shí)，腦子里還在做筆記，這種狀態(tài)持續(xù)了有整整大半年，這些思維也成為了后面進(jìn)階學(xué)習(xí)的基礎(chǔ)。

如果大家身邊有這類(lèi)愿意分享的同事，真的會(huì)事半功倍，愿你珍惜，倘若無(wú)緣也沒(méi)關(guān)系，只要你肯邁入這個(gè)圈子，線(xiàn)上也有很多前輩、大佬，這些都是你學(xué)習(xí)的資源。另外，我并不是完全借助他人順利轉(zhuǎn)型的，最關(guān)鍵的還是要自律學(xué)習(xí)、深度思考（接著往下看就明白了）。

（2）給腦瓜子強(qiáng)行注入設(shè)計(jì)思維

1）靜下心來(lái)“吃”書(shū)

記得之前面試過(guò)一位設(shè)計(jì)師，我問(wèn)他“最近在看什么書(shū)”，他回答“平時(shí)不看書(shū)，更喜歡看社區(qū)或公眾號(hào)里的文章”，因?yàn)樗杏X(jué)信息更新太快了，可以隨時(shí)隨地通過(guò)搜索找到自己想要的東西，而看書(shū)很慢，不是一個(gè)效率的學(xué)習(xí)方式。

事后我還是不明白到底是社會(huì)變浮躁了？還是設(shè)計(jì)師太心急了？

社區(qū)和公眾號(hào)里碎片化的文章的確也是一種非常高效的學(xué)習(xí)方式，但它們更多是解決你及時(shí)性的問(wèn)題，起到補(bǔ)充或輔助你認(rèn)知的作用，不能形成整套的設(shè)計(jì)體系和思維。而書(shū)籍都是前輩們將碎片化的知識(shí)和項(xiàng)目經(jīng)驗(yàn)梳理成一套完整的設(shè)計(jì)理論，白嫖的東西你不要？所以非常建議設(shè)計(jì)師通過(guò)書(shū)籍+碎片化文章的組合方式來(lái)學(xué)習(xí)，而不是投機(jī)打靶。

沉淀知識(shí)才能在將來(lái)高強(qiáng)度的工作中，幫助我們用最短的時(shí)間做最合理的決定，“吃”書(shū)，才能建立起自己獨(dú)有的思維模式。產(chǎn)品設(shè)計(jì)、用戶(hù)體驗(yàn)類(lèi)的書(shū)籍有很多都值得我們細(xì)細(xì)品嘗，如果你能把其中一本書(shū)反復(fù)閱讀，吃透里面的知識(shí)體系，這也是一件很可怕的事。

2）讀懂并運(yùn)用主流的設(shè)計(jì)原則

在交互設(shè)計(jì)領(lǐng)域有很多經(jīng)過(guò)時(shí)間檢驗(yàn)過(guò)的定律來(lái)作為設(shè)計(jì)的指導(dǎo)原則，他能夠幫助交互設(shè)計(jì)師發(fā)現(xiàn)產(chǎn)品中的易用性問(wèn)題，還可以根據(jù)這些原則從設(shè)計(jì)的角度提升用戶(hù)滿(mǎn)意度。交互設(shè)計(jì)師在制定方案的過(guò)程中會(huì)經(jīng)歷非常多的決策階段，大到一個(gè)功能流程的閉環(huán)設(shè)計(jì)，小到思考一個(gè)元素的最合理布局。

在這些場(chǎng)景中，我們首選的解決方案當(dāng)然是更適合當(dāng)前功能特性和使用場(chǎng)景的方案，如果沒(méi)有合適的方案或者在幾種方案面前猶豫不決時(shí)，一般都會(huì)選擇遵守設(shè)計(jì)規(guī)則和接近設(shè)計(jì)規(guī)則的那個(gè)方案，這些所謂的規(guī)則也是交互設(shè)計(jì)師必須掌握的基本思考方式，相當(dāng)于我們?nèi)粘Ｉ钪械摹俺ＷR(shí)”，你不得不學(xué)。

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

3）掌握常見(jiàn)的設(shè)計(jì)方法論

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

設(shè)計(jì)的細(xì)分領(lǐng)域很廣，每個(gè)領(lǐng)域都有不同的方法論，并非所有的“套路”都適用于你經(jīng)手的項(xiàng)目，這里列舉一些常見(jiàn)的方法論：SWOT分析法、5W1H分析法、交互設(shè)計(jì)四策略、四象限法則、雙鉆模型、KANO模型、用戶(hù)增長(zhǎng)模型、成癮模型、情緒版、用戶(hù)體驗(yàn)地圖、可用性測(cè)試、卡片分類(lèi)等。

（3）熟悉各端組件庫(kù)和設(shè)計(jì)規(guī)范

產(chǎn)品結(jié)構(gòu)是由一個(gè)個(gè)功能點(diǎn)組成，完成這些功能點(diǎn)是靠用戶(hù)流程，而用戶(hù)流程又由各個(gè)頁(yè)面支撐著，最后的頁(yè)面才由各種組件和元素構(gòu)成。因此組件的使用對(duì)于交互設(shè)計(jì)師來(lái)說(shuō)是必須掌握的技能，一個(gè)合適的組件能夠提直接影響用戶(hù)的使用感受，并且能為將來(lái)整個(gè)設(shè)計(jì)規(guī)范的打造也有著代表意義，甚至一個(gè)合適的組件能夠提高關(guān)鍵流程的轉(zhuǎn)化率。

什么場(chǎng)景用什么樣組件？這些組件的利弊分別是什么？各端組件有著什么樣的差異？這個(gè)組件對(duì)承載業(yè)務(wù)的延展性如何？前端擴(kuò)展該組件的落地成本高不高？面對(duì)一個(gè)設(shè)計(jì)點(diǎn)，你能想到幾種可以使用的組件？有沒(méi)有合適的方案？比如組件與組件之間的交互關(guān)系等，這些都應(yīng)該是設(shè)計(jì)師出方案時(shí)要考慮的事情。

市面上有很多成熟的組件庫(kù)和設(shè)計(jì)規(guī)范可以供設(shè)計(jì)師和開(kāi)發(fā)調(diào)用，比如Ant Design、element UI、Vant等，但不能因?yàn)橛鞋F(xiàn)成的東西你就不去研究它，這就是拿來(lái)即用，久而久之設(shè)計(jì)師變成了“搬運(yùn)工”。當(dāng)你去思考這些組件之間的交互關(guān)系和設(shè)計(jì)規(guī)范時(shí)，別只顧著看樣式，而要將前面說(shuō)的設(shè)計(jì)思維和理論套進(jìn)去，甚至還可以將對(duì)組件的研究整理成學(xué)習(xí)筆記，加深對(duì)它們的印象。

（4）項(xiàng)目中主動(dòng)培養(yǎng)流程思維、場(chǎng)景思維

“起初做UI設(shè)計(jì)時(shí)，接到原型方案后立馬就開(kāi)始動(dòng)手，原型有哪些頁(yè)面，高保真就出哪幾個(gè)頁(yè)面，從來(lái)不會(huì)思考這個(gè)方案是由什么引發(fā)的？整個(gè)頁(yè)面流是如何跑通的？真實(shí)的使用場(chǎng)景有哪些？前端與后臺(tái)的交互流程是怎樣的？”，這是初級(jí)設(shè)計(jì)師經(jīng)常忽略的點(diǎn)。

如果你的思考范圍只停留現(xiàn)在單個(gè)頁(yè)面或某個(gè)元素的美化上，對(duì)整套原型方案沒(méi)有自己的看法，那瓶頸永遠(yuǎn)都無(wú)法突破，因?yàn)槟阒皇且篮J畫(huà)瓢的上色、擼圖標(biāo)，這就是為什么很多設(shè)計(jì)師只停留在執(zhí)行層面，但還整天抱怨公司不給機(jī)會(huì)的原因，想往交互設(shè)計(jì)師轉(zhuǎn)崗、或晉升高級(jí)設(shè)計(jì)師，就必須突破這樣的局面。

流程思維和場(chǎng)景思維是可以利用實(shí)際項(xiàng)目做刻意練習(xí)的，比如今天你接到一個(gè)注冊(cè)登錄的原型流，這時(shí)你就可以縱觀(guān)整個(gè)流程，同理心思考有沒(méi)有遺漏的場(chǎng)景或關(guān)鍵節(jié)點(diǎn)，為什么要這樣設(shè)計(jì)等等，然后重新去梳理自己的一套流程。

在功能交互上，刻意去畫(huà)流程圖，養(yǎng)成畫(huà)流程圖的習(xí)慣，因?yàn)檫@個(gè)工具能有效的幫助你梳理頁(yè)面邏輯和功能邏輯，也是產(chǎn)品經(jīng)理和交互設(shè)計(jì)師的必備技能。方案評(píng)審時(shí)，拿出2套設(shè)計(jì)方案，一套是你上游給你的思路，另一套是你自己梳理的思路，即便沒(méi)采用你的方案也沒(méi)關(guān)系，試錯(cuò)就是成長(zhǎng)。

我當(dāng)初轉(zhuǎn)崗交互設(shè)計(jì)的前一年，基本每次迭代都會(huì)刻意去畫(huà)流程圖和線(xiàn)框圖，用來(lái)思考不同方案的可行性，久而久之，產(chǎn)品經(jīng)理接到的一些需求就直接丟給我全盤(pán)梳理（實(shí)踐是靠自己爭(zhēng)取的）。

（5）定期進(jìn)行產(chǎn)品賞析，將上面說(shuō)的幾點(diǎn)融入到研究過(guò)程中

要說(shuō)如何提高設(shè)計(jì)眼界，最好的辦法就是去欣賞作品，做UI設(shè)計(jì)時(shí)為了塑形審美能力，每天會(huì)看大量的設(shè)計(jì)作品并按分類(lèi)收藏起來(lái)，而交互設(shè)計(jì)師不止要欣賞產(chǎn)品的視覺(jué)方面，更需要了解產(chǎn)品邏輯和功能體驗(yàn)，所以需要你親手去感受這個(gè)產(chǎn)品的內(nèi)在和外在。

另外，產(chǎn)品賞析可以很好的鍛煉設(shè)計(jì)師的分析能力，幫助你今后做產(chǎn)品改版。我的做法是每周至少挑選2個(gè)優(yōu)秀的產(chǎn)品上手“把玩”，最好是競(jìng)品或者同領(lǐng)域的產(chǎn)品，這樣能直接幫助到你做項(xiàng)目。

“把玩”是有目的性的，比如剖析某個(gè)產(chǎn)品的功能流程和交互體驗(yàn)，把你覺(jué)得有趣的設(shè)計(jì)點(diǎn)記錄下來(lái)，再寫(xiě)上一段自己的總結(jié)或建議，如果你有不同的方案也可以畫(huà)線(xiàn)框圖或流程圖做深度研究，甚至可以把2個(gè)競(jìng)品放在一起審視，分析他們的流程為什么做的不一樣，反復(fù)問(wèn)自己“為什么”，漸漸的你就能從產(chǎn)品的表面解析到產(chǎn)品的業(yè)務(wù)。

更自律的做法是主動(dòng)給自己布置作業(yè)，比如本周內(nèi)要找到10個(gè)能超越用戶(hù)預(yù)期的設(shè)計(jì)點(diǎn)，可以是一個(gè)流程，也可以是一個(gè)頁(yè)面或微交互。自律性差的同學(xué)選擇加入一些研究產(chǎn)品體驗(yàn)的打卡群也是非常不錯(cuò)的，通過(guò)外部環(huán)境監(jiān)督你。當(dāng)有了這些思考和產(chǎn)出后，建議整理成筆記分享出去討論，也聽(tīng)聽(tīng)別人的贊美和吐槽，因?yàn)檫@些能逼著你繼續(xù)思考，否則就是閉門(mén)造車(chē)。

（6）嘗試輸出設(shè)計(jì)改版，養(yǎng)成項(xiàng)目復(fù)盤(pán)的好習(xí)慣

前面有提到設(shè)計(jì)思維、組件庫(kù)、設(shè)計(jì)規(guī)范、流程圖和產(chǎn)品賞析，下面就可以利用前面所沉淀的基礎(chǔ)來(lái)嘗試做一些設(shè)計(jì)改版，先從優(yōu)化一個(gè)頁(yè)面的布局、控件和信息架構(gòu)開(kāi)始，再逐漸深入到一個(gè)功能流程、大模塊，最后到整個(gè)產(chǎn)品的體驗(yàn)改版。這里的改版就不要再沉迷于視覺(jué)表現(xiàn)層了，也不要扣像素，而是把心思放在輸出原型方案上，重點(diǎn)思考你的方案如何更好的滿(mǎn)足用戶(hù)需求。

改版的素材來(lái)源有很多，一是前面提到的產(chǎn)品賞析，把你認(rèn)為不合理的設(shè)計(jì)點(diǎn)嘗試優(yōu)化。

二是公司項(xiàng)目的改版，因?yàn)閷?shí)際上線(xiàn)的方案都是以商業(yè)為目的，可能當(dāng)時(shí)我們有更好的想法，但是由于種種原因?qū)е聼o(wú)法落地，不過(guò)事后可以抽出時(shí)間將你的想法做成交互原型，順便把本次迭代的東西復(fù)盤(pán)，這是沉淀項(xiàng)目最好的方式。

在改版過(guò)程中，腦瓜子會(huì)臨時(shí)蹦出很多問(wèn)題，甚至對(duì)方案的選擇特別糾結(jié)，這正好利用前面講到的理論來(lái)衡量它們。交互設(shè)計(jì)是一個(gè)實(shí)踐性很強(qiáng)的專(zhuān)業(yè)，行動(dòng)會(huì)激發(fā)思考，也會(huì)逼著你去尋找答案，這其實(shí)就是一個(gè)理論+實(shí)踐的學(xué)習(xí)過(guò)程。

最后將你改版的方案仔細(xì)整理成一份完整的交互設(shè)計(jì)文檔，改版前的設(shè)計(jì)也可以放進(jìn)去做對(duì)比，將它們一起發(fā)出去討論，讓前輩或同事幫忙提出建設(shè)性的問(wèn)題（臉皮厚一點(diǎn)，學(xué)到都是你自己的，實(shí)在不行知識(shí)付費(fèi)也不為過(guò)）。

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

上面說(shuō)到的準(zhǔn)備工作，你專(zhuān)注行動(dòng)幾個(gè)月后，就會(huì)具備一定的思考能力和動(dòng)手能力，但在這期間大部分都是閉關(guān)修煉，所以還是需要你“走出去看看”，比如參加線(xiàn)上線(xiàn)下的公開(kāi)課、分享會(huì)，甚至是加入一個(gè)學(xué)習(xí)氛圍好的星球、討論小組等等，去看看別人的思考方式和設(shè)計(jì)成果是怎樣的，從中取長(zhǎng)補(bǔ)短。還可以適當(dāng)接觸一些產(chǎn)品設(shè)計(jì)、服務(wù)設(shè)計(jì)、行為設(shè)計(jì)、用戶(hù)心理類(lèi)的知識(shí)點(diǎn)，盡量多拓展自己的思維邊界，不要只迷戀于屏幕上的思考，畢竟交互設(shè)計(jì)中有很多場(chǎng)景是來(lái)源于生活的。

（8）掌握主流設(shè)計(jì)工具

市面上的設(shè)計(jì)工具五花八門(mén)，每個(gè)人的使用習(xí)慣也不一樣，沒(méi)必要浪費(fèi)時(shí)間在里面挑來(lái)挑去，輸出物的質(zhì)量才是關(guān)鍵。所以我們對(duì)工具的學(xué)習(xí)，圍繞2個(gè)原則即可，一是掌握主流的設(shè)計(jì)工具，因?yàn)榇蟛糠秩硕荚谟茫髁鞴ぞ邔W(xué)會(huì)了，其他工具上手也是相通的。二是掌握現(xiàn)有團(tuán)隊(duì)在用的，工具的作用就是提高個(gè)人產(chǎn)出效率和團(tuán)隊(duì)協(xié)作效率，根據(jù)團(tuán)隊(duì)的要求去掌握相關(guān)工具。

下面羅列一些我常用的工具：

筆+紙

我一直認(rèn)為筆和紙是設(shè)計(jì)師最好的朋友，在正式輸出原型前，我很喜歡帶著筆和紙去溝通需求，因?yàn)樗鼈兡茏屧O(shè)計(jì)師在短時(shí)間內(nèi)“敏捷式腦暴”、快速輸出想法、低成本試錯(cuò)（涂涂改改又重做）。

原型工具：Axure、Sketch

Axure一直是主流的原型工具，也是我最早接觸的第一款原型工具，里面調(diào)用元件庫(kù)、畫(huà)流程圖，用于輸出交互文檔，導(dǎo)出超鏈接、html、word都非常方便，雖然現(xiàn)在很多工具能夠在交互演示方面替代它，但因?yàn)槭褂玫娜撕芏?，所以也舍不得刪除。

Sketch的定位雖然是“專(zhuān)業(yè)的UI設(shè)計(jì)軟件”，保留它的主要原因是能夠無(wú)縫搭配Flinto或Principle來(lái)幫助我輸出高保真演示稿，另外里面強(qiáng)大的第三方插件和組件庫(kù)能夠拉近我和UI設(shè)計(jì)師的“生活距離”。

動(dòng)效工具：Flinto或Principle

這2款工具是我從事UI設(shè)計(jì)時(shí)就掌握的軟件，最大的特點(diǎn)就是交互動(dòng)效還原度極高，可以同步到手機(jī)上預(yù)覽，感受真實(shí)的交互效果，在方案評(píng)審時(shí)，省去了很多文字描述，把落地想法傳遞給前端同學(xué)也非常直觀(guān)。

演示匯報(bào)工具：Keynote或PowerPoint

ppt一直是互聯(lián)網(wǎng)人不可缺少的技能，除了平時(shí)的分享會(huì)、方案匯報(bào)、項(xiàng)目復(fù)盤(pán)、述職等場(chǎng)景經(jīng)常用到之外，它還可以用于實(shí)現(xiàn)交互動(dòng)畫(huà)，撰寫(xiě)用研報(bào)告、體驗(yàn)報(bào)告、競(jìng)品分析報(bào)告等。

關(guān)注我，持續(xù)更新中……

由于文章篇幅過(guò)長(zhǎng)，會(huì)分為上下2個(gè)部分敞開(kāi)聊，本次主要分享了我轉(zhuǎn)崗的初衷、產(chǎn)出物以及如何“打基礎(chǔ)”，下半部分會(huì)圍繞技能擴(kuò)展、破界成長(zhǎng)和初級(jí)交互設(shè)計(jì)師的注意事項(xiàng)去分享，里面涉及了用研、總結(jié)方法和我的衷心建議。

關(guān)注我，持續(xù)更新中！

#專(zhuān)欄作家#

h梓暄，公眾號(hào)：UXD筆記，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。5年產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，從C端轉(zhuǎn)向B端，稍長(zhǎng)交互設(shè)計(jì)和UI設(shè)計(jì)，專(zhuān)注于用戶(hù)體驗(yàn)設(shè)計(jì)思考

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議