UI轉交互設計，送你五個交互入門到精通的途徑

Sponsor

前言：我們知道UI設計師是比較注重于視覺方面，但是在這個競爭激烈的時代，如果只會單一的技能，那么以后找工作就會越來越難了。那么我們除了加強視覺方面的提升外，可以嘗試從UI設計轉到交互設計，提升自己，減少未來被淘汰的風險。

以下來是交互設計入門到精通的5個途徑，想要學交互設計不要錯過這篇引領入門的好文章哦。

目錄：

• 1、練習原型
• 2、看優秀的交互文檔
• 3、思考設計背后的邏輯
• 4、總結設計方法
• 5、項目復盤

五個交互設計入門到精通的途徑

1、練習原型

練習原型是培養流程意識和全局意識的過程，以及對設計的深度思考。

練習一套完整的產品原型后，嘗試不斷補充遺漏的交互場景和狀態。重復做幾套產品的交互原型后，這對于ui設計師來說，已經入門了。

部分UI會覺得平時都是做的高保真視覺稿，畫原型應該是一件很簡單的事情。

其實不然，UI設計師沒有訓練交互原型的話，那么前期從事交互工作會比較吃力。會容易關注于視覺細節，對于交互流程的全局思路掌握不夠。導致原型主流程和分支流程容易出問題。

所以平時沒事多練練原型，畫完原型后把自己當作用戶來審視原型稿。找出其中的問題，并不斷完善，提升原型的質量。

2、看優秀的交互文檔

看一些優秀的交互文檔，看看別人對各個狀態的標注和說明，以及流程的設計思考。

看看別人原型中包含那些結構，是否值得借鑒并學習。找到優秀的交互輸出模板，并根據自身設計團隊情況，優化交互文檔結構，提升交互文檔質量

一套完整且比較優秀的移動端交互文檔，我認為可以包含：業務背景、設計目標、業務規則定義、用戶流程圖、設計原則、交互流程標注以及交互各種狀態異常場景。

業務背景

業務背景通常是我們為什么要做這個功能。通過做這個功能，對業務有什么幫助。通過業務背景，我們可以推演出業務訴求，并得到對應的產品目標。

設計目標

設計目標是通過設計得到什么樣的結果，對產品來說可以獲得什么樣的好處。所以在交互文檔的設計中要重點體現出設計目標。通過明確設計目標，可以清晰的指導我們做交互方案。

業務規則定義

關于產品的業務規則，可能需要同產品經理、業務方和運營一起溝通討論。這個里面涉及到整個產品業務的規則。在實際工作中，我們交互會碰到兩種情況：

情況1：產品經理會和業務或運營溝通，然后輸出一份業務規則，這時候我們交互可以認真閱讀并梳理業務規則，如果覺得不合理的話，可以和產品經理討論溝通，并修改業務規則使之變得更合理，并輸出在交互文檔中。

情況2：產品經理只是簡單的有個業務規則想法，這時候需要我們交互設計師幫忙一起溝通并細化其業務規則，并輸出在交互文檔中。

用戶流程圖

用戶流程即我們設計師要梳理用戶在使用過程中的各種場景流程，通過用戶流程圖可避免遺漏場景，避免交互方案遺漏。

設計原則

這里的設計原則非平時看到的一些交互或者視覺設計原則，而是在設計這個需求交互方案中需要遵守的原則。這里的設計原則和業務強掛鉤。

交互流程標注

基于上面的用戶流程圖，可以得到用戶操作流程，即交互流程標注。

目前我覺得交互流程標注比較好的展示方式，是按照一個主流程在一個站點地圖/畫板的形式展示。當一個主流程中存在幾個支線操作流程時，可以分別在一個站點地圖/畫板中，展示出來。同時用標題區分說明分支流程的操作名字。如下圖所示：

在涉及到異常場景，且可以全局性復用的情況，則只需要全局性組件說明即可，不用每個流程都展示其異常場景組件或者頁面。

全局組件指的是整個產品通用的組件，例如全局斷網，操作成功、操作失敗、加載、空數據界面，404等

