有限屏幕的無(wú)限空間 -從空間角度談移動(dòng)界面擴(kuò)展(2)
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ì)從其他維度找到剩余空間 。類比成道路交通,飛機(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)條,即使沒(mé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ū)域顯示不同功能
本文地址:http://m.likemindfilms.com/tutorial/wd1301.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