交互設(shè)計(jì)是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。那要如何快速上手做交互呢？

一、了解什么是交互

交互 Interactive

其它可以自行百度。

• 可交互：雙向，可以得到反饋；比如：點(diǎn)擊發(fā)送按鈕，看到消息發(fā)送出去。
• 不可交互：單向，沒(méi)有反饋；比如：看到一幅畫(huà)，拿起一個(gè)杯子。

二、交互做什么？

舉例

舉個(gè)現(xiàn)實(shí)的例子，如果我們開(kāi)一家飯店。（需求）

飯店要有哪些東西？（分析需求）

舉例，非全部

顧客吃飯的流程是什么？（信息架構(gòu)和流程設(shè)計(jì)）

舉例，非全部

在這個(gè)過(guò)程中，交互設(shè)計(jì)師做的工作是什么？

大的方面：

• 設(shè)計(jì)：顧客進(jìn)店、點(diǎn)菜、下單、吃飯、結(jié)賬的流程；
• 設(shè)計(jì)各個(gè)元素：比如：收銀臺(tái)、桌椅、衛(wèi)生間應(yīng)該在飯店的什么位置？

（總不能把衛(wèi)生間放在店門口吧？(p≧w≦q)）

小的方面：

1. 門店是否方便用戶看到；
2. 桌椅高度，舒適度，抗造性等是否合理；
3. 點(diǎn)菜是否方便，菜單是否精致容易理解等等。

通過(guò)這個(gè)例子，大家應(yīng)該更好的理解了交互重點(diǎn)。那我們?cè)诋a(chǎn)品中交互的內(nèi)容。

互聯(lián)網(wǎng)產(chǎn)品理想化流程

理想化：

現(xiàn)實(shí)中：

可能是這個(gè)樣子（沒(méi)有交互設(shè)計(jì)，產(chǎn)品直接給UI，可能原型都沒(méi)有）。

個(gè)別：沒(méi)有產(chǎn)品經(jīng)理，老板來(lái)決定，然后視覺(jué)直接就開(kāi)始干圖了…

交互設(shè)計(jì)師的上下游

上游：產(chǎn)品經(jīng)理/老板/用研

• 了解需求、分析需求；
• 產(chǎn)出功能流程、頁(yè)面原型。

下游：UI設(shè)計(jì)師、測(cè)試、開(kāi)發(fā)

• 輸出交互原型和交互設(shè)計(jì)文檔給下游；
• 審查UI 稿是否能滿足，交互要求；
• 測(cè)試走查，最終落地開(kāi)發(fā)是否滿足交互要求。

很多人認(rèn)為產(chǎn)品經(jīng)理和交互設(shè)計(jì)工作內(nèi)容是一樣的，那么這里兩者的差別：

• 產(chǎn)品：我要做什么，我的目標(biāo)用戶是什么，用戶需要什么？
• 交互：把需求落地，形成真正的功能流程、界面原型。

還有一種情況：老板是產(chǎn)品、產(chǎn)品是畫(huà)圖的，所以沒(méi)有了交互。(??へ??╬)

（在這種環(huán)境下的、產(chǎn)品和交互差別不是很大）

在各種環(huán)境中的工作內(nèi)容【重要】

情況①?-業(yè)務(wù)為主：

因?yàn)闃I(yè)務(wù)驅(qū)動(dòng)性特別強(qiáng)，所以發(fā)揮空間小，多數(shù)畫(huà)原型為主，偶爾細(xì)節(jié)上可以做優(yōu)化設(shè)計(jì)。（一般為非互聯(lián)網(wǎng)的大型公司）

情況②-后臺(tái)系統(tǒng)：

因?yàn)槊嫦虻亩际菍I(yè)的使用人員，而且一般公司不愿意在交互投入過(guò)多成本，所以一般是流程設(shè)計(jì)，畫(huà)原型圖為主，很少扣細(xì)節(jié)。（什么公司都可能有，腦瓜不傻都能勝任）

情況③-全面型、理想型：

從需求、信息架構(gòu)、流程，到細(xì)節(jié)上的按鈕點(diǎn)擊等都參與。（一般為互聯(lián)網(wǎng)公司）

所以你在找工作的時(shí)候，盡力找情況③！更利于長(zhǎng)遠(yuǎn)發(fā)展，盡量是C端項(xiàng)目。

合理的時(shí)間安排

（以上時(shí)間是個(gè)人工作總結(jié)，本人覺(jué)得算比較合理的時(shí)間，并非標(biāo)準(zhǔn)）

交互設(shè)計(jì)師真的不是只畫(huà)原型，如果你沒(méi)有信息架構(gòu)的設(shè)計(jì)，沒(méi)有流程的設(shè)計(jì)，沒(méi)有優(yōu)先級(jí)的確認(rèn)，你的原型就是盲畫(huà)，毫無(wú)依據(jù)，毫無(wú)道理，不信你試試 。(*^▽^*)

三、如何上手開(kāi)始做交互

1.?自我審視

下面是相關(guān)技能：

