您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

有限屏幕的无限空间 -从空间角度谈移动界面扩展(2)

么这一种方式的关键就是“扔”和“装”都要方便,可以简单快速的将内容装进抽屉。最直接的例子就是iphone的app界面,拖动叠加即可形成一个收纳,拿出去也非常方便。

2.收纳样式,主要分为“有门抽屉”和“无门抽屉”两种

a.有门抽屉

是指即使抽屉关闭,里面的信息收纳着,也需要固定存在的入口时刻提示用户从哪里开启,像侧边栏,永远有开启按钮的。

b.无门抽屉

是指开关抽屉门的都是通过高级手势操作唤起的,连门都不需要,只需要用户知道开启方式,比如长按、滑动指定信息条等唤起。
一般来讲,高级操作对应的也是收纳的较高级,不常用的信息,用户知道开启方式就可以,连抽屉门的空间都可以节省出来。

 

层级化信息

空间有限,那么要想空间利用更有效,可以将空间分割,分模块展现内容。不管是单纯的list列表,瀑布流,还是其他什么形式,总会从其他维度找到剩余空间 。类比成道路交通,飞机、道路交通、地下轨道并行,便是充分利用了空间。移动界面中同级、下级的页面跳转,可以利用动效带给用户更接近真实的空间层级感。其中包括

a.同级多tab架构

 

b.下级筛选(包括下拉式和浮层式)

c.沉浸式下一级体验

即还原了相机近大远小的原理,通过层级分割展现更多信息页面,这种方式的好处是每个界面都可成倍扩展。

 

(以上只是各类别的列举,相同属性的内容都可进行扩展)
 

变脸

在Web 设计中不会在意细小的空间,状态条就是状态条,即使没有状态,空着也好,但移动空间实属宝贵,那么在不需要的时候显示其他内容,也不失为一种解决方案。基于代码实现的虚拟空间,都是可以有If-then条件的。
举例来说就是在XX情况下,按钮状态为A;在XXX情况下,此按钮状态为B。 或者同样区域可以显示不同内容,承载不同的操作。

a.同区域显示不同状态

即延续web的状态条逻辑,将更多状态显示的集成发挥到极致,实时感知情境的变化,作为与用户直接沟通的对话窗口,承载更多信息来达到节省空间的作用。

b.同区域显示不同功能

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd1301.html
CSS布局中一个简单的应用BFC的例子
关于注册登录的设计原则之三:不要扔下你的新用户不管
图趣网微信
建议反馈
×