入門(mén)基礎(chǔ)!3分鐘幫你快速了解交互設(shè)計(jì)!



交互設(shè)計(jì)的內(nèi)容
大家對(duì)交互設(shè)計(jì)都有自己的理解,上游產(chǎn)品同學(xué)說(shuō)是畫(huà)原型做動(dòng)效,下游 UI 同學(xué)說(shuō)是畫(huà)線框圖,交互同學(xué)自嘲是“線框仔”……

到底什么是交互設(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)向,理解用戶的期望和需求的同時(shí),理解商業(yè)、技術(shù)以及行業(yè)內(nèi)的機(jī)會(huì)和制約。基于以上的理解,創(chuàng)造出形式、內(nèi)容、行為有用易用,令用戶滿意且技術(shù)可行,具有商業(yè)利益的產(chǎn)品。(來(lái)源網(wǎng)絡(luò))


這些都是高度概括的解釋,對(duì)想入門(mén)交互的同學(xué)不友好太難啃了,剛開(kāi)始自學(xué)時(shí)抓耳撓腮了很久。建議隨著交互設(shè)計(jì)經(jīng)驗(yàn)豐富時(shí)再消化。

接下來(lái)結(jié)合自己的交互學(xué)習(xí)經(jīng)歷聊聊對(duì)交互設(shè)計(jì)的理解,希望對(duì)大家有幫助。

1. 交互設(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ù)。

看到什么(see)

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

做什么(do)

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

完成什么任務(wù)

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



⇧ see-do-see-do-完成任務(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à)值主要分為用戶側(cè)和業(yè)務(wù)側(cè)。

1. 用戶側(cè)

用戶體驗(yàn)已成為互聯(lián)網(wǎng)產(chǎn)品核心競(jìng)爭(zhēng)力之一。

通過(guò)交互設(shè)計(jì)優(yōu)化產(chǎn)品可用性、易用性、愉悅性,可以帶來(lái)用戶體驗(yàn)極大的提升。

提到用戶體驗(yàn),那首先繞不開(kāi)用戶體驗(yàn)五要素,具體可去查閱相關(guān)知識(shí),網(wǎng)絡(luò)上這塊知識(shí)很多。



交互設(shè)計(jì)在用戶體驗(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)

協(xié)同價(jià)值:協(xié)同配合產(chǎn)品設(shè)計(jì)研發(fā)。特點(diǎn)是交互設(shè)計(jì)對(duì)業(yè)務(wù)目標(biāo)達(dá)成沒(méi)產(chǎn)生突出價(jià)值。

業(yè)務(wù)增值:業(yè)務(wù)目標(biāo)實(shí)現(xiàn)中起到突出價(jià)值。特點(diǎn)是交互設(shè)計(jì)對(duì)業(yè)務(wù)目標(biāo)達(dá)成起到了突出貢獻(xiàn)。

設(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)層面,共勉。


交互設(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)品用戶體驗(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)品的用戶體驗(yàn)足夠好,交互設(shè)計(jì)作為影響用戶體驗(yàn)的重要一環(huán),自然要求交互質(zhì)量足夠好。

3. 崗位化和技能化

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

一是,交互設(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)題的高成本返稿提升效率。

二是,交互設(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é)比較難啃,這節(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)品源源不斷的滿足人類(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)品與用戶之間的交互機(jī)制進(jìn)行設(shè)計(jì),讓用戶能夠更加簡(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)品易用性和用戶體驗(yàn)被各大公司重視。

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

3. 命令行界面 CLI

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



4. 圖形用戶界面 GUI

1979 年冬天喬布斯的施樂(lè)-帕洛阿爾托研究中心(Xerox PARC)之行,喬布斯被施樂(lè)的圖形化用戶界面和屏幕二維定位操作輸入設(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ì)圖形化用戶界面進(jìn)行交互操作,相比 CLI 的優(yōu)點(diǎn)顯而易見(jiàn)。用戶只需通過(guò)點(diǎn)擊就能夠完成之前通過(guò)復(fù)雜的命令行才能夠完成的任務(wù)。但不代表就完全替代 CLI,在特定場(chǎng)景 CLI 交互方式還是處在支配地位,如密碼輸入、開(kāi)發(fā)編程等。

5. 自然用戶界面 NUI

自然用戶界面只需要用戶通過(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é)可以研究研究。
北大青鳥(niǎo)網(wǎng)上報(bào)名
北大青鳥(niǎo)招生簡(jiǎn)章