移动端设计稿一般是什么尺寸?为什么选择这个尺寸?(移动端设计中分辨率数值设置)
本文转载自:三分设
欢迎大家来到益达小讲堂
移动端设计样式库-导航设计遮挡或覆盖原来的页面的内容,原页面附上黑色透明图层,来模拟位于侧导后面的视觉效果。
案例1:浮层型
滴滴打车和优酷使用浮层型侧边抽屉式导航,侧导分别使用列表式和桌面式导航,侧导浮在原首页的上面,占据大面积的屏幕操作。
案例2:浮层拓展式
浮层式拓展式:侧导遮挡原页面的同时,原页面增加了尺寸的缩放变化,加强了侧导浮层的视觉效果
嵌入型:通过轻滑或点击的手势调出抽屉,把原先的页面内容部分推出屏幕外。一般有两种视觉表现方式:后页嵌入型和前页嵌入型
案例3:后页嵌入型
QQ安全中心和MANGO,用户点击侧导入口,侧边导航页面和原页面向右移动,侧边导航页面在原页面的后面,表现用户将原页面移开的感觉。
案例4:前页嵌入型
QQ音乐和京东阅读,用户点击侧导入口,侧边导航页面和原页面向右移动,同时原页面附上黑色半透明层,来表现侧导位在原页面的前面。
这种类型的嵌入式与浮层型有什么区别呢?
嵌入式:原页面是有位移变化的,侧导将原页面推出边界。
新兴型:打开侧边抽屉的时候,嵌入式抽屉不仅把上一级页面向右推开,并伴随着原页面尺寸的等比缩放。
案例5:新兴型
千牛和酷狗音乐的侧边导航应该也算是嵌入式的一种拓展样式,在动效和视觉效果做的更加丰富,还蛮酷的。
小贴士:
侧边抽屉式导航的设计样式选择很多,但主要是展示主导的选项,切忌不要承载过多的功能,我们制定出应用的信息架构,应该做出几种不同的应用原型进行测试,看看哪一个设计最好。
下拉菜单式
下拉菜单式简称下拉式,导航菜单以浮窗形式位于界面上层,与侧边抽屉式一样,下拉菜单也可以是嵌入式,将源页面内容推到菜单之下;也可以是浮层式,菜单层浮在原页面之上,可通过点击导航菜单以外的区域使其收起。
由于是位于屏幕上方,相对隐蔽而且不能结合手势操作,所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容。
案例6:下拉菜单式(列表展示)
支付宝、QQ的下拉菜单用于快速启动某些常用的功能模块。点击界面其他区域即可隐藏菜单有位移变化的,侧导将原页面推出边界。
案例6:下拉菜单式(桌面式展示)
百度云盘、微博的下拉菜单用于信息的筛选,对同一个类别下的不同视图间进行导航,而不是跳转到完全不同的类别,视觉样式于原生的Spinner控件不同,在能实现目标的情况下,设计本不因拘泥于规范。
点聚式
适用于应用以展示核心内容为目的,要求界面有极高的简洁性的应用。现今由于业务涉及更多用户场景,应用的不断延展功能,点聚式常和底部标签式主导航以二级导航出现,是舵式导航其中的一种表现样式之一。
案例7:点聚式
Path是最早使用点聚式作为主导航的应用,早期的版本类似 Path talk的样式,现因业务的拓展将点聚式常常作为次级导航与其他导航模式组合运用
案例8:点聚式(用户次级导航)
通过点击“+”一个点的方式汇聚功能入口,固定“点”的位置,只做视觉状态样式的变化
如何决定使用全局导航还是瞬时导航?
- 应用功能层级是否扁平单一?菜单分类是同类级还是优先级?类别是否只有3-5个?
- 用户是否需要菜单功能分类一直处于可见,用户是否需要快速跳转功能间访问?
- 菜单分类有没有状态指示,内容变化是否高频,例如未读消息数?
如果可以满足以上至少其中的一点,这个时候益达建议使用全局导航。
我们一起简单的了解了一下在移动端导航设计中瞬时导航的分类和一些常用应用处理的形式,希望带给小伙伴小小收获。
因为个人知识的片面性和主观判断,会有一些文字阐述和理解偏差以及信息的遗漏和缺失,还请小伙伴们多多指出,让我们一起探讨,一起进步。
同时我们会不断的完善优化发送给小伙伴的文章,沉淀在公众号的系列文章中,让小伙伴作为自身做一点小小积累。请多多关注我们的公众号!
参考文献:
《Mobile Design Pattern Gallery:UI Patterns for Smarthphone Apps》
文中用图:参考各类国内知名在线应用,作为案例
作者创办的设计公众号,分享原创设计文章
聊设计|公众号