有趣的交互，不只是畫流程圖

* 本文內容來自 艾體驗|李婧Amy 在 6th DEX-Sketch Meetup 成都現場的分享

本次推送篇幅略長

推薦搭配「小提綱」食用，口味更佳

|小提綱

● 對於交互設計師，最主要的三個技能

- 設計、人因學、計算機科學

● 有趣的交互設計的三個方面

1、場景帶入

- Case 1: Linkedin 註冊登錄頁面

- Case 2: 手游的註冊登錄頁面

- 方法論：場景分析方法

- 2、信息可視

- Case 2.1: 檢驗視覺圖的三個小方法

- Case 2.2: iPhone 撥號界面的隱藏功能

-3、邏輯完整

- 邏輯思維心流

- Case 3: 分享、提醒開啟通知的交互邏輯

● 插播一則招聘

- 產品體驗、視覺設計、用戶研究

艾體驗AIUX 正在做的事情

一個走心的暖場提問：

除了台下同學提到的一些煩惱，比如：

「陽光下無法看清屏幕」

「有線耳機的線會對跑步造成干擾」

「戴VR裝備後在real world中遇障礙規避不便」

……

從人機交互的角度再補充幾個不友好體驗：

「想摁亮iPhone屏幕結果指紋解鎖進入主頁面」

「跑步時想把亂入的舒緩輕音樂切換為勁爆歌曲時連摁三次話筒並不是不方便」

「戴上VR眼鏡後發現交互場景在腦後」

（注:人眼視野範圍為120°，小於VR提供的360°環景）

而所有這些問題，都不是流程圖可以解決的

交互設計師需要掌握什麼樣的技能

對於交互設計師，最主要的三個技能：

● 設計（Design）：更好表達、傳遞信息的能力

（如製作流程圖、線框圖）；

● 人因學（Human Factor）：去做一個更好的usability research（類似於用研分析）的能力；

● 計算機科學（Computer Science）：可引申為視覺設計、工業設計、動效設計等方面的能力。

這點有三個方面的是需要大家去關注的：

第一個方面就是信息的框架，在做事情的時候，需要知道信息的框架。艾體驗AIUX在招人時，就會關注應聘者的邏輯分析能力；

第二個是系統的框架，在移動端設計的時候，起碼要知道在設計的時候能夠調用的組件有哪些，比如iPhone里的Wallet組件，用戶在創建付費以後，可以將電影票、小票等添加到裡面；

第三個是要接受新科技、新技術的push，去學習新的交互方式、製作工具等。

另外的一些能力，比如市場（Marketing） 要求交互設計師具備對產品定位相對應的心理學、社會學、認知學習的知識庫。

這次的分享更傾向討論技術緯度的能力

而圖中右下角的Communication屬於另一重要維度

這次先把結構拋給大家，細節上暫不談

什麼是有趣的交互設計

分享對有趣的交互設計一個理解：

「有趣的交互，將真實世界中人們的操作過程，轉化成線上產品的功能邏輯和流程設計，並符合用戶心智，可以自然無意識地流暢操作」

有趣的交互設計的三個方面：

老闆：「xx 幫我畫一個註冊登陸的圖！」

這個聽起來如此具象的任務

真的……有那麼輕鬆嗎？

Amy分享說她面試時拿出這道題，可謂屢試不爽

大多數人拿紙過來就開始畫

而他們畫出來的，常常是這樣：

Q：問題在哪裡呢？

A：設計註冊登錄時

還需要考慮產品定位和驗證碼的邏輯

比如希望用戶更多用手機登陸

還是用更快捷的第三方登陸

在這裡暫不摳邏輯的細交點

先回歸到註冊登錄時的用戶場景進行分析

Case 1: Linkedin 註冊登錄頁面

有的人會問

「用戶會不會被註冊步攔住了？」

「會不會一看這麼多，摔手說我不想填了？」

回答這些都需要回到用戶場景，即：

「用戶來這個應用是為了什麼？」

對於招聘、社交、婚戀等強需求的應用，

