0
| 本文作者： 人人都是產(chǎn)品經(jīng)理 | 2016-05-30 16:52 |
雷鋒網(wǎng)按：本文作者GaraC，著有《絕密原型檔案-看看專業(yè)的產(chǎn)品經(jīng)理怎么畫(huà)原型》。
大多數(shù)時(shí)候，交互的工作是和內(nèi)容設(shè)計(jì)一起完成的，但是為了讓你能夠了解這兩者之間的差別，我特地把材料分成兩個(gè)階段，也可以讓自己梳理一下細(xì)節(jié)。
“我躺在沙灘上，感覺(jué)到細(xì)碎的沙子在后背陷入；我踩在小溪里，感覺(jué)到腳底的亂石和流過(guò)腳面的溪水。我和沙子，我和溪水，產(chǎn)生了交互。”
在講交互的過(guò)程中，我必須排除體驗(yàn)（感覺(jué)）的干擾。這是極容易被混淆的兩個(gè)概念。交互僅止于人與產(chǎn)品之間的互動(dòng)，它會(huì)給與用戶“感覺(jué)”的結(jié)果，但他們不是一回事。
交互是人的行為與事物之間產(chǎn)生互動(dòng)聯(lián)系的過(guò)程。
人類行為不是定格畫(huà)面，而是連鎖反應(yīng)。
動(dòng)態(tài)視頻比靜止的畫(huà)面?zhèn)鬟_(dá)更大的信息量并且被記住。你可能還記得《哈利·波特》中的“預(yù)言家日?qǐng)?bào)”的經(jīng)典畫(huà)面，你看到一段完整的視頻：罪犯“小天狼星”被警察“傲羅”抓住，并且憤怒地嘶吼。
如果是靜態(tài)的畫(huà)面，我們恐怕不能確定畫(huà)面中人是先吼叫被抓住，還是先被抓住再吼叫：
“瘋狂罪犯終于落網(wǎng)！”
“魔法界警察暴力執(zhí)法！”
——這兩者之間的差別可大了。
這就是動(dòng)態(tài)畫(huà)面中連貫地邏輯線，先后順序、因果關(guān)系。
如果內(nèi)容設(shè)計(jì)就像一幀幀現(xiàn)場(chǎng)照片，那么交互就是用戶觸發(fā)的蝴蝶效應(yīng)。你知道做了這個(gè)選擇，會(huì)導(dǎo)致不同的結(jié)果?；蛘甙聪逻@個(gè)按鈕，后面會(huì)發(fā)生什么。
Hi-Fi毀一生，如果你不巧是個(gè)高保真音樂(lè)的愛(ài)好者，并且運(yùn)氣糟糕還和我一樣是個(gè)古典樂(lè)的愛(ài)好者，那么你應(yīng)該有這樣的經(jīng)驗(yàn)：“優(yōu)秀的耳機(jī)給你音樂(lè)廳一般身臨其境的感受”。
這個(gè)形容有它背后的原因：如果你身處于一個(gè)交響樂(lè)團(tuán)或者搖滾樂(lè)隊(duì)中間，當(dāng)他們開(kāi)始演奏的時(shí)候，你會(huì)感覺(jué)到小提琴就在你右手邊，或者那把電吉他就在你前方5米處。越優(yōu)秀的耳機(jī)，越會(huì)加深這種感覺(jué)，這就是為什么你會(huì)覺(jué)得“身臨其境”。
聲音恐怕是傳達(dá)信息效率最低的一種方法，但是即便如此，耳機(jī)也能夠給你傳達(dá)如此巨量的信息，最大程度激發(fā)人腦的空間想象力。
那么，這件事情和我們的設(shè)計(jì)有什么關(guān)系？
“大頁(yè)面的設(shè)計(jì)是焦點(diǎn)的設(shè)計(jì)，小頁(yè)面的設(shè)計(jì)是空間的設(shè)計(jì)”
如果我們?cè)趙eb頁(yè)上做設(shè)計(jì)，讓用戶快速找到內(nèi)容是設(shè)計(jì)的重點(diǎn)。但是在小頁(yè)面，移動(dòng)設(shè)備的設(shè)計(jì)中，我卻認(rèn)為空間感才是設(shè)計(jì)的重點(diǎn)。比如小戶型的設(shè)計(jì)重點(diǎn)是 “讓你覺(jué)得大”。
以Apple Watch為例（圖1）。
【圖1 Apple Watch】
Apple Watch繼承了iPhone的設(shè)計(jì)基調(diào)，它的交互設(shè)計(jì)有個(gè)顯著的優(yōu)點(diǎn)，這在表面的小屏幕上體現(xiàn)得尤其明顯（我認(rèn)為那不能簡(jiǎn)單地概括為“扁平化”）。
Apple Watch的初始頁(yè)面是表盤(pán)，按Home鍵表盤(pán)縮小到Home頁(yè)面的中間，成為“手表小圖標(biāo)”。再次按下Home鍵，則圖標(biāo)放大成表盤(pán)（圖2），這會(huì)給用戶透視的錯(cuò)覺(jué)。
【圖2 Apple Watch的初始頁(yè)與home頁(yè)】
背景（Home頁(yè)）到前景（表盤(pán)）的過(guò)渡給我們縱深感，背景沒(méi)有邊界就好像一個(gè)無(wú)限擴(kuò)展的空間，可以在里面放上任何東西。
“扁平化其實(shí)為了讓你覺(jué)得地方足夠大。你信嗎？反正我信?！薄袄畎住?/p>
交互為人類行為而設(shè)計(jì)，人類的行為依賴經(jīng)驗(yàn)和本能。
經(jīng)驗(yàn)是我們記憶中曾經(jīng)發(fā)生過(guò)的事情，經(jīng)驗(yàn)告訴我們能做什么或者不能做什么。
比如公寓樓的門(mén)牌號(hào)，看到1003，我不用太費(fèi)心就知道找個(gè)位置是10樓3號(hào)房間。這是社會(huì)通用的溝通語(yǔ)言。
比如給我一個(gè)樂(lè)譜，我能快速地區(qū)分高低音譜號(hào)，或者升降音符。這是行業(yè)通用的溝通語(yǔ)言。
我們喜歡遵循經(jīng)驗(yàn)辦事，因?yàn)槟谴砹税踩涂煽?。一個(gè)成熟的行業(yè)為經(jīng)驗(yàn)設(shè)計(jì)了規(guī)則，這些規(guī)則培養(yǎng)了用戶習(xí)慣，如果沒(méi)有足夠的理由，我們不會(huì)輕易打破它們：
“使用APP，你不需要?jiǎng)e人告知左箭頭是什么意思?！?/p>
平臺(tái)（iOS和Android）的官方設(shè)計(jì)規(guī)范事無(wú)巨細(xì)地規(guī)定了所有的細(xì)節(jié)，并且培養(yǎng)了用戶的使用習(xí)慣以及前端開(kāi)發(fā)的工作習(xí)慣。遵守官方設(shè)計(jì)規(guī)范，你和開(kāi)發(fā)的溝通會(huì)非常輕松，以及不至于在用戶面前“出錯(cuò)”
規(guī)則除了告訴你用戶習(xí)慣之外，還有技術(shù)可行性。
我要向你強(qiáng)調(diào)規(guī)則的重要性，它們并不是限制你發(fā)揮的枷鎖，而是你揮灑創(chuàng)意的舞臺(tái)。
你應(yīng)該熟讀Android和iOS的官方設(shè)計(jì)規(guī)范、人機(jī)交互指南文檔，只要遵循這些規(guī)范，用戶不會(huì)因此犯錯(cuò)。
Ps：規(guī)范可以幫我們“不出錯(cuò)”，但要達(dá)成“絕妙的設(shè)計(jì)”還需更多創(chuàng)造力。
我們?cè)谝?guī)則的基礎(chǔ)上，為本能設(shè)計(jì)交互。想象一下：
突然！你被人打暈了！
醒來(lái)的時(shí)候你發(fā)現(xiàn)自己到了一個(gè)陌生的地方。
現(xiàn)在你在想啥？——
“我在哪？”
“我是誰(shuí)？”
“我該怎么辦？”
我們通過(guò)回答這三個(gè)問(wèn)題，來(lái)完成接下來(lái)的交互工作：
“我在哪？”
如果用戶在使用產(chǎn)品的過(guò)程中迷失了自己，就會(huì)覺(jué)得很挫敗。所以，讓用戶時(shí)刻自己在哪里，并且知道自己從哪來(lái)，到哪去。
“我是誰(shuí)？”
用戶認(rèn)知自己的身份或者狀態(tài)，并且采取相應(yīng)的行動(dòng)，人物的身份和狀態(tài)是探索用戶行為的重要依據(jù)。
“我該怎么辦？”
接下來(lái)會(huì)發(fā)生什么，用戶會(huì)采取什么樣的行動(dòng)。我們應(yīng)該提前預(yù)期到用戶會(huì)遭遇哪些事情并作出什么樣的反應(yīng)。
為了讓用戶定位自己，我們需要為他們?cè)O(shè)計(jì)導(dǎo)航系統(tǒng)。
表面上用戶看到的僅僅是一個(gè)頁(yè)面（圖3）：
【圖3 眼睛看到的頁(yè)面】
用戶應(yīng)該可以感覺(jué)到的頁(yè)面位置（圖4）：
【圖4 用戶能夠感覺(jué)到的頁(yè)面位置】
用戶想知道的路線（圖5）：
【圖5 用戶想知道的路線】
用戶在這個(gè)頁(yè)面停留時(shí)，知道自己是從哪個(gè)頁(yè)面過(guò)來(lái)的，也知道應(yīng)該如何回去。我們通過(guò)各種方式（菜單、返回鍵、標(biāo)題等信息）讓用戶知道自己可以到達(dá)哪些頁(yè)面，完成哪些任務(wù)——這就是導(dǎo)航系統(tǒng)的意義。
地圖和道路，共同構(gòu)成導(dǎo)航系統(tǒng)。
地圖告訴我們每個(gè)物體的位置：我在這里，它在那里
道路告訴我們物體之間如何連接：我要從這里，去那里
我們?cè)谟脩魸撘庾R(shí)中，植入產(chǎn)品導(dǎo)航系統(tǒng)。這就要先完成地圖和道路規(guī)劃。
“我在18層1806，我要去3層0303。出門(mén)左拐坐電梯，出了電梯再右拐”
3.1.1 地圖——頁(yè)面方位
我們需要一個(gè)足夠簡(jiǎn)單便于記憶的地圖。
如果你有一棟兩層小樓，面朝大海，春暖花開(kāi)。第一層是客廳和廚房，第二層是臥室和書(shū)房。你從一層爬樓梯上到二樓，不會(huì)因此迷路。
如果你住在公寓，高層樓的格局都是差不多的，18樓和28樓的樓梯間都在同一個(gè)位置，唯一能讓你分辨自己在第幾層的方法就是簡(jiǎn)單粗暴的門(mén)牌號(hào)。
所以地圖設(shè)計(jì)應(yīng)該做到：層級(jí)扁平，排列規(guī)則統(tǒng)一。
檢查頁(yè)面關(guān)系并排列（圖6）
【圖6 頁(yè)面關(guān)系】
把所有頁(yè)面按模塊放在平面上：
流程的一系列頁(yè)面通常是從左到右排列，并列內(nèi)容的頁(yè)面從上往下，同樣內(nèi)容的頁(yè)面從前往后。還有一些與其他都沒(méi)有關(guān)聯(lián)的頁(yè)面放在單獨(dú)的位置。
比如“預(yù)約會(huì)議”與“臨時(shí)會(huì)議”是并列關(guān)系；記錄的“列表”與“日程”是用不同方式展示了一樣的內(nèi)容，屬于同樣內(nèi)容的頁(yè)面等。
3.1.2 道路——菜單
菜單是到達(dá)頁(yè)面的主干道，菜單設(shè)置的原則，是符合邏輯，有時(shí)候符合邏輯，意味著不太方便快捷。如果這兩者有沖突，我們?nèi)∵壿嫞峥旖荨?/p>
菜單是產(chǎn)品的核心安全區(qū)，如果用戶迷路，他們就會(huì)返回菜單頁(yè)，如果用戶不知道該做什么，也會(huì)返回菜單頁(yè)。而一條符合邏輯的道路，比如原路返回，遠(yuǎn)比快捷的道路來(lái)得更加安全。
以下是移動(dòng)端APP常見(jiàn)的幾個(gè)菜單結(jié)構(gòu)：
下部菜單：
操作以點(diǎn)擊為主，頁(yè)面切換。大部分的APP使用的菜單布局。
淘寶APP的菜單結(jié)構(gòu)就是這種形式(圖7)。
【圖7 淘寶APP的下部菜單】
上部菜單：
操作以劃動(dòng)為主，頁(yè)面平移。Airbnb的Android版本菜單就是這樣設(shè)計(jì)的(圖8)。
【圖8 Airbnb（Android）的上部菜單】
左側(cè)菜單：
適用于功能單一但是比較復(fù)雜的產(chǎn)品，左側(cè)欄不影響主頁(yè)面的操作，并且擴(kuò)展性好，可以隨時(shí)添加快捷入口。
只使用左側(cè)菜單的形式，通常用在早期還不確定的產(chǎn)品形態(tài)中，成熟的產(chǎn)品通常都會(huì)改為上下部菜單的導(dǎo)航形式。
另外像UBER這種功能單一，主界面（地圖）承載較多信息的產(chǎn)品，使用上下導(dǎo)航都太占用空間，所以也使用了左側(cè)菜單（圖9）。
【圖9 UBER的左側(cè)菜單】
左側(cè)菜單還要注意空間的前后關(guān)系。
空間位置在前面的側(cè)邊欄好像在說(shuō)：“我隨時(shí)都會(huì)被用到！”（圖9）。
空間位置在后面的側(cè)邊欄好像在說(shuō)：“我先睡會(huì)，有事叫我……”，后面的側(cè)邊欄比較少見(jiàn)，用于比較復(fù)雜的產(chǎn)品。圖10中，QQ的主菜單是下部菜單，左側(cè)菜單作為輔助菜單，使用了暗色，與主頁(yè)面的淺色對(duì)比，會(huì)讓用戶有種左側(cè)菜單在后面的感覺(jué)。
【圖10 QQ的左側(cè)菜單】
右側(cè)菜單：
左重右輕，因此右側(cè)菜單通常適用于內(nèi)容和功能都比較復(fù)雜的產(chǎn)品，常作為次要菜單或者輔助菜單，很少作為獨(dú)立菜單使用（圖11）。
【圖11 Airbnb（iOS）的右側(cè)的輔助菜單】
融合菜單：
復(fù)雜產(chǎn)品會(huì)融合多個(gè)菜單，注意主次分明，并且邏輯關(guān)系清晰。
這是比較常見(jiàn)的菜單形式，QQ就使用了雙菜單架構(gòu)。主頁(yè)面下部菜單是三個(gè)主要內(nèi)容模塊，左側(cè)放置擴(kuò)展功能菜單（圖12）。
【圖12 QQ的主菜單和左側(cè)菜單】
增加快捷操作：增加一些快捷入口，讓結(jié)構(gòu)更加扁平。距離菜單越遠(yuǎn)的頁(yè)面，重要性也就越小。
比如通常我們把反饋建議整理到設(shè)置中心中，但是在新產(chǎn)品剛上線的時(shí)候，我希望能夠多收集一些用戶反饋，這個(gè)頁(yè)面就變得很重要。于是我們?cè)诓藛卧黾恿恕胺答伣ㄗh”的快捷入口（圖13）。
【圖13 菜單中的“反饋建議”】
離菜單越近的頁(yè)面地位越高。注意微信的朋友圈，它離菜單很遠(yuǎn)，無(wú)聲地說(shuō)著：“就算朋友圈再火熱，微信也還是一個(gè)聊天軟件?！?/p>
導(dǎo)航系統(tǒng)讓用戶知道自己在哪個(gè)位置，知道如何去另外一個(gè)陌生的位置，并且能夠原路返回。設(shè)計(jì)完導(dǎo)航系統(tǒng)之后，我們得讓用戶知道它的存在。
3.1.3 空間暗示——頁(yè)面動(dòng)態(tài)
把導(dǎo)航系統(tǒng)告知用戶，需要各種空間暗示。我之前提到Apple Watch的空間設(shè)計(jì)就是其中一種。在APP中，空間感主要來(lái)自頁(yè)面的進(jìn)入與退出。
按照左重右輕（左側(cè)的內(nèi)容重要于右側(cè)的內(nèi)容）的原理，我把第二張頁(yè)面放在右邊，然后根據(jù)導(dǎo)航關(guān)系制作頁(yè)面動(dòng)態(tài)。移動(dòng)方式可以是覆蓋移動(dòng)，或者平移。
總結(jié)一下頁(yè)面動(dòng)態(tài)的種類：
覆蓋移入（圖14）
【圖14 下一頁(yè)從右往左覆蓋進(jìn)入】
案例中，“會(huì)議記錄”是首頁(yè)，點(diǎn)擊記錄中的某項(xiàng)可以查看“會(huì)議日志”頁(yè)面，我們讓“會(huì)議日志”從右側(cè)移入屏幕，蓋住了“會(huì)議記錄”。用戶會(huì)感覺(jué)“會(huì)議記錄”還在原地。
覆蓋移動(dòng)用戶覺(jué)得這兩個(gè)頁(yè)面是疊加在一起的（圖15）。
【圖15 前后關(guān)系的頁(yè)面】
覆蓋移出
覆蓋移出，是上一張頁(yè)面（比如“會(huì)議記錄”）往左移出了屏幕，“會(huì)議日志”在原地（圖16）。
【圖16 上一頁(yè)從右往左覆蓋移出】
但是圖16這個(gè)方式不太適合我們的案例，因?yàn)檫@樣顯得“會(huì)議記錄”不太重要，“它”已經(jīng)移出了屏幕。
左右平移
平移是下一頁(yè)平移進(jìn)入，上一頁(yè)平移離開(kāi)。這樣的頁(yè)面關(guān)系比較緊密，頁(yè)面是平等并且高度連貫的。可以用在任務(wù)流中，也可以用在相同內(nèi)容的頁(yè)面移動(dòng)中。比如從文章的上一篇平移到下一篇，或者上一張圖片平移到下一張圖片（圖17）。
【圖17 下一頁(yè)平移進(jìn)入】
上下平移
上下距離比左右距離要遠(yuǎn)的多，也不確定的多，上下跳轉(zhuǎn)頁(yè)面會(huì)給用戶失去x軸的錯(cuò)覺(jué)，所以上下平移被使用得比較少，即便有，也讓用戶感覺(jué)是個(gè)長(zhǎng)頁(yè)面，而不是跳轉(zhuǎn)了新的頁(yè)面。
知乎APP的答案翻頁(yè)就采取了這樣的方式。看完一個(gè)答案之后，往上拉動(dòng)可以繼續(xù)閱讀下一個(gè)答案，當(dāng)然前提是知乎有大量?jī)?yōu)質(zhì)答案，并且知乎的用戶也有足夠的耐心看完這一個(gè)答案之后繼續(xù)往下（圖18）。
【圖18 知乎的上下平移】
3.1.4 額外的
有些頁(yè)面和其他頁(yè)面沒(méi)有明確的因果關(guān)系，就好像翻書(shū)翻到一半，突然來(lái)了個(gè)電話，我接完電話接著看書(shū)。它和我正在進(jìn)行的事情沒(méi)什么太大的關(guān)系。所以它是憑空出現(xiàn)的，而不是書(shū)頁(yè)中的其中一張。它的出現(xiàn)和退出需要特殊處理。
模態(tài)視圖，常見(jiàn)的是提示框。它和我正在進(jìn)行的任務(wù)有巨大關(guān)聯(lián)，它不得不出現(xiàn)，又想快點(diǎn)消失。它們有平臺(tái)默認(rèn)的樣式和退出進(jìn)入的方法，我們也可以額外為它設(shè)計(jì)（圖19）。
【圖19 特別設(shè)計(jì)的彈窗動(dòng)效】
3.2.1 身份還是狀態(tài)？
我們常在不同產(chǎn)品上看到不同的身份標(biāo)簽，比如普通用戶和VIP用戶啦，乘客和司機(jī)啦，女人和男人啦……
大家都很喜歡樹(shù)立敵人，這樣不太好。你不能做一些不符合身份的事情，當(dāng)你是一個(gè)老師的時(shí)候，你成為了一個(gè)教導(dǎo)者或者回答問(wèn)題的人，但是有些問(wèn)題你也很想請(qǐng)教別人。這個(gè)時(shí)候就一切就變得復(fù)雜起來(lái)：“畢竟是個(gè)有身份的人，萬(wàn)一問(wèn)了個(gè)蠢問(wèn)題怎么辦，還是繼續(xù)高深莫測(cè)下去吧?！?/p>
我被拉進(jìn)了不少交流群里，如果是以被訪問(wèn)者的身份邀請(qǐng)進(jìn)去的，一定三緘其口，講話慎之又慎，能不說(shuō)就不說(shuō)；如果我以菜鳥(niǎo)的身份進(jìn)了一個(gè)大牛的群，就會(huì)滿世界的喊“老師”；如果有人稱呼我女神，我就不得不告訴他“我得去洗澡了”。你看，我自然而然地做著符合我身份的事情。這些都是別人眼中的我。
而狀態(tài)就不同了，我可以處于回答問(wèn)題的狀態(tài)，同時(shí)也可以處于問(wèn)問(wèn)題的狀態(tài)，多么輕松自如。這是真實(shí)的我。
如果限定一批用戶是老師，另外一批用戶是學(xué)生。那么我們就放棄了他們各自另外一半的時(shí)間和精力，另外一半的活力，另外一半的內(nèi)容提供。因?yàn)槟澄弧袄蠋煛辈豢赡芤恢背掷m(xù)地在“教學(xué)”，即便他以此為工作。而如果我靠回答問(wèn)題賺錢(qián)，那么我也同樣愿意為別人的回答花錢(qián)。
除非能得到足夠數(shù)量匹配的供應(yīng)者和消費(fèi)者，否則就讓用戶上一秒收入，下一秒就賣出吧！
3.2.2 身份標(biāo)簽
當(dāng)用戶年齡平均在20歲或者更小的時(shí)候，這些未走入社會(huì)的年輕人急需認(rèn)可，這種認(rèn)可在現(xiàn)實(shí)中很難得到，身份頭銜是有用的激勵(lì)方法。
對(duì)于年齡更長(zhǎng)的用戶來(lái)說(shuō)就情況就相反了。我花錢(qián)買電影看理所當(dāng)然，可是為什么好像是買了個(gè)VIP的頭銜呢。天哪，連上個(gè)視頻網(wǎng)站都在攀比，還能不能好好聊天了。如果一定要這樣做，收集成就的方法比身份頭銜有用多了。
3.2.3 同時(shí)擁有不同的狀態(tài)
我最好的學(xué)習(xí)狀態(tài)就是立刻把學(xué)到的東西分享出去。如果你是一個(gè)優(yōu)秀的讀者，或許應(yīng)該嘗試開(kāi)始寫(xiě)點(diǎn)什么？
在產(chǎn)品設(shè)計(jì)中，時(shí)刻把這種邏輯推送給用戶，就像一顆思想的種子，它會(huì)自己成長(zhǎng)和蔓延。
這種方式用在狀態(tài)可以靈活轉(zhuǎn)變的用戶群中更有效，比如臨時(shí)的租客可以成為臨時(shí)的房東，或者乘客有時(shí)候可以成為司機(jī)。
這并不是通用的方法，如果用戶之間的關(guān)系很少模糊地帶，或者有極多的信息不能共用等，明確地區(qū)分身份也是可行方案，請(qǐng)視具體的產(chǎn)品情況考慮。比如出租車司機(jī)與乘客，雙方身份與狀態(tài)不能靈活轉(zhuǎn)換，互相有較多不重疊的信息。
為人設(shè)計(jì)就要理解人的行為模式。結(jié)果可控的情況下，完成任務(wù)的唯一條件，就是不要犯錯(cuò)。因此，我們盡量確保用戶不會(huì)犯錯(cuò)，這就是“為錯(cuò)誤設(shè)計(jì)”這條規(guī)則的由來(lái)。
另外，人類會(huì)受到情緒的影響，這是不可避免要被考慮到的。我將為你介紹一下“為人為錯(cuò)誤設(shè)計(jì)”與“為情緒設(shè)計(jì)”的交互理念。
3.3.1 為人為錯(cuò)誤設(shè)計(jì)
災(zāi)難是一系列錯(cuò)誤的連鎖反應(yīng)——《重返危機(jī)現(xiàn)場(chǎng)》
人類不是機(jī)器，行為不可控，所以只要涉及人類活動(dòng)，我們甚至都無(wú)法真正意義上地杜絕錯(cuò)誤的發(fā)生，只能盡力把它發(fā)生的概率降低。
為錯(cuò)誤設(shè)計(jì)的步驟：
習(xí)慣
違背習(xí)慣就像違背自然規(guī)律或者用戶經(jīng)驗(yàn)，這會(huì)及容易導(dǎo)致用戶犯錯(cuò)。所以在設(shè)計(jì)先后順序、左右位置的時(shí)候不必要特立獨(dú)行（圖20）。
【圖20 返回鍵違背習(xí)慣】
提示
重要緊急的行為、一旦開(kāi)始無(wú)法反悔、或者如果犯錯(cuò)就會(huì)遭遇巨大損失的行為，需要向用戶預(yù)警，甚至可以強(qiáng)勢(shì)一點(diǎn)。這都比讓我犯錯(cuò)更好（圖21）。
“這是你的選擇嗎？你要不要再確認(rèn)一下？”
【圖21 預(yù)警】
反饋
我需要知道那件事情是不是成功了，否則我就不知道哪里出錯(cuò)了。
“為什么沒(méi)有反應(yīng)？是因?yàn)槲覜](méi)有按到按鈕嗎？”（圖22）
“我按到按鈕了，為什么沒(méi)有反應(yīng)？是我的網(wǎng)絡(luò)有問(wèn)題嗎？”
【圖22 反饋】
當(dāng)我們有所舉動(dòng)的時(shí)候，周圍的事物都會(huì)因此而被影響，并且有所反應(yīng)。如果用戶的每一個(gè)操作行為都能得到直接的反饋，對(duì)用戶更加友好。
反悔
最后我依然犯了錯(cuò)誤，請(qǐng)讓我有機(jī)會(huì)反悔。現(xiàn)在大多數(shù)的文字輸入都有自動(dòng)存儲(chǔ)的功能，如果不小心意外關(guān)閉了頁(yè)面也不用擔(dān)心重來(lái)一遍。
3.3.2 為情緒設(shè)計(jì)
團(tuán)隊(duì)由人構(gòu)成，產(chǎn)品為人而作。人，必然存在情緒，它非常容易被調(diào)動(dòng)與刺激。因此，為人的設(shè)計(jì)，必然要顧及人的情緒，純以理性做決策，是最不理智的做法。
人們?nèi)菀子涀∧切┡c情感密切相關(guān)的事物，或者任何加劇情緒的事物。我們可以利用情感化元素讓用戶與產(chǎn)品產(chǎn)生互動(dòng)，為產(chǎn)品賦予人格 。
成就感
建立用戶克服困難，解決問(wèn)題的成就感。
經(jīng)歷
似曾相識(shí)的的難忘的回憶可以給用戶“會(huì)心一擊”。
放松
放松狀態(tài)我們能更好地處理信息，生成記憶。讓用戶進(jìn)入積極正面的狀態(tài)、輕松完成操作，享受過(guò)程。
選擇恐懼癥
選擇恐懼癥是擔(dān)心選擇的結(jié)果不是最好的，給用戶較少的選擇意味著用戶可以輕松抉擇、完成任務(wù)。
3.3.3 特殊情況的處理
第一次與不是第一次
有些行為不需要反復(fù)提醒，這樣會(huì)讓人產(chǎn)生“你覺(jué)得我智商低”的錯(cuò)覺(jué)。所以很多產(chǎn)品只在用戶第一次使用的時(shí)候做引導(dǎo)設(shè)計(jì)（圖23）。
【圖23 第一次引導(dǎo)】
“哦！討厭?！?/p>
網(wǎng)絡(luò)突然斷了，手機(jī)突然沒(méi)電了。我們知道你不愿意它發(fā)生，但是它總會(huì)發(fā)生的。為了應(yīng)對(duì)這些突發(fā)情況，我們?cè)谡Ａ鞒讨膺€要為它們?cè)O(shè)計(jì)流程或頁(yè)面。
人類與硬件接觸，通過(guò)行為與產(chǎn)品建立溝通交互的橋梁，有一門(mén)學(xué)科專門(mén)研究這些——“人體工程學(xué)”。
以下以移動(dòng)產(chǎn)品為例。
對(duì)于手機(jī)用戶來(lái)說(shuō)，行為主要包含手指的活動(dòng)，其次是眼睛接受信息，特定情況下用到嘴巴和耳朵。我猜暫時(shí)很少用到舌頭和鼻子什么的。
手指是最為高效、靈活并且使用最為頻繁的器官。移動(dòng)產(chǎn)品大部分都是手持設(shè)備，你會(huì)看到所有人都用手抓著手機(jī)戳來(lái)戳去，所以我們當(dāng)然應(yīng)該先說(shuō)說(shuō)手指的事情。
單手點(diǎn)擊舒適度（圖24）：
【圖24 單手操作】
【圖25 重要按鈕放在右邊】
我們默認(rèn)右手操作手機(jī)的人更多，當(dāng)然這個(gè)觀點(diǎn)至今都有爭(zhēng)議，因?yàn)楝F(xiàn)在移動(dòng)設(shè)備的操作都非常簡(jiǎn)單，即便是不太好使的左手一樣可以輕松使用。
假設(shè)你使用右手，圖中紅色部分是更容易點(diǎn)擊的區(qū)域，其他區(qū)域次之。頂部是最難點(diǎn)擊的地方。
為了讓左右手都可以輕松操作，很多產(chǎn)品使用了居中的長(zhǎng)按鈕。
【圖26 居中的按鈕雙手都可以點(diǎn)】
雙手點(diǎn)擊舒適度（圖27）：
【圖27 雙手操作】
玩游戲時(shí)用戶通常都是雙手操作，游戲界面的內(nèi)容設(shè)計(jì)因此有很大不同。
用戶常用單機(jī)和滑動(dòng)操作，這兩種操作可以滿足大部分交互行為，雙指拉伸抓取的操作也很常見(jiàn)（圖28）。我們沒(méi)有必要使用冷門(mén)的操作方式，如果使用了少見(jiàn)的手勢(shì)，記得在用戶第一次使用的時(shí)候引導(dǎo)他。
【圖28 手勢(shì)】
用手指戳的時(shí)候如果戳不到地方實(shí)在是太讓人糟心了，由于手指與鼠標(biāo)不同，靈活但是不夠精確，因此移動(dòng)產(chǎn)品規(guī)定了最小操作范圍。比如iOS最小操作區(qū)是44dp，Android則是48dp（請(qǐng)查閱官方人機(jī)交互文檔）。
使用移動(dòng)產(chǎn)品時(shí)，用戶經(jīng)常處于噪雜的環(huán)境或者活動(dòng)的狀態(tài)。比如一邊走路坐車一邊看手機(jī)。這對(duì)眼睛的壓力很大，同時(shí)也要求產(chǎn)品設(shè)計(jì)中為眼睛考慮更多。
下圖是眼動(dòng)熱力的示意圖，用戶習(xí)慣于從左到右的閱讀方式，左上是關(guān)注的焦點(diǎn)。我們?cè)谠O(shè)計(jì)產(chǎn)品時(shí)毫無(wú)疑問(wèn)會(huì)把最重要的內(nèi)容放置在左上角（圖29）。
【圖29 眼動(dòng)的焦點(diǎn)】
用戶在運(yùn)動(dòng)過(guò)程中實(shí)際看到的頁(yè)面，很大一部分是糊的。所以視覺(jué)焦點(diǎn)應(yīng)該清晰可見(jiàn)，這樣用戶可以快速捕捉到我們?cè)O(shè)計(jì)的“焦點(diǎn)”，對(duì)其他信息沒(méi)什么耐心（圖30）。
【圖30 清晰的焦點(diǎn)】
必須承認(rèn)，大多數(shù)情況下，交互設(shè)計(jì)是個(gè)繁瑣的活，既要關(guān)注人類的活動(dòng)，還要照顧技術(shù)實(shí)現(xiàn)的邏輯。在大型團(tuán)隊(duì)中，這個(gè)工作會(huì)由交互設(shè)計(jì)師來(lái)完成。在我們的團(tuán)隊(duì)中，產(chǎn)品、設(shè)計(jì)、研發(fā)拆分了這個(gè)任務(wù)。
本文由人人都是產(chǎn)品經(jīng)理授權(quán)雷鋒網(wǎng)發(fā)布，內(nèi)容取自人人都是產(chǎn)品經(jīng)理專欄作家@Gara 同名書(shū)籍《絕密原型檔案-看看專業(yè)的產(chǎn)品經(jīng)理怎么畫(huà)原型》，已經(jīng)在當(dāng)當(dāng)、京東等各大平臺(tái)上架。
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。