全局斷網：一般是在首頁使用tips提示。用戶在其他界面點擊操作時，也會出現toast反饋提示用戶。也有一些app在用戶進入出現對話框提示用戶網絡異常。相對于對話框，使用tips對用戶的干擾更小。

操作成功：一般操作成功都是根據具體的使用場景對出對應的提示。

操作失?。寒惓Ｇ闆r導致操作失敗，這時需要統一的提示，通常使用toast，也有一些使用對話框強提示用戶。

加載：涉及到全局加載和局部加載，全局加載在設計中要統一說明，例如上一個界面點擊進入下一個界面，使用的全局加載就需要說明。如果是一些小場景的加載，那么需要特殊說明。例如上拉加載，下拉加載，局部小區域加載等。

空數據類型一共有三類：

1、初始狀態的定義：初始化狀態，沒有任何內容，需要用戶進行某種操作才能產生內容的界面。

2、清空狀態的定義：通過刪除或其他用戶操作，清空當前的頁面內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。

3、出錯狀態的定義：由于網絡、服務器或者沒有找他其他結果等原因導致無法加載內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結果界面也可以用這樣的思路來設計。

3、思考設計背后的邏輯

平時在使用產品時，學會思考設計背后的邏輯。以一個美團設計的為例：

美團首頁改版將用戶下單的狀態顯示在首頁。

這樣的改版，作為設計師或者產品經理，應該從兩方面來看待這個事情，即從產品訴求和用戶訴求雙方面來看待，從兩個方面看待得到的結果是迥然不同的。

產品訴求角度：新版將用戶下單的狀態顯示在首頁可提升首頁訪問深度和曝光率。

個人中心訂單頁并不能做到流量的二次利用。這也是這次改版的主要原因。

以前用戶查看訂單狀態都是只能去訂單頁面，路徑較長，且訂單頁面沒有產品曝光，無法進行其他轉化，流量無法被多次利用。

所以將用戶的訂單狀態這種高頻操作放置于首頁，可利于其他業務的曝光。

美團的吃喝玩樂，其他業務被用戶查看的概率提升。對產品來說是有巨大的好處。

用戶訴求視角：將用戶訂單狀態放于首頁，用戶的使用場景，會不時的查看訂單狀態，放置于首頁可方面快捷的提供用戶查看訂單狀態，對用戶來說體驗好。

從用戶訴求和產品的訴求來看，這次改版應該是很優秀的。

但是脫離于個體業務，從產品全局來看，這種設計的邏輯方式，會讓用戶對于app的信息的尋找邏輯進行顛覆和破壞。

以后是不是重要的東西都可以放置于首頁？如果這個改版開了個頭，以后其他業務也都有這個訴求，整個產品的生態都會失去控制。

4、總結設計方法

在工作中可以嘗試總結一些設計方法，提升設計能力。

之前我總結了以下5個方法，可以助力設計師做出優秀甚至驚艷的設計方案。分別為：

1、拆解設計需求

2、分析線上數據

3、窮舉設計方案

4、切換用戶視角

5、競品方案對比

1、拆解設計需求

設計師接到的設計需求，大部分情況下是通過產品經理那里獲得的。而產品經理的原始需求來源于：業務方、用戶和老板。

產品經理會將原始需求進行整理，從而轉化成產品需求，在這一過程中產品經理可能會出現對原始需求的理解出現偏差（范圍擴大、范圍縮小或者是方向錯誤）。

設計師如果直接拿著產品需求就開始做設計，可能會導致設計方案不符合業務需求。所以設計師進行設計前，最好也了解原始需求是怎么樣產生的，這樣才能做到心中有數。

掌握原始需求和產品需求后，接下來就要對需求進行拆解。

舉個小例子：設計這邊接到了一個產品需求，需求為：為降低產品占用用戶手機存儲空間。優化線上清理緩存功能，提升用戶完成清理緩存的成功率。

通過這個產品需求可以看出，設計師要做的就是提升清理緩存流程的成功率。但是從原始需求可以看出，真正核心需要解決的則是如何降低產品占用用戶手機存儲空間。

