设计用户视线动线的必备法则(视觉动线设计原则)

编辑导语:产品在设计时需要依据用户使用习惯和用户心理来进行合理的设计规划,以此吸引、引导用户操作,提升用户使用体验,进而提升用户留存。视线落点是用户习惯的一种,本篇文章里,作者便介绍了视线落点控制的相应原理与实际应用,一起来看一下。

设计用户视线动线的必备法则(视觉动线设计原则)

文章开始前,先解释一下什么是控制视线落点。

其实就是如何在视觉载体上通过改变大小、色彩、形状等因素来控制观者的视线,从而按照设计者预期的浏览轨迹浏览,说得直白一些就是告诉用户先应该看哪儿,接下来应该注意什么,眼睛应该在哪停留,并且可能会停留多久。

那如果想要让用户的视线跟随设计者的安排来走,前提是要尊重用户的阅读习惯。那在不同情况下用户都有那些阅读习惯呢,后面我会提到几种设计法则,以及一些案例说明。

在此之前我们先了解一下中国古代书籍排版的历史,书籍在中国上千年来都是从右到左竖排版,你可以先想想为什么会是竖式拍版的方式 ?停顿10s想一想。

设计用户视线动线的必备法则(视觉动线设计原则)

一、为什么古代书籍是竖排版

1. 技术限制

在造纸术发明以前,由于受到技术的限制,古人选择了使用竹简和木片串成的简牍来作为载体,串成的竹简可以卷起保存,双手打开时简牍都是窄长的竹木片组成。而竖条上记载文字时可以产生连续性,这就导致了古人也是竖着写字和竖着阅读,用绳串起来可以卷成册,其中“册”字就是竹牍的象形字。

2. 人的生理习惯

首先竖排文字,在阅读时要从上往下看,头部能够上下活动,既可以减轻眼球的疲劳,又可以防止颈椎病(听上去是不是有点不可思议)。

1989年一名生物学学者金灿龙发表过一篇《试论汉文横竖读写与学生视力》的文章,该学者通过调查发现:看横版书籍,因为视力要左右看,要左右移动,而眨眼的动作是上下动,所以看书的时候眨眼会造成干扰,从而造成眼部疲劳。

而竖版的书因为上下的阅读动作与眨眼相互协调,还会有助于眨眼等正常生理活动,眨眼是会造成眼部血液的微循环,以及净化眼球。所以看竖版的书,不但可以增长学问,而且身心受益(有机会你也可以试试)。

3. 思想文化

当人在读竖排文字,阅读者头部需要上下运动,犹如点头句句认同,无意中表达了对古圣先贤的崇敬与认同,同时也反映了古人的尊卑思想,古代,上为君,为父母;下为臣,为子女;右为大,左为小;“无出其右”就是没有超过的意思。

而阅读横排文字时,我们需要不断摇头,潜意识就会有否定、揣测的成分,也容易造成误会。

二、为何竖排改为横排

那为何现代社会的信息传播载体,主要以横排版为主呢?

原因主要是随着社会的进步,为了满足高效的传播速度,信息生产者可以快速传播信息,同时信息接受者可以快速获得信息,再加上技术的进步,如今的书籍已经是从左往右,从上而下的读书和写字方式了。

所以我们现在看到的很多信息都是横排版,无论是报纸、电视、广告、新媒体,以及我们每天使用的App,主要还是已横排版为主,看横版的书籍可以做到一目十行,能很快将文字看完,起到一个快速阅读的作用。

当然,现如今也有文字竖排的形式,多半是为传达某种特殊的气质,所以说选择排版方式还需要看内容想要传达给受众的感受。

三、古滕堡图表法

接下来说一下古腾堡图表法,古腾堡图把显示介质分为四个象限:左上角的“第一视觉落点区”;右下角的“视觉终点区”;以及右上角的“强休区”和左下角的“弱休区”。

设计用户视线动线的必备法则(视觉动线设计原则)

根据这个图,用户的视线很自然就会以从左上方扫到右下方,并且每次扫视都沿着一条方向轴开始从左到右看。这条方向轴主要是以对齐的元素、文本行或者一些明显的元素构成的水平线,除非有特别的视觉强调。

图中左上角为“视觉落点区”,右上角为“强休区”,左下角为“弱休区”,右下角为“视觉终点区”,因此设计师都会在页面的布局中,使用这一法则,将重点关注的信息放在左上角的“视觉落点区”,如logo、大标题、大图等需要重点突出的内容;将操作类信息放在右下角的视觉落点,以顺应用户的视觉流,目的是让用户浏览完信息后产生进一步的操作,而会在“强休区”和“弱休区”放一些优先级较弱的内容。

其中“弱休区”是最容易忽略的区域,下面我列举来一些案例:

设计用户视线动线的必备法则(视觉动线设计原则)

以上案例中的视觉终点区都是放一些行动召唤的操作,因为用户在从上开始了解页面内容,然后最终视线落到右下角。

将古腾堡图表法在页面中应用,能帮助读者梳理阅读的逻辑。据研究发现,这么做能提高读者阅读的节奏和理解能力。例如,遵循古腾堡图的布局把关键元素放在左上角(如标题)、中间(内容)和右下角(操作按钮)。

