如何學習Ui和交互設計？

交互設計師的知識體系

交互設計是一門交叉學科，廣義的交互設計涉及人機工程學、心理學、社會學、設計學等等知識，從狹義的角度看，交互設計主要指人機界面交互。涉及到用戶研究能力、需求分析能力、信息架構設計能力、流程邏輯設計能力、原型設計能力、編寫交互設計文檔、了解設計原則以及一些其他能力。

▲交互設計師知識體系

01用戶研究能力

在一個完整的UED團隊中，其實是有專門的用戶研究人員。用戶研究人員負責做用戶研究，并把研究結果制作成用戶研究報告。在這里把用戶研究放到交互設計師的知識體系中，是因為用戶研究在整個設計的過程中有著至關重要的地位。

交互設計師雖然不是專職的用戶研究人員，但是也需要掌握一定的用戶研究知識，學會建立用戶模型，分析用戶研究數據，挖掘用戶行為數據。這樣有利于交互設計師在設計階段對產品核心需求及價值的把握，常用的用戶研究方法有問卷調查、深入訪談等。

02需求分析能力

當面對用戶研究得到的數據時，交互設計師應該具有一定的需求分析能力。需求分析的目的是明確產品目標用戶、使用場景、產品定位、產品功能優先級、并讓開發、測試等相關人員能明確了解需求，便于日后印證設計。交互設計師需要在了解用戶的主導需求之后能夠挖掘出用戶的潛在訴求，并對競品和已有的產品版本進行分析。

03信息架構設計能力

信息架構是產品的骨架，是對產品功能進行的層級式的梳理。良好的信息架構可以對產品的功能進行明確的分類，并明確各個層級之間的功能關系，符合目標用戶的心理模型。常用的信息架構模式包括層級結構、線型結構、自然結構、矩陣結構。交互設計師需要了解各個結構模式的特點并根據自己產品的特點選擇合適的信息架構形式。

信息架構常用的梳理方法是卡片分類法。通常的操作過程是設計師準備一定量的功能卡片，讓用戶將這些類型進行分類，形成功能集群，并對每個功能集群進行功能性概括。

▲“最美應用”信息構架

04流程邏輯設計能力

流程邏輯設計是基于上步中的信息架構，也就是依據產品功能進行的。流程邏輯設計要表現用戶使用產品過程中的關鍵點，明確產品的操作鏈，是對信息架構的邏輯梳理。

在流程設計過程中，可以使用Visio、Mindmanger等專業的流程圖繪制軟件進行繪制，在繪制流程圖時要注意考慮流程節點的正常情況和異常情況。

05原型設計能力

產品的流程邏輯設計結束之后，就進入原型設計的環節。原型主要表現業務流程、產品的框架和布局以及交互規則，原型分為低保真原型和高保真原型。

低保真原型的設計主要是在設計的開始階段，采用線框圖的形式制作一個可演示的Demo，便于設計師與產品經理討論修改。高保真原型是指更接近真實產品效果的Demo。在實際工作中，大部分項目都不需要高保真，只需要低保真原型的設計。

▲原型圖示例

06編寫交互設計文檔

交互設計文檔本質上是一種交互設計說明，是用來梳理交互事件、頁面之間的邏輯關系、頁面跳轉等交互動作的文字和圖片相結合的說明稿。交互設計說明書的閱讀對象是產品經理、UI設計師、研發人員、測試人員。交互設計文檔包括軟件頁面、頁面狀態、頁面流程、交互動作說明文字。好的交互設計文檔可以讓團隊中其他的人員能迅速了解產品的整體架構和邏輯關系，以便對產品進行評審和改進，避免產品設計的偏差。

▲交互設計文檔示例

07了解設計原則

掌握一些交互設計原則是交互設計師必備的技能。交互設計不是無章可循，而是有一些設計的原則需要交互設計師遵守，如一致性原則、Jakob Nislsen的10條可用性原則、易用原則、中間用戶原則、基于用戶心理模型、2——8原則等等。基于交互設計原則的交互設計可以保證交互設計的流暢性。

08其他能力

