對(duì)于非交互設(shè)計(jì)的同學(xué)，要怎么去學(xué)習(xí)交互設(shè)計(jì)呢？在其中要著重關(guān)注那些問題點(diǎn)呢？

• 銷售同學(xué)：想了解設(shè)計(jì)相關(guān)知識(shí)，有沒有什么好的課程？或者推薦的鏈接學(xué)習(xí)下？
• 市場(chǎng)同學(xué)：交互設(shè)計(jì)培訓(xùn)資料能不能發(fā)我看看？我想學(xué)習(xí)學(xué)習(xí)
• 產(chǎn)品同學(xué)：這個(gè)地方我實(shí)在不知道該怎么畫了，能不能幫我看看？

這是我最近常遇到的問題，發(fā)現(xiàn)有越來越多非交互設(shè)計(jì)崗位的同學(xué)開始對(duì)交互設(shè)計(jì)感興趣，這其中可能是對(duì)于個(gè)人能力的要求，也有可能是大家對(duì)于用戶體驗(yàn)意識(shí)的增強(qiáng)，但不管怎么樣交互設(shè)計(jì)、用戶體驗(yàn)都在被越來越多的人關(guān)注。

這里可能有人會(huì)問，為什么要面對(duì)其他崗位同學(xué)做交互設(shè)計(jì)培訓(xùn)？原因很簡(jiǎn)單：

• 對(duì)于T型人才或者通才的能力要求；
• 釋放一定的交互設(shè)計(jì)師人力，產(chǎn)品自己產(chǎn)出功能簡(jiǎn)單的交互設(shè)計(jì)；
• 小型公司沒有交互設(shè)計(jì)師，產(chǎn)品需要自己出交互方案；
• 擴(kuò)大交互設(shè)計(jì)的影響力，讓更多的人了解。

回過頭來，可以看出前面談到的這幾個(gè)崗位的同學(xué)大多是沒有交互設(shè)計(jì)基礎(chǔ)的，或者少數(shù)產(chǎn)品經(jīng)理具備一點(diǎn)交互設(shè)計(jì)能力，但普遍比較薄弱，當(dāng)這些同學(xué)想要學(xué)習(xí)交互設(shè)計(jì)時(shí)通常不知道如何下手。其次，再結(jié)合自己做交互設(shè)計(jì)培訓(xùn)的經(jīng)歷，發(fā)現(xiàn)有以下幾個(gè)問題是普遍存在的，并且有一些是核心問題，需要重點(diǎn)關(guān)注。

一、不清楚交互設(shè)計(jì)概念和工作流程

在與其他崗位同事的接觸過程中，發(fā)現(xiàn)很多人普遍不清楚交互設(shè)計(jì)是做什么的，也分不清交互設(shè)計(jì)和視覺設(shè)計(jì)有什么區(qū)別，甚至遇到過產(chǎn)品經(jīng)理找交互設(shè)計(jì)師出視覺稿之類的事情。對(duì)于互聯(lián)網(wǎng)公司而言，特別是大廠，交互設(shè)計(jì)和視覺設(shè)計(jì)有著各自明確的分工，包括工作內(nèi)容、工作流程、產(chǎn)出物等方面。

• 工作內(nèi)容：交互設(shè)計(jì)師主要側(cè)重于產(chǎn)品的業(yè)務(wù)邏輯、操作流程、信息架構(gòu)、界面布局等。視覺設(shè)計(jì)則側(cè)重于界面的視覺風(fēng)格、樣式、配色等。目的都是提升整個(gè)產(chǎn)品的用戶體驗(yàn)。
• 工作流程：交互設(shè)計(jì)和視覺設(shè)計(jì)均是項(xiàng)目流程中的一環(huán)，二者屬于上下游的關(guān)系，即交互設(shè)計(jì)結(jié)束會(huì)進(jìn)入到視覺設(shè)計(jì)階段，具體可以參考下圖的流程圖。
• 產(chǎn)出物：交互設(shè)計(jì)的主要產(chǎn)出物是交互稿，通常包含信息架構(gòu)、流程設(shè)計(jì)、交互界面以及交互說明，其中交互界面主要以線框圖的形式呈現(xiàn)。視覺設(shè)計(jì)主要產(chǎn)出的是視覺稿，即產(chǎn)品上線用戶所看到的界面，除此之外還包括標(biāo)注文檔、視覺切圖等。

二、不了解設(shè)計(jì)原則

