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

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

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

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

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

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

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

PS：關(guān)于如何設(shè)計(jì)引導(dǎo)提示，請(qǐng)參考
http://www.alibuybuy.com/posts/66389.html
http://ucdchina.com/snap/11231
….

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

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

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

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

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

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

6. 壓
冬天過(guò)了，厚厚的被子、枕頭、薄棉衣就收起來(lái)，真空壓縮袋絕對(duì)是收納的好幫手。

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

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

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

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

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

源文地址：騰訊CDC

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
“優(yōu)設(shè)網(wǎng)uisdc.com“是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語(yǔ)音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量39萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)?，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的”福利”嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：