大多數(shù)時候，交互的工作是和內(nèi)容設(shè)計一起完成的，但是為了讓你能夠了解這兩者之間的差別，我特地把材料分成兩個階段，也可以讓自己梳理一下細(xì)節(jié)。

交互是什么？

“我躺在沙灘上，感覺到細(xì)碎的沙子在后背陷入；我踩在小溪里，感覺到腳底的亂石和流過腳面的溪水。我和沙子，我和溪水，產(chǎn)生了交互?！?/p>

在講交互的過程中，我必須排除體驗（感覺）的干擾。這是極容易被混淆的兩個概念。交互僅止于人與產(chǎn)品之間的互動，它會給與用戶“感覺”的結(jié)果，但他們不是一回事。

交互是人的行為與事物之間產(chǎn)生互動聯(lián)系的過程。

用動態(tài)表達(dá)邏輯關(guān)系：

人類行為不是定格畫面，而是連鎖反應(yīng)。

動態(tài)視頻比靜止的畫面?zhèn)鬟_(dá)更大的信息量并且被記住。你可能還記得《哈利波特》中的“預(yù)言家日報”的經(jīng)典畫面，你看到一段完整的視頻：罪犯“小天狼星”被警察“傲羅”抓住，并且憤怒地嘶吼。

如果是靜態(tài)的畫面，我們恐怕不能確定畫面中人是先吼叫被抓住，還是先被抓住再吼叫：

“瘋狂罪犯終于落網(wǎng)！”

“魔法界警察暴力執(zhí)法！”

——這兩者之間的差別可大了。

這就是動態(tài)畫面中連貫地邏輯線，先后順序、因果關(guān)系。

如果內(nèi)容設(shè)計就像一幀幀現(xiàn)場照片，那么交互就是用戶觸發(fā)的蝴蝶效應(yīng)。你知道做了這個選擇，會導(dǎo)致不同的結(jié)果?；蛘甙聪逻@個按鈕，后面會發(fā)生什么。

塑造立體空間感：

Hi-Fi毀一生，如果你不巧是個高保真音樂的愛好者，并且運(yùn)氣糟糕還和我一樣是個古典樂的愛好者，那么你應(yīng)該有這樣的經(jīng)驗：“優(yōu)秀的耳機(jī)給你音樂廳一般身臨其境的感受”。

這個形容有它背后的原因：如果你身處于一個交響樂團(tuán)或者搖滾樂隊中間，當(dāng)他們開始演奏的時候，你會感覺到小提琴就在你右手邊，或者那把電吉他就在你前方5米處。越優(yōu)秀的耳機(jī)，越會加深這種感覺，這就是為什么你會覺得“身臨其境”。

聲音恐怕是傳達(dá)信息效率最低的一種方法，但是即便如此，耳機(jī)也能夠給你傳達(dá)如此巨量的信息，最大程度激發(fā)人腦的空間想象力。

那么，這件事情和我們的設(shè)計有什么關(guān)系？

“大頁面的設(shè)計是焦點的設(shè)計，小頁面的設(shè)計是空間的設(shè)計”

如果我們在web頁上做設(shè)計，讓用戶快速找到內(nèi)容是設(shè)計的重點。但是在小頁面，移動設(shè)備的設(shè)計中，我卻認(rèn)為空間感才是設(shè)計的重點。比如小戶型的設(shè)計重點是 “讓你覺得大”。

以Apple? Watch為例（圖5-1）。

【圖5-1??? Apple? Watch】

Apple? Watch繼承了iphone的設(shè)計基調(diào)，它的交互設(shè)計有個顯著的優(yōu)點，這在表面的小屏幕上體現(xiàn)的尤其明顯（我認(rèn)為那不能簡單地概括為“扁平化”）。

Apple? Watch的初始頁面是表盤，按home鍵表盤縮小到home頁面的中間，成為“手表小圖標(biāo)”。再次按下home鍵，則圖標(biāo)放大成表盤（圖5-2），這會給用戶透視的錯覺。

【圖5-2??? Apple? Watch的初始頁與home頁】

背景(home頁)到前景（表盤）的過渡給我們縱深感，背景沒有邊界就好像一個無限擴(kuò)展的空間，可以在里面放上任何東西。

