新手必看•关于移动端设计常见布局你必须知道这些...

本文源自微信公众号:学翼启  更多原创文章可访问微信号:tencentgad

手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。合理的布局设计可以使信息变得井然有序,用户可以很容易地找到自己想要的信息,产品的交互效率和信息的传递效率都得到提升。

上期我们列举了关于WEB网页设计的几种常见布局,那么本期我们一起来看看移动端常见布局又有哪些呢?

•列表式布局

•陈列馆式布局

•九宫格布局

•选项卡式布局

•旋转木马布局

•行为扩展式布局

•多面板布局

•图表式布局

1、列表式布局

新手必看•关于移动端设计常见布局你必须知道这些..._第1张图片

特点:

内容从上向下排列,导航之间的跳转要回到初始点,好比一条街上有理发店,饭店,你想从理发店到饭店,得先多理发店出来,才能进入饭店。

优点:

1、层次展示清晰

2、视觉流线从上向下,浏览体验快捷。

3、可展示内容较长的菜单或拥有次级文字内容的标题。

不足:

1、导航之间的跳转要回到初始点。

2、同级内容过多时,用户浏览容易产生疲劳。

3、排版灵活性不是很高。

4、只能通过排列顺序、颜色来区分各入口重要程度。

场景:

列表菜单适合用来显示平级菜单,且较长或拥有次级文字内容的标题。

新手必看•关于移动端设计常见布局你必须知道这些..._第2张图片

2、陈列馆式布局

新手必看•关于移动端设计常见布局你必须知道这些..._第3张图片

特点:

布局比较灵活,设计师可以平均分布这些网络,也可根据内容的重要性不规则分布,相对列表式,其优点在于同样的高度下可放置更多的菜单,更具有流动性,曝布流就属于其中一种。

优点:

1、直观展现各项内容。

2、方便浏览经常更新的内容。

不足:

1、不适合展现顶层入口框架。

2、容易形成界面内容过多,显得杂乱。

3、设计效果容易呆板。

场景:

适合以图片为主的单一内容浏览型的展示。

新手必看•关于移动端设计常见布局你必须知道这些..._第4张图片

3、九宫格布局

新手必看•关于移动端设计常见布局你必须知道这些..._第5张图片

特点:

相比陈列馆式,布局比较稳定为一行三列式布局。

优点:

1、清晰展现各入口。

2、容易记住各入口位置,方便快速查找。

不足:

1、菜单之间的跳转要回到初始点。

2、无法向用户介绍大概的功能,只能点击进去才能获知,初始状态不如列表式明朗。

3、容易形成更深的路径。

4、不能直接展现入口内容。

5、不能显示太多入口次级内容。

场景:

适合入口比较多的展示,而且导航之间切换不是很频繁的情况,也就是业务之间相对独立,没有太多的瓜葛。

新手必看•关于移动端设计常见布局你必须知道这些..._第6张图片

4、选项卡式布局

新手必看•关于移动端设计常见布局你必须知道这些..._第7张图片

特点:

导航一直存在,具有选中态,可快速切换到另一个导航。

优点:

1、减少界面跳转的层级。

2、分类位置固定。

3、清楚当前所在的入口位置。

4、轻松在各入口间频繁跳转且不会迷失方向。

5、直接展现最重要入口的内容信息。

不足:

功能入口过多时,该模式显得笨重不实用。

场景:

大部分放在底部,方便用户操作,切换的时候,选中状态高亮显示,有少数放在顶部。

适合分类少及其内容同时展示,导航菜单项数量为3-5个;各导航菜单项之间内容/功能有显著差异;用户在各个导航选项之间需要非常频繁的切换操作

新手必看•关于移动端设计常见布局你必须知道这些..._第8张图片

5、旋转木马布局

新手必看•关于移动端设计常见布局你必须知道这些..._第9张图片

特点:

重点展示一个对象,通过手势滑动按顺序查看更多。

优点:

1、单页面内容整体性强,聚焦度高。

2、线性的浏览方式有顺畅感、方向感。

不足:

1、受屏幕宽度限制,它可显示的数量较少,需要用户进行主动探索。

2、由于各页面内容结构相似,容易忽略后面的内容。

3、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面。

场景:

适合数量少,聚焦度高,视觉冲击力强的图片展示。

新手必看•关于移动端设计常见布局你必须知道这些..._第10张图片

6、行为扩展式布局

新手必看•关于移动端设计常见布局你必须知道这些..._第11张图片

特点:

能在一屏内显示更多的细节,无需页面的跳转。

优点:

1、减少界面跳转的层级。

2、对分类有整体性的了解。

3、清楚当前所在的入口位置。

不足:

分类位置不固定,当展开的内容比较多时,跨分类跳转不方便。

场景:

适合分类多及其内容同时展示。

内容展示的信息多。

新手必看•关于移动端设计常见布局你必须知道这些..._第12张图片

7、多面板布局

新手必看•关于移动端设计常见布局你必须知道这些..._第13张图片

特点:

能同时呈现比较多的分类及内容。

优点:

1、减少界面跳转的层级。

2、对分类有整体性的了解。

3、分类位置固定。

4、清楚当前所在的入口位置。

不足:

界面比较拥挤。

场景:

适合分类多及其内容同时展示。

内容展示的信息不多。

新手必看•关于移动端设计常见布局你必须知道这些..._第14张图片

8、图表式布局

新手必看•关于移动端设计常见布局你必须知道这些..._第15张图片

特点:

用图表的形式直观的呈现信息。

优点:

1、总体性强。

2、直观。

不足:

详情信息显示的有限。

场景:

适合总-分结构或表现时间段内的趋势走向的展示。

新手必看•关于移动端设计常见布局你必须知道这些..._第16张图片

小结

以上都是基本布局,在实际的设计中,我们可以像搭积木一样组合起来完成复杂的界面设计。另外要考虑到各种布局的优劣,并有最完美的布局,要考虑信息结构、重要层次以及数量上的差异,提供最适合的布局,以增加产品的易用性和交互体验。

你可能感兴趣的:(新手必看•关于移动端设计常见布局你必须知道这些...)