編輯導(dǎo)語(yǔ)：什么是交互設(shè)計(jì)？它都包含哪些內(nèi)容呢？交互設(shè)計(jì)的價(jià)值以及現(xiàn)狀又是怎樣的？本文作者在交互學(xué)習(xí)的過(guò)程中，希望能和大家分享一些基礎(chǔ)的知識(shí)，幫助一些學(xué)習(xí)交互設(shè)計(jì)的新人，同時(shí)歡迎大佬們來(lái)一起討論交流~

野生交互設(shè)計(jì)系列01篇，灰機(jī)希望通過(guò)自己交互學(xué)習(xí)的總結(jié)，讓想學(xué)和初入交互設(shè)計(jì)的同學(xué)對(duì)交互設(shè)計(jì)有系統(tǒng)性了解。

一、交互設(shè)計(jì)的內(nèi)容

大家對(duì)交互設(shè)計(jì)都有自己的理解，上游產(chǎn)品同學(xué)說(shuō)是畫(huà)原型做動(dòng)效，下游UI同學(xué)說(shuō)是畫(huà)線(xiàn)框圖，交互同學(xué)自嘲是“線(xiàn)框仔”。到底什么是交互設(shè)計(jì)，先看看較官方的說(shuō)法：

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

交互設(shè)計(jì)師是以人的需求為導(dǎo)向，理解用戶(hù)的期望和需求的同時(shí)，理解商業(yè)、技術(shù)以及行業(yè)內(nèi)的機(jī)會(huì)和制約。基于以上的理解，創(chuàng)造出形式、內(nèi)容、行為有用易用，令用戶(hù)滿(mǎn)意且技術(shù)可行，具有商業(yè)利益的產(chǎn)品——來(lái)源網(wǎng)絡(luò)

這些都是高度概括的解釋?zhuān)瑢?duì)想入門(mén)交互的同學(xué)不友好太難啃了，灰機(jī)剛開(kāi)始自學(xué)時(shí)抓耳撓腮了很久。建議隨著交互設(shè)計(jì)經(jīng)驗(yàn)豐富時(shí)再消化。接下來(lái)灰機(jī)結(jié)合自己的野生交互學(xué)習(xí)經(jīng)歷聊聊對(duì)交互設(shè)計(jì)的理解，希望對(duì)大家有幫助。

交互設(shè)計(jì)是對(duì)行為的設(shè)計(jì)：比如，吃一個(gè)蘋(píng)果，行為怎么設(shè)計(jì)？

解法：拿起蘋(píng)果——放到嘴里——吃，這就是吃蘋(píng)果的行為。這個(gè)問(wèn)題非常簡(jiǎn)單根本不需要設(shè)計(jì)行為，人們下意識(shí)都知道怎么吃。

現(xiàn)實(shí)生活中實(shí)際情況要比這個(gè)復(fù)雜，比如這個(gè)蘋(píng)果要兩個(gè)人分吃，那怎么來(lái)設(shè)計(jì)這個(gè)行為？

• 解法一：拿起蘋(píng)果——第一個(gè)人吃一半——第二個(gè)人吃完（第二個(gè)人能接受？）
• 解法二：拿起蘋(píng)果——分成兩半——分別給兩個(gè)人吃（這樣就合適點(diǎn)）

如果問(wèn)題再進(jìn)一步復(fù)雜，行為設(shè)計(jì)的解法就有更多種，那就需要交互設(shè)計(jì)來(lái)研究更多行為設(shè)計(jì)的解法并找出最優(yōu)解。

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，需要考慮的因素就更復(fù)雜，對(duì)交互設(shè)計(jì)的要求就更高，核心是這三個(gè)因素的組合：看到什么（see）、做什么（do）、完成什么任務(wù)。

1. 看到什么（see）

操作前看到了什么信息，或者操作后看到什么信息。比如，界面里看到的功能、信息、字段、元素等。

2. 做什么（do）

看到信息后該如何操作，比如，瀏覽商品介紹后可以點(diǎn)擊購(gòu)買(mǎi)、收藏、分享等。

3. 完成什么任務(wù)

就是經(jīng)過(guò)一系列see-do-see-do……后，完成了一個(gè)什么任務(wù)。比如，瀏覽商品— 點(diǎn)擊購(gòu)買(mǎi) — 支付完成，就完成了買(mǎi)這個(gè)商品的任務(wù)。

每個(gè)節(jié)點(diǎn)和這套流程的設(shè)計(jì)就是簡(jiǎn)單交互設(shè)計(jì)，比如移動(dòng)端交互設(shè)計(jì)：界面原型就是每個(gè)節(jié)點(diǎn)，節(jié)點(diǎn)間的前后關(guān)系就是流程，最后完成什么任務(wù)，就是一套交互設(shè)計(jì)。