為了推薦符合用戶需求的內容，把這類型的註冊表單適度延長，對用戶留存率有非常好的提升

所以需要多花三到四步，去收集用戶信息

Case 2: 手游的註冊登錄頁面

以大家最熟悉的兩款熱門手游為例

還回憶得起剛打開時的註冊登錄頁面嗎？

從下面兩款遊戲的註冊登錄頁面的截圖裡

可以發現，兩款手游都有設置「遊客登錄」入口

《王者榮耀》甚至為遊客準備了「遊客專區」

手游在註冊登錄的時候，並不會死纏你

根據遊戲心理學，用戶玩一款遊戲超過一定時間後，傾心於這款遊戲的可能性就更大

因此遊戲會幫助你更快的跨過新註冊這道坎

所以大家在收到註冊登錄這種需求後

一定要反問老闆一句：

「老闆我們這註冊登錄想達到什麼目的？ 」

即我們在做交互設計之前

一定要先問老闆，功能的目標是什麼？

比如註冊登錄是給用戶推薦更準確的內容

還是想讓用戶更快地開始使用？

當需求到達後開始繪製原型時還需要注意些什麼，點擊查看艾體驗AIUX上期推送：《4.5|動手畫圖前，交互設計師都要想些什麼？》

方法論：場景分析方法

限於時間，這裡先簡略地分享四個常用方法：

（這塊Amy在饅頭商學院是做過更詳細的專題分享，要是大家夠熱情的話，可獨家放送哦～）

● 故事版：將用戶的使用場景，用小故事畫出來

● Wizard of Oz：為了測試可用性，在具體功能技術上尚未實現時實施的一種假態的模擬，如右上角里用人工模擬AI回答用戶問題

● 原型圖：對交互過程先用草稿式的手繪表現，交給朋友用用看

● 按鈕觸發的前置條件：如右下角所示，在「預約課程」的按鈕觸發前，設置每期的預約目標

大家在用的時候可能沒有想到某個具體方法

可以回過頭來後再做一個系統的了解

這裡也是先跟大家分享一個小故事

因為工作，Amy微信上加有好些交互設計師

有時候對方會突然扔來一頁交互圖：

「Amy 幫我看下我這個設計有什麼問題？」

Q：這頁交互圖的問題究竟在哪裡呢？

A：設計師在繪製時首先需要明確的是：

「這圖裡，想給對象看到的第一個東西是什麼 」

而這頁圖，放眼望去全是框

檢驗視覺圖的三個小方法

這裡的三個小方法均來自「格式塔效應」

「格式塔效應」里的原則有很多條

這裡先分享對交互圖設計最有用的三個規則

● 相似性：將主要信息區隔出來，用反色的方式在交互圖內向產品呈現

● 接近性 ：如上圖所示，人會將靠近的線分為一組，所以若不從距離上對交互圖內各部分進行區隔，展現出來的就是一大坨

● 連續性 ：我們會將上圖右三看作兩個圓環而不是兩個月牙，因為人類更傾向於簡略地、連續性地去理解頁面的構成原理

現在再用三個原則去檢驗這頁交互圖

交互圖裡之所以放眼望去都是 框

是因為沒有把信息按照原則進行整理

應該把思維邏輯里具有連續性的放在一起

而不是滿屏散落地都是入口

如在思維邏輯里，「掛完號去幹嘛？」

當一個頁面全是讓用戶選擇的入口的時候

頁面一定是錯的

（我艾的生產和交付上一定不會出現這個問題??

Case 2+: iPhone 撥號界面的隱藏功能

來，一起念：

在交互里，若非必要，勿增實體

在交互里，若非必要，勿增實體

在交互里，若非必要，勿增實體

比如case2交互圖裡的數值分析不需要首頁入口

一個更好的示例是：

在iPhone 撥號的界面

能找到「添加聯繫人」+「刪除號碼」在哪裡嗎

當在撥號頁面輸入「12345」後

「添加」和「刪除」鍵出現在了數字的兩側