“扁平化其實為了讓你覺得地方足夠大。你信嗎？反正我信。”——“李白”

怎么做交互？

交互為人類行為而設(shè)計，人類的行為依賴經(jīng)驗和本能。

經(jīng)驗

經(jīng)驗是我們記憶中曾經(jīng)發(fā)生過的事情，經(jīng)驗告訴我們能做什么或者不能做什么。

比如公寓樓的門牌號，看到1003，我不用太費(fèi)心就知道找個位置是10樓3號房間。這是社會通用的溝通語言。

比如給我一個樂譜，我能快速地區(qū)分高低音譜號，或者升降音符。這是行業(yè)通用的溝通語言。

我們喜歡遵循經(jīng)驗辦事，因為那代表了安全和可控。一個成熟的行業(yè)為經(jīng)驗設(shè)計了規(guī)則，這些規(guī)則培養(yǎng)了用戶習(xí)慣，如果沒有足夠的理由，我們不會輕易打破它們：

平臺官方制定的規(guī)則

“使用APP，你不需要別人告知左箭頭是什么意思?！?/p>

平臺（ios和Android）的官方設(shè)計規(guī)范事無巨細(xì)地規(guī)定了所有的細(xì)節(jié)，并且培養(yǎng)了用戶的使用習(xí)慣以及前端開發(fā)的工作習(xí)慣。遵守官方設(shè)計規(guī)范，你和開發(fā)的溝通會非常輕松，以及不至于在用戶面前“出錯”

規(guī)則除了告訴你用戶習(xí)慣之外，還有技術(shù)可行性。

我要向你強(qiáng)調(diào)規(guī)則的重要性，它們并不是限制你發(fā)揮的枷鎖，而是你揮灑創(chuàng)意的舞臺。

你應(yīng)該熟讀Android和ios的官方設(shè)計規(guī)范、人機(jī)交互指南文檔，只要遵循這些規(guī)范，用戶不會因此犯錯。

Ps：規(guī)范可以幫我們“不出錯”，但要達(dá)成“絕妙的設(shè)計”還需更多創(chuàng)造力。

本能

我們在規(guī)則的基礎(chǔ)上，為本能設(shè)計交互。想象一下：

突然！你被人打暈了！

醒來的時候你發(fā)現(xiàn)自己到了一個陌生的地方。

現(xiàn)在你在想啥？——

“我在哪？”

“我是誰？”

“我該怎么辦？”

我們通過回答這三個問題，來完成接下來的交互工作：

“我在哪？”

如果用戶在使用產(chǎn)品的過程中迷失了自己，就會覺得很挫敗。所以，讓用戶時刻自己在哪里，并且知道自己從哪來，到哪去。

“我是誰？”

用戶認(rèn)知自己的身份或者狀態(tài)，并且采取相應(yīng)的行動，人物的身份和狀態(tài)是探索用戶行為的重要依據(jù)。

“我該怎么辦？”

接下來會發(fā)生什么，用戶會采取什么樣的行動。我們應(yīng)該提前預(yù)期到用戶會遭遇哪些事情并作出什么樣的反應(yīng)。

我在哪

為了讓用戶定位自己，我們需要為他們設(shè)計導(dǎo)航系統(tǒng)。

表面上用戶看到的僅僅是一個頁面（圖5-3）：

【圖5-3??? 眼睛看到的頁面】

用戶應(yīng)該可以感覺到的頁面位置（圖5-4）：

【圖5-4??? 用戶能夠感覺到的頁面位置】

用戶想知道的路線（圖5-5）：

【圖5-5??? 用戶想知道的路線】

用戶在這個頁面停留時，知道自己是從哪個頁面過來的，也知道應(yīng)該如何回去。我們通過各種方式（菜單、返回鍵、標(biāo)題等信息）讓用戶知道自己可以到達(dá)哪些頁面，完成哪些任務(wù)——這就是導(dǎo)航系統(tǒng)的意義。

地圖和道路，共同構(gòu)成導(dǎo)航系統(tǒng)。

地圖告訴我們每個物體的位置：我在這里，它在那里

道路告訴我們物體之間如何連接：我要從這里，去那里

