很多 UI 設(shè)計(jì)師和我交流，想學(xué)交互設(shè)計(jì)，也有一部分也想轉(zhuǎn)交互。
如何從入門到精通，這里我以自己的親身經(jīng)歷說說交互從入門到精通的 5 個(gè)途徑。
練習(xí)原型是培養(yǎng)流程意識和全局意識的過程，以及對設(shè)計(jì)的深度思考。
練習(xí)一套完整的產(chǎn)品原型后，嘗試不斷補(bǔ)充遺漏的交互場景和狀態(tài)。重復(fù)做幾套產(chǎn)品的交互原型后，這對于 UI 設(shè)計(jì)師來說，已經(jīng)入門了。
部分 UI 會覺得平時(shí)都是做的高保真視覺稿，畫原型應(yīng)該是一件很簡單的事情。
其實(shí)不然，UI 設(shè)計(jì)師沒有訓(xùn)練交互原型的話，那么前期從事交互工作會比較吃力。會容易關(guān)注于視覺細(xì)節(jié)，對于交互流程的全局思路掌握不夠。導(dǎo)致原型主流程和分支流程容易出問題。
所以平時(shí)沒事多練練原型，畫完原型后把自己當(dāng)作用戶來審視原型稿。找出其中的問題，并不斷完善，提升原型的質(zhì)量。
看一些優(yōu)秀的交互文檔，看看別人對各個(gè)狀態(tài)的標(biāo)注和說明，以及流程的設(shè)計(jì)思考。
看看別人原型中包含那些結(jié)構(gòu)，是否值得借鑒并學(xué)習(xí)。找到優(yōu)秀的交互輸出模板，并根據(jù)自身設(shè)計(jì)團(tuán)隊(duì)情況，優(yōu)化交互文檔結(jié)構(gòu)，提升交互文檔質(zhì)量
一套完整且比較優(yōu)秀的移動端交互文檔，我認(rèn)為可以包含：業(yè)務(wù)背景、設(shè)計(jì)目標(biāo)、業(yè)務(wù)規(guī)則定義、用戶流程圖、設(shè)計(jì)原則、交互流程標(biāo)注以及交互各種狀態(tài)異常場景。
1. 業(yè)務(wù)背景
業(yè)務(wù)背景通常是我們?yōu)槭裁匆鲞@個(gè)功能。通過做這個(gè)功能，對業(yè)務(wù)有什么幫助。通過業(yè)務(wù)背景，我們可以推演出業(yè)務(wù)訴求，并得到對應(yīng)的產(chǎn)品目標(biāo)。
2. 設(shè)計(jì)目標(biāo)
設(shè)計(jì)目標(biāo)是通過設(shè)計(jì)得到什么樣的結(jié)果，對產(chǎn)品來說可以獲得什么樣的好處。所以在交互文檔的設(shè)計(jì)中要重點(diǎn)體現(xiàn)出設(shè)計(jì)目標(biāo)。通過明確設(shè)計(jì)目標(biāo)，可以清晰的指導(dǎo)我們做交互方案。
3. 業(yè)務(wù)規(guī)則定義
關(guān)于產(chǎn)品的業(yè)務(wù)規(guī)則，可能需要同產(chǎn)品經(jīng)理、業(yè)務(wù)方和運(yùn)營一起溝通討論。這個(gè)里面涉及到整個(gè)產(chǎn)品業(yè)務(wù)的規(guī)則。在實(shí)際工作中，我們交互會碰到兩種情況：
情況 1：產(chǎn)品經(jīng)理會和業(yè)務(wù)或運(yùn)營溝通，然后輸出一份業(yè)務(wù)規(guī)則，這時(shí)候我們交互可以認(rèn)真閱讀并梳理業(yè)務(wù)規(guī)則，如果覺得不合理的話，可以和產(chǎn)品經(jīng)理討論溝通，并修改業(yè)務(wù)規(guī)則使之變得更合理，并輸出在交互文檔中。
情況 2：產(chǎn)品經(jīng)理只是簡單的有個(gè)業(yè)務(wù)規(guī)則想法，這時(shí)候需要我們交互設(shè)計(jì)師幫忙一起溝通并細(xì)化其業(yè)務(wù)規(guī)則，并輸出在交互文檔中。
4. 用戶流程圖
用戶流程即我們設(shè)計(jì)師要梳理用戶在使用過程中的各種場景流程，通過用戶流程圖可避免遺漏場景，避免交互方案遺漏。
5. 設(shè)計(jì)原則
這里的設(shè)計(jì)原則非平時(shí)看到的一些交互或者視覺設(shè)計(jì)原則，而是在設(shè)計(jì)這個(gè)需求交互方案中需要遵守的原則。這里的設(shè)計(jì)原則和業(yè)務(wù)強(qiáng)掛鉤。
6. 交互流程標(biāo)注
基于上面的用戶流程圖，可以得到用戶操作流程，即交互流程標(biāo)注。
目前我覺得交互流程標(biāo)注比較好的展示方式，是按照一個(gè)主流程在一個(gè)站點(diǎn)地圖/畫板的形式展示。當(dāng)一個(gè)主流程中存在幾個(gè)支線操作流程時(shí)，可以分別在一個(gè)站點(diǎn)地圖/畫板中，展示出來。同時(shí)用標(biāo)題區(qū)分說明分支流程的操作名字。如下圖所示：
在涉及到異常場景，且可以全局性復(fù)用的情況，則只需要全局性組件說明即可，不用每個(gè)流程都展示其異常場景組件或者頁面。
全局組件指的是整個(gè)產(chǎn)品通用的組件，例如全局?jǐn)嗑W(wǎng)，操作成功、操作失敗、加載、空數(shù)據(jù)界面，404 等
全局?jǐn)嗑W(wǎng)：一般是在首頁使用 tips 提示。用戶在其他界面點(diǎn)擊操作時(shí)，也會出現(xiàn) toast 反饋提示用戶。也有一些 app 在用戶進(jìn)入出現(xiàn)對話框提示用戶網(wǎng)絡(luò)異常。相對于對話框，使用 tips 對用戶的干擾更小。
操作成功：一般操作成功都是根據(jù)具體的使用場景對出對應(yīng)的提示。
操作失。寒惓Ｇ闆r導(dǎo)致操作失敗，這時(shí)需要統(tǒng)一的提示，通常使用 toast，也有一些使用對話框強(qiáng)提示用戶。
加載：涉及到全局加載和局部加載，全局加載在設(shè)計(jì)中要統(tǒng)一說明，例如上一個(gè)界面點(diǎn)擊進(jìn)入下一個(gè)界面，使用的全局加載就需要說明。如果是一些小場景的加載，那么需要特殊說明。例如上拉加載，下拉加載，局部小區(qū)域加載等。
空數(shù)據(jù)類型一共有三類：
- 初始狀態(tài)的定義：初始化狀態(tài)，沒有任何內(nèi)容，需要用戶進(jìn)行某種操作才能產(chǎn)生內(nèi)容的界面。
- 清空狀態(tài)的定義：通過刪除或其他用戶操作，清空當(dāng)前的頁面內(nèi)容，產(chǎn)生了空界面，這時(shí)候需要有明確的提示，且告知用戶該如何處理。
- 出錯(cuò)狀態(tài)的定義：由于網(wǎng)絡(luò)、服務(wù)器或者沒有找他其他結(jié)果等原因?qū)е聼o法加載內(nèi)容，產(chǎn)生了空界面，這時(shí)候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結(jié)果界面也可以用這樣的思路來設(shè)計(jì)。
平時(shí)在使用產(chǎn)品時(shí)，學(xué)會思考設(shè)計(jì)背后的邏輯。以一個(gè)美團(tuán)設(shè)計(jì)的為例：
美團(tuán)首頁改版將用戶下單的狀態(tài)顯示在首頁。
這樣的改版，作為設(shè)計(jì)師或者產(chǎn)品經(jīng)理，應(yīng)該從兩方面來看待這個(gè)事情，即從產(chǎn)品訴求和用戶訴求雙方面來看待，從兩個(gè)方面看待得到的結(jié)果是迥然不同的。
產(chǎn)品訴求角度：新版將用戶下單的狀態(tài)顯示在首頁可提升首頁訪問深度和曝光率。
個(gè)人中心訂單頁并不能做到流量的二次利用。這也是這次改版的主要原因。
以前用戶查看訂單狀態(tài)都是只能去訂單頁面，路徑較長，且訂單頁面沒有產(chǎn)品曝光，無法進(jìn)行其他轉(zhuǎn)化，流量無法被多次利用。
所以將用戶的訂單狀態(tài)這種高頻操作放置于首頁，可利于其他業(yè)務(wù)的曝光。
美團(tuán)的吃喝玩樂，其他業(yè)務(wù)被用戶查看的概率提升。對產(chǎn)品來說是有巨大的好處。
用戶訴求視角：將用戶訂單狀態(tài)放于首頁，用戶的使用場景，會不時(shí)的查看訂單狀態(tài)，放置于首頁可方面快捷的提供用戶查看訂單狀態(tài)，對用戶來說體驗(yàn)好。
從用戶訴求和產(chǎn)品的訴求來看，這次改版應(yīng)該是很優(yōu)秀的。
但是脫離于個(gè)體業(yè)務(wù)，從產(chǎn)品全局來看，這種設(shè)計(jì)的邏輯方式，會讓用戶對于 app 的信息的尋找邏輯進(jìn)行顛覆和破壞。
以后是不是重要的東西都可以放置于首頁？如果這個(gè)改版開了個(gè)頭，以后其他業(yè)務(wù)也都有這個(gè)訴求，整個(gè)產(chǎn)品的生態(tài)都會失去控制。
在工作中可以嘗試總結(jié)一些設(shè)計(jì)方法，提升設(shè)計(jì)能力。
之前我總結(jié)了以下 5 個(gè)方法，可以助力設(shè)計(jì)師做出優(yōu)秀甚至驚艷的設(shè)計(jì)方案。分別為：
- 拆解設(shè)計(jì)需求
- 分析線上數(shù)據(jù)
- 窮舉設(shè)計(jì)方案
- 切換用戶視角
- 競品方案對比
1. 拆解設(shè)計(jì)需求
設(shè)計(jì)師接到的設(shè)計(jì)需求，大部分情況下是通過產(chǎn)品經(jīng)理那里獲得的。而產(chǎn)品經(jīng)理的原始需求來源于：業(yè)務(wù)方、用戶和老板。
產(chǎn)品經(jīng)理會將原始需求進(jìn)行整理，從而轉(zhuǎn)化成產(chǎn)品需求，在這一過程中產(chǎn)品經(jīng)理可能會出現(xiàn)對原始需求的理解出現(xiàn)偏差（范圍擴(kuò)大、范圍縮小或者是方向錯(cuò)誤）。
設(shè)計(jì)師如果直接拿著產(chǎn)品需求就開始做設(shè)計(jì)，可能會導(dǎo)致設(shè)計(jì)方案不符合業(yè)務(wù)需求。所以設(shè)計(jì)師進(jìn)行設(shè)計(jì)前，最好也了解原始需求是怎么樣產(chǎn)生的，這樣才能做到心中有數(shù)。
掌握原始需求和產(chǎn)品需求后，接下來就要對需求進(jìn)行拆解。
舉個(gè)小例子：設(shè)計(jì)這邊接到了一個(gè)產(chǎn)品需求，需求為：為降低產(chǎn)品占用用戶手機(jī)存儲空間。優(yōu)化線上清理緩存功能，提升用戶完成清理緩存的成功率。
通過這個(gè)產(chǎn)品需求可以看出，設(shè)計(jì)師要做的就是提升清理緩存流程的成功率。但是從原始需求可以看出，真正核心需要解決的則是如何降低產(chǎn)品占用用戶手機(jī)存儲空間。
所以設(shè)計(jì)師的方案可以從 4 方面入手：
- 提升清理緩存的成功率；
- 和開發(fā)溝通，是否有更好的更改緩存機(jī)制；
- 通過設(shè)計(jì)的手段引導(dǎo)用戶清理緩存垃圾等。
- 是否可以增加自動清理功能。
這樣的話，設(shè)計(jì)方案才能更好的服務(wù)于產(chǎn)品和用戶。
2. 分析線上數(shù)據(jù)
當(dāng)我們拆解了設(shè)計(jì)需求后，接下來就需要分析線上數(shù)據(jù)，看這個(gè)業(yè)務(wù)相關(guān)的數(shù)據(jù)情況怎么樣？
分析數(shù)據(jù)情況，然后思考線上布局的合理性，然后進(jìn)行布局設(shè)計(jì)和流程設(shè)計(jì)。
舉個(gè)例子，在某個(gè)操作流程中，發(fā)現(xiàn)有一個(gè)步驟，用戶操作流失率很高，這時(shí)候我們就要分析為什么這一步操作流失率高。
例如注冊流程/綁定銀行卡的過程中，總的轉(zhuǎn)化率只有 0.06%，用戶完成率過低，如果要優(yōu)化整個(gè)用戶注冊操作流程，那么需要找出流失過大的節(jié)點(diǎn)進(jìn)行優(yōu)化。
從數(shù)據(jù)可以看出有兩個(gè)失敗率最高，分別為：注冊流程和綁定銀行卡流程。
這時(shí)候設(shè)計(jì)師就要分析整個(gè)注冊流程和綁定銀行卡流程。哪些設(shè)計(jì)因素導(dǎo)致成功率低。并針對成功率低進(jìn)行針對性的布局優(yōu)化和流程優(yōu)化。
3. 窮舉方案方式
當(dāng)設(shè)計(jì)出一個(gè)方案時(shí)，則需要對完成的方案進(jìn)行窮舉，發(fā)散出更多的方案，最后從眾多方案中找到一個(gè)更完美的方案。
以表單設(shè)計(jì)為例。常見的設(shè)計(jì)方案，是將所有的表單內(nèi)容按照分組的方式，進(jìn)行排列，如下圖所示：
但是這種方案存在一個(gè)問題，用戶進(jìn)來之后，發(fā)現(xiàn)有大量的信息需要填寫，填寫壓力大，導(dǎo)致用戶的填寫意愿變?nèi)，?dǎo)致提交成功率降低。
接下來就要嘗試其他方向的設(shè)計(jì)思路，通過窮舉法可以想到的有分步設(shè)計(jì)和將表單填寫內(nèi)容隱藏到下一級界面，從而降低用戶填寫壓力提升用戶的操作成功率。
下圖左邊為分步設(shè)計(jì)，右圖為表單信息隱藏到下一級頁面。
4. 切換用戶視角
設(shè)計(jì)方案確認(rèn)之后，這時(shí)候有一步很關(guān)鍵，就是我們要將自己想像成小白用戶。
我們以小白用戶的視角去審視方案？纯从袥]有不理解的地方。
為什么要有這一步呢？
因?yàn)槲覀冊O(shè)計(jì)師在設(shè)計(jì)方案的過程中，會默認(rèn)一些設(shè)計(jì)規(guī)則邏輯，而這些規(guī)則邏輯用戶是不知道的。
這就導(dǎo)致了我們設(shè)計(jì)師覺得這個(gè)方案可行。但是普通用戶卻不知道這個(gè)規(guī)則邏輯，導(dǎo)致我們的方案用戶看不懂。
當(dāng)我們切換用戶視角發(fā)現(xiàn)方案存在的問題后，再嘗試如何讓用戶更好的理解的前提下去優(yōu)化方案。
5. 競品方案對比
為什么我將競品方案放在后面呢？
如果做設(shè)計(jì)之前就參考競品，那么就容易默認(rèn)為競品的方案是標(biāo)準(zhǔn)的，是優(yōu)秀的方案。
會不由自主的按照競品的思路去做設(shè)計(jì)，最終導(dǎo)致的后果就是和競品方案相似。
由于我們和競品的人群，業(yè)務(wù)背景等方面都不相同。
競品的設(shè)計(jì)方案基于開發(fā)或者老板等業(yè)務(wù)背景，才不得已使用非優(yōu)秀的方案，我們?nèi)绻麉⒖几偲返脑，最后的結(jié)果也可能難以做出優(yōu)秀的方案。
當(dāng)我們的設(shè)計(jì)方案做好之后，這時(shí)候我們就可以分析我們的設(shè)計(jì)和競品的區(qū)別和差異性，從而得到靈感， 優(yōu)化出更好的設(shè)計(jì)。
項(xiàng)目復(fù)盤的意義：
- 提升設(shè)計(jì)師多種設(shè)計(jì)方法能力
- 提升設(shè)計(jì)師整體設(shè)計(jì)思維推導(dǎo)能力
- 提升設(shè)計(jì)師整體匯報(bào)、述職和晉升答辯能力
所以在工作中，每做完一個(gè)重要項(xiàng)目都要做好項(xiàng)目復(fù)盤。這樣的話，既是是階段性工作的總結(jié)，也是為下一次做項(xiàng)目提供更好的經(jīng)驗(yàn)。
復(fù)盤的方法有多種，可以結(jié)合設(shè)計(jì)方法來做總結(jié)，在復(fù)盤的過程中，要體現(xiàn)最終的結(jié)果，即通過數(shù)據(jù)或用戶反饋對我們設(shè)計(jì)驗(yàn)證。
也要總結(jié)其中的不足，為之后工作中避免踩坑，并更好的為以后的工作提供服務(wù)。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。