有限屏幕的無(wú)限空間 -從空間角度談移動(dòng)界面擴(kuò)展
移動(dòng)產(chǎn)品大家都不會(huì)陌生,幾乎是無(wú)所不能,可以隨時(shí)隨地滿足用戶的多種需求。那么移動(dòng)產(chǎn)品設(shè)計(jì)呢?有沒(méi)有遇到類(lèi)似的情況,PM小A說(shuō):產(chǎn)品要增加功能, 在界面上加個(gè)入口,小意思嘛。小B說(shuō):內(nèi)容太少了,咱們?cè)贁U(kuò)展一下頁(yè)面,沒(méi)有難度嘛。小C說(shuō):能不能擠一擠多放個(gè)功能?用戶真的有需求…
可界面的空間是有限的,內(nèi)容需求卻是無(wú)限的, 從3.5寸到5.2寸到9.7寸的pad,不管多大尺寸的屏幕,都逃脫不了這樣的命運(yùn)。就像房屋的空間和放在里面的東西,永遠(yuǎn)存在東西放不下的問(wèn)題。既然是同類(lèi)的問(wèn)題,能不能從相同的角度出發(fā)來(lái)找到解決方案呢?
在建筑學(xué)中,空間主要指視覺(jué)層面感受到的幾何學(xué)意義的三維物理空間,也就是空間中的人對(duì)環(huán)境的一種三維層面的感受。因此空間擴(kuò)展就是從不同維度來(lái)尋求解決方法,包括收納、層級(jí)化分割和視覺(jué)感受擴(kuò)張等。類(lèi)比到移動(dòng)產(chǎn)品的體驗(yàn)上,最基礎(chǔ)的也是如何讓有限的屏幕承載更多的功能,讓用戶感受到空間的舒適。本文就借助建筑學(xué)的空間擴(kuò)展概念,從信息收納、層級(jí)化信息、變臉和視錯(cuò)覺(jué)四個(gè)維度來(lái)談?wù)勂聊豢臻g的擴(kuò)展。
收納
顧名思義,把不用的東西收起來(lái),表面上干干凈凈,打開(kāi)會(huì)找到想要的內(nèi)容,這種方式特別適合零碎功能的整合。
1.收納方式分類(lèi),主要有以下三種。
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)用戶需求就能快速拉開(kāi)調(diào)起,非常方便。
b. 定義好收納規(guī)則后,用戶隨意擴(kuò)展內(nèi)容。
這種收納方式特別適用于記事類(lèi)或者日程類(lèi)的應(yīng)用,因?yàn)橄鄬?duì)來(lái)說(shuō),這類(lèi)應(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.收納樣式,主要分為“有門(mén)抽屜”和“無(wú)門(mén)抽屜”兩種
a.有門(mén)抽屜
是指即使抽屜關(guān)閉,里面的信息收納著,也需要固定存在的入口時(shí)刻提示用戶從哪里開(kāi)啟,像側(cè)邊欄,永遠(yuǎn)有開(kāi)啟按鈕的。
b.無(wú)門(mén)抽屜
是指開(kāi)關(guān)抽屜門(mén)的都是通過(guò)高級(jí)手勢(shì)操作喚起的,連門(mén)都不需要,只需要用戶知道開(kāi)啟方式,比如長(zhǎng)按、滑動(dòng)指定信息條等喚起。
一般來(lái)講,高級(jí)操作對(duì)應(yīng)的也是收納的較高級(jí),不常用的信息,用戶知道開(kāi)啟方式就可以,連抽屜門(mén)的空間都可以節(jié)省出來(lái)。
層級(jí)化信息
空間有限,那么要想空間利用更有效,可以將空間分割,分模塊展現(xiàn)內(nèi)容。不管是單純的list列表,瀑布流,還是其他什么形式,總會(huì)從其他維度找到剩余空間 。類(lèi)比成道路交通,飛機(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ò)展。
(以上只是各類(lèi)別的列舉,相同屬性的內(nèi)容都可進(jìn)行擴(kuò)展)
變臉
在Web 設(shè)計(jì)中不會(huì)在意細(xì)小的空間,狀態(tài)條就是狀態(tài)條,即使沒(méi)有狀態(tài),空著也好,但移動(dòng)空間實(shí)屬寶貴,那么在不需要的時(shí)候顯示其他內(nèi)容,也不失為一種解決方案?;诖a實(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ì)展開(kāi)搜索框可進(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)的更為明顯。
目前對(duì)于移動(dòng)端的應(yīng)用,更多是對(duì)這種“變臉”邏輯的研究和擴(kuò)展,很多產(chǎn)品也推出了情境化感知的概念,即擴(kuò)展移動(dòng)設(shè)備可感知的情境,增加if條件,讓空間利用實(shí)現(xiàn)到極致。包括現(xiàn)在熱門(mén)的對(duì)Smart Bar的討論也是同樣的道理。
因?yàn)橐苿?dòng)設(shè)備有各種傳感器,能實(shí)時(shí)收集用戶信息,這些都是讓?xiě)?yīng)用變得更加智能的前提。
補(bǔ)充一點(diǎn)
在室內(nèi)設(shè)計(jì)中,由于鏡面具有反光和成像的功能,因此將其用于室內(nèi)不僅能增加室內(nèi)的亮度,而且能起到擴(kuò)大空間感、豐富室內(nèi)裝飾效果的作用。這種視錯(cuò)覺(jué)的運(yùn)用同樣可以應(yīng)用到移動(dòng)界面設(shè)計(jì)中, 通過(guò)輕量化視覺(jué)元素, 增加轉(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)空間更開(kāi)闊呢?明顯第二種會(huì)給人帶來(lái)一種可擴(kuò)展的空間感,第一種就顯得完全平面化了很多,同樣是一個(gè)界面的信息,第二種就給人一種更廣闊空間的心理暗示,通過(guò)沉浸感的交互方式讓用戶感受到無(wú)限空間。
總結(jié)
好了,以上就是從建筑學(xué)空間擴(kuò)展的視角出發(fā),從收納、層級(jí)化信息、變臉和視錯(cuò)覺(jué)四個(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ú)限的延展。
來(lái)源:百度MUX
關(guān)于最下面解鎖的對(duì)比例子,第二個(gè)所謂的更開(kāi)闊的代價(jià)是要犧牲用戶體驗(yàn)..
比如要由鎖屏直接到打電話,用戶需要的觸屏操作居然要拉半個(gè)屏幕。。你想想用戶什么情況下才要拉半個(gè)屏幕的距離——很少,特別是超大屏幕的手機(jī)——不敢想象了