移動產品大家都不會陌生，幾乎是無所不能，可以隨時隨地滿足用戶的多種需求。那么移動產品設計呢？有沒有遇到類似的情況，PM小A說：產品要增加功 能， 在界面上加個入口，小意思嘛。小B說：內容太少了，咱們再擴展一下頁面，沒有難度嘛。小C說：能不能擠一擠多放個功能？用戶真的有需求…

可界面的空間是有限的，內容需求卻是無限的， 從3.5寸到5.2寸到9.7寸的pad，不管多大尺寸的屏幕，都逃脫不了這樣的命運。就像房屋的空間和放在里面的東西，永遠存在東西放不下的問題。既然是同類的問題，能不能從相同的角度出發來找到解決方案呢？

在建筑學中，空間主要指視覺層面感受到的幾何學意義的三維物理空間，也就是空間中的人對環境的一種三維層面的感受。因此空間擴展就是從不同維度來尋 求解決方法，包括收納、層級化分割和視覺感受擴張等。類比到移動產品的體驗上，最基礎的也是如何讓有限的屏幕承載更多的功能，讓用戶感受到空間的舒適。本 文就借助建筑學的空間擴展概念，從信息收納、層級化信息、變臉和視錯覺四個維度來談談屏幕空間的擴展。

收納

顧名思義，把不用的東西收起來，表面上干干凈凈，打開會找到想要的內容，這種方式特別適合零碎功能的整合。

1.收納方式分類，主要有以下三種。

a. 定義好收納規則和內容

即規定整理好要呈現給用戶的功能，這一種的關鍵點就是抽屜的標簽，讓用戶在關著的情況下能究竟收在哪里，入口在哪里。

那么收納的形式呢? 從交互模型來看有很多種，最典型的像Path 的側邊欄式，上下折疊式，沉入式，還有Android系統級操作的處理方法。目的都是在用戶不會用到的時候，把相關的信息藏起來，收起來，并且有個永遠存在的入口，當用戶需求就能快速拉開調起，非常方便。

b. 定義好收納規則后，用戶隨意擴展內容。

這種收納方式特別適用于記事類或者日程類的應用，因為相對來說，這類應用的主要信息源是用戶本身，且縱向無法預估和控制信息的量級。那么這樣一種定義好收納規則，但內容無限的方式就特別適用了。下圖就是一種典型的記事本信息收納方式。

c. 用戶自定義規則和內容，隨時可以整理替換抽屜的內容。

既然空間交給用戶，怎樣分割和收納都由用戶自定義，那么這一種方式的關鍵就是“扔”和“裝”都要方便，可以簡單快速的將內容裝進抽屜。最直接的例子就是iphone的app界面，拖動疊加即可形成一個收納，拿出去也非常方便。

2.收納樣式，主要分為“有門抽屜”和“無門抽屜”兩種

a.有門抽屜

是指即使抽屜關閉，里面的信息收納著，也需要固定存在的入口時刻提示用戶從哪里開啟，像側邊欄，永遠有開啟按鈕的。

b.無門抽屜

是指開關抽屜門的都是通過高級手勢操作喚起的，連門都不需要，只需要用戶知道開啟方式，比如長按、滑動指定信息條等喚起。

一般來講，高級操作對應的也是收納的較高級，不常用的信息，用戶知道開啟方式就可以，連抽屜門的空間都可以節省出來。

層級化信息

空間有限，那么要想空間利用更有效，可以將空間分割，分模塊展現內容。不管是單純的list列表，瀑布流，還是其他什么形式，總會從其他維度找到剩 余空間 。類比成道路交通，飛機、道路交通、地下軌道并行，便是充分利用了空間。移動界面中同級、下級的頁面跳轉，可以利用動效帶給用戶更接近真實的空間層級感。 其中包括

a.同級多tab架構

b.下級篩選（包括下拉式和浮層式）

c.沉浸式下一級體驗

即還原了相機近大遠小的原理，通過層級分割展現更多信息頁面，這種方式的好處是每個界面都可成倍擴展。

(以上只是各類別的列舉，相同屬性的內容都可進行擴展)

變臉

在Web 設計中不會在意細小的空間，狀態條就是狀態條，即使沒有狀態，空著也好，但移動空間實屬寶貴，那么在不需要的時候顯示其他內容，也不失為一種解決方案。基于代碼實現的虛擬空間，都是可以有If-then條件的。

舉例來說就是在XX情況下，按鈕狀態為A；在XXX情況下，此按鈕狀態為B。 或者同樣區域可以顯示不同內容，承載不同的操作。

a.同區域顯示不同狀態

即延續web的狀態條邏輯，將更多狀態顯示的集成發揮到極致，實時感知情境的變化，作為與用戶直接溝通的對話窗口，承載更多信息來達到節省空間的作用。

b.同區域顯示不同功能

像輸入框的提示，情景化的按鍵等，會根據不同的框屬性，適配不同功能按鍵。如下圖所示比如聯系人列表，在默認狀態顯示聯系人列表名稱，當用戶需要搜 索時，就會展開搜索框可進行輸入。同一個區域在不同狀態下，承擔著兩種不同的任務和內容，但這種方式的局限性是可擴展范圍較小。適合一些小功能的位置集 成。下圖是某應用中的聯系人列表，很直接的一個小點就是，將聯系人列表顯示和搜索聯系人操作集成到同一區域，用戶也容易接受。

同樣同區域不同功能的變化在輸入法的按鍵上體現的更為明顯。

顯示聯系人列表

展開搜索框

目前對于移動端的應用，更多是對這種“變臉”邏輯的研究和擴展，很多產品也推出了情境化感知的概念，即擴展移動設備可感知的情境，增加if條件，讓空間利用實現到極致。包括現在熱門的對Smart Bar的討論也是同樣的道理。

因為移動設備有各種傳感器，能實時收集用戶信息，這些都是讓應用變得更加智能的前提。

補充一點

在室內設計中，由于鏡面具有反光和成像的功能，因此將其用于室內不僅能增加室內的亮度，而且能起到擴大空間感、豐富室內裝飾效果的作用。這種視錯覺 的運用同樣可以應用到移動界面設計中， 通過輕量化視覺元素， 增加轉場動效等方式來使用戶操作過程中體驗更順暢，從感受上起到擴展空間的效果。當然這更抽象到一種情感設計的層面，具體的應用方法還值得大家一起探討。

下圖同樣為主屏解鎖界面，一種是到點到點，另一種是點到邊，哪種看起來空間更開闊呢？明顯第二種會給人帶來一種可擴展的空間感，第一種就顯得完全平面化了很多，同樣是一個界面的信息，第二種就給人一種更廣闊空間的心理暗示，通過沉浸感的交互方式讓用戶感受到無限空間。

總結

好了，以上就是從建筑學空間擴展的視角出發，從收納、層級化信息、變臉和視錯覺四個層面分別對應到移動應用中,希望可以為你在移動應用中擴展信息空 間的設計帶來一點靈感，每個層面還可以擴展出更多的方式，我們一起在設計中不斷積累和總結吧，充分利用屏幕空間，讓有限的空間可以實現無限的延展。