實(shí)際業(yè)務(wù)場(chǎng)景中，每個(gè)節(jié)點(diǎn)可能都會(huì)有特殊情況，比如購(gòu)買(mǎi)商品時(shí)沒(méi)庫(kù)存了，使用中突然沒(méi)網(wǎng)了等。所以節(jié)點(diǎn)和流程就會(huì)越來(lái)越復(fù)雜，交互設(shè)計(jì)自然更復(fù)雜。

二、交互設(shè)計(jì)的價(jià)值

交互設(shè)計(jì)在互聯(lián)網(wǎng)產(chǎn)品中的價(jià)值主要分為用戶(hù)側(cè)和業(yè)務(wù)側(cè)。

1. 用戶(hù)側(cè)

用戶(hù)體驗(yàn)已成為互聯(lián)網(wǎng)產(chǎn)品核心競(jìng)爭(zhēng)力之一，通過(guò)交互設(shè)計(jì)優(yōu)化產(chǎn)品可用性、易用性、愉悅性，可以帶來(lái)用戶(hù)體驗(yàn)極大的提升。

提到用戶(hù)體驗(yàn)，那首先繞不開(kāi)用戶(hù)體驗(yàn)五要素，具體可去查閱相關(guān)知識(shí)，網(wǎng)絡(luò)上這塊知識(shí)很多。交互設(shè)計(jì)在用戶(hù)體驗(yàn)五要素中主要負(fù)責(zé)結(jié)構(gòu)層和框架層設(shè)計(jì)（其他幾個(gè)層面，隨著交互能力的提升需要了解越深入），是產(chǎn)品從抽象概念到具象視覺(jué)形態(tài)的橋梁。

2. 業(yè)務(wù)側(cè)

交互設(shè)計(jì)主要體現(xiàn)三個(gè)層次業(yè)務(wù)價(jià)值: 協(xié)同價(jià)值 > 業(yè)務(wù)增值 > 設(shè)計(jì)驅(qū)動(dòng)

1. 協(xié)同價(jià)值：協(xié)同配合產(chǎn)品設(shè)計(jì)研發(fā)。特點(diǎn)是交互設(shè)計(jì)對(duì)業(yè)務(wù)目標(biāo)達(dá)成沒(méi)產(chǎn)生突出價(jià)值。
2. 業(yè)務(wù)增值：業(yè)務(wù)目標(biāo)實(shí)現(xiàn)中起到突出價(jià)值。特點(diǎn)是交互設(shè)計(jì)對(duì)業(yè)務(wù)目標(biāo)達(dá)成起到了突出貢獻(xiàn)。
3. 設(shè)計(jì)驅(qū)動(dòng)：設(shè)計(jì)策略指導(dǎo)戰(zhàn)略制定。特點(diǎn)是設(shè)計(jì)對(duì)業(yè)務(wù)目標(biāo)達(dá)成起到?jīng)Q定作用。

這三個(gè)層面對(duì)交互設(shè)計(jì)師復(fù)合能力要求越高，大部分交互設(shè)計(jì)師的都處在第一或第二個(gè)層面，希望能看到更多設(shè)計(jì)師能達(dá)到設(shè)計(jì)驅(qū)動(dòng)層面，共勉，像蘋(píng)果設(shè)計(jì)于蘋(píng)果。

三、交互設(shè)計(jì)現(xiàn)狀

1. 需求越來(lái)越大

在互聯(lián)網(wǎng)+的浪潮下，各行各業(yè)都在加速擁抱互聯(lián)網(wǎng)進(jìn)行融合、轉(zhuǎn)型、創(chuàng)新。從早期資訊互聯(lián)網(wǎng)、消費(fèi)互聯(lián)網(wǎng)等，到現(xiàn)在產(chǎn)業(yè)互聯(lián)網(wǎng)。互聯(lián)網(wǎng)影響的行業(yè)越來(lái)越廣，創(chuàng)造的互聯(lián)網(wǎng)產(chǎn)品越來(lái)越多，想產(chǎn)品用戶(hù)體驗(yàn)競(jìng)爭(zhēng)力越強(qiáng)，所需要的交互設(shè)計(jì)也越多。

2. 要求越來(lái)越高