我們在用戶潛意識中，植入產(chǎn)品導(dǎo)航系統(tǒng)。這就要先完成地圖和道路規(guī)劃。

“我在18層1806，我要去3層0303。出門左拐坐電梯，出了電梯再右拐“

地圖——頁面方位

我們需要一個足夠簡單便于記憶的地圖。

如果你有一棟兩層小樓，面朝大海，春暖花開。第一層是客廳和廚房，第二層是臥室和書房。你從一層爬樓梯上到二樓，不會因此迷路。

如果你住在公寓，高層樓的格局都是差不多的，18樓和28樓的樓梯間都在同一個位置，唯一能讓你分辨自己在第幾層的方法就是簡單粗暴的門牌號。

所以地圖設(shè)計應(yīng)該做到：層級扁平，排列規(guī)則統(tǒng)一。

檢查頁面關(guān)系并排列（圖5-6）

【圖5-6??? 頁面關(guān)系】

把所有頁面按模塊放在平面上：

流程的一系列頁面通常是從左到右排列，并列內(nèi)容的頁面從上往下，同樣內(nèi)容的頁面從前往后。還有一些與其他都沒有關(guān)聯(lián)的頁面放在單獨(dú)的位置。

比如“預(yù)約會議”與“臨時會議”是并列關(guān)系；記錄的“列表”與“日程”是用不同方式展示了一樣的內(nèi)容，屬于同樣內(nèi)容的頁面等。

道路——菜單

菜單是到達(dá)頁面的主干道，菜單設(shè)置的原則，是符合邏輯，有時候符合邏輯，意味著不太方便快捷。如果這兩者有沖突，我們?nèi)∵壿?，舍快捷?/p>

菜單是產(chǎn)品的核心安全區(qū)，如果用戶迷路，他們就會返回菜單頁，如果用戶不知道該做什么，也會返回菜單頁。而一條符合邏輯的道路，比如原路返回，遠(yuǎn)比快捷的道路來得更加安全。

以下是移動端APP常見的幾個菜單結(jié)構(gòu)：

下部菜單：

操作以點擊為主，頁面切換。大部分的APP使用的菜單布局

淘寶APP的菜單結(jié)構(gòu)就是這種形式(圖5-7)。

【圖5-7?? 淘寶APP的下部菜單】

上部菜單：

操作以劃動為主，頁面平移。Airbnb的Android版本菜單就是這樣設(shè)計的(圖5-8)。

【圖5-8??? Airbnb（Android）的上部菜單】

左側(cè)菜單：

適用于功能單一但是比較復(fù)雜的產(chǎn)品，左側(cè)欄不影響主頁面的操作，并且擴(kuò)展性好，可以隨時添加快捷入口。

只使用左側(cè)菜單的形式，通常用在早期還不確定的產(chǎn)品形態(tài)中，成熟的產(chǎn)品通常都會改為上下部菜單的導(dǎo)航形式。

另外像UBER這種功能單一，主界面（地圖）承載較多信息的產(chǎn)品，使用上下導(dǎo)航都太占用空間，所以也使用了左側(cè)菜單（圖5-9）。

【圖5-9??? UBER的左側(cè)菜單】

左側(cè)菜單還要注意空間的前后關(guān)系。

空間位置在前面的側(cè)邊欄好像在說：“我隨時都會被用到！”（圖5-9）。

空間位置在后面的側(cè)邊欄好像在說：“我先睡會，有事叫我…”，后面的側(cè)邊欄比較少見，用于比較復(fù)雜的產(chǎn)品。圖5-10中，QQ的主菜單是下部菜單，左側(cè)菜單作為輔助菜單，使用了暗色，與主頁面的淺色對比，會讓用戶有種左側(cè)菜單在后面的感覺。

【圖5-10??? QQ的左側(cè)菜單】

右側(cè)菜單：

左重右輕，因此右側(cè)菜單通常適用于內(nèi)容和功能都比較復(fù)雜的產(chǎn)品，常作為次要菜單或者輔助菜單，很少作為獨(dú)立菜單使用（圖5-11）。

【圖5-11?? Airbnb（iOS）的右側(cè)的輔助菜單】

融合菜單：

復(fù)雜產(chǎn)品會融合多個菜單，注意主次分明，并且邏輯關(guān)系清晰。

