你關注過嗎？動效設計的空間感
在我們的大腦中，存在著多維的思考模型，能夠幫助我們理解周圍復雜的世界。我們還可以利用這種具有空間感的思考模式，幫助我們處理抽象的信息。
動效設計的空間感
我的思考是具有空間維度的，而你，也同樣如此。
你雖然看不到，但是可以抓住你的左耳吧？同樣的，你可以撓撓你的鼻子吧？或者，你可以摸摸你的額頭和后腦？你可以記住你的鑰匙丟到哪里了？你可以不用看鍵盤盲打嗎？你可以通過記憶和感覺來回想起手機裝到了哪只口袋里嗎？該走哪條路，想起來了嗎？黑夜中還能記得去廁所的路怎么走嗎？
我問了這么多，你肯定會回答，我能。因為在我們的大腦中，存在著多維的思考模型，能夠幫助我們理解周圍復雜的世界。我們還可以利用這種具有空間感的思考模式，幫助我們處理抽象的信息。
我認為***的軟件時能夠拓展用戶大腦思維模式的軟件。它能夠讓用戶更加自然的思考，讓用戶更容易的適應軟件內部環境，而不是盲目的四處探索，卻找不到想要的going 呢。信息的傳遞本應該是計算機的工作，而不是我們的工作。這便是我們設計師設計軟件的目的。***空間感的界面設計能夠符合用戶的心理模型和預期。是真正為用戶而設計的界面，它能夠強化用戶原有的思維模式，增強界面的空間感與時間感。這種界面能夠讓用戶充分的感知什么元素身處在什么位置。就像一座結構精巧的建筑設計一樣，它們往往易于穿梭易于瀏覽。空間的變化有序而融洽，不會讓人感到突兀，而是理所當然。
塑造空間
設計具有空間感的界面，你需要從里到外，認真的考量將屏幕的界限所在。琢磨界面中的物體縮影具有的物理特性。它們從何處來？又要去何處？它們是以何種動態形式進行移動和轉換？哪類特定的元素繼承了哪些現實物體的物理屬性？或者用用戶的視角來思考，我現在在哪個界面？和其他界面的關聯又是怎樣？
這些問題難以用語言去組織回答。但是我發現我可以用圖片來很好的解釋闡述這些問題。
繪制地圖
圖解推理
當用設計來營造空間感的時候，地圖可以幫助我們假象界面的心理模型，我們來感受操作，和界面層級關系之間的導航。而簡簡單單的將界面擺在一起，往往達不到我們想要的效果，我們的設計思考往往停留在單一的維度，沒有辦法更深維度的思考界面的空間關系。
下面這個范例便是Keezy Drummer這款應用的上下文層級分解圖
這個簡單的分解圖，描述了Keezy Drummer中界面的上下文關系。這個分解圖沒有明確指出界面的界面。這些箭頭代表著時間維度（時間）
第四維？
同樣的，你也可以通過層級的逐步推演來將界面的維度關系進行可視化。隨著維度的增加，界面之間的關系更加錯綜復雜。
如你所見，在2維的展示形式下展示4維空間感，會讓層級看起來立體。圖表中的“W”代表著時間。
這張圖代表了界面之間的轉場模式，闡述了Keezy Drummer中的上下文空間關系
思考動態，我們可以設計出時間感，有興趣的可以看一下我的Transitional Interface。正是空間感和時間感給予了操作的暗示，引導著用戶搭建熟悉心理模型。
制作列表
動態暗示著元素的空間關系。物體的移動驗證了元素的物體屬性，描述物體是怎樣入場和退場的。界面中的元素依據著規則和物理原理而運動，幫助用戶構建清晰的認知模型。
我們都見過這種經典的列表項刪除的動效設計模式。滑動具體項，移動會揭示出后面的刪除按鈕。點擊刪除圖標，所選項會立即有一種崩塌般的運動感。
如果我們用緩動移動的方式讓物體離開屏幕呢？
比方說使用圖中的這種緩動曲線，我們會給予用戶一種暗示，暗示出所選項離開屏幕后所處的位置。在這個案例中，它會離開屏幕一點點。在這個動畫中，我們可以暗示出元素離開屏幕后所處的保留區域，讓用戶感覺如有必要，它們還是可以回來。或許我們可以讓用戶可以通過swipe手勢滑動界面，讓用戶可以看到移出屏幕、被取代的列表項。
Google的Material Deisgn規范中似乎認為當元素離開屏幕的時候應該采用加速的運動形式。我對此并不認同
而運動曲線使用不當的反面教材是，如果所選項保持著加速的狀態，那么它又會停留在什么地方呢？一直加速，直到離開地球？這種類型的運動曲線會讓人覺得它會一直飛走，甚至能飛到外太空。
再或者，我們讓列表項離開屏幕的時候進行旋轉，在XY軸上都進行移動，那么這種類型的運動感會讓人覺得元素具有重力，可能在屏幕外的空間中間，刪除的列表項匯堆成一堆。
Z軸的動畫暗示著層級和深度感。
當然，列表項還可以翻頁。它可能像手風琴一樣折疊。讓整個列表項具有彎曲的感覺。列表項的填充色漸漸變暗。除了上述的這些運動形式，我還可以舉例很多很多，但是到此為止吧，我認為你已經可以理解我所要表達的含義：用戶可以通過動效和空間感的設計來理解元素在界面這一虛擬世界中的物理關系和含義。
那些具有空間感設計的界面
Scorekeeper
非常概念化的應用，但是Scorekeeper能夠有效的抓住用戶的視覺焦點。它這種***隔離感的設計模式，將功能有效的區分，而不是像很多應用，將首頁的功能放的很滿很多。Scorekeeper將復雜的功能分配到了第二層級和第三層級，保證了每個層級都非常的簡單干凈。
Tinder
Tinder以其卡片式設計為范例。利用Z軸打造了無盡堆疊的卡片。將卡片扔到右面，代表你喜歡這個姑娘，或者丟到左邊，代表無感。相似的，如果你點擊“x”按鈕，那么自動會移動到左邊，點“心”按鈕，會移動到右面，按鈕的動畫效果與手勢的動畫效果互相援引。
這種物理的動態效果在生活中有跡可循，讓我們感到熟悉.
Tinder的第二層級采用連續水平式的層級關系，這種感覺在iOS中讓我們聯想到經典的導航模式的動畫效果，將內容串聯起來。這是一個非常優秀的通過動效暗示界面空間關系的范例。
我不確定Tinder的界面層級的設計是否是故意的，因為在Tinder招牌的卡片交互界面中，向右滑動代表喜歡這個姑娘，而在整個界面的層級關系中，這個界面右方的界面恰好是短信/私信界面，這樣能夠有一種“循序漸進”的邏輯——先選中你喜歡的人，然后再和他聊。
Tumblr,iOS
Tumblr所構建的模型非常簡單。通過iOS Tabbar標準的導航模式，構建起了界面的上下文關系。如果以攝像機的視角來觀察界面，那么Tumblr的空間關系就非常好理解了。無論在任何界面，底部都會有Tab Bar式的工具欄，而這個工具欄就代表了我們用戶的視角。盡管在Tumblr應用中的Tab切換中，沒有X軸的動效（比如上方的Tinder就有X軸的動效），但是依然能夠音樂的暗示出每一選項在X軸排列的空間關系。
這張鳥瞰圖解釋了Tumblr的導航關系，用戶很難迷失。有幾個界面會稍微長一些，因為他們是滾動視圖，而有幾個界面還會有更深的層級。在很多應用中，導航是以一直跟隨的Tab Bar為基礎展開的，比如說Instagram、Twitter、Foursquare。
然而這種Tab Bar式設計并無很大的開創性，只是遵循了iOS設計規范而已。
在Tumblr中***的亮點其實在于點擊Tab Bar 上鉛筆圖標所出發的動畫，其構造模式非常有意思。無論在什么界面，點擊了這個鉛筆圖標，你會發現，你并沒有進入一個全新的界面空間，而是進入了一個臨時的、具有聚焦意義的視圖。在這個視圖中，你可以快捷的選擇一些發布信息的類型，也可以取消這個菜單。這個視圖其實是覆蓋在原界面上方的。如果取消這個視圖，這個界面就會返回原處。如果選擇具體發布項，所有的Icon會Y軸上升退場，帶出上升進場的細節項。整體的感覺比較像一個傳送帶——一步一步將信息傳送出去。
Tumblr iOS的發布流程(左圖），我個人建議改良的發布流程（右圖）
譯者注：iOS的Master-Detail模式
縱觀Tumblr的發布流程，信息的發布流程主要采用了經典的、Master－Detail視圖模式。但我覺得吧，我們其實可以將“傳送帶”這種動畫所賦予的隱喻延伸下去——如果我繼續下一步，那么我繼續在Y軸上傳遞信息，而不是通過引入一個額外的X軸，打破這種感覺。我的這種改良方案能夠減少用戶的認知負載，讓用戶依舊沉浸在原來的心理模型上——而不是通過X軸的轉場來突然打破。
Facebook的滑動關閉
這個動畫采用了經典的Lightbox效果，但是除此之外。點擊圖片，圖片會移動到前景。背景由于黑色層的關系，逐漸色彩變的熹微***變黑。而進入這個聚焦模式后，滑動界面會退回原來的界面，原來的界面會重新成為焦點，這個動畫設計很贊。
缺乏空間感設計的界面
在很多的反面教材中，我們同樣可以學習到很多東西。
Spotify，你怎么了？
Spotify屬于空間感最為讓用戶混淆的、然而用戶量卻很大的那種應用。下面我用一些連線來展示Spotify的界面設計和空間的關系。用一張紙將其表現出來其實是一件極富挑戰的事情。
我沒辦法用鳥瞰圖來進一步描述Spotify的界面關系了，有些太雜亂了。
Spotify的用戶將面臨隱晦的輪播效，藏的很深的模態窗口，到處都是的列表視圖，突然出現的抽屜，以及亂七八糟的下拉菜單和手勢。漢堡菜單中的列表項迫使用戶完成復雜的流程，完成的卻是簡單的操作。使用Spotify的感覺像是一場冒險，千辛萬苦。
Spotify充滿了富有天賦的設計師和工程師，但是卻搞出這么一個畸形聽起來有些不可思議，但是如果你能看過Spotify的軟件開發價值觀，那么你就知道出現這種情況就不足為奇了。
我在蘋果的朋友給我發了一張蘋果用戶體驗規劃室的照片
但公平地說，音樂類應用的其他競爭對手做的也不夠好。Apple Music和Rdio的界面也非常的差勁，它們都很少考慮到空間感
Facebook Paper
Paper奔放的、充滿彈性物理質感的動畫值得贊美，彈性成為了Paper界面的標志。Paper團隊的技術非常厲害，而且開源了很多有用的東西。玩弄Paper應用非常有趣。從根源來說，Paper繼承了iPad上一款交互式出版閱讀應用的一些特質，將其放入到iPhone中。好吧，我說的就是被Facebook收購的Push Pop Press.
在Paerper中充滿了動量滾動、彈性、***美感的彈性、大量的彈性。卡片折疊的感覺像是富有光澤的油版報紙吧？你可以在大量地方使用Pinch手勢。而且Paper的漢堡菜單的動畫設計可以說非常華麗，***了一時的風潮。所有的一切都高度模擬物理世界，甚至有一點炫技。
然而，Facebook Paper里面很多東西可以說是毫無必要的，如果使用了大量的物理隱喻，用戶使用起來可能會感到累，用戶過度關注高度仿真的動畫，可能會忽視應用的空間關系模型。
從動畫角度來說，Facebook Paper是一個優秀的范例。然而從交互層級、用戶心理角度來說，Paper有一些離譜了。
Turkish Airlines in-flight entertainment
這個太明顯了，動畫太過了，我覺得我不必再說什么了。
如何避免你的設計層級、空間關系亂糟糟？
我們需要通盤考慮，而且還要關注界面的關系。正如我之前所說，圖解推理是一個非常不錯的方法。圖解中簡單的指向，會有效的幫助我們分析，減少界面空間關系的雜亂感。
一些建議：
1.在混合使用輪播、滾動區域、放大和漢堡菜單的時候要審慎。上述的每一種交互控件貨行為都會讓界面的空間關系變的復雜。
水平空間關系，這種空間關系下，視圖與視圖之間有著明顯的空間距離。
同樣是水平關系，然而水平轉場時，粉色的界面并沒有離開屏幕。這種轉場相對不“大”，這種設計模式一般體現在iOS原生的Master－Detail視圖
2.但空間感的營造也不要過于刻意。否則用戶可能會難以理解。如果為了營造空間感的動效時間過長，可能用戶會在動畫播放的時候無法操作，讓人有一種響應速度慢的感覺。要考慮一些營造空間感的快捷式轉場。用戶的使用感覺是最重要的，有時候沒必要鉆牛角尖。
Keezy Drummer的早期版本
3.遠離電腦，畫草圖，或者在白板上畫圖解。很多時候你的思想傳達到計算機上不精確，用草圖的形式更能表達你的意思。
我希望我所寫的這些東西能夠激發你對于空間感的思考。多玩一些游戲，學習一下游戲的界面。或者出去轉轉，觀察下生活中物理實體，觀察自然中運動給你的預期和感受。我的很多靈感和設計都來自自然。
