常用UI设计法则 (2):序列位置效应

用户头像
北京/UI设计师/4年前/388浏览
常用UI设计法则 (2):序列位置效应

本篇主要分享处于序列中不同位置的内容,会影响用户对其的记忆效果。

前言:

在文章开始之前,我们先做一道简单的测试题,快速阅读下面的题目:

甲方爸爸A是一位睿智、积极、固执、自私、冷漠、冲动、真诚、谦逊的人;甲方爸爸B是一位冷漠、固执、积极、谦逊、真诚、睿智、冲动、自私的人。

请问你更喜欢哪一位甲方爸爸?记住你的答案,本篇文章将会给出合理的解释。


什么是系列位置效应:

系列位置效应本质上是一种心理学现象,由德国心理学家艾宾浩斯(H.Ebbinghaus)提出。他在研究“遗忘曲线”的过程中发现当自己回忆一系列项目时,回忆的准确性会随着项目在列表中位置的改变而改变:

研究表明:处于开头和结尾位置的回忆准确率较高,而中间部分的回忆准确率较低,这种接近开头和末尾的记忆效果好于中间部分的趋势就是序列位置效应。


其中开头比中间记得好称为首因效应(或首位效应),末尾比中间记得好称为近因效应(或新近效应),效果较差的中间部分称为渐近部分。

通俗地讲,就是在回忆时,我们更容易记起排在最前面和最后面的内容,而排在中间的内容往往容易被忽略。



1.首因效应(首位效应):

系列中的起始项目更能有效的储存在长期记忆中,并能被快速回忆起来。


案例1:Web版页面的导航中,绝大多数Logo位于左上角,为什么?

因为这种固定的设计样式每次都是最先出现在我们的视野里,并被储存在了长期记忆之中。即使是网络较差没加载出页面的情况下,我们依然知道这里是什么。此外,将Logo放置在首因位置还能加深用户对产品的品牌识别性。


案例2:

绝大多数App标签栏,首尾固定的两个Tab几乎都是首页和个人中心(近因效应),也是运用序列位置效应。但这种固定模式限制了icon的延展性,千篇一律的首页icon极易引起用户的视觉疲劳。因此部分产品以自己本身的应用图标代替首页的Tab,同样起到强化品牌和用户记忆的作用。


2.近因效应(新近效应):

系列中的结尾项目很容易储存在短期记忆中,保持时间很短。

短期记忆是神经连接的暂时性强化,通过巩固后可变为长期记忆。因此在设计时通常将近因位置的内容通过不同的设计手段突出展示,加深用户记忆。


案例3:

为什么电商类App都喜欢将购买相关的按钮悬浮固定在屏幕底部右侧呢?


假设将这些按钮放在页面最底部,用户必须要浏览完整个页面才可以点击购买,那如果中途就想先加入购物车或者直接购买呢?等我看完整个页面我就很可能忘记操作了。


案例4:

一些社交类App为了让用户能随时发表或记录自己的想法,会把评论/点赞等按钮做悬浮设计,也是为了避免用户忘记自己想要做什么。


3.不同版式中的首因和近因位置:

通常情况下我们更习惯横向阅读,此时界面中的首位和末位分别在左上和右下。但有时候我们也需要纵向阅读,此时的首位和末位分别是右上和左下。



案例5: 

App Store的标题是横向,故首因位在左上;岛读的标题是纵向排版,故首因位在右上。


对设计的启示:

1.在设计时,结合自身产品特点将重要的内容放在序列首尾,用户更容易记住。

应用场景:Tabbar、轮播Banner、各类选项卡和标签等


案例6:同样是社交类产品,为什么QQ和微信的布局不太一样?

QQ是纯社交类,聊天交友是其最主要的功能。因此将[动态]放在近因位置,更符合产品的定位。[我的]放在左上角,从横向视觉来讲也属于首因位置。


微信更偏重功能性,除了社交功能以外,还有同样重要的一系列支付相关衍生业务。而且微信的用户人群年龄跨度更大,使用传统的Tabbar更能减轻用户的记忆负担。


2.想让某些元素充分发挥近因效应的作用,就让它永远处于近因效应的位置

应用场景:电商购买、阅读/文章评论类、工具类(邮箱/网盘等)、运营活动悬浮窗等


3.根据不同的版式设计选择正确的首因和近因位置

应用场景:Banner/海报设计、一些古诗词类App(西窗烛)等


小结:

还记得文章最开始那道简单的测试题吗?细心的小伙伴会发现其实描述两位甲方爸爸的形容词都是相同的,只是调换了顺序。但我们阅读时会更喜欢A,现在大家明白是为什么了吧?


以上就是本次系列位置效应的相关内容,感谢观看~



2
举报
|
7
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
3D卡通UI界面图标可爱插画免扣素
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
拟物风质感写实UI卡片合集源文件
智能家居中心 简约 UI设计组件库
新能源APP应用UIKit
高级感金属拟物 UI设计组件库
Security Camera UI kit
UI应用平面图标
【新年UI图标】影音icon
我的钱包-UI界面设计-app
【新年UI图标】钱包icon
【新年UI图标】30个图标
UI界面 组件
【新年UI图标】游戏/娱乐icon
【新年UI图标】珠宝icon
【新年UI图标】汽车icon
钱包ui模板
科技医疗透明柜UI界面设计
【新年UI图标】银行卡icon
手表表盘UI系列
【新年UI图标】优惠券icon
抽象液态渐变UI背景模版
你可能喜欢
相关收藏夹
ui
ui
ui
ui
大家都在看
登录注册