這是比較常見的菜單形式，QQ就使用了雙菜單架構(gòu)。主頁面下部菜單是三個主要內(nèi)容模塊，左側(cè)放置擴(kuò)展功能菜單（圖5-12）。

【圖5-12?? QQ的主菜單和左側(cè)菜單】

增加快捷操作：增加一些快捷入口，讓結(jié)構(gòu)更加扁平。距離菜單越遠(yuǎn)的頁面，重要性也就越小。

比如通常我們把反饋建議整理到設(shè)置中心中，但是在新產(chǎn)品剛上線的時候，我希望能夠多收集一些用戶反饋，這個頁面就變得很重要。于是我們在菜單增加了“反饋建議”的快捷入口（圖5-13）。

【圖5-13?? 菜單中的“反饋建議”】

離菜單越近的頁面地位越高。注意微信的朋友圈，它離菜單很遠(yuǎn)，無聲地說著：“就算朋友圈再火熱，微信也還是一個聊天軟件。”

導(dǎo)航系統(tǒng)讓用戶知道他在哪個位置，知道如何去另外一個陌生的位置，并且能夠原路返回。設(shè)計完導(dǎo)航系統(tǒng)之后，我們得讓用戶知道它的存在。

空間暗示——頁面動態(tài)

把導(dǎo)航系統(tǒng)告知用戶，需要各種空間暗示。我之前提到Apple Watch的空間設(shè)計就是其中一種。在APP中，空間感主要來自頁面的進(jìn)入與退出。

按照左重右輕（左側(cè)的內(nèi)容重要于右側(cè)的內(nèi)容）的原理，我把第二張頁面放在右邊，然后根據(jù)導(dǎo)航關(guān)系制作頁面動態(tài)。移動方式可以是覆蓋移動，或者平移。

總結(jié)一下頁面動態(tài)的種類：

覆蓋移入（圖5-14）

【圖5-14?? 下一頁從右往左覆蓋進(jìn)入】

案例中，“會議記錄”是首頁，點擊記錄中的某項可以查看“會議日志”頁面，我們讓“會議日志”從右側(cè)移入屏幕，蓋住了“會議記錄”。用戶會感覺“會議記錄”還在原地。

覆蓋移動用戶覺得這兩個頁面是疊加在一起的（圖5-15）。

【圖5-15?? 前后關(guān)系的頁面】

覆蓋移出

覆蓋移出，是上一張頁面（比如“會議記錄”）往左移出了屏幕，“會議日志”在原地（圖5-16）。

【圖5-16?? 上一頁從右往左覆蓋移出】

但是圖5-16這個方式不太適合我們的案例，因為這樣顯得“會議記錄”不太重要，“它”已經(jīng)移出了屏幕。

左右平移

平移是下一頁平移進(jìn)入，上一頁平移離開。這樣的頁面關(guān)系比較緊密，頁面是平等并且高度連貫的?？梢杂迷谌蝿?wù)流中，也可以用在相同內(nèi)容的頁面移動中。比如從文章的上一篇平移到下一篇，或者上一張圖片平移到下一張圖片（圖5-17）。

【圖5-17?? 下一頁平移進(jìn)入】

上下平移

上下距離比左右距離要遠(yuǎn)的多，也不確定的多，上下跳轉(zhuǎn)頁面會給用戶失去x軸的錯覺，所以上下平移被使用得比較少，即便有，也讓用戶感覺是個長頁面，而不是跳轉(zhuǎn)了新的頁面。

知乎APP的答案翻頁就采取了這樣的方式?？赐暌粋€答案之后，往上拉動可以繼續(xù)閱讀下一個答案，當(dāng)然前提是知乎有大量優(yōu)質(zhì)答案，并且知乎的用戶也有足夠的耐心看完這一個答案之后繼續(xù)往下（圖5-18）。

【圖5-18?? 知乎的上下平移】

額外的

有些頁面和其他頁面沒有明確的因果關(guān)系，就好像翻書翻到一半，突然來了個電話，我接完電話接著看書。它和我正在進(jìn)行的事情沒什么太大的關(guān)系。所以它是憑空出現(xiàn)的，而不是書頁中的其中一張。它的出現(xiàn)和退出需要特殊處理。

