?有趣的交互，不只是畫流程圖
* 本文內(nèi)容來自 艾體驗(yàn)|李婧Amy 在 6th DEX-Sketch Meetup 成都現(xiàn)場(chǎng)的分享
本次推送篇幅略長(zhǎng)
推薦搭配「小提綱」食用拴清，口味更佳
小提綱
● 對(duì)于交互設(shè)計(jì)師泻蚊，最主要的三個(gè)技能
- 設(shè)計(jì)躲舌、人因?qū)W、計(jì)算機(jī)科學(xué)
● 有趣的交互設(shè)計(jì)的三個(gè)方面
1性雄、場(chǎng)景帶入
- Case 1: Linkin 注冊(cè)登陸頁(yè)面
- Case 2: 手游的注冊(cè)登陸頁(yè)面
- 方法論：場(chǎng)景分析方法
- 2没卸、信息可視
- Case 2.1: 檢驗(yàn)視覺圖的三個(gè)小方法
- Case 2.2: iPhone 撥號(hào)界面的隱藏功能
-3、邏輯完整
- 邏輯思維心流
- Case 3: 分享秒旋、提醒開啟通知的交互邏輯
● 插播一則招聘
- 產(chǎn)品體驗(yàn)约计、視覺設(shè)計(jì)、用戶研究
除了臺(tái)下同學(xué)提到的一些煩惱迁筛，比如：
「陽(yáng)光下無法看清屏幕」
「有線耳機(jī)的線會(huì)對(duì)跑步造成干擾」
「戴VR裝備后在real world中遇障礙規(guī)避不便」
……
從人機(jī)交互的角度再補(bǔ)充幾個(gè)不友好體驗(yàn)：
「想摁亮iPhone屏幕結(jié)果指紋解鎖進(jìn)入主頁(yè)面」
「跑步時(shí)想把亂入的舒緩輕音樂切換為勁爆歌曲時(shí)連摁三次話筒并不是不方便」
「戴上VR眼鏡后發(fā)現(xiàn)交互場(chǎng)景在腦后」
（注:人眼視野范圍為120°煤蚌，小于VR提供的360°環(huán)景）
而所有這些問題
都不是流程圖可以解決的
對(duì)于交互設(shè)計(jì)師，最主要的三個(gè)技能：
● 設(shè)計(jì)（Design）：更好表達(dá)细卧、傳遞信息的能力
（如制作流程圖尉桩、線框圖）；
● 人因?qū)W（Human Factor）：去做一個(gè)更好的usability research（類似于用研分析）的能力酒甸；
● 計(jì)算機(jī)科學(xué)（Computer Science）：可引申為視覺設(shè)計(jì)魄健、工業(yè)設(shè)計(jì)、動(dòng)效設(shè)計(jì)等方面的能力插勤。
這點(diǎn)有三個(gè)方面的是需要大家去關(guān)注的：
第一個(gè)方面就是信息的框架，在做事情的時(shí)候革骨，需要知道信息的框架农尖。艾體驗(yàn)AIUX在招人時(shí)，就會(huì)關(guān)注應(yīng)聘者的邏輯分析能力良哲；
第二個(gè)是系統(tǒng)的框架盛卡，在移動(dòng)端設(shè)計(jì)的時(shí)候，起碼要知道在設(shè)計(jì)的時(shí)候能夠調(diào)用的組件有哪些筑凫，比如iPhone里的Wallet組件滑沧，用戶在創(chuàng)建付費(fèi)以后并村，可以將電影票、小票等添加到里面滓技；
第三個(gè)是要接受新科技哩牍、新技術(shù)的push，去學(xué)習(xí)新的交互方式令漂、制作工具等膝昆。
另外的一些能力，比如市場(chǎng)（Marketing） 要求交互設(shè)計(jì)師具備對(duì)產(chǎn)品定位相對(duì)應(yīng)的心理學(xué)叠必、社會(huì)學(xué)荚孵、認(rèn)知學(xué)習(xí)的知識(shí)庫(kù)。
這次的分享更傾向討論技術(shù)緯度的能力
而圖中右下角的Communication屬于另一重要維度
這次先把結(jié)構(gòu)拋給大家纬朝，細(xì)節(jié)上暫不談
什么是有趣的交互設(shè)計(jì)
「有趣的交互收叶，將真實(shí)世界中人們的操作過程，轉(zhuǎn)化成線上產(chǎn)品的功能邏輯和流程設(shè)計(jì)共苛，并符合用戶心智滔驾，可以自然無意識(shí)地流暢操作」
有趣的交互設(shè)計(jì)的三個(gè)方面：
老板：「xx 幫我畫一個(gè)注冊(cè)登錄的圖！」
這個(gè)聽起來如此具象的任務(wù)
真的……有那么輕松嗎俄讹？
Amy分享說她面試時(shí)拿出這道題哆致，可謂屢試不爽
大多數(shù)人拿紙過來就開始畫
而他們畫出來的，常常是這樣：
Q：?jiǎn)栴}在哪里呢患膛？
A：設(shè)計(jì)注冊(cè)登錄時(shí)
還需要考慮產(chǎn)品定位和驗(yàn)證碼的邏輯
比如希望用戶更多用手機(jī)登陸
還是用更快捷的第三方登陸
在這里暫不摳邏輯的細(xì)節(jié)點(diǎn)
先回歸到注冊(cè)登錄時(shí)的用戶場(chǎng)景進(jìn)行分析
Case 1: Lindkin 注冊(cè)登錄頁(yè)面
有的人會(huì)問
「用戶會(huì)不會(huì)被注冊(cè)步攔住了摊阀？」
「會(huì)不會(huì)一看這么多，摔手說我不想填了踪蹬？」
回答這些都需要回到用戶場(chǎng)景胞此，即：
「用戶來這個(gè)應(yīng)用是為了什么？」
對(duì)于招聘跃捣、社交漱牵、婚戀等強(qiáng)需求的應(yīng)用，
為了推薦符合用戶需求的內(nèi)容疚漆，把這類型的注冊(cè)表單適度延長(zhǎng)酣胀，
在注冊(cè)步驟獲取更多用戶詳情，對(duì)用戶留存率有非常好的提升
所以需要多花三到四步娶聘，去收集用戶信息
Case 2: 手游的注冊(cè)登錄頁(yè)面
以大家最熟悉的兩款熱門手游為例
還回憶得起剛打開時(shí)的注冊(cè)登陸頁(yè)面嗎闻镶？
從下面兩款游戲的注冊(cè)登錄頁(yè)面的截圖里
可以發(fā)現(xiàn)，兩款手游都有設(shè)置「游客登陸」入口
《王者榮耀》甚至為游客準(zhǔn)備了「游客專區(qū)」
手游在注冊(cè)登錄的時(shí)候丸升，并不會(huì)死纏你
根據(jù)游戲心理學(xué)铆农，用戶玩一款游戲超過一定時(shí)間后，傾心于這款游戲的可能性就更大
因此游戲會(huì)幫助你更快的跨過新注冊(cè)這道坎
所以大家在收到注冊(cè)登錄這種需求后
一定要反問老板一句：
「老板我們這注冊(cè)登錄想達(dá)到什么目的狡耻？ 」
即我們?cè)谧鼋换ピO(shè)計(jì)之前
一定要先問老板墩剖，功能的目標(biāo)是什么猴凹？
比如注冊(cè)登錄是給用戶推薦更準(zhǔn)確的內(nèi)容
還是想讓用戶更快地開始使用？
當(dāng)需求到達(dá)后開始繪制原型時(shí)還需要注意些什么岭皂，點(diǎn)擊查看艾體驗(yàn)AIUX上期推送：《4.5|動(dòng)手畫圖前郊霎，交互設(shè)計(jì)師都要想些什么？》
方法論：場(chǎng)景分析方法
限于時(shí)間蒲障，這里先簡(jiǎn)略地分享四個(gè)常用方法：
（這塊Amy在饅頭商學(xué)院是做過更詳細(xì)的專題分享歹篓，要是大家夠熱情的話，可獨(dú)家放送哦～）
● 故事版：將用戶的使用場(chǎng)景揉阎，用小故事畫出來
● Wizard of Oz：為了測(cè)試可用性庄撮，在具體功能技術(shù)上尚未實(shí)現(xiàn)時(shí)實(shí)施的一種假態(tài)的模擬，如右上角里用人工模擬AI回答用戶問題
● 原型圖：對(duì)交互過程先用草稿式的手繪表現(xiàn)毙籽，交給朋友用用看
● 按鈕觸發(fā)的前置條件：如右下角所示洞斯，在「預(yù)約課程」的按鈕觸發(fā)前，設(shè)置每期的預(yù)約目標(biāo)
大家在用的時(shí)候可能沒有想到某個(gè)具體方法
可以回過頭來后再做一個(gè)系統(tǒng)的了解
這里也是先跟大家分享一個(gè)小故事
因?yàn)楣ぷ骺由模珹my微信上加有好些交互設(shè)計(jì)師
有時(shí)候?qū)Ψ綍?huì)突然扔來一頁(yè)交互圖：
「Amy? 幫我看下我這個(gè)設(shè)計(jì)有什么問題烙如？」
Q：這頁(yè)交互圖的問題究竟在哪里呢？
A：設(shè)計(jì)師在繪制時(shí)首先需要明確的是：
「這圖里毅否，想給對(duì)象看到的第一個(gè)東西是什么 」
而這頁(yè)圖亚铁，放眼望去全是框
檢驗(yàn)視覺圖的三個(gè)小方法
這里的三個(gè)小方法均來自「格式塔效應(yīng)」
「格式塔效應(yīng)」里的原則有很多條
這里先分享對(duì)交互圖設(shè)計(jì)最有用的三個(gè)規(guī)則
● 相似性：將主要信息區(qū)隔出來，用反色的方式在交互圖內(nèi)向產(chǎn)品呈現(xiàn)
● 接近性 ：如上圖所示螟加，人會(huì)將靠近的線分為一組徘溢，所以若不從距離上對(duì)交互圖內(nèi)各部分進(jìn)行區(qū)隔，展現(xiàn)出來的就是一大坨
● 連續(xù)性 ：我們會(huì)將上圖右三看作兩個(gè)圓環(huán)而不是兩個(gè)月牙捆探，因?yàn)槿祟惛鼉A向于簡(jiǎn)略地然爆、連續(xù)性地去理解頁(yè)面的構(gòu)成原理
現(xiàn)在再用三個(gè)原則去檢驗(yàn)這頁(yè)交互圖
交互圖里之所以放眼望去都是?框
是因?yàn)闆]有把信息按照原則進(jìn)行整理
應(yīng)該把思維邏輯里具有連續(xù)性的放在一起
而不是滿屏散落地都是入口
如在思維邏輯里，「掛完號(hào)去干嘛黍图？」
當(dāng)一個(gè)頁(yè)面全是讓用戶選擇的入口的時(shí)候
頁(yè)面一定是錯(cuò)的
（我艾的生產(chǎn)和交付上一定不會(huì)出現(xiàn)這個(gè)問題??)
Case 2+: iPhone 撥號(hào)界面的隱藏功能
來曾雕，一起念：
在交互里，若非必要助被，勿增實(shí)體
在交互里剖张，若非必要，勿增實(shí)體
在交互里恰起，若非必要修械，勿增實(shí)體
比如case2交互圖里的數(shù)值分析不需要首頁(yè)入口
一個(gè)更好的示例是：
在iPhone 撥號(hào)的界面
能找到「添加聯(lián)系人」+「刪除號(hào)碼」在哪里嗎
當(dāng)在撥號(hào)頁(yè)面輸入「12345」后
「添加」和「刪除」鍵出現(xiàn)在了數(shù)字的兩側(cè)
可以看出iPhone在扁平界面化后
把「添加」和「刪除」鍵放在了第二邏輯層
因?yàn)楸馄交螅脩魧?duì)所有界面事物的認(rèn)知一定會(huì)有一個(gè)轉(zhuǎn)化過程
在以前 iPhone擬物化的時(shí)期
用戶在界面上看到什么就是什么检盼，更容易讀懂
而現(xiàn)在，用戶對(duì)界面讀懂的可能性降低了
可能需要一些轉(zhuǎn)換
提供給用戶的信息一定是經(jīng)過刪減的
這個(gè)case的分析在Amy合著的新書《觸人心弦：設(shè)計(jì)更優(yōu)秀的iPhone應(yīng)用》也有提到
【京東翘单、亞馬遜現(xiàn)已發(fā)售】
這里Amy分享了第三個(gè)小故事
有次她去另外一個(gè)公司開會(huì)
該公司的一個(gè)小助理準(zhǔn)備好了會(huì)議室
在向Boss匯報(bào)投影儀吨枉、小白板已放置妥當(dāng)時(shí)
Boss卻用三個(gè)問題問住了她：
「底下投影儀是什么接口的蹦渣？」
「投影儀是否偏色？」
（展示線框圖的時(shí)候需要切換顯色模式）
「下面的小白板有筆嗎貌亭，筆有油嗎柬唯？」
小助理的問題在于沒有考慮一個(gè)連續(xù)性邏輯
對(duì)于某件事只看到一個(gè)「點(diǎn)」
但沒有看到「點(diǎn)」后續(xù)的其他的「點(diǎn)」
在我們考慮注冊(cè)登陸的時(shí)候
其實(shí)已經(jīng)運(yùn)用了正確的思維方式
即對(duì)于用戶而言：
在完成填表這個(gè)「點(diǎn)」后
用戶登陸后立刻能看到他們所期待的內(nèi)容
邏輯思維心流
即一種層級(jí)式邏輯分流的思考方式：
我通過一個(gè)點(diǎn)，我可以演變出多個(gè)問題圃庭，再由這些問題切割成更多的問題
在這種思維下锄奢，首先將事情拆解為一個(gè)個(gè)「點(diǎn)」
拿上個(gè)小故事里的白板為例
把白板作為第一個(gè)「點(diǎn)」發(fā)散出去：
「有沒有準(zhǔn)備好筆？」
「準(zhǔn)備了幾種顏色的筆剧腻？ 」
「需不需要提前畫好一些界面框拘央？」
在整理交互設(shè)計(jì)師能力的時(shí)候
Amy就是按這樣的邏輯，一層層去發(fā)掘要干什么
最后做出了「交互設(shè)計(jì)師能力樹」
艾體驗(yàn)AIUX在培養(yǎng)員工的有個(gè)方式就是
要求每位員工书在，堅(jiān)持使用新app灰伟、收集新的新聞
有時(shí)候Amy會(huì)進(jìn)行突然的抽查：
在不準(zhǔn)偷看原稿的前提下，
「告訴我你這期收集的信息中儒旬，哪幾個(gè)是重點(diǎn)」
大家可能也常常會(huì)遇到這種情況：
我們閱讀過很多東西栏账，但就是想不起來
這是一個(gè)學(xué)習(xí)上的小誤區(qū) ：
在頭腦里零散地構(gòu)造出一些小點(diǎn)，無法在大腦的溝壑中刻下印子來栈源，所以再回憶的時(shí)候很難
最簡(jiǎn)單的方式是「結(jié)構(gòu)化信息」
一定要去信息／事物間找規(guī)律
世間萬物之間一定是有些必然聯(lián)系的
找到15條信息的時(shí)候挡爵，嘗試這些信息結(jié)構(gòu)化
這是一個(gè)最好的方法
當(dāng)你的15條信息結(jié)構(gòu)化為5條以后
就會(huì)開始習(xí)得一種構(gòu)造結(jié)構(gòu)化思路的方式
Case 3: 分享、提醒開啟通知的交互邏輯
注意交互行為邏輯上的聯(lián)系
大家分享鏈接時(shí)是什么場(chǎng)景甚垦？
分享到微信后茶鹃，鏈接顯示的小圖、文案是什么制轰？
目的是拉新還是促活前计，需要在鏈接里附帶直接注冊(cè)的入口嗎？
鏈接打開以后垃杖，是否要跳回到原來的界面男杈？
提示開啟推送時(shí)，需要結(jié)合用戶使用場(chǎng)景
而不是彈出以一個(gè)簡(jiǎn)單的對(duì)話框
對(duì)于新聞?lì)惖鞣㈦娚填恆pp 伶棒，推送很重要
推送這個(gè)交互行為，需要遵循怎樣的設(shè)計(jì)邏輯彩库？
開啟推送：
以什么樣的頻率給用戶發(fā)送推送更有效肤无？
推送的樣式（字?jǐn)?shù)限制／配圖／聲音）
關(guān)閉推送：
提醒用戶再次開啟推送的場(chǎng)景設(shè)置
（免費(fèi)／快遞時(shí)）
是否沒有在推送前給用戶足夠的信息
（為什么開啟）
Amy的話：
分享會(huì)的時(shí)間比較有限
分享能講的點(diǎn)很少
更希望能用一些提綱挈領(lǐng)的點(diǎn)引發(fā)大家思考
插播一則招聘：
加入艾體驗(yàn)，一起玩出更酷的產(chǎn)品
產(chǎn)品體驗(yàn)設(shè)計(jì)師 （2-3名）
視覺設(shè)計(jì)師? ? ? ? （1-2名）
用戶研究分析師（2-3名）
簡(jiǎn)歷和作品集請(qǐng)發(fā)送至 hr@aiux.cc