軟技能需要一定的天賦和經(jīng)驗(yàn)積累，硬技能是可以學(xué)習(xí)直接獲得的。

你自己需要判斷，思慮好自己是否適合做交互。

2.?基礎(chǔ)知識(shí)學(xué)習(xí)

1. 設(shè)計(jì)的基礎(chǔ)美學(xué)知識(shí)，相關(guān)內(nèi)容知識(shí)。如：信息的貼近和原理。
2. 了解一些交互設(shè)計(jì)基本原則。如：尼爾森可行性原則。
3. 讀些基礎(chǔ)的書(shū)籍。如：《簡(jiǎn)約至上》《用戶體驗(yàn)要素》等。
4. 了解一些平臺(tái)設(shè)計(jì)規(guī)范。如：Material Design?http://design.1sters.com （MD）https://www.phyet.com/ios-human-interface-guidelines/?? （IOS/Android）其它，web、PC、車載、智能家居等沒(méi)有標(biāo)準(zhǔn)的規(guī)范，根據(jù)實(shí)際情況匹配即可。
5. 學(xué)會(huì)畫(huà)：線框圖、流程圖、架構(gòu)圖、交互說(shuō)明等。工具：Anxue 、墨刀、Mindmanager、Xmind等。

3.?適當(dāng)?shù)木毩?xí)

（1）把你喜歡的產(chǎn)品，主流程畫(huà)出來(lái)

類似于這樣，微信選擇好友發(fā)消息。（約詳細(xì)約好）

我只舉個(gè)單一流程給大家參考，很多時(shí)候是多方面的流程。比如：第一步“打開(kāi)微信”需要判斷是否登錄。

（2）找優(yōu)秀的產(chǎn)品，把信息架構(gòu)畫(huà)出來(lái)

像這樣，我們把主要的功能畫(huà)出來(lái)

然后去觀察總結(jié)：

1. 觀察層級(jí)的深淺、觀察每一層下的功能數(shù)量的多少。
2. 思考為什么一些功能放的比較深，是因?yàn)楣δ懿恢饕⑹褂妙l率低、還是其他？
3. 觀察功能層級(jí)之間的穿插（比如：“掃一掃”功能出現(xiàn)多個(gè)入口，考慮為什么這么做。）
4. 多分析幾個(gè)產(chǎn)品，去尋找共同點(diǎn)、和不同點(diǎn)。（比如：“我的→設(shè)置”，“設(shè)置”在“我的”里面，這就是共同點(diǎn)，也是用戶習(xí)慣?。?/li>

（3）找你喜歡的頁(yè)面，把所有元素列出來(lái)。

比如：一個(gè)微信的主頁(yè)，去分析這些元素的優(yōu)先級(jí)，及展示的原因。

• 聊天入口占據(jù)整個(gè)頁(yè)面，無(wú)非是最高優(yōu)先級(jí)，而且涵蓋了很多內(nèi)容，如公眾號(hào)、訂閱號(hào)等；
• 搜索功能與“+”號(hào)里的功能，都是用戶除聊天外，比較高頻的操作項(xiàng)。聊天內(nèi)容信息量大，所以搜索功能是必備常用功能；
• 下滑可以出現(xiàn)小程序快捷入口，小程序?qū)儆谂R時(shí)性運(yùn)用場(chǎng)景功能，所以沒(méi)有直接放在外表；
• 登錄管理，屬于輔助性功能，所以優(yōu)先級(jí)很低，只有在電腦登錄的情況才展示。

當(dāng)然你可以更細(xì)致到每一個(gè)點(diǎn)上，如：頭像、名稱、最近消息、免打擾標(biāo)識(shí)、時(shí)間等。

（4）找個(gè)需求練習(xí)（最好是工作中的內(nèi)容）

這時(shí)候你可以先試著去分析一下業(yè)務(wù)流程、邏輯；適當(dāng)?shù)?strong>畫(huà)一下信息架構(gòu)、梳理體驗(yàn)流程，優(yōu)化現(xiàn)有原型。

如果工作中沒(méi)有，則給自己造個(gè)需求，比如：設(shè)計(jì)一個(gè)打卡APP。

需求：打卡?、異常反饋、查看歷史記錄。

試著去畫(huà)出它的功能信息架構(gòu)，然后把打卡流程梳理出來(lái)，試著把原型圖畫(huà)出來(lái)，開(kāi)始不用考慮后臺(tái)的設(shè)計(jì)。具體關(guān)于這方面的方法知識(shí)，后期詳細(xì)展開(kāi)。

當(dāng)你經(jīng)過(guò)一定的學(xué)習(xí)練習(xí)后，其實(shí)你基本就可以做交互的工作了。

如果有什么疑問(wèn)，可以隨時(shí)和作者交流！

作者：Booze-kai（包子凱），一個(gè)來(lái)自草原的野生交互設(shè)計(jì)師，原華為CCO交互設(shè)計(jì)師，從事過(guò)吉利汽車，中廣核的相關(guān)設(shè)計(jì)工作

本文由 @Booze-kai 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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