模態(tài)視圖，常見的是提示框。它和我正在進(jìn)行的任務(wù)有巨大關(guān)聯(lián)，它不得不出現(xiàn)，又想快點消失。它們有平臺默認(rèn)的樣式和退出進(jìn)入的方法，我們也可以額外為它設(shè)計（圖5-19）。

【圖5-19?? 特別設(shè)計的彈窗動效】

我是誰

身份還是狀態(tài)？

我們常在不同產(chǎn)品上看到不同的身份標(biāo)簽，比如普通用戶和VIP用戶啦，乘客和司機(jī)啦，女人和男人啦……

大家都很喜歡樹立敵人，這樣不太好。你不能做一些不符合身份的事情，當(dāng)你是一個老師的時候，你成為了一個教導(dǎo)者或者回答問題的人，但是有些問題你也很想請教別人。這個時候就一切就變得復(fù)雜起來：“畢竟是個有身份的人，萬一問了個蠢問題怎么辦，還是繼續(xù)高深莫測下去吧?！?/p>

我被拉進(jìn)了不少交流群里，如果是以被訪問者的身份邀請進(jìn)去的，一定三緘其口，講話慎之又慎，能不說就不說；如果我以菜鳥的身份進(jìn)了一個大牛的群，就會滿世界的喊“老師”；如果有人稱呼我女神，我就不得不告訴他“我得去洗澡了”。你看，我自然而然地做著符合我身份的事情。這些都是別人眼中的我。

而狀態(tài)就不同了，我可以處于回答問題的狀態(tài)，同時也可以處于問問題的狀態(tài)，多么輕松自如。這是真實的我。

如果限定一批用戶是老師，另外一批用戶是學(xué)生。那么我們就放棄了他們各自另外一半的時間和精力，另外一半的活力，另外一半的內(nèi)容提供。因為某位“老師”不可能一直持續(xù)地在“教學(xué)”，即便他以此為工作。而如果我靠回答問題賺錢，那么我也同樣愿意為別人的回答花錢。

除非能得到足夠數(shù)量匹配的供應(yīng)者和消費(fèi)者，否則就讓用戶上一秒收入，下一秒就賣出吧！

身份標(biāo)簽

當(dāng)用戶年齡平均在20歲或者更小的時候，這些未走入社會的年輕人急需認(rèn)可，這種認(rèn)可在現(xiàn)實中很難得到，身份頭銜是有用的激勵方法。

對于年齡更長的用戶來說就情況就相反了。我花錢買電影看理所當(dāng)然，可是為什么好像是買了個VIP的頭銜呢。天哪，連上個視頻網(wǎng)站都在攀比，還能不能好好聊天了。如果一定要這樣做，收集成就的方法比身份頭銜有用多了。

同時擁有不同的狀態(tài)

我最好的學(xué)習(xí)狀態(tài)就是立刻把學(xué)到的東西分享出去。如果你是一個優(yōu)秀的讀者，或許應(yīng)該嘗試開始寫點什么？（我一直建議閱讀軟件增加寫作功能）

在產(chǎn)品設(shè)計中，時刻把這種邏輯推送給用戶，就像一顆思想的種子，它會自己成長和蔓延。

這種方式用在狀態(tài)可以靈活轉(zhuǎn)變的用戶群中更有效，比如零時的租客可以成為零時的房東，或者乘客有時候可以成為司機(jī)。

這并不是通用的方法，如果用戶之間的關(guān)系很少模糊地帶，或者有極多的信息不能共用等，明確地區(qū)分身份也是可行方案，請視具體的產(chǎn)品情況考慮。比如出租車司機(jī)與乘客，雙方身份與狀態(tài)不能靈活轉(zhuǎn)換，互相有較多不重疊的信息。

我做什么

為人設(shè)計就要理解人的行為模式。結(jié)果可控的情況下，完成任務(wù)的唯一條件，就是不要犯錯。因此，我們盡量確保用戶不會犯錯，這就是“為錯誤設(shè)計”這條規(guī)則的由來。

另外，人類會收到情緒的影響，這是不可避免要被考慮到的。我將為你介紹一下“為人為錯誤設(shè)計”與“為情緒設(shè)計”的交互理念。