以下对话框的应用也是遵循对角线从左至右,从上至下的原则,积极操作按钮的位置主要放在右下角,消极操作放在右侧。

设计用户视线动线的必备法则(视觉动线设计原则)

当遇到大量文字时,这种效果会更加明显,人的视觉就会遵循这种浏览秩序,就像我们日常阅读的书籍,也都是从左至右,然后不断继续循环往复。

四、尼尔森F型视觉模型

尼尔森的F型布局来源于网页载体,这种浏览模式比较像英文字母F的形状,所以被称为F模式,并且包括以下三个方面:

  1. 读者的眼睛首先是水平移动的,常常是扫过网页内容的最上半部分,这样就造成了一条横向的运动轨迹,这是F的第一条横线。
  2. 完成一行阅读后用户的目光略微下移,这时候扫描第二行时长度会比第一条短,这就画出了F字母中的第二条横线。
  3. 持续向下阅读时,横线会越来越短,这是由于用户在当前页面的注意力决定的。

设计用户视线动线的必备法则(视觉动线设计原则)

下面为尼尔森报告中的热度图,用颜色来表示浏览者眼光聚集的热度,分为最热(红色)、较热(黄色)、不热(蓝色)和基本不关注(灰色)4种。

设计用户视线动线的必备法则(视觉动线设计原则)

了解尼尔森的F型布局后,在实际项目中就尽量遵循用户的这种浏览规律,根据每个区域的热点程度而编排信息,从而让你想让用户看到的信息被看到。

本文由 @Tanruy 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash,基于 CC0 协议

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年8月9日 上午11:08
下一篇 2022年8月9日 上午11:10

相关推荐

  • 客户信息管理表格模板(以医疗行业为例)(医疗业务报告的格式及范文)

     经过20余年的发展,如今的CRM客户管理系统不仅仅只是分析邮件、电话等数据,而是帮助业务人员识别客户的购买行为,了解客户的需求,形成更直观、更科学的数据报表。不论如何,客户信息管…

    科研百科 2022年8月9日
    382
  • 申报科研项目技术水平包括

    科研项目申报中技术水平包括的重要性 在申报科研项目时,技术水平包括是一项非常重要的因素。技术水平包括的项目能力,能够影响到项目的进度、质量、成本等方面。因此,在申报科研项目时,选择…

    科研百科 2024年10月24日
    2
  • 留法校友招聘论坛,为拥有法国高等教育背景的你找到梦想的工作

    这里,有面向刚从法国高校毕业归国的小哥哥小姐姐开放的多领域工作岗位; 这里,也有充满挑战的工作机会等待已在职场浮沉多年,来寻找新机遇的资深职场达人; 这里,更有各大名企业HR,将与…

    科研百科 2023年5月28日
    347
  • 建设项目管理程序

    建设项目管理程序 建设项目管理程序是指在项目执行过程中,为了保证项目的成功完成,对项目执行过程进行的一系列规范和规定。这些程序旨在确保项目在预算、时间和质量方面得到良好的控制,从而…

    科研百科 2024年7月24日
    54
  • 免费的项目管理软件

    免费的项目管理软件 项目管理软件是用于帮助组织管理项目进度、资源和预算的工具。这些软件可以帮助团队更好地协作,提高项目成功的机会。今天,我们介绍一款免费的项目管理软件,它可以帮助团…

    科研百科 2024年7月22日
    56
  • 在线投资项目管理系统

    在线投资项目管理系统:提升项目管理效率 随着现代信息技术的不断发展,在线投资项目管理系统已经成为项目管理中不可或缺的一部分。这些系统可以帮助企业更好地管理和控制项目进度、成本和质量…

    科研百科 2024年12月19日
    0
  • 项目部整套管理制度范本,50项都全了(项目部管理制度大全)

    以下是上海某知名施工单位的项目部各项管理制度职责、规定范本,50项都全了!供施工单位拿来参考! 目 录 序号 名 称 备 注 1 安全生产宣传教育制度 2 班组实行上岗安全活动制度…

    科研百科 2022年7月3日
    207
  • 项目管理系统由来

    项目管理系统的起源可以追溯到20世纪70年代早期的美国。当时,由于计算机技术的发展和普及,企业开始采用项目管理的方式来提高生产效率和质量。 最初,项目管理工具主要是基于纸质的表格和…

    科研百科 2024年12月28日
    0
  • 如何做好ERP软件的业务流程优化?-蓝灵通erp(如何做好erp实施)

      现如今,在这个以信息技术为主导的时代里,ERP软件作为一种先进的企业管理模式,在实施的过程中,必然涉及到业务流程重组。因此,利用先进且实用的业务流程建模与优化工具,对企业业务流…

    2022年6月29日
    307
  • 化学工程的科研项目

    化学工程科研项目 随着科技的不断进步,化学工程领域的研究也在不断深入。在这个领域中,有许多重要的科研项目正在不断推进,这些项目旨在开发新的技术,改进现有的技术,并提高生产效率。 其…

    科研百科 2025年4月24日
    1