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

8 評論 12612 瀏覽 91 收藏 11 分鐘

交互設計是定義、設計人造系統的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。那要如何快速上手做交互呢?

一、了解什么是交互

交互 Interactive

其它可以自行百度。

  • 可交互:雙向,可以得到反饋;比如:點擊發送按鈕,看到消息發送出去。
  • 不可交互:單向,沒有反饋;比如:看到一幅畫,拿起一個杯子。

二、交互做什么?

舉例

舉個現實的例子,如果我們開一家飯店。(需求)

飯店要有哪些東西?(分析需求)

舉例,非全部

顧客吃飯的流程是什么?(信息架構和流程設計)

舉例,非全部

在這個過程中,交互設計師做的工作是什么?

大的方面:

  • 設計:顧客進店、點菜、下單、吃飯、結賬的流程;
  • 設計各個元素:比如:收銀臺、桌椅、衛生間應該在飯店的什么位置?

(總不能把衛生間放在店門口吧?(p≧w≦q))

小的方面:

  1. 門店是否方便用戶看到;
  2. 桌椅高度,舒適度,抗造性等是否合理;
  3. 點菜是否方便,菜單是否精致容易理解等等。

通過這個例子,大家應該更好的理解了交互重點。那我們在產品中交互的內容。

互聯網產品理想化流程

理想化:

現實中:

可能是這個樣子(沒有交互設計,產品直接給UI,可能原型都沒有)。

個別:沒有產品經理,老板來決定,然后視覺直接就開始干圖了…

交互設計師的上下游

上游:產品經理/老板/用研

  • 了解需求、分析需求;
  • 產出功能流程、頁面原型。

下游:UI設計師、測試、開發

  • 輸出交互原型和交互設計文檔給下游;
  • 審查UI 稿是否能滿足,交互要求;
  • 測試走查,最終落地開發是否滿足交互要求。

很多人認為產品經理和交互設計工作內容是一樣的,那么這里兩者的差別:

  • 產品:我要做什么,我的目標用戶是什么,用戶需要什么?
  • 交互:把需求落地,形成真正的功能流程、界面原型。

還有一種情況:老板是產品、產品是畫圖的,所以沒有了交互。(??へ??╬)

(在這種環境下的、產品和交互差別不是很大)

在各種環境中的工作內容【重要】

情況①?-業務為主:

因為業務驅動性特別強,所以發揮空間小,多數畫原型為主,偶爾細節上可以做優化設計。(一般為非互聯網的大型公司)

情況②-后臺系統:

因為面向的都是專業的使用人員,而且一般公司不愿意在交互投入過多成本,所以一般是流程設計,畫原型圖為主,很少扣細節。(什么公司都可能有,腦瓜不傻都能勝任)

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

從需求、信息架構、流程,到細節上的按鈕點擊等都參與。(一般為互聯網公司)

所以你在找工作的時候,盡力找情況③!更利于長遠發展,盡量是C端項目。

合理的時間安排

(以上時間是個人工作總結,本人覺得算比較合理的時間,并非標準)

交互設計師真的不是只畫原型,如果你沒有信息架構的設計,沒有流程的設計,沒有優先級的確認,你的原型就是盲畫毫無依據,毫無道理,不信你試試 。(*^▽^*)

三、如何上手開始做交互

1.?自我審視

下面是相關技能:

軟技能需要一定的天賦和經驗積累,硬技能是可以學習直接獲得的。

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

2.?基礎知識學習

  1. 設計的基礎美學知識,相關內容知識。如:信息的貼近和原理。
  2. 了解一些交互設計基本原則。如:尼爾森可行性原則。
  3. 讀些基礎的書籍。如:《簡約至上》《用戶體驗要素》等。
  4. 了解一些平臺設計規范。如:Material Design?http://design.1sters.com (MD)https://www.phyet.com/ios-human-interface-guidelines/?? (IOS/Android)其它,web、PC、車載、智能家居等沒有標準的規范,根據實際情況匹配即可。
  5. 學會畫:線框圖、流程圖、架構圖、交互說明等。工具:Anxue 、墨刀、Mindmanager、Xmind等。

3.?適當的練習

(1)把你喜歡的產品,主流程畫出來

類似于這樣,微信選擇好友發消息。(約詳細約好)

我只舉個單一流程給大家參考,很多時候是多方面的流程。比如:第一步“打開微信”需要判斷是否登錄。

(2)找優秀的產品,把信息架構畫出來

像這樣,我們把主要的功能畫出來

然后去觀察總結:

  1. 觀察層級的深淺、觀察每一層下的功能數量的多少。
  2. 思考為什么一些功能放的比較深,是因為功能不主要、使用頻率低、還是其他?
  3. 觀察功能層級之間的穿插(比如:“掃一掃”功能出現多個入口,考慮為什么這么做。)
  4. 多分析幾個產品,去尋找共同點、和不同點。(比如:“我的→設置”,“設置”在“我的”里面,這就是共同點,也是用戶習慣?。?/li>

(3)找你喜歡的頁面,把所有元素列出來。

比如:一個微信的主頁,去分析這些元素的優先級,及展示的原因

  • 聊天入口占據整個頁面,無非是最高優先級,而且涵蓋了很多內容,如公眾號、訂閱號等;
  • 搜索功能與“+”號里的功能,都是用戶除聊天外,比較高頻的操作項。聊天內容信息量大,所以搜索功能是必備常用功能;
  • 下滑可以出現小程序快捷入口,小程序屬于臨時性運用場景功能,所以沒有直接放在外表;
  • 登錄管理,屬于輔助性功能,所以優先級很低,只有在電腦登錄的情況才展示。

當然你可以更細致到每一個點上,如:頭像、名稱、最近消息、免打擾標識、時間等。

(4)找個需求練習(最好是工作中的內容)

這時候你可以先試著去分析一下業務流程、邏輯;適當的畫一下信息架構、梳理體驗流程,優化現有原型。

如果工作中沒有,則給自己造個需求,比如:設計一個打卡APP。

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

試著去畫出它的功能信息架構,然后把打卡流程梳理出來,試著把原型圖畫出來,開始不用考慮后臺的設計。具體關于這方面的方法知識,后期詳細展開。

當你經過一定的學習練習后,其實你基本就可以做交互的工作了。

如果有什么疑問,可以隨時和作者交流!

 

作者:Booze-kai(包子凱),一個來自草原的野生交互設計師,原華為CCO交互設計師,從事過吉利汽車,中廣核的相關設計工作

本文由 @Booze-kai 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 怎么感覺這些工作也是產品經理的工作,是交互設計師的工作我認同,請問但是那此時的產品經理干什么。我現在就是啥活都干的一個職位,不知道到底屬于哪個角色了。

    來自山東 回復
  2. 學習了

    來自廣東 回復
  3. 100分100分~現在就按照你的方法學習~

    來自黑龍江 回復
    1. 感謝支持,覺得哪里有問題或不足,可以提出寶貴意見 ??

      來自廣東 回復
    2. 嗯嗯~

      來自黑龍江 回復
    3. ??

      來自廣東 回復
    4. ??

      來自廣東 回復
    5. ??

      來自廣東 回復