除了上述講到的能力之外，交互設計師需要了解不同設計平臺的規范、有一定的文案設計能力，同時最好可以了解一些代碼內容，建議學習一些HTML、CSS、JS、PHP、Android、C#、JSP、Java等知識，這樣便于交互設計師與開發人員溝通，可以使項目的進展更加順利。

交互設計師這個角色通常會貫穿到整個項目的始終。交互設計師的工作流程可以分為以下幾個步驟:

▲交互設計師工作流程

01參與需求評估

一個完整的設計團隊一般有專業的需求分析師，需求分析一般由需求分析師根據用研結果提交需求說明書，而如果沒有這樣的角色，需求分析主要由產品經理或者交互設計師完成。參與需求評估的人員一般為老板、項目經理、產品經理、研發人員、交互設計師，每個人對需求進行評估，提出自己的意見，通過多次迭代最終形成最終的需求方案。

02功能設計

在需求確定之后，需要進行產品主要功能設計。這部分工作的主要負責人是項目的產品經理，產品經理需要根據需求、并綜合商業等其他因素對產品功能進行設計。在大型項目中項目經理不負責執行時，就需要交互設計師進行產品功能設計。

03產品功能評估

在功能設計之后，需要對產品功能進行評估，主要是衡量產品功能設計是否按照需求來做，哪些需求已經提出、哪些需求的功能沒有得到滿足，明確產品方案是否通過。如果不能通過需要怎樣修改。

04信息架構與流程圖設計

此時交互設計師正式進入交互設計階段。交互設計師需要根據產品功能進行信息架構的設計，細化功能細節，之后進行交互流程的設計。

▲“在線等”app流程圖

05原型設計

在明確了產品的信息架構和流程圖之后，交互設計師進入了原型設計階段，在原型設計的過程中要明確產品的頁面邏輯和跳轉關系，明確交互動效，但不用糾結于細節交互的實現。在設計的過程中盡量不要使用色彩，以免給UI設計師的設計帶來困擾。

▲原型圖示例

06撰寫交互設計文檔

在原型設計完之后，交互設計師需要撰寫交互設計文檔。交互設計文檔主要是用來梳理交互事件、頁面流程邏輯和跳轉等交互動作，主要以文字加圖片的形式展示。交互設計文檔是提供給UI設計師、研發團隊及測試團隊，便于整個團隊對產品有深入的了解。

07交互設計方案評審

交互設計方案的評審與產品功能評審相似，明確交互部分哪些是按照需求做的，哪些地方還有不足，有不足的地方需要加以改進。

08與UI設計師、開發測試人員的協調溝通

交互設計師需要和UI設計師協調溝通，明確交互原型，并對UI設計師的視覺輸出方案從交互的角度進行評估，有不一致或者遺漏的地方需要讓UI設計師進行修改。在開發階段，若開發對交互有疑問，交互設計師需要和開發人員進行溝通，并確定最終方案。在測試階段，測試人員會考慮到一些更全面的使用場景，這時就需要交互設計師補充相應的交互設計說明。

案例：小紅書設計

愛美的女生對小紅書這款APP肯定不會陌生，它是一款國內移動跨境電商APP。在APP的設計過程中，首先就是要了解用戶的需求，對目標用戶的需求進行進行深入挖掘并進行需求評估。

小紅書的目標用戶集中在女性、職業主要以大城市白領、公務員、以及留學生為主。其主要需求是尋求一種安全便捷的境外購物途徑，同時能解決選擇難的問題。小紅書的定位為社區型跨境電商。

小紅書根據用戶需求進行功能設計，其主要功能點是通過搜索內容筆記、獲取產品的評價、性能等，從而促進用戶在小紅書上消費。

根據產品功能評估的結構完善產品功能，并進行信息架構和流程圖的設計。之后進行原型設計，并進行交互設計方案的評審。與UI設計師溝通，UI設計師根據交互原型進行視覺設計。最后與開發測試人員協調，實現設計效果。小紅書最后效果如下圖：

了解交互設計師的知識體系和工作流程，可以幫助剛剛入門的交互設計師對交互設計有一個整體性的了解，方便對交互設計進行系統深入的學習。