界面布局| 移动端常见8种界面布局的分析与运用

界面布局,是通过引导用户在页面上的注意力来完成对含义、顺序和交互发生点的传达。布局和导航是产品的骨架,是页面的重要构成模式之一,是作为后续展开页面设计的基础,可以为产品奠定交互和视觉风格。在实际的设计中,要考虑信息优先级和各种布局方式的契合度,采用最合适的布局,以提高产品的易用性和交互体验。

移动端不同于PC端,最大的区别是屏幕尺寸的限制,相同的内容显示效率要低很多。作为交互设计师需要对信息进行优先级划分,并且合理布局,提升信息的传递效率。

常见的8种移动端界面布局方式包括8种:

1、列表式布局

2、宫格式布局

3、仪表布局

4、卡片布局

5、瀑布流布局

6、Gallery布局

7、手风琴布局

8、多面板布局

关于这些布局的使用规则,主要有4点:

1、牢记业务目标

2、分析信息优先级

3、分析用户核心行为

4、考虑浏览模式

下面就来详细的聊聊各布局对应的特征和使用场景:

1、列表式布局

特征:

1、纵向长度没有限制,上下滑动可查看无限内容;

2、视觉上整齐美观,用户接受度很高;

3、可以展示全部内容和次级内容的标题。

使用场景:

常用于并列元素的展示,包括目录、分类、内容等。

knnw41hlvht.jpg插图

2、宫格式布局

宫格式导航被广泛应用于各平台系统的中心页面,或作为一系列工具入口的聚合;在不同的文章中可能被称作:跳板(图标卡片式)、磁贴式。

特征:

1、各入口展示清晰,方便快速查找。

2、扩展性好,便于组合不同的信息类型(运营位、广告位、内容块、设置等);

使用场景:

适合展示较多入口,且各模块相对独立。

rvvjawhebw0.jpg插图(1)

3、仪表布局

特征:展示更加直观,但信息展示量少,过于单一。

使用场景:适合表现趋势走向的展示。

3vbjrwyd4yx.jpg插图(2)

4、卡片布局

特征:

1、每个卡片信息承载量大,转化率高;

2、每张卡片的操作互相独立,互不干扰。

3、每个卡片页面空间的消耗大,一屏可展示信息少,用户操作负荷高。

使用场景:

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

hspj0wwxsiq.jpg插图(3)

5、瀑布流布局

特征:

1、瀑布流图片展现具有吸引力;

2、瀑布流里的加载模式能获得更多的内容,容易沉浸其中;

3、瀑布流错落有致的设计巧妙利用视觉层级,同时视线任意流动缓解视觉疲劳。

但页面跳转后需要从头开始,加载量不固定,理论上是无限延展;且用户返回查找信息困难很大。

使用场景:

适用于实时内容频繁更新的情况。

zp110l2ifse.jpg插图(4)

6、Gallery布局

特征:

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

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

但可显示的数量有限,需要用户探索;且不具有指向性查看页面,必须按顺序查看页面。

使用场景:

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

1p3v30zarbp.jpg插图(5)

7、手风琴布局

特征:

1、两级结构可承载较多信息,同时保持界面简洁;

2、减少界面跳转,提高操作效率高。

但如果同时打开多个手风琴菜单,分类标题不易寻找,且容易将页面布局打乱。

使用场景:

适用于两级结构的内容,并且二级结构可以隐藏。

yoexkbyqfk5.jpg插图(6)

8、多面板布局

特征:

1、减少界面跳转;

2、分类一目了然。

但两栏设计使界面比较拥挤;且分类很多时,左侧滑动区域过窄,且不利于单手操作。

使用场景:

适合分类多并且内容需要同时展示。

mdzsmho1rk4.jpg插图(7)

以上这些基本布局方式,在实际的设计中,要考虑信息优先级和各种布局方式的契合度,采用最合适的布局,以提高产品的易用性和交互体验。

关于这些布局的使用规则,总的来说,主要有4点:

1.牢记业务目标

每一个产品都有商业目标。要实现这些目标,创意团队需要确定哪些UI元素更重要,并根据角色优先考虑。比如,电子商务网站上的所有元素都执行各种不同的任务。项目图片是第一层级,因为它必须让客户去认知它。标题是解释产品是什么,其次是按钮鼓励人们去购买。根据产品的业务目标和营销目标,设计团队可以有效的优化视觉元素突出产品,让人印象深刻。

2. 分析信息优先级

一级信息吸引用户:假设用户只会在这个页面停留3-5秒,最能够吸引用户继续浏览的是页面的核心卖点,是一级信息,它必须少而精,在设计上要重点展示;

二级信息帮助理解:有了一级信息的吸引,用户进一步了解内容而可能停留3-5分钟,这时展示二级信息即提炼的精华内容,帮助用户在尽量短时间内理解信息;

三级信息详细了解:前两类信息基本上能帮助用户获取足够的信息,用户如果继续停留更长的时间去详细了解,这类信息量会更多,在设计上视觉层级会靠后,或通过交互方式展示、提供入口跳转。

gr3loysw0nb.jpg插图(8)

3. 分析用户核心行为

不同类型用户会在不同阶段产生不同的行为,我们需要判断这些行为最终导向是什么?有了这些分析,交互产出文档中会给予大模块的信息优先级和用户行为优先级,哪些需要重要展示,哪些信息可以弱化。交互稿可以通过黑白灰来展示页面的信息层级。

qewladrsulg.png插图(9)

4.考虑浏览模式

人们会大致的浏览页面以确定是否对产品感兴趣。

Z形暗示线路

一般出现在不太复杂的页面上,或者不需要向下滚动的页面上。人们首先从左上角开始扫描页面头部,搜索核心内容,然后沿着对角线向下到对角,在最底部从左到右结束。

使用暗示线路把页面上的元素串在一起,曲线或直线都可以,这样视线就可以顺着这条线索往下阅读。

2t5gecjuqsk.jpg插图(10)

行动召唤

把你希望用户最先看到的文字放在行动号召上面,如果文字不重要,可以把行动号召放在空白的地方。

b4orl1qiwwr.jpg插图(11)

好了,本期关于移动端常见8种界面布局的分析到这里就结束了,希望对大家有所帮助。如果大家同样对这些方面有些兴趣或者看了后有些什么想法,欢迎一起讨论。

原文地址:Alkaid UX(公众号)

作者:北冥Alkaid

人已赞赏
UI设计

UI组件-滑块 用户超爱的选择小助手

2020-10-13 2:05:11

UI设计

砂之船奥莱数字化零售项目

2020-10-13 2:05:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索