有限屏幕的無(wú)限空間 -從空間角度談移動(dòng)界面擴(kuò)展
移動(dòng)產(chǎn)品大家都不會(huì)陌生,幾乎是無(wú)所不能,可以隨時(shí)隨地滿足用戶的多種需求。那么移動(dòng)產(chǎn)品設(shè)計(jì)呢?有沒(mé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)題。既然是同類的問(wèn)題,能不能從相同的角度出發(fā)來(lái)找到解決方案呢?
在建筑學(xué)中,空間主要指視覺(jué)層面感受到的幾何學(xué)意義的三維物理空間,也就是空間中的人對(duì)環(huán)境的一種三維層面的感受。因此空間擴(kuò)展就是從不同維度來(lái)尋求解決方法,包括收納、層級(jí)化分割和視覺(jué)感受擴(kuò)張等。類比到移動(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.收納方式分類,主要有以下三種。
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)容。
這種收納方式特別適用于記事類或者日程類的應(yīng)用,因?yàn)橄鄬?duì)來(lái)說(shuō),這類應(yīng)用的主要信息源是用戶本身,且縱向無(wú)法預(yù)估和控制信息的量級(jí)。那么這樣一種定義好收納規(guī)則,但內(nèi)容無(wú)限的方式就特別適用了。下圖就是一種典型的記事本信息收納方式。
c. 用戶自定義規(guī)則和內(nèi)容,隨時(shí)可以整理替換抽屜的內(nèi)容。
既然空間交給用戶,怎樣分割和收納都由用戶自定義,那
本文地址: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ì)系列文章(二):全屏