起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)微交互的設(shè)計(jì)案例與思考（上篇）
作為一名交互設(shè)計(jì)愛(ài)好者，在此拋磚引玉，用6類(lèi)約30個(gè)案例供大家參考，本文先分享前面兩部分，即為懶而做的設(shè)計(jì)和為等待而做的設(shè)計(jì)。
設(shè)計(jì)師和初級(jí)產(chǎn)品經(jīng)理面試常常被問(wèn)及手機(jī)中的APP好在哪里，聰明的同學(xué)懂得事先準(zhǔn)備，比如在網(wǎng)上搜索“XXX設(shè)計(jì)神細(xì)節(jié)”。
然而，受?chē)?guó)外UX設(shè)計(jì)趨勢(shì)影響，今天國(guó)內(nèi)有大量的產(chǎn)品設(shè)計(jì)方法論介紹（如《用戶體驗(yàn)要素》五層模型，COOPER的用戶模型和情景劇本，CUBI產(chǎn)品模型，以及近期火爆的服務(wù)設(shè)計(jì)）。但微交互的資源相對(duì)匱乏，多是增強(qiáng)用戶理解和使用的動(dòng)效模型，涉及用戶行為的較少。
為什么對(duì)微交互的討論這么少？個(gè)人理解好的微交互不在書(shū)本和方法論里，而在實(shí)際產(chǎn)品中。好設(shè)計(jì)是透明的，真正優(yōu)秀的微交互設(shè)計(jì)，人們每天都在使用卻察覺(jué)不到它的存在。
所以是時(shí)候整理今天產(chǎn)品中的微交互設(shè)計(jì)了。
作為一名交互設(shè)計(jì)愛(ài)好者，在此拋磚引玉，用6類(lèi)約30個(gè)案例供大家參考。
這6部分分別是：
- 為懶而做的設(shè)計(jì)
- 為等待而做的設(shè)計(jì)
- 懂禮貌的設(shè)計(jì)
- 為舒適而做的設(shè)計(jì)
- 為感知而做的設(shè)計(jì)
- 因懂你而做的設(shè)計(jì)
一、為懶而做的設(shè)計(jì)：減少用戶負(fù)擔(dān)
生理學(xué)表明，人會(huì)懶源于當(dāng)人減少能量消耗的時(shí)候，大腦會(huì)釋放多巴胺的獎(jiǎng)勵(lì)機(jī)制。這也許是因?yàn)槲覀兊淖嫦纫圆东C為生，減少能量消耗意味著增加生存機(jī)會(huì)。
懶是人的天性，所以交互設(shè)計(jì)的目標(biāo)正是幫助用戶從復(fù)雜的工作中解脫出來(lái)，減少額外工作，最好一步完成任務(wù)。
案例一：淘寶、微信手機(jī)充值，一鍵購(gòu)買(mǎi)
我們很多人有使用淘寶或微信給手機(jī)充值話費(fèi)的經(jīng)歷，然而我們可能沒(méi)有留意到，二者的充值操作略有區(qū)別。
淘寶的操作要用戶選擇價(jià)格后再按充值按鈕喚起支付，而微信點(diǎn)擊價(jià)格后直接喚起支付。由于充話費(fèi)是單選SKU，淘寶的點(diǎn)擊確認(rèn)操作毫無(wú)必要，因此增加了用戶負(fù)擔(dān)，微信則實(shí)現(xiàn)了一鍵購(gòu)買(mǎi)。今天的支付寶正是理解兩者區(qū)別，使用了微信的模式。
案例二：支付寶轉(zhuǎn)賬-智能填充
幾乎每個(gè)人都有使用支付寶轉(zhuǎn)賬的經(jīng)歷。當(dāng)我們填寫(xiě)完姓名和卡號(hào)后，發(fā)現(xiàn)銀行被自動(dòng)選擇填寫(xiě)完畢。當(dāng)時(shí)一定會(huì)覺(jué)得這真貼心啊。
通過(guò)卡號(hào)驗(yàn)證發(fā)卡行，自動(dòng)為用戶填充銀行，避免了選擇步驟，減少了用戶的輸入負(fù)擔(dān)。
不止于此，在填寫(xiě)后，支付寶這是才顯示到賬時(shí)間，并默認(rèn)填充2小時(shí)，減少了用戶的認(rèn)知負(fù)擔(dān)和選擇步驟。
案例三：DOTA2選擇戰(zhàn)役，在上一次上做更改
這是一個(gè)桌面的例子。DOTA2玩家知道：由于線上玩家較少，游戲模式采取了玩家勾選多種模式匹配的策略，以減少匹配的等待時(shí)間。
于是出現(xiàn)了一個(gè)問(wèn)題，玩家每一次都多次勾選好復(fù)雜啊。DOTA2沒(méi)這么做，而是記住玩家上一次的選項(xiàng)，在這個(gè)基礎(chǔ)上做更改，不必重新選擇。
由于玩家大多有著自己的固定偏好，多數(shù)情況下，會(huì)在上一次模式上直接點(diǎn)擊開(kāi)局。這種情形下用戶選擇負(fù)擔(dān)被消除，實(shí)現(xiàn)一鍵匹配。
案例四：友寶販?zhǔn)蹤C(jī)和麥當(dāng)勞點(diǎn)餐支付-不知道用戶選什么，默認(rèn)多數(shù)人的選項(xiàng)
這是一個(gè)線下支付終端的例子。很多朋友都有過(guò)在友寶販?zhǔn)蹤C(jī)買(mǎi)過(guò)飲料的經(jīng)歷。在選擇商品后，屏幕顯示二維碼，用戶掃碼支付，取走飲料。很多人沒(méi)有注意到，這中間其實(shí)節(jié)省了一步選擇支付方式的操作。
由于國(guó)內(nèi)已經(jīng)習(xí)慣了微信和支付寶付款，友寶將支付方式默認(rèn)為支付寶付款（這個(gè)二維碼微信支付也有效）。當(dāng)需要更改時(shí)，才需要點(diǎn)擊切換其他方式。
麥當(dāng)勞設(shè)計(jì)了超級(jí)棒的自助點(diǎn)餐系統(tǒng)，但在選擇支付方式這里似乎搞砸了。當(dāng)用戶生成訂單后必須在支付寶微信和銀聯(lián)支付間做選擇。
通過(guò)默認(rèn)最多人選項(xiàng)，友寶巧妙減少多數(shù)人的額外負(fù)擔(dān)，而對(duì)少數(shù)人來(lái)說(shuō)也并未增加負(fù)擔(dān)。
案例五：亞馬遜和什么值得買(mǎi)-篩選和排序其實(shí)可以結(jié)合到一起
電商習(xí)慣于在商品列表上使用篩選和排序，用戶在多個(gè)下拉菜單里做選擇。但有些時(shí)候，兩者結(jié)合到一起似乎更好。
這出于兩個(gè)原因，首先用戶不必操作多個(gè)下拉控件，第二，絕大多數(shù)時(shí)候，用戶是看最新，最熱，最便宜，而不是看最舊，最冷，最貴。排序其實(shí)放置的更深一些無(wú)妨。
亞馬遜APP的商品列表上只有篩選，排序在篩選內(nèi)部，但是仍是下拉形式。亞馬遜的設(shè)計(jì)者似乎了解兩者可以合二為一，但可惜呈現(xiàn)方式仍然效率低下。而頂部因轉(zhuǎn)移排序按鈕的空間也未好好利用。
什么值得買(mǎi)真正了解到這幾點(diǎn)的問(wèn)題，在一個(gè)列表上，其設(shè)計(jì)者不僅將排序整合到篩選內(nèi)部，而且在去掉排序位置上放置了熱門(mén)標(biāo)簽，用戶甚至是根本不用點(diǎn)擊篩選，也可以通過(guò)標(biāo)簽選出需要的內(nèi)容了，降低了用戶操作負(fù)擔(dān)。
微交互的核心理念在于通過(guò)打造產(chǎn)品細(xì)節(jié)提升用戶體驗(yàn)。
在第一部分中，我們介紹了為懶做設(shè)計(jì)，減少用戶負(fù)擔(dān)的5個(gè)案例，在接下來(lái)的部分，我們將聚焦為等待而做的設(shè)計(jì)。
二、為等待而做的設(shè)計(jì)：等待不可避免，但可以優(yōu)化
研究表明，用戶能夠最多忍受的等待時(shí)間是6～8秒：在0.1秒內(nèi)反饋用戶是可以接受的；超過(guò)1秒的等待用戶會(huì)注意到延遲；而超出8秒，絕大部分用戶會(huì)憤然離場(chǎng)。
雖然交互設(shè)計(jì)并不能改變網(wǎng)速和設(shè)備性能，但可以通過(guò)優(yōu)化等待策略，減少等待次數(shù)，設(shè)計(jì)等待效果，甚至使用虛假的反饋為用戶疏導(dǎo)焦慮，最終獲得用戶的認(rèn)同。
案例一：人行道紅綠燈的兩種顯示，優(yōu)化的前提是正確理解模式
細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)，北京大街上人行道的紅綠燈使用了兩種顯示模式。紅燈采用進(jìn)度條形式，而綠燈是讀秒倒計(jì)時(shí)。為什么同一個(gè)紅綠燈采取兩種截然不同的形式呢？這里其實(shí)有巧妙的地方。
紅綠燈兩種顯示分別處在用戶的兩種模式下：紅燈是等待模式，而綠燈則是催促用戶。紅燈模式下，進(jìn)度條是一個(gè)沙漏，行人是無(wú)法獲得明確時(shí)間的，也就麻痹了等待焦慮，避免闖紅燈的發(fā)生。在綠燈模式下，精確的時(shí)間讓用戶計(jì)算是否還能過(guò)得去馬路，避免行動(dòng)不便者滯留在道路中央發(fā)生危險(xiǎn)。
正是設(shè)計(jì)者正確的理解了兩種模式的不同，設(shè)計(jì)出優(yōu)化的紅綠燈，減少了行人闖紅燈和道路滯留發(fā)生。
案例二：IOS的airdrop發(fā)送和接收，如非必要應(yīng)盡量避免使用模態(tài)
iPhone的airdrop是一個(gè)非常方便的文件傳輸功能，在實(shí)際使用中，OX設(shè)備間的文件傳輸幾乎沒(méi)有其他更好的替代者。但iPhone的用戶可能沒(méi)有意識(shí)到，airdrop發(fā)送和接收，是兩種截然不同的界面。
具體說(shuō)，發(fā)送的等待界面是非模態(tài)的，用戶在向外界傳輸數(shù)據(jù)時(shí)，可以通過(guò)返回按鈕或者h(yuǎn)ome鍵進(jìn)入其他任務(wù)；而接收卻是模態(tài)的等待界面，用戶必須等待傳輸完畢（或者取消傳輸），此時(shí)home鍵是無(wú)效的。
我曾經(jīng)因接收同事的會(huì)議視頻，等了足足20分鐘，在這期間，我驚訝于我的手機(jī)竟然什么也不能做。難道是因?yàn)樵O(shè)備讀寫(xiě)的限制不同？可我們平時(shí)在appstore上下載幾百兆的應(yīng)用，手機(jī)也不是這樣啊。不管怎么說(shuō)，如非必需，等待的模態(tài)界面是應(yīng)該盡量避免的，它讓等待者不知所措，即是它來(lái)自以體驗(yàn)著稱的蘋(píng)果公司。
案例三：DOTA2的匹配等待，等待的時(shí)候其實(shí)可以找點(diǎn)事做
生活中我們會(huì)發(fā)現(xiàn)，人們?cè)诘却臅r(shí)候，并不喜歡完全閑著。比如超市收銀臺(tái)前的長(zhǎng)隊(duì)，等待的人們很多在玩手機(jī)刷微信。我們應(yīng)當(dāng)避免讓用戶干等著，應(yīng)嘗試為他們找點(diǎn)喜歡的事做，現(xiàn)實(shí)中確實(shí)有一些這樣的軟件設(shè)計(jì)：
前邊提到，由于DOTA2線上玩家很少，匹配一局的等待時(shí)間很長(zhǎng)（一般要3分鐘上下）。DOTA2沒(méi)有使用模態(tài)等待界面，而在右下角非模態(tài)顯示，玩家這時(shí)可以看英雄技能、看攻略、或者逛商店。
不止于此，在自選英雄的1分鐘內(nèi)，如果玩家提前選好，剩下的時(shí)間可以屏幕右邊的在沙盤(pán)上放置自己走哪一路，還可以購(gòu)買(mǎi)出門(mén)裝。
在等待這件事上，暴雪確實(shí)想了很多辦法，在不可避免的等待中讓用戶做有意義的事。
案例四：閑魚(yú)和餓了么的加載，使用動(dòng)畫(huà)消除用戶的焦慮
多圖列表刷新或者訂單生成等待通常是一個(gè)大于1秒小于8秒的時(shí)間，它讓用戶能明顯感受延遲和不穩(wěn)定感。優(yōu)秀的移動(dòng)產(chǎn)品會(huì)專門(mén)為這個(gè)等待設(shè)計(jì)加載動(dòng)畫(huà)，比如閑魚(yú)和餓了么，使用接近物理運(yùn)動(dòng)的可愛(ài)彈動(dòng)動(dòng)畫(huà)，提供反饋，麻痹和消除用戶的等待焦慮，理解系統(tǒng)正在運(yùn)轉(zhuǎn)，內(nèi)容或訂單馬上就好。
這樣的例子在產(chǎn)品中非常多，也是微交互設(shè)計(jì)的熱門(mén)應(yīng)用之一，在此不再展開(kāi)。
案例五：微信瀏覽器的加載進(jìn)度條，提供反饋，即便是虛假的
當(dāng)我們?cè)谧烂鎮(zhèn)鬏斚螺d過(guò)程中經(jīng)常發(fā)現(xiàn)，雖然網(wǎng)速會(huì)有波動(dòng)，但數(shù)據(jù)的變化范圍并不大。然而在移動(dòng)端的微信瀏覽器里，當(dāng)我們打開(kāi)一篇公眾號(hào)文章，經(jīng)常會(huì)發(fā)現(xiàn)進(jìn)度條的起始速率和結(jié)束部分差別非常大。
出于好奇我做了個(gè)實(shí)驗(yàn)：將家里的網(wǎng)絡(luò)關(guān)閉，但WI-FI打開(kāi)，此時(shí)手機(jī)連著WI-FI，所以并不能判斷是否有網(wǎng)絡(luò)，我打開(kāi)了公眾號(hào)的一篇文章，結(jié)果出乎我的意料，瀏覽器的綠色進(jìn)度條快速的走到了一半，然后在后半段緩慢前進(jìn)，最終顯示無(wú)法打開(kāi)，請(qǐng)求刷新頁(yè)面。
可是因?yàn)閿嗑W(wǎng)并沒(méi)有數(shù)據(jù)傳輸啊，微信提供的是虛假的進(jìn)度條?？墒窃傧胍幌耄俏⑿盘摷俚姆答?，讓我在白屏中等待了很長(zhǎng)時(shí)間，還誤以為網(wǎng)速很快。
這是微信的策略，目的是消除用戶等待焦慮。
消除負(fù)擔(dān)和優(yōu)化等待的微交互設(shè)計(jì)案例和思考寫(xiě)到這里，感謝大家閱讀。
相關(guān)閱讀
作者：彩虹貓sir，交互設(shè)計(jì)師一枚，堅(jiān)持原創(chuàng)，以文會(huì)友，希望和大家共同感悟，思考，成長(zhǎng)。
本文由 @彩虹貓sir 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
大大，有公眾號(hào)嗎？
在紅綠燈的例子中，我們可以不給用戶設(shè)置等待時(shí)間嗎？
一般情況下，等待是不可避免的，不顯示時(shí)間而顯示沙漏是一種優(yōu)化。當(dāng)然不排除有別的可能。
你好，微交互申請(qǐng)轉(zhuǎn)載
一直是微交互的公眾號(hào)讀者，內(nèi)容非常精華，轉(zhuǎn)載是我的榮幸，感謝，彩虹貓sir
寫(xiě)的很好 ，有興趣接一個(gè)創(chuàng)業(yè)公司的活嗎？微信15000642121
感謝閱讀！
從頭看到尾，舉的例子都是平時(shí)沒(méi)發(fā)現(xiàn)的，受教了，期待下一篇！
感謝閱讀
額，親，第四項(xiàng)，從微操作層面上，的確麥當(dāng)勞不如前者。
但這里根本就不是微交互的問(wèn)題，而是商業(yè)層次的問(wèn)題，把支付寶作為默認(rèn)支付方式的選項(xiàng)，很大可能是和支付寶有跟多的利益勾結(jié)關(guān)系啊。這就不是交互層的問(wèn)題，而是商業(yè)層的問(wèn)題了….
我的公司有一臺(tái)友寶，我大概一年里消費(fèi)了200次（每天一瓶阿薩姆），事實(shí)上我在友寶上從未使用過(guò)支付寶付款，而是微信，據(jù)我觀察，大部分人也是是用微信支付。
我們可以說(shuō)友寶默認(rèn)支付寶的二維碼是出于商業(yè)考慮，當(dāng)然這種假設(shè)下顧客使用支付寶付款對(duì)友寶有好處。
也可以說(shuō)友寶是出于UCD的考慮，在手機(jī)支付的兩個(gè)選項(xiàng)里該前置哪個(gè)，我們不得而知友寶的動(dòng)機(jī)。
但是對(duì)麥當(dāng)勞來(lái)說(shuō)，超過(guò)90%的顧客會(huì)選擇手機(jī)支付而不是刷卡，這時(shí)候讓用戶選擇，而不是默認(rèn)，問(wèn)題就很大了。
麥當(dāng)勞的好像是機(jī)器掃手機(jī)屏幕二維碼的方法支付的。并不是生成二維碼掃描的。后續(xù)一步完成支付，不用再確認(rèn)。而且能自動(dòng)區(qū)分支付寶微信支付二維碼。
我指的問(wèn)題在于需要選擇操作，而這步其實(shí)可以想辦法省略
airdrop表示沒(méi)用過(guò)，回去試試看～
錄制一個(gè)10分鐘以上視頻，用mac和iphone之間來(lái)回傳輸試試，感覺(jué)IOS的設(shè)計(jì)者沒(méi)考慮Airdrop大文件傳輸這回事。
贊
感謝閱讀
是ui的專業(yè)軟件嗎.就叫sketch嗎.我搜索不出來(lái)呀.
又漲姿勢(shì)了。
感謝閱讀
坐等更新咯~
在搬磚中，努力這幾天攢出來(lái)中篇：）
dota2確實(shí)在界面和交互上領(lǐng)先隔壁3年
深深同感
“在等待這件事上，暴雪確實(shí)想了很多辦法，在不可避免的等待中讓用戶做有意義的事?！? 暴雪？ Valve？
…，暈死，對(duì)是valve公司
哈哈哈，Dota1的確是暴雪的，Valve已哭暈在廁所 ??
：）
dota1也不是暴雪的，只是用的暴雪的魔獸爭(zhēng)霸引擎
嚴(yán)格來(lái)說(shuō)，dota應(yīng)該是icefrog的
贊