互聯(lián)網(wǎng)從早期藍(lán)海到現(xiàn)在基本處于紅海，競(jìng)爭(zhēng)越來(lái)越激烈，產(chǎn)品競(jìng)爭(zhēng)從早期拼長(zhǎng)處，到現(xiàn)在比短處，要求產(chǎn)品的每個(gè)環(huán)節(jié)都得強(qiáng)才能在競(jìng)爭(zhēng)中立于不敗之地。這就倒逼產(chǎn)品的用戶(hù)體驗(yàn)足夠好，交互設(shè)計(jì)作為影響用戶(hù)體驗(yàn)的重要一環(huán)，自然要求交互質(zhì)量足夠好。

3. 崗位化和技能化

交互設(shè)計(jì)在產(chǎn)品設(shè)計(jì)研發(fā)過(guò)程中被高頻提起，目前交互設(shè)計(jì)主要分為兩種方式在互聯(lián)網(wǎng)團(tuán)隊(duì)中。

1. 交互設(shè)計(jì)崗位化，在中大型團(tuán)隊(duì)中設(shè)立交互設(shè)計(jì)師崗位，聚焦交互設(shè)計(jì)，上游對(duì)接產(chǎn)品經(jīng)理，下游對(duì)接UI設(shè)計(jì)師，好處是提升產(chǎn)品交互設(shè)計(jì)質(zhì)量，減少下游因?yàn)榻换?wèn)題的高成本返稿提升效率。
2. 交互設(shè)計(jì)技能化，交互設(shè)計(jì)被分給產(chǎn)品經(jīng)理或UI設(shè)計(jì)師，需要產(chǎn)品經(jīng)理或UI設(shè)計(jì)師輸出交互稿，或者這兩個(gè)角色一起共創(chuàng)交互設(shè)計(jì)。尤其當(dāng)下互聯(lián)網(wǎng)行業(yè)崗位競(jìng)爭(zhēng)激烈，UI設(shè)計(jì)師和產(chǎn)品經(jīng)理復(fù)合型發(fā)展具備交互技能的越來(lái)越多。

三、交互設(shè)計(jì)歷史（選讀）

此結(jié)選讀比較難啃，灰機(jī)這節(jié)花了很多時(shí)間整理，也糾正了一些自己錯(cuò)誤的認(rèn)知。

人與人、物與物、人與物都存在交互行為。“人與人”比如你在路上巧遇一個(gè)老友，你會(huì)喊住老友“喲，這么巧”并“招手”，老友回“喲，這么巧”并“微笑”，這樣通過(guò)語(yǔ)言、手勢(shì)或表情的相互行為就是交互，但這主要是社會(huì)學(xué)領(lǐng)域咋暫不討論，本次主要聊人與物的交互。

1. 交互由來(lái)

石器時(shí)代，人使用石斧等石器，都和“物”產(chǎn)生了交互行為。石斧的大小、木頭的長(zhǎng)短、捆綁的方式、手握的方式都可以納入交互設(shè)計(jì)的范疇。這時(shí)候人類(lèi)還處在生存需求階段，對(duì)工具核心訴求是“可用”。隨著人類(lèi)社會(huì)的進(jìn)步，人類(lèi)可以交互的“物”從簡(jiǎn)單的工具到復(fù)雜的機(jī)器。

工業(yè)時(shí)代，工業(yè)革命新技術(shù)極大的提升了社會(huì)生產(chǎn)力，標(biāo)準(zhǔn)化、同質(zhì)化產(chǎn)品源源不斷的滿(mǎn)足人類(lèi)需求。

豐富的產(chǎn)品為人們提供了更多選擇的可能性，“可用”不再是是人類(lèi)選擇產(chǎn)品的唯一考量，產(chǎn)品好不好用，也就是“易用”也成為了人類(lèi)選擇產(chǎn)品的考量標(biāo)準(zhǔn)。這時(shí)候，交互設(shè)計(jì)開(kāi)始作為一個(gè)獨(dú)立的流程和角色提到產(chǎn)品開(kāi)發(fā)流程中了。

1984年比爾·摩格理吉第一次提出“交互設(shè)計(jì)”，對(duì)產(chǎn)品與用戶(hù)之間的交互機(jī)制進(jìn)行設(shè)計(jì)，讓用戶(hù)能夠更加簡(jiǎn)單和輕松去使用、體驗(yàn)產(chǎn)品，最終感受其價(jià)值。在“交互設(shè)計(jì)”這個(gè)概念被正式提出后，交互設(shè)計(jì)被越來(lái)越多公司和行業(yè)重視并加入到產(chǎn)品開(kāi)發(fā)流程中。

2. 交互設(shè)計(jì)突飛猛進(jìn)