為人為錯誤設(shè)計

災(zāi)難是一系列錯誤的連鎖反應(yīng)——《重返危機(jī)現(xiàn)場》

人類不是機(jī)器，行為不可控，所以只要涉及人類活動，我們甚至都無法真正意義上地杜絕錯誤的發(fā)生，只能盡力把它發(fā)生的概率減少。

為錯誤設(shè)計的步驟：

習(xí)慣

違背習(xí)慣就像違背自然規(guī)律或者用戶經(jīng)驗，這會及容易導(dǎo)致用戶犯錯。所以在設(shè)計先后順序、左右位置的時候不必要特立獨(dú)行（圖5-20）。

【圖5-20?? 返回鍵違背習(xí)慣】

提示

重要緊急的行為、一旦開始無法反悔、或者如果犯錯就會遭遇巨大損失的行為，需要向用戶預(yù)警，甚至可以強(qiáng)勢一點。這都比讓我犯錯更好（圖5-21）。

“這是你的選擇嗎？你要不要再確認(rèn)一下？”

【圖5-21?? 預(yù)警】

反饋

我需要知道那件事情是不是成功了，否則我就不知道哪里出錯了。

“為什么沒有反應(yīng)？是因為我沒有按到按鈕嗎？”（圖5-22）

“我按到按鈕了，為什么沒有反應(yīng)？是我的網(wǎng)絡(luò)有問題嗎？”

【圖5-22?? 反饋】

當(dāng)我們有所舉動的時候，周圍的事物都會因此而被影響，并且有所反應(yīng)。如果用戶的每一個操作行為都能得到直接的反饋，對用戶更加友好。

反悔

最后我依然犯了錯誤，請讓我有機(jī)會反悔。現(xiàn)在大多數(shù)的文字輸入都有自動存儲的功能了啦，如果不小心意外關(guān)閉了頁面也不用擔(dān)心重來一遍。

為情緒設(shè)計

團(tuán)隊由人構(gòu)成，產(chǎn)品為人而作。人，必然存在情緒，它非常容易被調(diào)動與刺激。因此，為人的設(shè)計，必然要顧及人的情緒，純以理性做決策，是最不理智的做法。

人們?nèi)菀子涀∧切┡c情感密切相關(guān)的事物，或者任何加劇情緒的事物。我們可以利用情感化元素讓用戶與產(chǎn)品產(chǎn)生互動，為產(chǎn)品賦予人格 。

成就感

建立用戶克服困難，解決問題的成就感

經(jīng)歷

似曾相識的的難忘的回憶可以給用戶“會心一擊”

放松

放松狀態(tài)我們能更好地處理信息，生成記憶。讓用戶進(jìn)入積極正面的狀態(tài)、輕松完成操作，享受過程。

選擇恐懼癥

選擇恐懼癥是擔(dān)心選擇的結(jié)果不是最好的，給用戶較少的選擇意味著用戶可以輕松抉擇、完成任務(wù)

特殊情況的處理

第一次與不是第一次

有些行為不需要反復(fù)提醒，這樣會讓人產(chǎn)生“你覺得我智商低”的錯覺。所以很多產(chǎn)品只在用戶第一次使用的時候做引導(dǎo)設(shè)計（圖5-23）。

【圖5-23?? 第一次引導(dǎo)】

“哦！討厭。”

網(wǎng)絡(luò)突然斷了，手機(jī)突然沒電了。我們知道你不愿意它發(fā)生，但是它總會發(fā)生的。為了應(yīng)對這些突發(fā)情況，我們在正常流程之外還要為它們設(shè)計流程或頁面。

手指行為（移動產(chǎn)品）

人類與硬件接觸，通過行為與產(chǎn)品建立溝通交互的橋梁，有一門學(xué)科專門研究這些——“人體工程學(xué)”。

以下以移動產(chǎn)品為例。

對于手機(jī)用戶來說，行為主要包含手指的活動，其次是眼睛接受信息，特定情況下用到嘴巴和耳朵。我猜暫時很少用到舌頭和鼻子什么的。

手指與屏幕的關(guān)系

