首页
业务
关于
客户
服务
联系
13520390899
资 深 的 互 联 网 开 发 服 务 商
专注于 网站开发 / 小程序开发 / APP开发 / 软件开发
网十科技 > 动态

大峪APP设计排版F型布局可读性更强

网十科技编者为你推出《APP设计排版F型布局可读性更强》。

虽然APP排版方式千变万化,但是布局方式通常都遵循着几种常见的规则。在诸多布局方式当中,,F式布局是可用性较强,且适用范围较广的一种。今天的文章同你来探讨F式布局在APP中的运用。

F式布局的设计基础是用户扫视内容的时候,实现的运动轨迹和字母F相似,而布局匹配这种这种阅读方式可以让用户更快地获取信息,因此得名为F式布局。

F式布局源于NNGroup的一项眼动研究项目,他们跟踪了超过200名用户浏览各种APP时的眼动轨迹,发现用户的眼球快速浏览APP时,尤其是在快速浏览文字内容的时候,眼球的运动轨迹类似字母F,并且整个运动过程遵循下面三个部分:

用户先会沿着水平方向浏览,优先浏览内容块的上部,这个时候的眼动构成了字母F最上面一横。

接下来视线会沿着屏幕左侧向下垂直扫视,寻找段落中能引起兴趣点的内容,当他们发现引起他们兴趣的内容之时,继续横向仔细浏览,而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些,而这个视线轨迹则构成了字母F中间的一横。

接下来用户会将视线移到屏幕左侧,继续向下浏览。

我们浏览内容的方式被训练为从左上角开始水平浏览,回到左侧向下扫视找到兴趣点,继续横向浏览。

NNGroup的眼动跟踪研究证明了这一点,红色的部分是用户感兴趣的区域,黄色的区域次之,不感兴趣的则为蓝色的区域,灰色的区域是用户直接忽略不作停留的部分。

显然,用户的浏览过程并不全是分为三个部分,但是它的模式是沿用下来的。

F式布局能让你创造出更加富有层次感的设计,这样的设计更容易为用户浏览和获取信息。对于世界范围内绝大多数的国家和地区而言,F式布局是非常符合阅读习惯的。这种规则使得它可以广泛运用在UI和APP设计上。

诸如新闻和博客这种重文本内容的APP是适合F式布局的,它主要适用于文本的阅读。

CNN就是使用F式布局的

F式布局让设计师能够更好控制内容的可见性。

1、确定内容的优先级

如果你对于页面中内容的轻重缓急有着足够的了解,那么就可以结合用户的浏览习惯,将重要的内容排布在用户视线时常停留的位置。让这些呈现重要内容的“热点区域”承载核心的交互。

2、设置初始预期

文本的前几段内容是非常之重要的。尽量让最核心、最重点的内容放置在页面的顶端,这也是为什么标题、引言和导航栏是如此的重要的原因。

用户能够在几秒钟之内快速读取内容。

3、为速读而设计

4、善用侧边栏

侧边栏通常可以帮助用户深入到下一个层级,用户的交互也更加的深入:

提供用户想要看到的内容,而不是广告、相关文章和小控件这样的东西。

将它设计成为用户找到特定内容的工具。最常见的设计是目录列表,标签云和“最多点击”文章列表。相关的APP设计排版技巧,可点击直接浏览。

5、避免无聊的布局

7x24
售后服务支持
10
故障时长赔付
16
16年行业服务经验
20
售后服务人员
70
设计、开发团队
10
国内顶尖技术专家
1000
大型及上市企业
版权所有 © 北京网十互动科技有限公司 网站 APP 小程序 软件 备案号:京ICP备16050073号-2

电话咨询