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

交互是什么？

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

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

交互是人的行為與事物之間產生互動聯系的過程。

用動態表達邏輯關系：

人類行為不是定格畫面，而是連鎖反應。

動態視頻比靜止的畫面傳達更大的信息量并且被記住。你可能還記得《哈利波特》中的“預言家日報”的經典畫面，你看到一段完整的視頻：罪犯“小天狼星”被警察“傲羅”抓住，并且憤怒地嘶吼。

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

“瘋狂罪犯終于落網！”

“魔法界警察暴力執法！”

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

這就是動態畫面中連貫地邏輯線，先后順序、因果關系。

如果內容設計就像一幀幀現場照片，那么交互就是用戶觸發的蝴蝶效應。你知道做了這個選擇，會導致不同的結果?；蛘甙聪逻@個按鈕，后面會發生什么。

塑造立體空間感：

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

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

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

那么，這件事情和我們的設計有什么關系？

“大頁面的設計是焦點的設計，小頁面的設計是空間的設計”

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

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

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

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

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

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

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

“扁平化其實為了讓你覺得地方足夠大。你信嗎？反正我信?！薄袄畎住?/p>

怎么做交互？

交互為人類行為而設計，人類的行為依賴經驗和本能。

經驗

經驗是我們記憶中曾經發生過的事情，經驗告訴我們能做什么或者不能做什么。

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

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

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

平臺官方制定的規則

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

平臺（ios和Android）的官方設計規范事無巨細地規定了所有的細節，并且培養了用戶的使用習慣以及前端開發的工作習慣。遵守官方設計規范，你和開發的溝通會非常輕松，以及不至于在用戶面前“出錯”

規則除了告訴你用戶習慣之外，還有技術可行性。

我要向你強調規則的重要性，它們并不是限制你發揮的枷鎖，而是你揮灑創意的舞臺。

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

Ps：規范可以幫我們“不出錯”，但要達成“絕妙的設計”還需更多創造力。

本能

我們在規則的基礎上，為本能設計交互。想象一下：

突然！你被人打暈了！

醒來的時候你發現自己到了一個陌生的地方。

現在你在想啥？——

“我在哪？”

“我是誰？”

“我該怎么辦？”

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

“我在哪？”

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

“我是誰？”

用戶認知自己的身份或者狀態，并且采取相應的行動，人物的身份和狀態是探索用戶行為的重要依據。

“我該怎么辦？”

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

我在哪

為了讓用戶定位自己，我們需要為他們設計導航系統。

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

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

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

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

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

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

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

地圖和道路，共同構成導航系統。

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

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

我們在用戶潛意識中，植入產品導航系統。這就要先完成地圖和道路規劃。

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

地圖——頁面方位

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

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

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

所以地圖設計應該做到：層級扁平，排列規則統一。

檢查頁面關系并排列（圖5-6）

【圖5-6??? 頁面關系】

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

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

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

道路——菜單

菜單是到達頁面的主干道，菜單設置的原則，是符合邏輯，有時候符合邏輯，意味著不太方便快捷。如果這兩者有沖突，我們取邏輯，舍快捷。

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

以下是移動端APP常見的幾個菜單結構：

下部菜單：

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

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

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

上部菜單：

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

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

左側菜單：

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

只使用左側菜單的形式，通常用在早期還不確定的產品形態中，成熟的產品通常都會改為上下部菜單的導航形式。

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

【圖5-9??? UBER的左側菜單】

左側菜單還要注意空間的前后關系。

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

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

【圖5-10??? QQ的左側菜單】

右側菜單：

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

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

融合菜單：

復雜產品會融合多個菜單，注意主次分明，并且邏輯關系清晰。

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

【圖5-12?? QQ的主菜單和左側菜單】

增加快捷操作：增加一些快捷入口，讓結構更加扁平。距離菜單越遠的頁面，重要性也就越小。

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

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

離菜單越近的頁面地位越高。注意微信的朋友圈，它離菜單很遠，無聲地說著：“就算朋友圈再火熱，微信也還是一個聊天軟件?！?/p>

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

空間暗示——頁面動態

把導航系統告知用戶，需要各種空間暗示。我之前提到Apple Watch的空間設計就是其中一種。在APP中，空間感主要來自頁面的進入與退出。

按照左重右輕（左側的內容重要于右側的內容）的原理，我把第二張頁面放在右邊，然后根據導航關系制作頁面動態。移動方式可以是覆蓋移動，或者平移。

總結一下頁面動態的種類：

覆蓋移入（圖5-14）

【圖5-14?? 下一頁從右往左覆蓋進入】

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

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

【圖5-15?? 前后關系的頁面】

覆蓋移出

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

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

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

左右平移

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

【圖5-17?? 下一頁平移進入】

上下平移

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

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

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

額外的

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

模態視圖，常見的是提示框。它和我正在進行的任務有巨大關聯，它不得不出現，又想快點消失。它們有平臺默認的樣式和退出進入的方法，我們也可以額外為它設計（圖5-19）。

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

我是誰

身份還是狀態？

我們常在不同產品上看到不同的身份標簽，比如普通用戶和VIP用戶啦，乘客和司機啦，女人和男人啦……

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

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

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

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

除非能得到足夠數量匹配的供應者和消費者，否則就讓用戶上一秒收入，下一秒就賣出吧！

身份標簽

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

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

同時擁有不同的狀態

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

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

這種方式用在狀態可以靈活轉變的用戶群中更有效，比如零時的租客可以成為零時的房東，或者乘客有時候可以成為司機。

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

我做什么

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

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

為人為錯誤設計

災難是一系列錯誤的連鎖反應——《重返危機現場》

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

為錯誤設計的步驟：

習慣

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

【圖5-20?? 返回鍵違背習慣】

提示

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

“這是你的選擇嗎？你要不要再確認一下？”

【圖5-21?? 預警】

反饋

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

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

“我按到按鈕了，為什么沒有反應？是我的網絡有問題嗎？”

【圖5-22?? 反饋】

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

反悔

最后我依然犯了錯誤，請讓我有機會反悔?，F在大多數的文字輸入都有自動存儲的功能了啦，如果不小心意外關閉了頁面也不用擔心重來一遍。

為情緒設計

團隊由人構成，產品為人而作。人，必然存在情緒，它非常容易被調動與刺激。因此，為人的設計，必然要顧及人的情緒，純以理性做決策，是最不理智的做法。

人們容易記住那些與情感密切相關的事物，或者任何加劇情緒的事物。我們可以利用情感化元素讓用戶與產品產生互動，為產品賦予人格 。

成就感

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

經歷

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

放松

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

選擇恐懼癥

選擇恐懼癥是擔心選擇的結果不是最好的，給用戶較少的選擇意味著用戶可以輕松抉擇、完成任務

特殊情況的處理

第一次與不是第一次

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

【圖5-23?? 第一次引導】

“哦！討厭?！?/strong>