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