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