手指是最為高效、靈活并且使用最為頻繁的器官。移動產(chǎn)品大部分都是手持設(shè)備，你會看到所有人都用手抓著手機(jī)戳來戳去，所以我們當(dāng)然應(yīng)該先說說手指的事情。

單手點擊舒適度（圖5-24）：

【圖5-24?? 單手操作】

【圖5-25?? 重要按鈕放在右邊】

我們默認(rèn)右手操作手機(jī)的人更多，當(dāng)然這個觀點至今都有爭議，因為現(xiàn)在移動設(shè)備的操作都非常簡單，即便是不太好使的左手一樣可以輕松使用。

假設(shè)你使用右手，圖中紅色部分是更容易點擊的區(qū)域，其他區(qū)域次之。頂部是最難點擊的地方。

為了讓左右手都可以輕松操作，很多產(chǎn)品使用了居中的長按鈕。

【圖5-26?? 居中的按鈕雙手都可以點】

雙手點擊舒適度（圖5-27）：

【圖5-27?? 雙手操作】

玩游戲時用戶通常都是雙手操作，游戲界面的內(nèi)容設(shè)計因此有很大不同。

手指動作

用戶常用單機(jī)和滑動操作，這兩種操作可以滿足大部分交互行為，雙指拉伸抓取的操作也很常見（圖5-28）。我們沒有必要使用冷門的操作方式，如果使用了少見的手勢，記得在用戶第一次使用的時候引導(dǎo)他。

【圖5-28?? 手勢】

手指操作區(qū)域

用手指戳的時候如果戳不到地方實在是太讓人糟心了，由于手指與鼠標(biāo)不同，靈活但是不夠精確，因此移動產(chǎn)品規(guī)定了最小操作范圍。比如iOS最小操作區(qū)是44dp，Android則是48dp（請查閱官方人機(jī)交互文檔）。

眼睛與屏幕的關(guān)系

使用移動產(chǎn)品時，用戶經(jīng)常處于噪雜的環(huán)境或者活動的狀態(tài)。比如一邊走路坐車一邊看手機(jī)。這對眼睛的壓力很大，同時也要求產(chǎn)品設(shè)計中為眼睛考慮更多。

下圖是眼動熱力的示意圖，用戶習(xí)慣于從左到右的閱讀方式，左上是關(guān)注的焦點。我們在設(shè)計產(chǎn)品時毫無疑問會把最重要的內(nèi)容放置在左上角（圖5-29）。

【圖5-29?? 眼動的焦點】

用戶在運(yùn)動過程中實際看到的頁面，很大一部分是糊的。所以視覺焦點應(yīng)該清晰可見，這樣用戶可以快速捕捉到我們設(shè)計的“焦點”，對其他信息沒什么耐心（圖5-30）。

【圖5-30?? 清晰的焦點】

必須承認(rèn)，大多數(shù)情況下，交互設(shè)計是個繁瑣的活，既要關(guān)注人類的活動，還要照顧技術(shù)實現(xiàn)的邏輯。在大型團(tuán)隊中，這個工作會由交互設(shè)計師來完成。在我們的團(tuán)隊中，產(chǎn)品、設(shè)計、研發(fā)拆分了這個任務(wù)。

以上內(nèi)容取自人人都是產(chǎn)品經(jīng)理專欄作家@Gara 同名書籍《絕密原型檔案-看看專業(yè)的產(chǎn)品經(jīng)理怎么畫原型》，已經(jīng)在當(dāng)當(dāng)、京東等各大平臺上架。

京東購買地址：http://item.jd.com/11937366.html

當(dāng)當(dāng)購買地址：http://product.dangdang.com/23963336.html

同時，關(guān)注起點學(xué)院微信服務(wù)號（ID：qidianxueyuan666），在微信服務(wù)號里回復(fù)“原型”還可以獲取當(dāng)當(dāng)圖書10元優(yōu)惠劵。

絕密原型檔案同步配套視頻課程已經(jīng)上線，點此立刻學(xué)習(xí)：https://ke.qq.com/course/136236

本文由人民郵電出版社授權(quán)發(fā)布，未經(jīng)出版社書面許可，禁止任何平臺、個人轉(zhuǎn)載，違者追究法律責(zé)任。謝謝合作。