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