設(shè)計(jì)與藝術(shù)不同，設(shè)計(jì)是一個(gè)更偏理性層面的概念，因此設(shè)計(jì)原則、規(guī)范尤為重要。對(duì)于交互零基礎(chǔ)的同學(xué)而言設(shè)計(jì)原則、設(shè)計(jì)規(guī)范是很好的入門指導(dǎo)，它可以指導(dǎo)你的設(shè)計(jì)，讓你下意識(shí)地去使用它，下意識(shí)地去控制頁面，而不是不知所錯(cuò)或者盲目自信。通過不斷的實(shí)踐再去反復(fù)理解、驗(yàn)證。

但凡事沒有絕對(duì)，這些原則十分重要，但它們也只是一種“設(shè)計(jì)指導(dǎo)”，在遇到特殊問題，特別是復(fù)雜問題的時(shí)候不能死守規(guī)則生搬硬套。當(dāng)你在工作中越來越有經(jīng)驗(yàn)，你就會(huì)越來越靈活地運(yùn)用。

關(guān)于交互設(shè)計(jì)的原則有很多，比如尼爾森可用性十原則、交互設(shè)計(jì)七大定律等。平臺(tái)規(guī)范如：蘋果的Human Interface Guidelines等，對(duì)學(xué)習(xí)設(shè)計(jì)原則、設(shè)計(jì)規(guī)范都是很好的開始。

三、信息架構(gòu)能力薄弱

絕大部分同學(xué)都有這個(gè)問題，包括設(shè)計(jì)師自己，在提需求/出設(shè)計(jì)方案的時(shí)候缺乏整個(gè)產(chǎn)品結(jié)構(gòu)的思考，每次的迭代都是功能的簡(jiǎn)單堆砌、疊加，從而導(dǎo)致后續(xù)一系列的問題。這里我談一下信息架構(gòu)的重要性和工作內(nèi)容，因?yàn)橄胍到y(tǒng)學(xué)習(xí)信息架構(gòu)其實(shí)是一個(gè)很大的課題。

（1）信息架構(gòu)的重要性

信息架構(gòu)其實(shí)是整個(gè)交互設(shè)計(jì)中對(duì)于邏輯性和設(shè)計(jì)師整體結(jié)構(gòu)化思維要求最高的部分。信息架構(gòu)是一個(gè)產(chǎn)品的骨架，每個(gè)類型的產(chǎn)品都有自己特有的信息架構(gòu)。對(duì)于整個(gè)產(chǎn)品而言，信息架構(gòu)能讓用戶容易找到某個(gè)功能，理解產(chǎn)品形態(tài)最核心的部分。因此，做好信息架構(gòu)設(shè)計(jì)，是非常重要的交互設(shè)計(jì)能力之一。

而一個(gè)合理的信息架構(gòu)，會(huì)大大減少用戶對(duì)一個(gè)新產(chǎn)品的認(rèn)知成本，在很短的時(shí)間內(nèi)就成為一個(gè)操作相對(duì)熟練的用戶，從而大大增加新用戶的留存。特別是當(dāng)我們的產(chǎn)品越做越大，功能越來越多的時(shí)候，一個(gè)合理的信息架構(gòu)就越發(fā)重要。

它可以起到兩點(diǎn)核心作用：

1. 讓用戶一眼就明白你的產(chǎn)品能做什么，并馬上學(xué)會(huì)如何使用；
2. 無論功能多復(fù)雜，用戶都能在需要的時(shí)候快速的找到某個(gè)功能。

這兩點(diǎn)，會(huì)對(duì)一個(gè)產(chǎn)品的成功起到至關(guān)重要的作用，這也是我們需要做好信息架構(gòu)的原因。

（2）信息架構(gòu)的工作內(nèi)容

主要有兩點(diǎn)：設(shè)計(jì)組織分類和導(dǎo)航的結(jié)構(gòu)，讓用戶可以高效率、有效地瀏覽信息及進(jìn)行相關(guān)操作。這就要求設(shè)計(jì)師需要站在一個(gè)較高的角度去考量整個(gè)產(chǎn)品。

但在實(shí)際工作當(dāng)中，大家往往局限于自己手頭的模塊，缺乏對(duì)整體結(jié)構(gòu)、層級(jí)主次的把握。從而導(dǎo)致產(chǎn)品結(jié)構(gòu)不清晰、功能堆疊分類不合理等諸多問題。建議大家可以系統(tǒng)的去學(xué)習(xí)和了解信息架構(gòu)的相關(guān)知識(shí)，這對(duì)提升交互設(shè)計(jì)核心能力有非常大的幫助。

三、流程設(shè)計(jì)理不清

