本文源自微信公众号:学翼启 更多原创文章可访问微信号:tencentgad
手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。合理的布局设计可以使信息变得井然有序,用户可以很容易地找到自己想要的信息,产品的交互效率和信息的传递效率都得到提升。
上期我们列举了关于WEB网页设计的几种常见布局,那么本期我们一起来看看移动端常见布局又有哪些呢?
•列表式布局
•陈列馆式布局
•九宫格布局
•选项卡式布局
•旋转木马布局
•行为扩展式布局
•多面板布局
•图表式布局
1、列表式布局
特点:
内容从上向下排列,导航之间的跳转要回到初始点,好比一条街上有理发店,饭店,你想从理发店到饭店,得先多理发店出来,才能进入饭店。
优点:
1、层次展示清晰
2、视觉流线从上向下,浏览体验快捷。
3、可展示内容较长的菜单或拥有次级文字内容的标题。
不足:
1、导航之间的跳转要回到初始点。
2、同级内容过多时,用户浏览容易产生疲劳。
3、排版灵活性不是很高。
4、只能通过排列顺序、颜色来区分各入口重要程度。
场景:
列表菜单适合用来显示平级菜单,且较长或拥有次级文字内容的标题。
2、陈列馆式布局
特点:
布局比较灵活,设计师可以平均分布这些网络,也可根据内容的重要性不规则分布,相对列表式,其优点在于同样的高度下可放置更多的菜单,更具有流动性,曝布流就属于其中一种。
优点:
1、直观展现各项内容。
2、方便浏览经常更新的内容。
不足:
1、不适合展现顶层入口框架。
2、容易形成界面内容过多,显得杂乱。
3、设计效果容易呆板。
场景:
适合以图片为主的单一内容浏览型的展示。
3、九宫格布局
特点:
相比陈列馆式,布局比较稳定为一行三列式布局。
优点:
1、清晰展现各入口。
2、容易记住各入口位置,方便快速查找。
不足:
1、菜单之间的跳转要回到初始点。
2、无法向用户介绍大概的功能,只能点击进去才能获知,初始状态不如列表式明朗。
3、容易形成更深的路径。
4、不能直接展现入口内容。
5、不能显示太多入口次级内容。
场景:
适合入口比较多的展示,而且导航之间切换不是很频繁的情况,也就是业务之间相对独立,没有太多的瓜葛。
4、选项卡式布局
特点:
导航一直存在,具有选中态,可快速切换到另一个导航。
优点:
1、减少界面跳转的层级。
2、分类位置固定。
3、清楚当前所在的入口位置。
4、轻松在各入口间频繁跳转且不会迷失方向。
5、直接展现最重要入口的内容信息。
不足:
功能入口过多时,该模式显得笨重不实用。
场景:
大部分放在底部,方便用户操作,切换的时候,选中状态高亮显示,有少数放在顶部。
适合分类少及其内容同时展示,导航菜单项数量为3-5个;各导航菜单项之间内容/功能有显著差异;用户在各个导航选项之间需要非常频繁的切换操作
5、旋转木马布局
特点:
重点展示一个对象,通过手势滑动按顺序查看更多。
优点:
1、单页面内容整体性强,聚焦度高。
2、线性的浏览方式有顺畅感、方向感。
不足:
1、受屏幕宽度限制,它可显示的数量较少,需要用户进行主动探索。
2、由于各页面内容结构相似,容易忽略后面的内容。
3、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面。
场景:
适合数量少,聚焦度高,视觉冲击力强的图片展示。
6、行为扩展式布局
特点:
能在一屏内显示更多的细节,无需页面的跳转。
优点:
1、减少界面跳转的层级。
2、对分类有整体性的了解。
3、清楚当前所在的入口位置。
不足:
分类位置不固定,当展开的内容比较多时,跨分类跳转不方便。
场景:
适合分类多及其内容同时展示。
内容展示的信息多。
7、多面板布局
特点:
能同时呈现比较多的分类及内容。
优点:
1、减少界面跳转的层级。
2、对分类有整体性的了解。
3、分类位置固定。
4、清楚当前所在的入口位置。
不足:
界面比较拥挤。
场景:
适合分类多及其内容同时展示。
内容展示的信息不多。
8、图表式布局
特点:
用图表的形式直观的呈现信息。
优点:
1、总体性强。
2、直观。
不足:
详情信息显示的有限。
场景:
适合总-分结构或表现时间段内的趋势走向的展示。
小结
以上都是基本布局,在实际的设计中,我们可以像搭积木一样组合起来完成复杂的界面设计。另外要考虑到各种布局的优劣,并有最完美的布局,要考虑信息结构、重要层次以及数量上的差异,提供最适合的布局,以增加产品的易用性和交互体验。