隨著信息革命中互聯(lián)網(wǎng)技術(shù)的發(fā)展，人類(lèi)交互的“物”越來(lái)越復(fù)雜，從傳統(tǒng)工業(yè)設(shè)計(jì)中借用的交互設(shè)計(jì)這個(gè)概念，在2000年之后越來(lái)越被重視，交互設(shè)計(jì)所帶來(lái)的產(chǎn)品易用性和用戶(hù)體驗(yàn)被各大公司重視。

這個(gè)時(shí)期交互設(shè)計(jì)經(jīng)歷了三個(gè)階段：命令行界面 CLI、圖形用戶(hù)界面 GUI、自然用戶(hù)界面NUI。

3. 命令行界面 CLI

信息革命初期，個(gè)人電腦剛被發(fā)明時(shí)候，電腦沒(méi)有鼠標(biāo)，人們通過(guò)鍵盤(pán)和電腦交互，用戶(hù)在命令行輸入?yún)^(qū)輸入指令后回車(chē)，電腦再根據(jù)用戶(hù)指令給出相應(yīng)反饋，這種交互就要求用戶(hù)熟記各種指令，用戶(hù)記憶成本和操作成本都很高，導(dǎo)致易用性和用戶(hù)體驗(yàn)非常差。

4. 圖形用戶(hù)界面 GUI

1979 年冬天喬布斯的施樂(lè)-帕洛阿爾托研究中心（Xerox PARC）之行，喬布斯被施樂(lè)的圖形化用戶(hù)界面和屏幕二維定位操作輸入設(shè)備—鼠標(biāo)震驚，接下來(lái)將這兩項(xiàng)技術(shù)并應(yīng)用于自己的個(gè)人PC設(shè)備，這就是GUI初步被大眾使用的開(kāi)端，直到今天個(gè)人PC設(shè)備，我們主要都是使用鍵盤(pán)鼠標(biāo)方式與電腦進(jìn)行交互。

2007年1月9日，又一次劃時(shí)代的人機(jī)交互方式改變發(fā)生在蘋(píng)果推出了首款iPhone時(shí)。界面、控件作為真實(shí)物理世界的投射，使用觸控方式與圖形化界面交互讓終端設(shè)備的易用性得到了極大突破。

雖然觸控交互開(kāi)啟了人機(jī)交互方式的新的時(shí)代，但它并沒(méi)有完全替代鼠標(biāo)交互，基于鼠標(biāo)像素級(jí)別的精準(zhǔn)定位等交互特性，在日常辦公等場(chǎng)景下還是處于支配地位。

通過(guò)觸控、鍵盤(pán)、鼠標(biāo)點(diǎn)擊拖動(dòng)等行為對(duì)圖形化用戶(hù)界面進(jìn)行交互操作，相比 CLI 的優(yōu)點(diǎn)顯而易見(jiàn)。

用戶(hù)只需通過(guò)點(diǎn)擊就能夠完成之前通過(guò)復(fù)雜的命令行才能夠完成的任務(wù)。但不代表就完全替代CLI ，在特定場(chǎng)景CLI交互方式還是處在支配地位，如密碼輸入、開(kāi)發(fā)編程等。

5. 自然用戶(hù)界面 NUI

自然用戶(hù)界面只需要用戶(hù)通過(guò)最自然的方式（語(yǔ)言、表情、眼神、動(dòng)作、觸摸等）和計(jì)算機(jī)進(jìn)行交流，擺脫了GUI階段所需要的鍵盤(pán)、鼠標(biāo)、界面等。

如近年來(lái)出現(xiàn)了語(yǔ)音交互、虛擬現(xiàn)實(shí)（AR、VR、全息投影）、生物識(shí)別（指紋、掌紋、聲紋、面部識(shí)別、虹膜、筆跡、步態(tài)等）、體感技術(shù)（識(shí)別手勢(shì)、表情、眼動(dòng)追蹤、熱量、肢體動(dòng)作等）、信息識(shí)別技術(shù)（圖片識(shí)別、文字識(shí)別、物品識(shí)別、語(yǔ)言等）等新交互方式，感興趣的同學(xué)可以研究研究。

這篇主要聊什么是交互，記住核心“see-do-see-do-完成任務(wù)”。

后面將繼續(xù)聊怎么學(xué)習(xí)交互？怎么分析需求？怎么思考交互策略？怎么設(shè)計(jì)原型？怎么設(shè)計(jì)交互文檔？怎么落地設(shè)計(jì)方案？怎么驗(yàn)證方案？……希望系列寫(xiě)完后讓大家對(duì)交互設(shè)計(jì)有一個(gè)系統(tǒng)性了解。

作者：灰機(jī)；公眾號(hào)：灰機(jī)的設(shè)計(jì)筆記

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

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