很可惜 T 。T 您現(xiàn)在還不是作者身份，不能自主發(fā)稿哦～
如有投稿需求，請把文章發(fā)送到郵箱tougao@appcpx.com，一經(jīng)錄用會有專人和您聯(lián)系
咨詢?nèi)绾纬蔀榇河鹱髡哒埪?lián)系：鳥哥筆記小羽毛（ngbjxym）
很多UI設(shè)計師和我交流，想學交互設(shè)計，也有一部分也想轉(zhuǎn)交互。
如何從入門到精通，這里我以自己的親身經(jīng)歷說說交互從入門到精通的5個途徑。
本文大綱如下：
1、練習原型
2、看優(yōu)秀的交互文檔
3、思考設(shè)計背后的邏輯
4、總結(jié)設(shè)計方法
5、項目復盤
練習原型是培養(yǎng)流程意識和全局意識的過程，以及對設(shè)計的深度思考。
練習一套完整的產(chǎn)品原型后，嘗試不斷補充遺漏的交互場景和狀態(tài)。重復做幾套產(chǎn)品的交互原型后，這對于ui設(shè)計師來說，已經(jīng)入門了。
部分UI會覺得平時都是做的高保真視覺稿，畫原型應該是一件很簡單的事情。
其實不然，UI設(shè)計師沒有訓練交互原型的話，那么前期從事交互工作會比較吃力。會容易關(guān)注于視覺細節(jié)，對于交互流程的全局思路掌握不夠。導致原型主流程和分支流程容易出問題。
所以平時沒事多練練原型，畫完原型后把自己當作用戶來審視原型稿。找出其中的問題，并不斷完善，提升原型的質(zhì)量。
看一些優(yōu)秀的交互文檔，看看別人對各個狀態(tài)的標注和說明，以及流程的設(shè)計思考。
看看別人原型中包含那些結(jié)構(gòu)，是否值得借鑒并學習。找到優(yōu)秀的交互輸出模板，并根據(jù)自身設(shè)計團隊情況，優(yōu)化交互文檔結(jié)構(gòu)，提升交互文檔質(zhì)量。
一套完整且比較優(yōu)秀的移動端交互文檔，我認為可以包含：業(yè)務(wù)背景、設(shè)計目標、業(yè)務(wù)規(guī)則定義、用戶流程圖、設(shè)計原則、交互流程標注以及交互各種狀態(tài)異常場景。
業(yè)務(wù)背景通常是我們?yōu)槭裁匆鲞@個功能。通過做這個功能，對業(yè)務(wù)有什么幫助。通過業(yè)務(wù)背景，我們可以推演出業(yè)務(wù)訴求，并得到對應的產(chǎn)品目標。
設(shè)計目標是通過設(shè)計得到什么樣的結(jié)果，對產(chǎn)品來說可以獲得什么樣的好處。所以在交互文檔的設(shè)計中要重點體現(xiàn)出設(shè)計目標。通過明確設(shè)計目標，可以清晰的指導我們做交互方案。
關(guān)于產(chǎn)品的業(yè)務(wù)規(guī)則，可能需要同產(chǎn)品經(jīng)理、業(yè)務(wù)方和運營一起溝通討論。這個里面涉及到整個產(chǎn)品業(yè)務(wù)的規(guī)則。在實際工作中，我們交互會碰到兩種情況：
情況1：產(chǎn)品經(jīng)理會和業(yè)務(wù)或運營溝通，然后輸出一份業(yè)務(wù)規(guī)則，這時候我們交互可以認真閱讀并梳理業(yè)務(wù)規(guī)則，如果覺得不合理的話，可以和產(chǎn)品經(jīng)理討論溝通，并修改業(yè)務(wù)規(guī)則使之變得更合理，并輸出在交互文檔中。
情況2：產(chǎn)品經(jīng)理只是簡單的有個業(yè)務(wù)規(guī)則想法，這時候需要我們交互設(shè)計師幫忙一起溝通并細化其業(yè)務(wù)規(guī)則，并輸出在交互文檔中。
用戶流程即我們設(shè)計師要梳理用戶在使用過程中的各種場景流程，通過用戶流程圖可避免遺漏場景，避免交互方案遺漏。
這里的設(shè)計原則非平時看到的一些交互或者視覺設(shè)計原則，而是在設(shè)計這個需求交互方案中需要遵守的原則。這里的設(shè)計原則和業(yè)務(wù)強掛鉤。
基于上面的用戶流程圖，可以得到用戶操作流程，即交互流程標注。
目前我覺得交互流程標注比較好的展示方式，是按照一個主流程在一個站點地圖/畫板的形式展示。當一個主流程中存在幾個支線操作流程時，可以分別在一個站點地圖/畫板中，展示出來。同時用標題區(qū)分說明分支流程的操作名字。如下圖所示：
在涉及到異常場景，且可以全局性復用的情況，則只需要全局性組件說明即可，不用每個流程都展示其異常場景組件或者頁面。
全局組件指的是整個產(chǎn)品通用的組件，例如全局斷網(wǎng)，操作成功、操作失敗、加載、空數(shù)據(jù)界面，404等
全局斷網(wǎng)：一般是在首頁使用tips提示。用戶在其他界面點擊操作時，也會出現(xiàn)toast反饋提示用戶。也有一些app在用戶進入出現(xiàn)對話框提示用戶網(wǎng)絡(luò)異常。相對于對話框，使用tips對用戶的干擾更小。
操作成功：一般操作成功都是根據(jù)具體的使用場景對出對應的提示。
操作失?。寒惓Ｇ闆r導致操作失敗，這時需要統(tǒng)一的提示，通常使用toast，也有一些使用對話框強提示用戶。
加載：涉及到全局加載和局部加載，全局加載在設(shè)計中要統(tǒng)一說明，例如上一個界面點擊進入下一個界面，使用的全局加載就需要說明。如果是一些小場景的加載，那么需要特殊說明。例如上拉加載，下拉加載，局部小區(qū)域加載等。
1、初始狀態(tài)的定義：初始化狀態(tài)，沒有任何內(nèi)容，需要用戶進行某種操作才能產(chǎn)生內(nèi)容的界面。
2、清空狀態(tài)的定義：通過刪除或其他用戶操作，清空當前的頁面內(nèi)容，產(chǎn)生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。
3、出錯狀態(tài)的定義：由于網(wǎng)絡(luò)、服務(wù)器或者沒有找他其他結(jié)果等原因?qū)е聼o法加載內(nèi)容，產(chǎn)生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結(jié)果界面也可以用這樣的思路來設(shè)計。
平時在使用產(chǎn)品時，學會思考設(shè)計背后的邏輯。以一個美團設(shè)計的為例：
美團首頁改版將用戶下單的狀態(tài)顯示在首頁。
這樣的改版，作為設(shè)計師或者產(chǎn)品經(jīng)理，應該從兩方面來看待這個事情，即從產(chǎn)品訴求和用戶訴求雙方面來看待，從兩個方面看待得到的結(jié)果是迥然不同的。
產(chǎn)品訴求角度：新版將用戶下單的狀態(tài)顯示在首頁可提升首頁訪問深度和曝光率。
個人中心訂單頁并不能做到流量的二次利用。這也是這次改版的主要原因。
以前用戶查看訂單狀態(tài)都是只能去訂單頁面，路徑較長，且訂單頁面沒有產(chǎn)品曝光，無法進行其他轉(zhuǎn)化，流量無法被多次利用。
所以將用戶的訂單狀態(tài)這種高頻操作放置于首頁，可利于其他業(yè)務(wù)的曝光。
美團的吃喝玩樂，其他業(yè)務(wù)被用戶查看的概率提升。對產(chǎn)品來說是有巨大的好處。
用戶訴求視角：將用戶訂單狀態(tài)放于首頁，用戶的使用場景，會不時的查看訂單狀態(tài)，放置于首頁可方面快捷的提供用戶查看訂單狀態(tài)，對用戶來說體驗好。
從用戶訴求和產(chǎn)品的訴求來看，這次改版應該是很優(yōu)秀的。
但是脫離于個體業(yè)務(wù)，從產(chǎn)品全局來看，這種設(shè)計的邏輯方式，會讓用戶對于app的信息的尋找邏輯進行顛覆和破壞。
以后是不是重要的東西都可以放置于首頁？如果這個改版開了個頭，以后其他業(yè)務(wù)也都有這個訴求，整個產(chǎn)品的生態(tài)都會失去控制。
在工作中可以嘗試總結(jié)一些設(shè)計方法，提升設(shè)計能力。
之前我總結(jié)了以下5個方法，可以助力設(shè)計師做出優(yōu)秀甚至驚艷的設(shè)計方案。分別為：
1、拆解設(shè)計需求
2、分析線上數(shù)據(jù)
3、窮舉設(shè)計方案
4、切換用戶視角
5、競品方案對比
設(shè)計師接到的設(shè)計需求，大部分情況下是通過產(chǎn)品經(jīng)理那里獲得的。而產(chǎn)品經(jīng)理的原始需求來源于：業(yè)務(wù)方、用戶和老板。
產(chǎn)品經(jīng)理會將原始需求進行整理，從而轉(zhuǎn)化成產(chǎn)品需求，在這一過程中產(chǎn)品經(jīng)理可能會出現(xiàn)對原始需求的理解出現(xiàn)偏差（范圍擴大、范圍縮小或者是方向錯誤）。
設(shè)計師如果直接拿著產(chǎn)品需求就開始做設(shè)計，可能會導致設(shè)計方案不符合業(yè)務(wù)需求。所以設(shè)計師進行設(shè)計前，最好也了解原始需求是怎么樣產(chǎn)生的，這樣才能做到心中有數(shù)。
掌握原始需求和產(chǎn)品需求后，接下來就要對需求進行拆解。
舉個小例子：設(shè)計這邊接到了一個產(chǎn)品需求，需求為：為降低產(chǎn)品占用用戶手機存儲空間。優(yōu)化線上清理緩存功能，提升用戶完成清理緩存的成功率。
通過這個產(chǎn)品需求可以看出，設(shè)計師要做的就是提升清理緩存流程的成功率。但是從原始需求可以看出，真正核心需要解決的則是如何降低產(chǎn)品占用用戶手機存儲空間。
所以設(shè)計師的方案可以從4方面入手：
1、提升清理緩存的成功率；
2、和開發(fā)溝通，是否有更好的更改緩存機制；
3、通過設(shè)計的手段引導用戶清理緩存垃圾等。
4、是否可以增加自動清理功能。
這樣的話，設(shè)計方案才能更好的服務(wù)于產(chǎn)品和用戶。
當我們拆解了設(shè)計需求后，接下來就需要分析線上數(shù)據(jù)，看這個業(yè)務(wù)相關(guān)的數(shù)據(jù)情況怎么樣？
分析數(shù)據(jù)情況，然后思考線上布局的合理性，然后進行布局設(shè)計和流程設(shè)計。
舉個例子，在某個操作流程中，發(fā)現(xiàn)有一個步驟，用戶操作流失率很高，這時候我們就要分析為什么這一步操作流失率高。
例如注冊流程/綁定銀行卡的過程中，總的轉(zhuǎn)化率只有0.06%，用戶完成率過低，如果要優(yōu)化整個用戶注冊操作流程，那么需要找出流失過大的節(jié)點進行優(yōu)化。
從數(shù)據(jù)可以看出有兩個失敗率最高，分別為：注冊流程和綁定銀行卡流程。
這時候設(shè)計師就要分析整個注冊流程和綁定銀行卡流程。哪些設(shè)計因素導致成功率低。并針對成功率低進行針對性的布局優(yōu)化和流程優(yōu)化。
當設(shè)計出一個方案時，則需要對完成的方案進行窮舉，發(fā)散出更多的方案，最后從眾多方案中找到一個更完美的方案。
以表單設(shè)計為例。常見的設(shè)計方案，是將所有的表單內(nèi)容按照分組的方式，進行排列，如下圖所示：
但是這種方案存在一個問題，用戶進來之后，發(fā)現(xiàn)有大量的信息需要填寫，填寫壓力大，導致用戶的填寫意愿變?nèi)酰瑢е绿峤怀晒β式档汀?/p>
接下來就要嘗試其他方向的設(shè)計思路，通過窮舉法可以想到的有分步設(shè)計和將表單填寫內(nèi)容隱藏到下一級界面，從而降低用戶填寫壓力提升用戶的操作成功率。
下圖左邊為分步設(shè)計，右圖為表單信息隱藏到下一級頁面。
設(shè)計方案確認之后，這時候有一步很關(guān)鍵，就是我們要將自己想像成小白用戶。
我們以小白用戶的視角去審視方案?？纯从袥]有不理解的地方。
為什么要有這一步呢？
因為我們設(shè)計師在設(shè)計方案的過程中，會默認一些設(shè)計規(guī)則邏輯，而這些規(guī)則邏輯用戶是不知道的。
這就導致了我們設(shè)計師覺得這個方案可行。但是普通用戶卻不知道這個規(guī)則邏輯，導致我們的方案用戶看不懂。
當我們切換用戶視角發(fā)現(xiàn)方案存在的問題后，再嘗試如何讓用戶更好的理解的前提下去優(yōu)化方案。
為什么我將競品方案放在后面呢？
如果做設(shè)計之前就參考競品，那么就容易默認為競品的方案是標準的，是優(yōu)秀的方案。
會不由自主的按照競品的思路去做設(shè)計，最終導致的后果就是和競品方案相似。
由于我們和競品的人群，業(yè)務(wù)背景等方面都不相同。
競品的設(shè)計方案基于開發(fā)或者老板等業(yè)務(wù)背景，才不得已使用非優(yōu)秀的方案，我們?nèi)绻麉⒖几偲返脑?，最后的結(jié)果也可能難以做出優(yōu)秀的方案。
當我們的設(shè)計方案做好之后，這時候我們就可以分析我們的設(shè)計和競品的區(qū)別和差異性，從而得到靈感， 優(yōu)化出更好的設(shè)計。
1、提升設(shè)計師多種設(shè)計方法能力
2、提升設(shè)計師整體設(shè)計思維推導能力
3、提升設(shè)計師整體匯報、述職和晉升答辯能力
所以在工作中，每做完一個重要項目都要做好項目復盤。這樣的話，既是是階段性工作的總結(jié)，也是為下一次做項目提供更好的經(jīng)驗。
復盤的方法有多種，可以結(jié)合設(shè)計方法來做總結(jié)，在復盤的過程中，要體現(xiàn)最終的結(jié)果，即通過數(shù)據(jù)或用戶反饋對我們設(shè)計驗證。
也要總結(jié)其中的不足，為之后工作中避免踩坑，并更好的為以后的工作提供服務(wù)。
以上就是交互設(shè)計從入門到精通的5個途徑，如果你有其他想法，歡迎在評論區(qū)留言。
-END-
本文為作者獨立觀點，不代表鳥哥筆記立場，未經(jīng)允許不得轉(zhuǎn)載。
《鳥哥筆記版權(quán)及免責申明》 如對文章、圖片、字體等版權(quán)有疑問，請點擊 反饋舉報
我們致力于提供一個高質(zhì)量內(nèi)容的交流平臺。為落實國家互聯(lián)網(wǎng)信息辦公室“依法管網(wǎng)、依法辦網(wǎng)、依法上網(wǎng)”的要求，為完善跟帖評論自律管理，為了保護用戶創(chuàng)造的內(nèi)容、維護開放、真實、專業(yè)的平臺氛圍，我們團隊將依據(jù)本公約中的條款對注冊用戶和發(fā)布在本平臺的內(nèi)容進行管理。平臺鼓勵用戶創(chuàng)作、發(fā)布優(yōu)質(zhì)內(nèi)容，同時也將采取必要措施管理違法、侵權(quán)或有其他不良影響的網(wǎng)絡(luò)信息。
一、根據(jù)《網(wǎng)絡(luò)信息內(nèi)容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護法》等法律法規(guī)，對以下違法、不良信息或存在危害的行為進行處理。
1. 違反法律法規(guī)的信息，主要表現(xiàn)為：
1)反對憲法所確定的基本原則；
2)危害國家安全，泄露國家秘密，顛覆國家政權(quán)，破壞國家統(tǒng)一，損害國家榮譽和利益；
3)侮辱、濫用英烈形象，歪曲、丑化、褻瀆、否定英雄烈士事跡和精神，以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽、榮譽；
4)宣揚恐怖主義、極端主義或者煽動實施恐怖活動、極端主義活動；
5)煽動民族仇恨、民族歧視，破壞民族團結(jié)；
6)破壞國家宗教政策，宣揚邪教和封建迷信；
7)散布謠言，擾亂社會秩序，破壞社會穩(wěn)定；
8)宣揚淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪；
9)煽動非法集會、結(jié)社、游行、示威、聚眾擾亂社會秩序；
10)侮辱或者誹謗他人，侵害他人名譽、隱私和其他合法權(quán)益；
11)通過網(wǎng)絡(luò)以文字、圖片、音視頻等形式，對未成年人實施侮辱、誹謗、威脅或者惡意損害未成年人形象進行網(wǎng)絡(luò)欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法規(guī)禁止的其他內(nèi)容；
2. 不友善：不尊重用戶及其所貢獻內(nèi)容的信息或行為。主要表現(xiàn)為：
1)輕蔑：貶低、輕視他人及其勞動成果；
2)誹謗：捏造、散布虛假事實，損害他人名譽；
3)嘲諷：以比喻、夸張、侮辱性的手法對他人或其行為進行揭露或描述，以此來激怒他人；
4)挑釁：以不友好的方式激怒他人，意圖使對方對自己的言論作出回應，蓄意制造事端；
5)羞辱：貶低他人的能力、行為、生理或身份特征，讓對方難堪；
6)謾罵：以不文明的語言對他人進行負面評價；
7)歧視：煽動人群歧視、地域歧視等，針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊；
8)威脅：許諾以不良的后果來迫使他人服從自己的意志；
3. 發(fā)布垃圾廣告信息：以推廣曝光為目的，發(fā)布影響用戶體驗、擾亂本網(wǎng)站秩序的內(nèi)容，或進行相關(guān)行為。主要表現(xiàn)為：
1)多次發(fā)布包含售賣產(chǎn)品、提供服務(wù)、宣傳推廣內(nèi)容的垃圾廣告。包括但不限于以下幾種形式：
2)單個帳號多次發(fā)布包含垃圾廣告的內(nèi)容；
3)多個廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內(nèi)容；
4)多次發(fā)布包含欺騙性外鏈的內(nèi)容，如未注明的淘寶客鏈接、跳轉(zhuǎn)網(wǎng)站等，誘騙用戶點擊鏈接
5)發(fā)布大量包含推廣鏈接、產(chǎn)品、品牌等內(nèi)容獲取搜索引擎中的不正當曝光；
6)購買或出售帳號之間虛假地互動，發(fā)布干擾網(wǎng)站秩序的推廣內(nèi)容及相關(guān)交易。
7)發(fā)布包含欺騙性的惡意營銷內(nèi)容，如通過偽造經(jīng)歷、冒充他人等方式進行惡意營銷；
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內(nèi)容審核的廣告內(nèi)容。
4. 色情低俗信息，主要表現(xiàn)為：
1)包含自己或他人性經(jīng)驗的細節(jié)描述或露骨的感受描述；
2)涉及色情段子、兩性笑話的低俗內(nèi)容；
3)配圖、頭圖中包含庸俗或挑逗性圖片的內(nèi)容；
4)帶有性暗示、性挑逗等易使人產(chǎn)生性聯(lián)想；
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適；
6)炒作緋聞、丑聞、劣跡等；
7)宣揚低俗、庸俗、媚俗內(nèi)容。
5. 不實信息，主要表現(xiàn)為：
1)可能存在事實性錯誤或者造謠等內(nèi)容；
2)存在事實夸大、偽造虛假經(jīng)歷等誤導他人的內(nèi)容；
3)偽造身份、冒充他人，通過頭像、用戶名等個人信息暗示自己具有特定身份，或與特定機構(gòu)或個人存在關(guān)聯(lián)。
6. 傳播封建迷信，主要表現(xiàn)為：
1)找人算命、測字、占卜、解夢、化解厄運、使用迷信方式治病；
2)求推薦算命看相大師；
3)針對具體風水等問題進行求助或咨詢；
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失，包括通過占卜方法問婚姻、前程、運勢，東西寵物丟了能不能找回、取名改名等；
7. 文章標題黨，主要表現(xiàn)為：
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來誘導用戶；
2)內(nèi)容與標題之間存在嚴重不實或者原意扭曲；
3)使用夸張標題，內(nèi)容與標題嚴重不符的。
8.「飯圈」亂象行為，主要表現(xiàn)為：
1)誘導未成年人應援集資、高額消費、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網(wǎng)絡(luò)水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點」、制造話題等形式干擾輿論，影響傳播秩序
9. 其他危害行為或內(nèi)容，主要表現(xiàn)為：
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導未成年人不良嗜好影響未成年人身心健康的；
2)不當評述自然災害、重大事故等災難的；
3)美化、粉飾侵略戰(zhàn)爭行為的；
4)法律、行政法規(guī)禁止，或可能對網(wǎng)絡(luò)生態(tài)造成不良影響的其他內(nèi)容。
二、違規(guī)處罰
本網(wǎng)站通過主動發(fā)現(xiàn)和接受用戶舉報兩種方式收集違規(guī)行為信息。所有有意的降低內(nèi)容質(zhì)量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當一個用戶發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將依據(jù)相關(guān)用戶違規(guī)情節(jié)嚴重程度，對帳號進行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號，或者濫用多個帳號發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將加重處罰。
三、申訴
隨著平臺管理經(jīng)驗的不斷豐富，本網(wǎng)站出于維護本網(wǎng)站氛圍和秩序的目的，將不斷完善本公約。
如果本網(wǎng)站用戶對本網(wǎng)站基于本公約規(guī)定做出的處理有異議，可以通過「建議反饋」功能向本網(wǎng)站進行反饋。
(規(guī)則的最終解釋權(quán)歸屬本網(wǎng)站所有)