交互設(shè)計(jì)另一個(gè)核心能力：流程設(shè)計(jì)。比較常見的流程有兩種：業(yè)務(wù)流程和用戶流程。二者出發(fā)點(diǎn)不太一樣：業(yè)務(wù)流程是以業(yè)務(wù)所要達(dá)到的業(yè)務(wù)目標(biāo)出發(fā)，用戶流程則是從用戶想完成的任務(wù)出發(fā)。雖然有些時(shí)候二者流程表現(xiàn)上可能會(huì)完全一致，但背后的出發(fā)點(diǎn)其實(shí)并不一樣。

一方面我們需要和產(chǎn)品經(jīng)理一起梳理清楚業(yè)務(wù)流程，另一方面我們需要基于業(yè)務(wù)流程梳理好更符合用戶心智模型的用戶流程。當(dāng)我們通過用戶使用產(chǎn)品的目標(biāo)、場(chǎng)景，整理出用戶使用產(chǎn)品的流程時(shí)，你會(huì)發(fā)現(xiàn)設(shè)計(jì)可以變得更有條理，這就是用戶流程在設(shè)計(jì)中的價(jià)值，它讓你從用戶的角度出發(fā)，梳理那些看似雜亂無章的設(shè)計(jì)點(diǎn)。

一個(gè)好的流程設(shè)計(jì)，是將業(yè)務(wù)流程和用戶流程完美結(jié)合的設(shè)計(jì)。讓用戶在合理順暢的完成自己目標(biāo)任務(wù)的同時(shí)，也能達(dá)成業(yè)務(wù)目標(biāo)。

好的流程能為產(chǎn)品帶來什么：

• 用戶可以順利完成任務(wù)，減少流失；
• 凸顯設(shè)計(jì)亮點(diǎn)，提升用戶體驗(yàn)；
• 幫助業(yè)務(wù)達(dá)成業(yè)務(wù)目標(biāo)（如注冊(cè)率、成交額等）。

四、不會(huì)使用組件庫

交互稿是交互設(shè)計(jì)最重要的產(chǎn)出物，一份規(guī)范的交互文檔既能很好的展示設(shè)計(jì)方案，也能大大提升協(xié)作過程中的工作效率。繪制交互頁面快速提升效率的方法就是：組件庫的應(yīng)用。

但在跟產(chǎn)品經(jīng)理們培訓(xùn)的過程中，會(huì)發(fā)現(xiàn)兩個(gè)問題：

• 大部分產(chǎn)品同學(xué)自己繪制交互稿時(shí)往往不知該如何下手，或者繪制出來的頁面簡(jiǎn)單粗暴，缺乏設(shè)計(jì)美感。
• 即便是有現(xiàn)成的組件庫，但不知道具體每個(gè)組件庫的應(yīng)用場(chǎng)景，用錯(cuò)組件庫的情況經(jīng)常發(fā)生。

從上面兩個(gè)問題可以發(fā)現(xiàn)：

1. 搭建組件庫的重要性；
2. 學(xué)會(huì)如何使用組件庫。這里所說的學(xué)會(huì)使用組件庫并不是簡(jiǎn)單的拖拽復(fù)用，而是需要清楚的知道每個(gè)組件庫的意義和使用場(chǎng)景。只有學(xué)會(huì)了組件庫的應(yīng)用，才能確保產(chǎn)品的一致性，提升產(chǎn)品、設(shè)計(jì)師、研發(fā)的工作效率。這點(diǎn)對(duì)于業(yè)務(wù)線較多、功能較復(fù)雜的產(chǎn)品尤為適用。

下圖是同一個(gè)產(chǎn)品經(jīng)理，在未使用及使用組件庫繪制交互稿的前后對(duì)比，可以明顯的看出來頁面要規(guī)整很多，基本上與交互設(shè)計(jì)師產(chǎn)出的頁面沒有太大差別。所以學(xué)會(huì)使用組件庫，能讓你快速搭建出規(guī)范的交互頁面。

以上就是結(jié)合設(shè)計(jì)培訓(xùn)中遇到的一些典型問題總結(jié)出來的5個(gè)可提升的點(diǎn)，希望對(duì)想要入門交互設(shè)計(jì)的同學(xué)有所幫助。

作者：楊倩，網(wǎng)易UEDC資深交互設(shè)計(jì)師，參與過C端、B端多個(gè)產(chǎn)品的交互設(shè)計(jì)工作，從C端到B端，不忘設(shè)計(jì)初心，繼續(xù)努力前行。

微信公眾號(hào)：網(wǎng)易UEDC

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@楊倩

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