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

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

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

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

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

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

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

相关推荐

  • 告诉你4个成功而有效的项目时间管理方法(项目时间管理的过程和方法)

    00 引言 项目成功三要素(时间/质量/成本)中的一个就是有效的时间管理,时间是项目经理最想要的商品,却是经常拥有的最少的。随着商业世界正在以越来越快的速度发展,对于项目经理来说,…

    2022年6月4日
    263
  • 员工人事档案管理系统

    员工人事档案管理系统 员工人事档案管理系统是一种用于管理员工档案的软件,可以帮助企业有效地管理员工信息,提高工作效率。该系统可以存储员工的基本信息,如姓名、身份证号码、联系方式、工…

    科研百科 2024年8月13日
    39
  • 实操丨详解百度智能化人才管理方案(百度人才计划)

    百度是拥有强大互联网基础的领先AI公司。是全球为数不多的提供AI芯片、软件架构和应用程序等全栈AI技术的公司之一,被国际机构评为全球四大AI公司之一。百度以“用科技让复杂的世界更简…

    2022年6月13日
    1.7K
  • 科研项目预算的合理性

    科研项目预算的合理性 科研项目预算是项目成功的关键之一,合理的预算能够确保项目能够按时、按质量完成,并达到预期的效果。然而,科研项目预算的合理性并不是一个简单的问题,它需要综合考虑…

    科研百科 2025年5月29日
    1
  • 普仁医院科研教学楼(3期)项目

    普仁医院科研教学楼(3期)项目 普仁医院是一所拥有悠久历史和优秀声誉的大型综合性医院,它位于中国广东省广州市,是中国南方地区的著名医院之一。为了满足医院科研和教学的需求,普仁医院决…

    科研百科 2024年10月29日
    1
  • 时间app管理

    时间app管理 随着现代生活的不断加速,时间管理已经成为人们日常生活中不可或缺的一部分。越来越多的人开始使用各种应用程序来管理时间,例如日历、任务列表和待办事项清单等。这些应用程序…

    科研百科 2024年10月1日
    29
  • 武汉大学科研项目申请

    武汉大学科研项目申请 近年来,随着科技的不断进步,科研项目申请已成为各大高校的重要工作之一。作为一所著名的综合性大学,武汉大学一直致力于推动学术研究和科技创新,因此也吸引了大量科研…

    科研百科 2025年3月22日
    0
  • 科研项目验收科技处发言

    科研项目验收科技处发言 尊敬的各位嘉宾,大家好! 今天,我很荣幸能够在这里代表科研项目验收科技处,向大家汇报我们近期的工作情况和成果。 在过去的一年中,我们一直致力于推动科研项目的…

    科研百科 2024年11月10日
    2
  • 科研项目情况汇总怎么写

    科研项目情况汇总 随着科技的不断发展,科研项目也在不断地进行着。在这些项目中,有许多研究涉及到人类健康、环境保护、科学技术等领域。本文将对这些项目的情况进行汇总,以便读者更好地了解…

    科研百科 2025年2月4日
    0
  • 科研经费管理细则,安排项目启动会议(科研启动经费管理办法)

    项目启动会议的完成,会将项目从准备阶段过渡到启动阶段。启动阶段的目的,是开始执行工作计划中的任务,同时收集建立基准预算所需的信息。该阶段表明,在制定基准预算的同时,项目计划仍在继续…

    科研百科 2022年7月18日
    244