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