騰訊CDC:移動設(shè)計空間節(jié)省之道

0 評論 2130 瀏覽 0 收藏 8 分鐘

設(shè)計來源于生活。最近在裝修自己的房間,翻閱了一些相關(guān)的家居設(shè)計資料,發(fā)現(xiàn)交互設(shè)計和家居設(shè)計有很多相似的地方。小戶型空間有限,手機(jī)屏幕也只有巴掌大小,在兩種小空間上進(jìn)行設(shè)計一定很多共通之道。攜程UED的同學(xué)也是心有靈犀,很早就為我們奉獻(xiàn)了一回精彩的分析(http://ued.ctrip.com/blog/?p=2905)。對于這么有意思的主題,還是想多嘮叨幾句。

一位優(yōu)秀的廚子,必須熟練掌握切菜的各種刀法:直切、側(cè)切、推切、拉切、轉(zhuǎn)切….設(shè)計如是,在節(jié)省空間之道上,同樣有一些基礎(chǔ)“刀法”可以幫助我們打造精致的app。

1.? 聚
即聚攏、收納,最樸實的節(jié)省空間的方式之一,可以輕松將歸屬一類的東西聚集起來放一塊,辦公用品、日常小工具、化妝品、衣服、家用醫(yī)藥….能裝的,都給它裝下。

pic1

移動設(shè)計中也經(jīng)常使用actionsheet、popover這些“容器”將各種菜單、通知、相關(guān)項收到一塊。

pic2

2.藏
聚和藏有點(diǎn)類似,前者偏向歸類,后者偏向隱而不見(有點(diǎn)難理解的話可以想象下冬天衣服打包的過程,先用收納盒將衣服收起來,然后再扔進(jìn)衣柜里去,這里就涉及先聚后藏的過程)。如果將一些不經(jīng)常用到東西都藏起來,藏抽屜、藏衣柜、藏馬桶里…會省出很多空間吶。

pic3

移動設(shè)計中可隱藏的東西有三類:
(1)有形的控件:如按鈕、標(biāo)簽、菜單、導(dǎo)航…
(2)手勢與重力感應(yīng):長按刪除、橫滑翻頁、搖一搖都是這一類;
(3)操作路徑:把不常用的功能或設(shè)置項藏得深一點(diǎn),通過層層遞進(jìn)達(dá)到目的。

pic4

需要注意的是,藏是一種簡單但“略顯粗暴”的方式,移動設(shè)計不像私人空間,更多是為群體大眾設(shè)計,他們可不知道你房間的剪刀放哪,所以,如果是比較重要的特性,提供一些簡單的引導(dǎo)提示吧。

3. 換
替換,即利用共享空間交替展現(xiàn)。當(dāng)舞臺只能容下一個人表演的時候,輪流上。家居創(chuàng)意中有很多雙用的設(shè)計,辦公桌與休閑床的翻轉(zhuǎn)交替就完美地演繹了這樣一種節(jié)省之道。

pic5

手機(jī)屏幕空間非常有限,一塊小小的角落都可以成為兵家必爭之地,通過共享空間的利用,可以完成多個界面的跳轉(zhuǎn)及不同狀態(tài)之間的切換。Tab、slide page、還有各種翻轉(zhuǎn)切換都是通過空間共享的方式承載不同的信息。

pic6

4. 合
合并,咋一看和“聚”有點(diǎn)類似,不過“合并”更偏向融合,不但湊一塊,還互不干擾,形成一個整體。沙發(fā)床就是一個典型的例子。

pic7

移動設(shè)計中的合并也常常見于各種組件的組合,如輸入框與標(biāo)簽、導(dǎo)航與下拉菜單、網(wǎng)址欄的輸入框與取消/刷新按鈕等。

pic8

5. 分
在簡單收納的基礎(chǔ)上,如果將空間繼續(xù)細(xì)化,分割成不同的“小塊”,會使得擺放更有秩序。

pic9

九宮格、柵格、區(qū)域劃分…如果小屏幕里靈活運(yùn)用這些格子組合會讓界面顯得更加整齊。

pic10

6. 壓
冬天過了,厚厚的被子、枕頭、薄棉衣就收起來,真空壓縮袋絕對是收納的好幫手。

pic11

移動設(shè)計的擠壓案例也蠻多。ios4新增的inbox展示方式就是一種自上而下的擠壓處理,除此之外,facebook和path的從左往右的擠壓布局最近也特別流行。

pic12

7. 順
直接利用現(xiàn)有的邊角或邊緣位置,順著這些特殊的“點(diǎn)”進(jìn)行設(shè)計。下面的這種組合書架緊靠兩側(cè)墻面轉(zhuǎn)角位,這種順著拐點(diǎn)的巧妙設(shè)計可以為墻面節(jié)省更多的空間。

pic13

移動設(shè)計中,這些特殊的區(qū)域有那么幾種:
(1)屏幕邊緣
(2)角落
(3)控件邊緣
(4)系統(tǒng)狀態(tài)欄

如果能夠很好地利用這些特殊區(qū)域,會有各種意想不到的效果。HiQQ的鎖屏設(shè)計從原來的“點(diǎn)到點(diǎn)”演變成“點(diǎn)到邊”,非常巧妙地利用了屏幕邊緣,大大降低了操作密度。

pic14

最后,總結(jié)下七步刀法:聚、藏、換、合、分、壓、順。以上7步僅為節(jié)省空間的基礎(chǔ)“刀法”,實際的情況會更復(fù)雜,經(jīng)常需要組合使用。設(shè)計的樂趣也就在此,有章可循卻又變化莫測。
最后,準(zhǔn)備好接下來如何收拾自己的房間了嗎?

pic15

源文地址:騰訊CDC

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!