可以看出iPhone在扁平界面化後

把「添加」和「刪除」鍵放在了第二邏輯層

因為扁平化後，用戶對所有界面事物的認知一定會有一個轉化過程

在以前 iPhone擬物化的時期

用戶在界面上看到什麼就是什麼，更容易讀懂

而現在，用戶對界面讀懂的可能性降低了

可能需要一些轉換

提供給用戶的信息一定是經過刪減的

這個case的分析在Amy合著的新書《觸人心弦：設計更優秀的iPhone應用》也有提到

（京東、亞馬遜已經上架）

這裡Amy分享了第三個小故事

有次她去另外一個公司開會

該公司的一個小助理準備好了會議室

在向Boss彙報投影儀、小白板已放置妥當時

Boss卻用三個問題問住了她：

「底下投影儀是什麼介面的？」

「投影儀是否偏色？」

（展示線框圖的時候需要切換顯色模式）

「下面的小白板有筆嗎，筆有油嗎？」

小助理的問題在於沒有考慮一個連續性邏輯

對於某件事只看到一個「點」

但沒有看到「點」後續的其他的「點」

在我們考慮註冊登陸的時候

其實已經運用了正確的思維方式

即對於用戶而言：

在完成填表這個「點」後

用戶登陸後立刻能看到他們所期待的內容

邏輯思維心流

即一種層級式邏輯分流的思考方式：

我通過一個點，我可以演變出多個問題，再由這些問題切割成更多的問題

在這種思維下，首先將事情拆解為一個個「點」

拿上個小故事裡的白板為例

把白板作為第一個「點」發散出去：

「有沒有準備好筆？」

「準備了幾種顏色的筆？ 」

「需不需要提前畫好一些界面框？」

在整理交互設計師能力的時候

Amy就是按這樣的邏輯，一層層去發掘要幹什麼

最後做出了「交互設計師能力樹」

艾體驗AIUX在培養員工的有個方式就是

要求每位員工，堅持使用新app、收集新的新聞

有時候Amy會進行突然的抽查：

在不準偷看原稿的前提下，

「告訴我你這期收集的信息中，哪幾個是重點」

大家可能也常常會遇到這種情況：

我們閱讀過很多東西，但就是想不起來

這是一個學習上的小誤區 ：

在頭腦里零散地構造出一些小點，無法在大腦的溝壑中刻下印子來，所以再回憶的時候很難

最簡單的方式是「結構化信息」

一定要去信息／事物間找規律

世間萬物之間一定是有些必然聯繫的

找到15條信息的時候，嘗試這些信息結構化

這是一個最好的方法

當你的15條信息結構化為5條以後

就會開始習得一種構造結構化思路的方式

Case 3: 分享、提醒開啟通知的交互邏輯

注意交互行為邏輯上的聯繫

大家分享鏈接時是什麼場景？

分享到微信後，鏈接顯示的小圖、文案是什麼？

目的是拉新還是促活，需要在鏈接里附帶直接註冊的入口嗎？

鏈接打開以後，是否要跳回到原來的界面？

提示開啟推送時，需要結合用戶使用場景

而不是彈出以一個簡單的對話框

對於新聞類、電商類app ，推送很重要

推送這個交互行為，需要遵循怎樣的設計邏輯？

開啟推送：

以什麼樣的頻率給用戶發送推送更有效？

推送的樣式（字數限制／配圖／聲音）

關閉推送：

提醒用戶再次開啟推送的場景設置

（免費／快遞時）

是否沒有在推送前給用戶足夠的信息

（為什麼開啟）

Amy的話：

分享會的時間比較有限

分享能講的點很少

更希望能用一些提綱挈領的點引發大家思考

插播一則招聘：

加入艾體驗，一起玩出更酷的產品

產品體驗設計師 （2-3名）

視覺設計師 （1-2名）

用戶研究分析師（2-3名）

簡歷和作品集請發送至 hr@aiux.cc

更多招聘詳情，請WX搜索艾體驗，並查看今天第二條推送，么么噠～