3個方面教你:如何快速上手做交互

交互設(shè)計是定義、設(shè)計人造系統(tǒng)的行為的設(shè)計領(lǐng)域,它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu),使之互相配合,共同達成某種目的。那要如何快速上手做交互呢?
一、了解什么是交互
交互 Interactive
其它可以自行百度。
- 可交互:雙向,可以得到反饋;比如:點擊發(fā)送按鈕,看到消息發(fā)送出去。
- 不可交互:單向,沒有反饋;比如:看到一幅畫,拿起一個杯子。
二、交互做什么?
舉例
舉個現(xiàn)實的例子,如果我們開一家飯店。(需求)
飯店要有哪些東西?(分析需求)
舉例,非全部
顧客吃飯的流程是什么?(信息架構(gòu)和流程設(shè)計)
舉例,非全部
在這個過程中,交互設(shè)計師做的工作是什么?
大的方面:
- 設(shè)計:顧客進店、點菜、下單、吃飯、結(jié)賬的流程;
- 設(shè)計各個元素:比如:收銀臺、桌椅、衛(wèi)生間應(yīng)該在飯店的什么位置?
(總不能把衛(wèi)生間放在店門口吧?(p≧w≦q))
小的方面:
- 門店是否方便用戶看到;
- 桌椅高度,舒適度,抗造性等是否合理;
- 點菜是否方便,菜單是否精致容易理解等等。
通過這個例子,大家應(yīng)該更好的理解了交互重點。那我們在產(chǎn)品中交互的內(nèi)容。
互聯(lián)網(wǎng)產(chǎn)品理想化流程
理想化:
現(xiàn)實中:
可能是這個樣子(沒有交互設(shè)計,產(chǎn)品直接給UI,可能原型都沒有)。
個別:沒有產(chǎn)品經(jīng)理,老板來決定,然后視覺直接就開始干圖了…
交互設(shè)計師的上下游
上游:產(chǎn)品經(jīng)理/老板/用研
- 了解需求、分析需求;
- 產(chǎn)出功能流程、頁面原型。
下游:UI設(shè)計師、測試、開發(fā)
- 輸出交互原型和交互設(shè)計文檔給下游;
- 審查UI 稿是否能滿足,交互要求;
- 測試走查,最終落地開發(fā)是否滿足交互要求。
很多人認為產(chǎn)品經(jīng)理和交互設(shè)計工作內(nèi)容是一樣的,那么這里兩者的差別:
- 產(chǎn)品:我要做什么,我的目標(biāo)用戶是什么,用戶需要什么?
- 交互:把需求落地,形成真正的功能流程、界面原型。
還有一種情況:老板是產(chǎn)品、產(chǎn)品是畫圖的,所以沒有了交互。(??へ??╬)
(在這種環(huán)境下的、產(chǎn)品和交互差別不是很大)
在各種環(huán)境中的工作內(nèi)容【重要】
情況①?-業(yè)務(wù)為主:
因為業(yè)務(wù)驅(qū)動性特別強,所以發(fā)揮空間小,多數(shù)畫原型為主,偶爾細節(jié)上可以做優(yōu)化設(shè)計。(一般為非互聯(lián)網(wǎng)的大型公司)
情況②-后臺系統(tǒng):
因為面向的都是專業(yè)的使用人員,而且一般公司不愿意在交互投入過多成本,所以一般是流程設(shè)計,畫原型圖為主,很少扣細節(jié)。(什么公司都可能有,腦瓜不傻都能勝任)
情況③-全面型、理想型:
從需求、信息架構(gòu)、流程,到細節(jié)上的按鈕點擊等都參與。(一般為互聯(lián)網(wǎng)公司)
所以你在找工作的時候,盡力找情況③!更利于長遠發(fā)展,盡量是C端項目。
合理的時間安排
(以上時間是個人工作總結(jié),本人覺得算比較合理的時間,并非標(biāo)準)
交互設(shè)計師真的不是只畫原型,如果你沒有信息架構(gòu)的設(shè)計,沒有流程的設(shè)計,沒有優(yōu)先級的確認,你的原型就是盲畫,毫無依據(jù),毫無道理,不信你試試 。(*^▽^*)
三、如何上手開始做交互
1.?自我審視
下面是相關(guān)技能:
軟技能需要一定的天賦和經(jīng)驗積累,硬技能是可以學(xué)習(xí)直接獲得的。
你自己需要判斷,思慮好自己是否適合做交互。
2.?基礎(chǔ)知識學(xué)習(xí)
- 設(shè)計的基礎(chǔ)美學(xué)知識,相關(guān)內(nèi)容知識。如:信息的貼近和原理。
- 了解一些交互設(shè)計基本原則。如:尼爾森可行性原則。
- 讀些基礎(chǔ)的書籍。如:《簡約至上》《用戶體驗要素》等。
- 了解一些平臺設(shè)計規(guī)范。如:Material Design?http://design.1sters.com (MD)https://www.phyet.com/ios-human-interface-guidelines/?? (IOS/Android)其它,web、PC、車載、智能家居等沒有標(biāo)準的規(guī)范,根據(jù)實際情況匹配即可。
- 學(xué)會畫:線框圖、流程圖、架構(gòu)圖、交互說明等。工具:Anxue 、墨刀、Mindmanager、Xmind等。
3.?適當(dāng)?shù)木毩?xí)
(1)把你喜歡的產(chǎn)品,主流程畫出來
類似于這樣,微信選擇好友發(fā)消息。(約詳細約好)
我只舉個單一流程給大家參考,很多時候是多方面的流程。比如:第一步“打開微信”需要判斷是否登錄。
(2)找優(yōu)秀的產(chǎn)品,把信息架構(gòu)畫出來
像這樣,我們把主要的功能畫出來
然后去觀察總結(jié):
- 觀察層級的深淺、觀察每一層下的功能數(shù)量的多少。
- 思考為什么一些功能放的比較深,是因為功能不主要、使用頻率低、還是其他?
- 觀察功能層級之間的穿插(比如:“掃一掃”功能出現(xiàn)多個入口,考慮為什么這么做。)
- 多分析幾個產(chǎn)品,去尋找共同點、和不同點。(比如:“我的→設(shè)置”,“設(shè)置”在“我的”里面,這就是共同點,也是用戶習(xí)慣!)
(3)找你喜歡的頁面,把所有元素列出來。
比如:一個微信的主頁,去分析這些元素的優(yōu)先級,及展示的原因。
- 聊天入口占據(jù)整個頁面,無非是最高優(yōu)先級,而且涵蓋了很多內(nèi)容,如公眾號、訂閱號等;
- 搜索功能與“+”號里的功能,都是用戶除聊天外,比較高頻的操作項。聊天內(nèi)容信息量大,所以搜索功能是必備常用功能;
- 下滑可以出現(xiàn)小程序快捷入口,小程序?qū)儆谂R時性運用場景功能,所以沒有直接放在外表;
- 登錄管理,屬于輔助性功能,所以優(yōu)先級很低,只有在電腦登錄的情況才展示。
當(dāng)然你可以更細致到每一個點上,如:頭像、名稱、最近消息、免打擾標(biāo)識、時間等。
(4)找個需求練習(xí)(最好是工作中的內(nèi)容)
這時候你可以先試著去分析一下業(yè)務(wù)流程、邏輯;適當(dāng)?shù)?strong>畫一下信息架構(gòu)、梳理體驗流程,優(yōu)化現(xiàn)有原型。
如果工作中沒有,則給自己造個需求,比如:設(shè)計一個打卡APP。
需求:打卡?、異常反饋、查看歷史記錄。
試著去畫出它的功能信息架構(gòu),然后把打卡流程梳理出來,試著把原型圖畫出來,開始不用考慮后臺的設(shè)計。具體關(guān)于這方面的方法知識,后期詳細展開。
當(dāng)你經(jīng)過一定的學(xué)習(xí)練習(xí)后,其實你基本就可以做交互的工作了。
如果有什么疑問,可以隨時和作者交流!
作者:Booze-kai(包子凱),一個來自草原的野生交互設(shè)計師,原華為CCO交互設(shè)計師,從事過吉利汽車,中廣核的相關(guān)設(shè)計工作
本文由 @Booze-kai 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
怎么感覺這些工作也是產(chǎn)品經(jīng)理的工作,是交互設(shè)計師的工作我認同,請問但是那此時的產(chǎn)品經(jīng)理干什么。我現(xiàn)在就是啥活都干的一個職位,不知道到底屬于哪個角色了。
學(xué)習(xí)了
100分100分~現(xiàn)在就按照你的方法學(xué)習(xí)~
感謝支持,覺得哪里有問題或不足,可以提出寶貴意見 ??
嗯嗯~
??
??
??