所以設計師的方案可以從4方面入手：

1、提升清理緩存的成功率；

2、和開發溝通，是否有更好的更改緩存機制；

3、通過設計的手段引導用戶清理緩存垃圾等。

4、是否可以增加自動清理功能。

這樣的話，設計方案才能更好的服務于產品和用戶。

2、分析線上數據

當我們拆解了設計需求后，接下來就需要分析線上數據，看這個業務相關的數據情況怎么樣？

分析數據情況，然后思考線上布局的合理性，然后進行布局設計和流程設計。

舉個例子，在某個操作流程中，發現有一個步驟，用戶操作流失率很高，這時候我們就要分析為什么這一步操作流失率高。

例如注冊流程/綁定銀行卡的過程中，總的轉化率只有0.06%，用戶完成率過低，如果要優化整個用戶注冊操作流程，那么需要找出流失過大的節點進行優化。

從數據可以看出有兩個失敗率最高，分別為：注冊流程和綁定銀行卡流程。

這時候設計師就要分析整個注冊流程和綁定銀行卡流程。哪些設計因素導致成功率低。并針對成功率低進行針對性的布局優化和流程優化。

3、窮舉方案方式

當設計出一個方案時，則需要對完成的方案進行窮舉，發散出更多的方案，最后從眾多方案中找到一個更完美的方案。

以表單設計為例。常見的設計方案，是將所有的表單內容按照分組的方式，進行排列，如下圖所示：

但是這種方案存在一個問題，用戶進來之后，發現有大量的信息需要填寫，填寫壓力大，導致用戶的填寫意愿變弱，導致提交成功率降低。

接下來就要嘗試其他方向的設計思路，通過窮舉法可以想到的有分步設計和將表單填寫內容隱藏到下一級界面，從而降低用戶填寫壓力提升用戶的操作成功率。

下圖左邊為分步設計，右圖為表單信息隱藏到下一級頁面。

4、切換用戶視角

設計方案確認之后，這時候有一步很關鍵，就是我們要將自己想像成小白用戶。

我們以小白用戶的視角去審視方案?？纯从袥]有不理解的地方。

為什么要有這一步呢？

因為我們設計師在設計方案的過程中，會默認一些設計規則邏輯，而這些規則邏輯用戶是不知道的。

這就導致了我們設計師覺得這個方案可行。但是普通用戶卻不知道這個規則邏輯，導致我們的方案用戶看不懂。

當我們切換用戶視角發現方案存在的問題后，再嘗試如何讓用戶更好的理解的前提下去優化方案。

5、競品方案對比

為什么我將競品方案放在后面呢？

如果做設計之前就參考競品，那么就容易默認為競品的方案是標準的，是優秀的方案。

會不由自主的按照競品的思路去做設計，最終導致的后果就是和競品方案相似。

由于我們和競品的人群，業務背景等方面都不相同。

競品的設計方案基于開發或者老板等業務背景，才不得已使用非優秀的方案，我們如果參考競品的話，最后的結果也可能難以做出優秀的方案。

當我們的設計方案做好之后，這時候我們就可以分析我們的設計和競品的區別和差異性，從而得到靈感， 優化出更好的設計。

5、項目復盤

項目復盤的意義：

1.提升設計師多種設計方法能力

2.提升設計師整體設計思維推導能力

3.提升設計師整體匯報、述職和晉升答辯能力

所以在工作中，每做完一個重要項目都要做好項目復盤。這樣的話，既是是階段性工作的總結，也是為下一次做項目提供更好的經驗。

復盤的方法有多種，可以結合設計方法來做總結，在復盤的過程中，要體現最終的結果，即通過數據或用戶反饋對我們設計驗證。

也要總結其中的不足，為之后工作中避免踩坑，并更好的為以后的工作提供服務。

以上就是交互設計從入門到精通的5個方法途徑，如果你有其他想法，歡迎在評論區留言。

作者 | Echo
來源 | Echo的設計筆記 （id:uxecho )

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。