移動(dòng)產(chǎn)品大家都不會(huì)陌生，幾乎是無(wú)所不能，可以隨時(shí)隨地滿足用戶的多種需求。那么移動(dòng)產(chǎn)品設(shè)計(jì)呢？有沒有遇到類似的情況，PM小A說(shuō)：產(chǎn)品要增加功 能， 在界面上加個(gè)入口，小意思嘛。小B說(shuō)：內(nèi)容太少了，咱們?cè)贁U(kuò)展一下頁(yè)面，沒有難度嘛。小C說(shuō)：能不能擠一擠多放個(gè)功能？用戶真的有需求…

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

在建筑學(xué)中，空間主要指視覺層面感受到的幾何學(xué)意義的三維物理空間，也就是空間中的人對(duì)環(huán)境的一種三維層面的感受。因此空間擴(kuò)展就是從不同維度來(lái)尋 求解決方法，包括收納、層級(jí)化分割和視覺感受擴(kuò)張等。類比到移動(dòng)產(chǎn)品的體驗(yàn)上，最基礎(chǔ)的也是如何讓有限的屏幕承載更多的功能，讓用戶感受到空間的舒適。本 文就借助建筑學(xué)的空間擴(kuò)展概念，從信息收納、層級(jí)化信息、變臉和視錯(cuò)覺四個(gè)維度來(lái)談?wù)勂聊豢臻g的擴(kuò)展。

收納

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

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

a. 定義好收納規(guī)則和內(nèi)容

即規(guī)定整理好要呈現(xiàn)給用戶的功能，這一種的關(guān)鍵點(diǎn)就是抽屜的標(biāo)簽，讓用戶在關(guān)著的情況下能究竟收在哪里，入口在哪里。

那么收納的形式呢? 從交互模型來(lái)看有很多種，最典型的像Path 的側(cè)邊欄式，上下折疊式，沉入式，還有Android系統(tǒng)級(jí)操作的處理方法。目的都是在用戶不會(huì)用到的時(shí)候，把相關(guān)的信息藏起來(lái)，收起來(lái)，并且有個(gè)永遠(yuǎn)存在的入口，當(dāng)用戶需求就能快速拉開調(diào)起，非常方便。

b. 定義好收納規(guī)則后，用戶隨意擴(kuò)展內(nèi)容。

這種收納方式特別適用于記事類或者日程類的應(yīng)用，因?yàn)橄鄬?duì)來(lái)說(shuō)，這類應(yīng)用的主要信息源是用戶本身，且縱向無(wú)法預(yù)估和控制信息的量級(jí)。那么這樣一種定義好收納規(guī)則，但內(nèi)容無(wú)限的方式就特別適用了。下圖就是一種典型的記事本信息收納方式。

c. 用戶自定義規(guī)則和內(nèi)容，隨時(shí)可以整理替換抽屜的內(nèi)容。

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

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

a.有門抽屜

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

b.無(wú)門抽屜

是指開關(guān)抽屜門的都是通過(guò)高級(jí)手勢(shì)操作喚起的，連門都不需要，只需要用戶知道開啟方式，比如長(zhǎng)按、滑動(dòng)指定信息條等喚起。

一般來(lái)講，高級(jí)操作對(duì)應(yīng)的也是收納的較高級(jí)，不常用的信息，用戶知道開啟方式就可以，連抽屜門的空間都可以節(jié)省出來(lái)。

層級(jí)化信息

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

a.同級(jí)多tab架構(gòu)

b.下級(jí)篩選（包括下拉式和浮層式）

c.沉浸式下一級(jí)體驗(yàn)

即還原了相機(jī)近大遠(yuǎn)小的原理，通過(guò)層級(jí)分割展現(xiàn)更多信息頁(yè)面，這種方式的好處是每個(gè)界面都可成倍擴(kuò)展。

(以上只是各類別的列舉，相同屬性的內(nèi)容都可進(jìn)行擴(kuò)展)

變臉

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

舉例來(lái)說(shuō)就是在XX情況下，按鈕狀態(tài)為A；在XXX情況下，此按鈕狀態(tài)為B。 或者同樣區(qū)域可以顯示不同內(nèi)容，承載不同的操作。

a.同區(qū)域顯示不同狀態(tài)

即延續(xù)web的狀態(tài)條邏輯，將更多狀態(tài)顯示的集成發(fā)揮到極致，實(shí)時(shí)感知情境的變化，作為與用戶直接溝通的對(duì)話窗口，承載更多信息來(lái)達(dá)到節(jié)省空間的作用。

b.同區(qū)域顯示不同功能

像輸入框的提示，情景化的按鍵等，會(huì)根據(jù)不同的框?qū)傩裕m配不同功能按鍵。如下圖所示比如聯(lián)系人列表，在默認(rèn)狀態(tài)顯示聯(lián)系人列表名稱，當(dāng)用戶需要搜 索時(shí)，就會(huì)展開搜索框可進(jìn)行輸入。同一個(gè)區(qū)域在不同狀態(tài)下，承擔(dān)著兩種不同的任務(wù)和內(nèi)容，但這種方式的局限性是可擴(kuò)展范圍較小。適合一些小功能的位置集 成。下圖是某應(yīng)用中的聯(lián)系人列表，很直接的一個(gè)小點(diǎn)就是，將聯(lián)系人列表顯示和搜索聯(lián)系人操作集成到同一區(qū)域，用戶也容易接受。

同樣同區(qū)域不同功能的變化在輸入法的按鍵上體現(xiàn)的更為明顯。

顯示聯(lián)系人列表

展開搜索框

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

因?yàn)橐苿?dòng)設(shè)備有各種傳感器，能實(shí)時(shí)收集用戶信息，這些都是讓應(yīng)用變得更加智能的前提。

補(bǔ)充一點(diǎn)

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

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

總結(jié)

好了，以上就是從建筑學(xué)空間擴(kuò)展的視角出發(fā)，從收納、層級(jí)化信息、變臉和視錯(cuò)覺四個(gè)層面分別對(duì)應(yīng)到移動(dòng)應(yīng)用中,希望可以為你在移動(dòng)應(yīng)用中擴(kuò)展信息空 間的設(shè)計(jì)帶來(lái)一點(diǎn)靈感，每個(gè)層面還可以擴(kuò)展出更多的方式，我們一起在設(shè)計(jì)中不斷積累和總結(jié)吧，充分利用屏幕空間，讓有限的空間可以實(shí)現(xiàn)無(wú)限的延展。