介面設計的空間認知 (下)：設計案例
（譯者：承接著上篇 介面設計的空間認知 (上)，在下篇會作者會分析一些設計案例，讓大家更了解這有點抽象的主題。）
介面空間設計：Scorekeeper
雖然 Scorekeeper 看起來很像未完成的原型，但因為單純的功能，顯得非常實用。 與其讓使用者從一堆選單中挖出功能，利用視覺設計，將各種功能獨立強調。將次要功能藏到更深一層，簡化複雜度。但當使用者切換到這些次要功能時，那順間，它們看起來又跟主功能一樣簡單明瞭。
Tinder
Tinder 是一個以模擬卡片式互動出名的 APP。在上方的畫面中，可以看到它利用Z軸的深度，模擬無限堆疊的卡片。 只要輕鬆用手勢往右邊滑，就代表中意的對象，往左邊則是謝謝再聯絡。同樣的操作也可透過，下方的愛心與取消按鈕完成，藉此暗示左右兩邊空間所代表的意義。
而這種卡片式的物理動態行為，我們在真實世界中並不陌生。
Tinder 將次要頁面藏在左右兩邊的橫向空間。當我們左右滑動整個畫面時，畫面的內容會依據上方導覽列進行切換，在這滑動過程中，我們會產生清楚的空間動線，進而使我們產生了空間概念。
不知是否巧合，與你配對成功的對象的聊天頁面，被配置在主畫面的右手邊，恰好就是你選擇中意對象卡片的那一邊。
Tumblr, iOS
另一個知名 APP，Tumblr 則是透過下方五個選單按鈕（Tab Bar），就可以切換畫面上的內容。從這樣的操作，可以想像有台攝影機拍攝正拍攝你所看到介面，而下方選單（Tab Bar）則是常態貼黏著這台攝影機前面。雖然我們在切換畫面時，並沒有像 Tinder 那樣看到 X 軸的移動過程，但透過下方的五顆按鈕相對位置，還是會使你產生些微的空間感。
這些設計手法都是常見的。
Tumblr 的編輯模式是另一個值得我們分析的案例。當你點擊他在選單上的藍色鉛筆時，會有一個臨時視窗從下往上彈出，此時你只有兩種選擇，選擇你要的上傳的類型或是離開。 這個入場動畫，讓臨時視窗看起來好像已經存在 Z 軸空間，只是暫時被放置在螢幕下方，而當我們取消它時，它則是向下退回。在這臨時視窗上點擊一個物件，此時視窗會在 y 軸移動，並往左帶到你想要新增的物件，整體的互動讓人感覺，就像個生產線上的輸送帶。
唯一我不太滿意的地方就是，使用照片上傳時，該貼文的編輯視窗是常見的由左滑右，進到視窗內。如果我有機會可以改良的的話，我會傾向讓他從由下往上滑動，讓他維持一個空間維度，藉此降低使用者空間邏輯的負擔。
（譯者：稍微去使用了一下 Tumblr 新版，目前照片上傳，還是一跟作者所說的一樣，由左滑右進入，但是有趣的是。當我們只點選文字上傳時，他的介面進入方式卻是由下往上，有機會各位可以體驗看看，兩者是否真的有空間感上的差別。）
FACEBOOK 滑動關閉視窗
從上圖可以看到，在 Facebook 點擊照片時，會進入常見的燈箱效果，但仔細的觀察，其實是照片跑到前景，而原來的塗鴉牆在後面變得較模糊。當我們把照片撥開時，他不是離開畫面，而是退回到原來放大前的位置，同時間整個塗鴉牆便回到清楚的樣子。這是很扎實空間的設計範例。
考慮不周的空間設計
在拆解這些怪物案例的過程中，可使我們學到更多東西。
Spotify ，你到底發生了什麼事？
或許這是少數，一個非常錯亂的空間概念，但卻又非常受歡迎的軟體。如果要形容 Spotify 的介面空間感，我會說它就像是充滿線路的老鼠窩。不相信我說的，非常歡迎你在同一張紙上，畫出它每個介面頁面的進入點與連接。
Spotify 的使用者被過度暴露在，突如其來的幻燈片效果以及模糊影像，有事沒事就被埋沒在一堆列表裡。感覺就好像是，只為了執行一個簡單的東西，必須花費人生大半力氣。
或許你會感到很訝異，但如果我們仔細研究 Spotify 的快速開發文化，不難發現，在擁有 “眾多” 聰明才智的工程師與設計師小團隊，每團隊負責一小塊，就很容易產出如此龐大的怪物。這一切都是為了維持不間斷開發速度，而捨棄了整體概觀設計。
但嚴格來說，其他在雲端音樂領域的應用程式表現的也差強人意。像是 Apple Music 或是 Rdio 的介面設計也同等的悲劇，都只有一點點，甚至於，完全沒有把空間感考慮進去。
（譯者：在這 WWDC 2016，APPLE 發表了全新設計的 APPLE MUSIC，表現會如何呢？讓我們拭目以待：））
Facebook Paper
首先，我們不得不讚美 Facebook Paper 對於彈簧效果以及各種瘋狂動畫的點子，在手機螢幕上看起來酷炫極了。 該開發團隊總是有最酷的技術，並很熱心的開源這些技術，讓大家沒有極限的發揮，而極致的發揮總是最有趣，但卻也只能如此。就像是，把設計給小朋友的 iPad 互動故事書，重新組合，然後毫不保留地什麼都塞進手機螢幕。話雖如此，最後他們還是把大部分的彈簧效果，整合進 Facebook了…
永不停洩的滑動區域、不斷的彈跳、彈跳、彈跳、再彈跳。 酷炫的報紙折疊效果，幾乎所有的物件都可以被放大縮小，華麗的漢堡式選單。所有東西似乎都是為了動而動。用一段時間後，將會因這些動畫，開始對這介面感到疲乏，就是少了一絲絲的寧靜，讓使用者停下來認知自己身在何處。
它是玩過頭的最佳案例。
土耳其航空公司，艙內娛樂系統
這個案例非常明顯，我不太需要再解釋任何東西。
要怎麼做才能避免流程像蜘蛛網一樣呢？ 其實就是適時將眼界拉遠，如前面提到般，拉遠眼界可以使我們專注在整體流程圖表上。越簡單的流程動向，能有效降低空間複雜度。
一些小提醒
- 要小心運用幻燈片，滑動區塊，放大縮小效果，以及 “漢堡選單”，這些設計元件都帶有他們獨特的空間感。
- 適時遠離電腦，開始使用繪圖本或白板畫出你的想法。別讓自己困在電腦像素裡面，多利用圖像來設計你的構想。
希望我已經提供足夠的資訊，讓你在設計時，把空間感納入思考裡。不妨試者打打電玩，讓自身然後穿梭在其中，學習裡面的空間感設計。又或者，馬上離開你眼前這台電腦，走到外面去，看看物理所帶來的真實世界以及觀感。這些東西代表著設計的 DNA ，也是我靈感萃取之地，同時也是我樂於付出努力創造的設計。
介面空間感，演講連結：
如果對這題目有興趣的人可以直接聯絡作者：
medium@pasquale.cool, or write to me on twitter@pasql
此文章已獲得作者 Pasquale D’Silva 授權翻譯
原文出處：https://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9#.9vxvnuspq
原作者: Pasquale D’Silva
原作者 Spatial Interfaces 演講：https://vimeo.com/147643797
