首页

兰亭妙微ui设计公司分享:从海外主流产品拆解:8 条底部导航栏(Tab Bar)实战设计技巧

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:移动端底部导航栏(Tab Bar)是 App 最核心的导航组件,大量海外成熟产品沉淀了很多可复用的设计思路。本文结合海外头部案例,拆解底部导航栏的底层逻辑与落地技巧,帮设计师理清设计思路,规避常见体验坑点。

在正式学习设计方法之前,先思考两个核心问题,做设计不要上来就直接套用 Tab Bar:

问题 1:你的产品真的需要底部 Tab Bar 吗?

image.png

市面上微信、淘宝、美团等大量 App 都在用底部导航,但Tab Bar 并不是所有应用的标配

像系统日历、计算器、Uber / 滴滴这类产品,就没有使用底部 Tab 栏。是否采用底部导航,要结合产品业务场景、信息架构综合判断,不要盲目跟风主流产品。

问题 2:为什么要使用底部 Tab Bar?

image.png

底部导航栏的核心价值,是降低用户跳转成本,实现页面之间快速切换。借助 Tab Bar,用户可以一键直达核心模块,提升整体操作效率。

明确这两个前提后,下面结合案例分享 8 个可落地的设计技巧:

1. 只承载产品最核心的功能入口

image.png

底部导航栏的空间十分有限,切忌堆砌过多功能标签,造成导航臃肿混乱。优先放置用户高频访问的模块,搜索这类高频操作,非常适合收纳到底部导航,加速内容检索。

案例 Spotify Spotify 的底部导航仅保留四大核心入口:首页浏览、搜索发现、个人音乐库、会员专区。首页负责内容消费,搜索用来挖掘新歌与播客,音乐库存放收藏歌单,会员入口便于用户完成付费转化,全部都是音乐播放器场景下最高频的能力。

2. 控制标签数量:4‑5 个为最优区间

行业主流 App 的底部导航普遍设置 4‑5 个标签。这个数量既能覆盖核心业务,也保证按钮点击热区充足,避免标签过多导致按钮过小、误触率升高。 同时导航栏可以承载轻量状态提示,比如消息红点、数字角标,直观向用户推送状态。

案例 Pinterest Pinterest 底部仅设置 4 个标签,按钮尺寸充足,点击容错率高。消息标签搭配数字角标,实时提示未读消息;搜索常驻底部,用户可以在信息流和搜索结果之间无缝来回切换。

3. 灵活选择标签形式:图标 + 文字 / 纯图标

 

底部标签分为两种常用形式:图标搭配文字纯图标

  • 图标 + 文字:通用性最强,图标做视觉识别,文字做语义解释,适合绝大多数产品,降低理解门槛。
  • 纯图标:仅适用于图标语义高度通用、用户认知已经形成共识的场景;如果图标表意模糊,严禁省略文字。

案例:宜家 App & YouTube 宜家 App 使用纯图标导航,主页、分类、个人中心的图标符号大众认知度高,即便没有文字,用户也能快速理解含义。 反观 YouTube,导航图标表意相对抽象,如果去掉文字,用户很容易混淆功能,因此必须搭配文字说明。

4. 标签文字力求简短精炼

image.png

导航栏文字一定要简短清晰,文字过长会挤压图标空间,还会出现文字截断、换行的问题,干扰用户识别。对于重点操作按钮,还可以去掉文字,强化视觉焦点。

案例 TikTok TikTok 底部导航标签文字全部极简化,中间发布按钮直接去除文字,放大图标视觉权重,引导用户创作,兼顾美观度与引导性。

5. 原则:尽量不要隐藏底部导航栏image.png

底部导航承载着 App 最重要的模块入口,常规场景下应当常驻页面底部,滚动页面时也不隐藏。一旦导航消失,用户会失去位置锚点,无法快速切换页面。

特例:Pinterest Pinterest 滚动页面时会收起底部导航。这是特殊场景下的取舍:产品以图片流为核心,隐藏导航是为了减少遮挡,给图片留出更大展示空间。该方案属于个案,不建议通用产品直接照搬。

6. 清晰反馈用户当前所处位置

image.png

导航不只是用来跳转,更要告诉用户「我现在在哪」。通过选中态样式区分当前页面,避免用户迷失在产品内。常用方式:图标变色、样式填充、下划线指示等。

案例:多邻国 & Headspace 多邻国,选中 Tab 图标做色彩填充,通过视觉变化区分激活状态,让用户一眼识别当前所在板块。 Headspace 采用底部下划线跟随切换的方案,选中选项下方出现标识线条,切换 Tab 线条同步移动,位置感知明确。

7. 依靠用户反馈迭代导航方案

image.png

导航栏设计不是一次定稿,需要数据和用户反馈持续打磨。设计师需要调研:哪些 Tab 点击频次高、哪些入口几乎无人使用,到底适配 4 个还是 5 个标签,基于真实用户行为做调整。

案例 Pinterest Pinterest 早期版本的 Tab 栏和市面产品大同小异,团队收集大量用户行为数据与反馈后,迭代优化导航结构,打磨出适配自身用户习惯的底部导航。持续迭代,是产品体验优化的关键。

8. 利用 Tab 栏承载状态更新提醒

image.png

底部导航栏不止承担跳转职能,还可以借助红点、状态标记,向用户推送外部变化,无需进入页面就能感知新动态。

案例 Twitter Twitter 在产生新内容时,首页图标会出现更新原点提示,唤醒用户点击查看新内容。同类的设计,也广泛应用于 YouTube、Pinterest 等海外产品。

转载:优设

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

AI 生成的图颜色总发脏?3个技巧让画面变通透!

之晨 系统UI设计文章及欣赏

 

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

image.png

二、选色就要干净

很多人在暗部选色时,就容易选的很脏,尤其是黄色,比如下面这种:

image.png

如果暗部颜色本身就选脏了,拿出来的最终质感就是这样的:

image.png

但如果你选择色相本身没那么脏:

image.png

这时候出来的效果就是这样的:

image.png

你可以对比下,脏不脏,一目了然:

image.png

这里选黄色暗部颜色的时候,有个小技巧,如果你实在不知道怎么选,你可以将亮部的颜色直接再叠加一层,把新的一层变成正片叠底模式,出来的新颜色,就可以作为暗部的颜色!

image.png

是不是非常简单,这样你就不用自己去选颜色了,在这个颜色基础上,微调就可以了!

可以看下面两个黄色暗部的对比,很明显左侧的就很脏,右侧就很通透:

image.png

三、环境边缘光弱化脏感

有时候如果我们增加暗部颜色,加过了,导致整体质感有点脏,这个时候,你只需要加一层边缘光,就会提亮不少,减少脏感。

哪怕是刚才那么脏的暗黄色,增加边缘光之后,都会好很多:

image.png

其实原理就是在边缘打了个灯光,你想想,那能不亮堂点吗!

实在案例中,也是非常好用,像这个左侧不加边缘光,就显得很脏,加了之后就清透很多:

image.png再比如下面这个,加了边缘光,包括头部,手指等地方,也会通透很多:

image.png

所以,加边缘光真的可以减弱很多脏感!

四、大量融入黑白灰

image.png

左侧为什么那么显脏,其实除了颜色用的脏以外,很重要的是右侧除了红色和少量绿色,大部分面积都是黑色!

而左侧的图几乎没有黑白灰,连面部都是肉色。

当然,倒不是说颜色用多种就一定脏,而是容易用脏,所以我们现在会很好的控制黑白灰的面积。

你仔细观察,其实我们做的很多画面,都融入了大量的黑白灰,所以颜色就不容脏:

image.png

反倒是刚毕业的时候,不知道这个窍门,不管是做平面海报、吉祥物还是图标,都是各种颜色搭配,完了还用不好,最终显脏:

image.png

希望大家现在都能记住这个点!

总结起来,我认为减少颜色脏的技巧有3点:

第一,选色时就不能在颜色中融入过多的黑色,不然你选的颜色就很脏了。

第二,利用边缘光去提亮整体的亮度,减少脏感

第三,多增加黑白灰的面积比例,而不是多彩色去搭配,因为黑白灰比较保险,这样可以减少颜色用脏的风险!

 

转载自优设网

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

掌握这5个技巧,从零开始掌握UI界面的亮点设计

之晨

一、全文速览图

image.png

不管甲方给多少钱,哪怕一张界面的预算只有几十块,他也想要设计亮点,但是很多同学的设计又非常平庸!

为什么你做的设计没有特点,其实原因很简单,你没有用过行业属性这一招,只要学会这一招,完全够用!

先解释下,什么行业属性:

比如你做的 App 是音乐类,那就把音乐类事物或图形提炼出来植入到设计中,比如音符、麦克风等等!

比如你做 App 是体育类,那就把体育类的图形提炼出来植入到设计中,比如跑步、篮球等等!

这样一结合,就可以做的有一定的特点!

但是相关图形或事物的植入也分层次,我个人分了五个层次:

二、第一个层次:直接表达

如果你做的产品是体育类,下面这种方式,就和体育相关:

image.png

但是这种方式就是直接表达,你是篮球,就画个篮球,是网球就画个网球,是不需要思考的,只要把设计做到精致即可。

再比如下面这个:

image.png

你是唱歌,就用麦克风来表达,都是不需要思考的,直接表达即可!

三、第二个层次:勉强拼凑

接下来就需要有一点思考了,但是思考的不多,就是如何把图形放在你原有的设计中。

比如下面这个转化图标:

image.png

如果中间我们加入的飞机的标识,那就是知道,这是买飞机票的产品:

image.png

这时候主要考验的就是飞机的表达形式,你可以是正面的飞机,也可以是侧面的飞机。

image.png

还有下面唱吧这种:本来没有任何属性的空页面:

image.png

中间加上音符,音乐app的属性就有了:

image.png

四、第三个层次:巧妙结合

接下来就需要一定的思考了,比如行程这个图标:

image.png

这里面就将飞机和轮船结合到了一起,二者的组成结构,就是这个图标的门槛,而不是之前那种直接拼到一起或者贴上去。

再比如下面这个编辑任务图标,把正常的一个竖线变成树叶,也需要一定的思考和巧妙结合:

image.png

你也能够知道,这个图标是和环保或者健康相关的!

五、第四个层次:意境传达

这个层次主要是抽象的表达,需要有一定的创意内核,比如像飞猪这种旅游相关的:

image.png

空页面采用打开窗户,多去外面看看世界的创意,来进行行业属性关联!

这种就是意境抽象的表达方式!

六、第五个层次:动态加持

最后一种就是除了以上内容外,你还可以增加动态的部分,把现实中真实的动态进行加持,那创意效果就会更加显著!

比如像这种播放音乐时候的 cd 唱片机:

image.png

七、总结

运用行业属性增加设计亮点与独特性,一共分了5个层次,分别为:

  1. 第一层次:直接表达
  2. 第二层次:勉强拼凑
  3. 第三层次:巧妙结合
  4. 第四层次:意境传达
  5. 第五层次:动态加持

转载自优设网

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

UI 必懂的 5 个设计心理学知识,兰亭妙微ui设计公司从理论到落地全拆解(下)

清阳

三、五架帽理论(LATCH 原则):高效组织信息的 5 个核心方法

 

核心定义

image.png

由 Richard Saul Wurman 提出,又称LATCH 原则,是基础的信息组织原则,通过 5 种方式让信息呈现更高效,提升用户获取信息的效率,分别是:Location(位置)、Alphabet(字母)、Time(时间)、Category(类别)、Hierarchy(视觉层级)
 

核心原理

 
用户在产品中获取信息时,有固定的认知习惯,违背这个习惯会增加用户的思考成本。五架帽理论的本质,是顺应用户的认知习惯,让信息 “好找、好懂、好记”,这五个方法可单独使用,也可组合使用。
 

产品落地技巧

 

1. Location(位置):围绕用户位置组织信息

image.png

以用户的当前位置为核心,展示周边相关信息,适用于地图、本地生活、出行类产品,比如:
 
  • 地图 APP 优先加载用户当前位置的道路、地标、周边商户,位置变化时实时更新信息;
  • 外卖 / 生鲜 APP 按 “距离由近到远” 展示商户,让用户快速找到周边可配送的商家;
  • 游戏(如绝地求生)随用户位置变化,加载周边的建筑、道具、敌人信息。
 

2. Alphabet(字母):按字母顺序组织信息

image.png

适用于数据量大、需要精准查找的场景,是最经典的信息组织方式,比如:
 
  • 通讯录按姓氏拼音首字母排序,支持字母索引,快速定位联系人;
  • 词典、题库 APP 按字母 / 拼音排序,方便用户查找内容;
  • 电商 APP 的品牌分类,按字母顺序排列,提升筛选效率。
 

3. Time(时间):按时间维度组织信息

 
时间先后 / 热度排序,适用于内容、社交、资讯类产品,比如:
 
  • 朋友圈、微博按 “发布时间从新到旧” 展示内容;
  • 资讯 APP 分 “最新、今日、本周” 板块,让用户按时间获取信息;
  • 电商 APP 的订单页面,按 “下单时间从新到旧” 排序,方便用户查找近期订单。
 

4. Category(类别):按属性分类组织信息

image.png

将信息按相同属性 / 功能划分,是产品设计中最常用的方式,适用于几乎所有产品,比如:
 
  • 音乐 APP 按 “曲风(流行、摇滚、民谣)、歌手、专辑” 分类;
  • 电商 APP 按 “商品品类(服饰、食品、数码)、功能(热销、新品、优惠)” 分类;
  • 手机桌面的 APP 文件夹,按 “社交、办公、娱乐” 分类。
 

5. Hierarchy(视觉层级):按重要性划分视觉层级

image.png

在信息组织的基础上,用颜色、大小、间距、字体等视觉手段,突出核心信息,弱化次要信息,比如:
 
  • 电商 APP 的商品页面,核心信息(商品名称、价格)用大号粗体,次要信息(产地、规格)用小号常规字体;
  • 首页金刚区,将高频功能(首页、消息、我的)用更醒目的图标 / 颜色突出,低频功能弱化展示;
  • 详情页的标题用大字号 + 强对比色,正文用常规字号 + 浅色系,让用户快速抓住重点。
 

关键总结

 
五架帽理论的 5 个方法不是孤立的,组合使用效果更佳:比如通讯录 = 字母 + 视觉层级,外卖 APP = 位置 + 类别 + 时间,首页金刚区 = 类别 + 视觉层级。核心是让信息组织符合用户的认知习惯,降低查找成本。
 

四、禀赋效应:让用户 “珍惜” 你的产品,提升留存与转化

image.png

核心定义

 
由心理学家 Daniel Kahneman 等提出,指人们对已经拥有的物品 / 服务,会高估其价值,比未拥有时更珍惜。这一现象源于 “损失厌恶”:失去一件东西的痛苦,远大于得到它的快乐。
 

核心原理

 
当用户从 “旁观者” 变成 “拥有者” 时,对产品的心理价值会大幅提升,会因为 “害怕失去” 而更愿意继续使用、付费甚至分享。比如生日收到的礼物,哪怕原本不喜欢,也会舍不得卖掉;免费试用的会员,到期后会因为 “失去权益” 而选择付费。
 

产品落地技巧

 

1. 赋予用户 “专属价值”,强化拥有感

image.png

让用户感受到产品 / 服务是 “为自己量身定制的”,提升心理归属感,比如:
 
  • 学习 APP 将学习数据生成个性化报告,支持一键分享,让用户觉得 “这份成果是独属于我的”;
  • 旅游 APP 记录用户的旅游足迹,生成 “我的旅行地图”,激发用户的珍惜感和分享欲;
  • 电商 APP 为用户生成 “专属会员标识”“定制化推荐页面”,强化专属感。
 

2. 提供免费试用 / 体验,诱导禀赋效应

image.png

让用户先 “拥有” 产品的权益 / 服务,再让他们面对 “失去” 的选择,比如:
 
  • 视频 / 音乐 APP 为新用户提供 7 天免费 VIP,到期后用户会因为 “失去高清画质 / 无损音乐” 而选择付费;
  • 办公 APP 提供 30 天免费高级功能,让用户习惯后,不愿回到基础版;
  • 电商 APP 为新用户发放 “专属优惠券”,让用户觉得 “拥有了优惠,不用就亏了”。
 

3. 增加个性化设置,让用户 “参与产品打造”

image.png

让用户通过个性化设置,将产品变成 “自己的样子”,提升主人翁意识,比如:
 
  • 浏览器 / APP 支持换肤、换背景、调整布局,让用户按自己的喜好定制产品;
  • 笔记 APP 支持自定义笔记本封面、字体、颜色,让用户觉得 “这是我的专属笔记”;
  • 社交 APP 支持自定义头像、昵称、个性签名,强化用户的拥有感。
 

4. 利用 “损失厌恶”,提升用户粘性

image.png

明确告知用户 “不继续使用会失去什么”,比告知 “继续使用会得到什么” 更有效,比如:
 
  • 签到 APP 提示 “已连续签到 5 天,中断将重置进度,失去 100 积分”;
  • 会员 APP 提示 “您的 VIP 还有 3 天到期,到期后将失去免费包邮、专属折扣等权益”;
  • 打卡 APP 提示 “今日未打卡,将失去本月打卡勋章的领取资格”。
 

关键总结

 
利用禀赋效应的核心,是让用户从 “使用产品” 变成 “拥有产品”,通过专属价值、免费试用、个性化设置,让用户产生拥有感,再利用损失厌恶,让用户因为 “害怕失去” 而提升留存和转化。
 

五、干扰效应:减少信息干扰,让用户专注核心操作

 

核心定义

image.png

用户同时思考 / 处理两件及以上事情时,思考效率和操作准确性会大幅下降,难以专注核心目标。简单来说:信息越杂乱,用户越容易分心,操作效率越低
 

核心原理

 
人的大脑像电脑一样,同一时间处理的信息有限,当多个无关信息同时出现时,大脑需要花费精力筛选信息,从而分散对核心操作的注意力,甚至导致操作失误。比如设计时被紧急需求打断,再回来时会忘记原本的思路;产品页面图标杂乱,用户会找不到核心功能。
 

产品落地技巧

 

1. 简化视觉设计,避免 “过度装饰”

image.png

视觉设计的核心是 “服务于功能”,而非单纯的美观,避免用复杂的设计增加用户的认知负担,比如:
 
  • 金刚区图标避免使用过于复杂的实物图 / 彩色渐变,优先用简约的线性图标 + 清晰的文字,让用户一眼识别;
  • 页面避免过多的色彩、动效,核心操作按钮(如确认、支付、提交)用强对比色突出,次要元素用低饱和度色彩;
  • 生鲜 APP 的分类图标,避免用复杂的商品实物图,用简约的图标(如苹果代表水果、青菜代表蔬菜)即可。
 

2. 划分信息层级,避免 “信息堆积”

image.png

将页面信息按核心功能、次要功能、辅助功能划分层级,突出核心,弱化次要,隐藏辅助,比如:
 
  • 美团首页金刚区,将高频功能(美食、外卖、超市便利)用大图标突出,低频功能(旅游、美甲、洗车)用小图标弱化,避免信息杂乱;
  • 个人中心页面,将核心功能(我的订单、我的资产、我的收藏)放在顶部,次要功能(设置、帮助、关于)放在底部,按使用频率排序;
  • 详情页将核心操作(购买、加入购物车)放在固定位置,次要信息(商品参数、评价)放在下方,避免干扰核心操作。
 

3. 按用户目标,组织页面功能

 
围绕用户的核心操作目标设计页面,移除无关的功能和信息,比如:

 

  • 刷题 APP 的答题页面,仅保留 “题目、选项、上一题、下一题”,移除广告、推荐、消息等无关信息,让用户专注答题;
  • 支付页面,仅保留 “支付金额、支付方式、确认支付”,避免添加其他功能(如充值、领券),防止用户分心;
  • 阅读 APP 的阅读页面,支持 “沉浸式模式”,隐藏导航、广告、消息,让用户专注阅读。
 

4. 功能分类聚合,避免 “分散摆放”

image.png

将同类功能聚合在一起,避免分散摆放导致用户查找困难,比如:
 
  • 个人中心将 “设置、帮助、反馈、关于” 聚合在 “更多功能” 里,避免零散摆放;
  • 电商 APP 将 “收藏、足迹、购物车” 聚合在 “我的资产” 板块,按 “用户资产” 的逻辑组织;
  • 办公 APP 将 “新建、保存、分享、打印” 聚合在操作栏,按 “文档操作” 的逻辑组织。
 

实战案例

 
技术类求职 APP 个人中心改版:旧版功能杂乱,将 “已购、钱包、收藏、错题、投递记录” 等功能分散摆放,且把无关的 “头像、昵称” 放在视觉核心位置,用户查找 “投递记录” 的平均时间为 15 秒。
 
新版围绕用户核心目标(查看投递进度、管理学习内容) 优化:
 
① 强化个人属性(等级、粉丝),放在头部吸引用户;
 
② 将核心功能(我的简历、投递记录)放在顶部,按产品价值排序;
 
③ 将次要功能(收藏、错题、下载)按 “学习管理” 聚合,模块划分清晰;
 
④ 视觉上采用简约风格,弱化无关元素,核心按钮用强对比色突出。
 
优化后,用户查找核心功能的平均时间缩短至 3 秒,操作效率提升 80%+。
 

关键总结

 
避免干扰效应的核心,是“少即是多”:围绕用户的核心操作目标,简化视觉设计、划分信息层级、聚合同类功能,移除无关的信息和功能,让用户不用思考,就能快速找到并完成核心操作。
 

全文核心总结

 
设计心理学的本质,是“站在用户的角度做设计”,读懂用户的心理,才能让设计触达用户的需求。这 5 个心理学法则,各有侧重但可组合使用:
 
  • 五架帽理论组织信息,让用户 “好找信息”;
  • 干扰效应简化设计,让用户 “专注操作”;
  • 蔡加尼克效应引导参与,让用户 “愿意完成”;
  • 峰终定律打磨体验,让用户 “记住产品”;
  • 禀赋效应强化拥有,让用户 “珍惜产品”。
 
不用精通所有心理学理论,把这 5 个法则融入日常设计的每一个环节,从信息组织、页面设计到流程体验,让每一个设计决策都有心理逻辑支撑,就能做出既好看又好用的产品设计。
转载:防脱发药水

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

UI 必懂的 5 个设计心理学知识,兰亭妙微ui设计公司从理论到落地全拆解(上)

清阳

本文从背景定义、核心原理、产品应用、实战案例四个维度,拆解 5 个 UI 设计中高频实用的心理学法则,不讲晦涩理论,只讲落地方法,兰亭妙微ui设计公司帮你把心理学融入日常设计工作。
 

阅读导航

  1. 峰终定律:抓准体验关键节点,让用户记住你的产品
  2. 蔡加尼克效应:利用未完成心理,提升用户参与度
  3. 五架帽理论(LATCH 原则):高效组织信息,降低用户认知成本
  4. 禀赋效应:让用户对产品产生 “归属感”,提升留存与转化
  5. 干扰效应:减少信息干扰,让用户专注核心操作
 

一、峰终定律:体验的好坏,由两个关键节点决定

 

核心定义

 
由 2002 年诺贝尔经济学奖得主丹尼尔・卡尼曼提出,人们对一段体验的记忆,只由体验的高峰时刻(正向 / 负向)和结束时刻决定,与体验的总时长、中间过程的平均感受无关。简单来说:好的峰值 + 好的终值,就是好的体验

image.png

核心原理

 
用户不会记住产品使用的每一个细节,只会对 “最爽的瞬间” 和 “最后的感受” 印象深刻。哪怕过程中有一些小瑕疵,只要峰值足够惊艳、终值足够舒适,用户对整体体验的评价依然会很高。
 

产品落地技巧

 

1. 强化正向峰值:打造用户的 “愉悦瞬间”

 
在用户使用产品的关键节点,用仪式感、惊喜感拉高情绪,比如:
 

image.png

盲盒 APP 购买成功后,弹出动态收藏卡,放大用户的获得感;

  • 网易云音乐直播间为新用户弹出「新人见面礼」,用视觉设计拉满氛围;
  • 功能操作完成后(如打卡、缴费、答题),用情感化弹窗给予肯定,如 “任务完成!你也太厉害了吧~”。
 

2. 降低负面峰值:缓解用户的 “焦虑时刻”

image.png

当用户遇到网络卡顿、操作失败、抽奖未中等负面场景时,用情感化设计减少挫败感,比如:
 
  • 网络断开时,用趣味动效 + 温柔提示 “网络开小差啦,点击重试吧” 代替冰冷的报错码;
  • 抽奖未中时,弹出安慰式弹窗 “没关系,下次好运 buff 加持~”,并附带小额优惠券。
 

3. 打磨终值体验:给用户一个 “完美收尾”

 

在用户完成整个使用流程后,强化满足感和成就感,比如:
 
  • 刷题 APP 在用户完成整套习题后,展示直观的数据分析页(正确率、能力提升、排名),并附带鼓励语;
  • 外卖 APP 下单成功后,清晰展示配送进度 +“下单成功!吃货专属福利已到账”,让收尾更愉悦;
  • 课程 APP 完成学习后,生成学习证书 / 打卡海报,支持一键分享,放大用户的成就感。
 

实战案例

image.png
刷题功能体验优化:针对用户刷题时的 “未知焦虑”,做了三个核心调整:
 
① 用进度条实时展示刷题进度,让用户知道 “还有多久完成”;
 
② 最后 3 题弹出鼓励语 “加油!马上完成啦,你超棒的”,强化峰值;
 
③ 结果页展示个性化数据报告(如 “商业模式模块能力提升 15%”),打磨终值。优化后,用户刷题完成率提升 30%+。
 

关键总结

 
设计时先绘制用户情绪曲线,找到峰值和终值的关键节点,重点打磨这两个时刻的体验,比均匀优化所有环节更高效。
 

二、蔡加尼克效应:未完成的事,用户会记得更牢

 

核心定义

 
由苏联心理学家蔡加尼克提出,又称 “契可尼效应”,指人们对未完成、被中断的事情,记忆会比已完成的事情更深刻,且会持续产生完成的冲动。简单来说:用户对 “没做完的事”,会更上心
 

核心原理

image.png

当一件事未完成时,大脑会一直处于 “紧张的激活状态”,持续关注这件事;一旦事情完成,这种紧张感会消失,记忆也会快速淡化。就像考试时没答上的题,会一直记挂到考试结束;综艺在关键剧情插广告,你会舍不得换台。
 

产品落地技巧

 

1. 用进度提示,引导用户持续完成

image.png

在需要用户持续参与的场景(签到、课程、打卡),添加可视化进度条 / 进度点,让用户清晰看到 “完成了多少,还剩多少”,比如:
 
  • 学习 APP 的签到页面,展示 “已连续签到 3 天,再签 4 天领 50 积分”,用未完成的奖励吸引用户持续打卡;
  • 健身 APP 的课程页面,标注 “本课程共 8 节,已学 3 节”,激发用户的完成欲。
 

2. 拆分复杂任务,减少用户心理负担

image.png

在用户需要完成复杂操作时(如注册、信息填写、认证),将流程拆分为多个简单的小步骤,并明确展示当前步骤,比如:
 
  • 新用户注册时,将 “手机号验证→设置密码→完善资料” 拆分为 3 个页面,标注 “1/3 验证手机号”,让用户觉得 “任务很简单,很快就能完成”;
  • 信息认证时,按 “身份信息→银行卡信息→人脸验证” 拆分,中途退出后再次进入可直接定位到未完成步骤。
 

3. 用待办提醒,强化 “未完成” 的心理暗示

image.png

在产品中添加待办事项、未读提醒、未完成任务标识,让用户时刻感知 “还有事没做”,比如:
 
  • 日历 APP 的代办功能,未完成的事项会持续高亮,让用户产生 “必须做完” 的心理;
  • 办公 APP 的待办列表,用小红点标注未处理的消息,引导用户及时操作;
  • 电商 APP 的购物车,保留用户未付款的商品,并用 “库存仅剩 3 件” 强化完成冲动。
 

实战案例

image.png

新用户注册流程优化:旧版将所有信息(头像、昵称、手机号、性别、兴趣)堆积在一个页面,填写率仅 40%;新版按业务维度拆分为 3 个步骤(手机号验证→基础信息→兴趣标签),每个页面仅需填写 1-2 项内容,并添加进度提示 “2/3 完善基础信息”。
 
优化后,利用蔡加尼克效应让用户产生 “完成冲动”,同时结合沉没成本效应(用户填了前两步,不愿放弃第三步),最终信息填写率提升至 75%+,内容推荐准确率也同步提升。

image.png

 

关键总结

利用蔡加尼克效应的核心,是让用户 “看到未完成的目标”,并通过拆分任务、可视化进度,降低用户完成目标的门槛,从而提升参与度和完成率。
 
转载:防脱发药水

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

打破同质化:3 个技巧让你的 UI 界面自带记忆点

鹤鹤

在信息爆炸的数字时代,用户每天要面对成百上千个 APP 和网站,千篇一律的 UI 设计早已让用户审美疲劳。想要让产品在激烈竞争中脱颖而出,关键在于打破同质化,打造自带记忆点的界面。以下 3 个实用技巧,帮你摆脱设计套路,让 UI 既美观又有辨识度。
 

一、聚焦核心功能,打造差异化视觉符号

同质化的根源往往是 “全面堆砌”,而优秀的设计需要 “减法思维”。聚焦产品核心功能,提炼专属视觉符号,能让用户瞬间记住产品特质。例如音乐类 APP 可围绕 “声波”“音符” 设计专属图标,工具类产品可突出 “效率”“便捷” 的视觉语言。
 
设计时可从形状、色彩、纹理三个维度发力:形状上避免滥用圆形、矩形等基础图形,尝试组合变形或提取产品相关的具象元素抽象化;色彩上建立专属配色体系,主色不超过 2 种,辅助色呼应主色,避免跟风热门色;纹理上可加入轻微渐变、肌理效果,让视觉符号更有层次感。
 

image.png

 
(注:图中展示了将产品核心功能抽象为几何图形,通过色彩搭配和细节处理形成的专属视觉符号)
 
 

二、巧用微交互,让细节传递品牌温度

微交互是界面的 “隐形记忆点”,看似微小的动效的却能极大提升用户体验和辨识度。例如按钮点击时的反馈动效、页面切换的过渡动画、数据加载时的趣味图标,都能让界面 “活” 起来。
 
设计微交互时要遵循 “贴合场景 + 传递情绪” 原则:登录成功时的轻量庆祝动效、操作失误时的友好提示动画,都能让用户感受到产品的温度;同时保持动效风格统一,比如简约型产品适合流畅的线性动效,活泼型产品可采用夸张的弹性动效,让微交互成为品牌风格的延伸。
 

image.png

 
(注:图中展示了按钮点击、页面切换、数据加载三种常见场景的微交互设计效果)
 
 

三、融入场景化元素,构建沉浸式体验

场景化设计能让用户产生情感共鸣,进而加深对产品的记忆。根据产品使用场景和目标用户画像,融入相关元素,让界面与用户需求高度契合。例如旅游类 APP 可加入地图纹理、风景插画,母婴类产品可采用柔和的曲线和童趣元素。
 
场景化设计的关键是 “自然融入”,避免生硬堆砌:可将背景处理为半透明的场景图案,既不干扰核心内容,又能营造氛围;在功能模块设计中融入场景逻辑,比如健身 APP 的课程页面采用运动场地示意图布局,让用户直观理解功能用途。通过场景化元素,让用户在使用过程中形成 “产品 = 特定场景解决方案” 的认知。
 

image.png

 
(注:图中展示了旅游类 APP 的场景化设计,背景融入地图元素,功能模块贴合出行场景)
 
 
 
UI 设计的记忆点,本质上是用户对产品功能、情感和场景的综合感知。摆脱同质化不是盲目创新,而是在理解产品核心价值的基础上,通过视觉符号、微交互、场景化设计的有机结合,让界面既有辨识度又有实用性。掌握这三个技巧,让你的设计从 “千篇一律” 变为 “过目不忘”,在用户心中留下独特印记。
 
 

经验塑造感知-心智模型和生活经验如何影响设计

清阳

A 代表抽象,B 代表信念?

经验决定了你能看到什么。尤其是在包含图形或符号元素的内容中,这一点尤为重要。在最近的一个项目中,我们有机会采访10岁以下的儿童和六七十岁的老年人。这是一次非常有趣的经历。采访孩子们让我非常吃力,也让我对幼儿园和学前班的老师们产生了由衷的敬意。

“经验决定你看到什么。”

这次访谈的目的是为了倾听当前项目营销和设计主要目标之外的人们的声音。虽然他们并非主要客户,但他们仍在使用该产品。最有趣的是他们对同一形状的反应。在几份草稿中,六七十岁的那组人看着直线,并将其与抽象的事物联系起来,他们的回答完全符合我的假设。而孩子们甚至没有想到直线形状。一个孩子甚至说:“直线就像地面。” 我们可以从这两个不同的群体中得到什么样的启示?

随着经验的积累,联想也会发生变化。孩子们发现,当概念具有具体的形式,或者他们通过感官体验到的东西时,更容易建立联系。例如,孩子们被告知“A 代表苹果,B 代表香蕉,C 代表猫……R 代表红色……”从小就开始学习英语字母,他们很容易将每个字母与后面的单词联系起来。然而,一旦他们被告知“A代表抽象,B代表信念……”,他们就会感到困惑。最终,在描述和象征意义之间,儿童往往对事实描述反应更强烈,而老年人显然对象征意义有更扎实的理解。

“人们通过长期积累的经验来体验世界。”

在这里,我们看到了心智模型与设计之间的密切关联。人们通过长期积累的经验来体验世界。可以说,经验塑造经验。这适用于我们用感官感受的一切,例如我们看到的艺术、触摸到的产品以及我们居住的空间。最近我读了一本令我印象深刻的书《和一位失明的朋友一起去看艺术》,作者对此进行了如下解释。

视力正常的人甚至无法想象盲人的想法

“白鸟先生无法在脑海中想象出此刻摆在我面前的杯子与他原本的尺寸、颜色和形状。他用一种完全不同的想象力来看待这个杯子。这意味着那些视力正常的人甚至无法想象白鸟先生所看到的东西。”——摘自《和一位失明的朋友一起去看艺术》

白鸟先生天生几乎无法感知光线和物体,中学时期更是完全失明。他对物体和颜色的感知体验截然不同。当他想到一个杯子时,它的形状、颜色、材质以及背景都与视力正常的人的形象截然不同。从这个意义上说,作者认为我们甚至无法想象白鸟先生所看到的景象。

那么,那些在晚年失明的人又会怎样呢?他们是如何感知周围的环境的?我也曾与盲人相处过:一起参观展览,一起跑步时谈论南山或汉江。我记得,当时我描述了深秋时节,一座落叶缤纷的山峰的景色,当时我们一起跑步时,有人问我这个问题。由于他的失明并非先天性,他仍然保留着对色彩和风景的记忆。他正是通过这些记忆来体验风景的。

为了进行数字体验研究,我们还采访了在十几岁和二十几岁时完全失明的人,以及在五十几岁时失明的六十几岁的人。我注意到他们对设备操作系统的偏好有所不同。六十几岁的人更喜欢安卓系统,因为它与 Windows 的文件系统结构相似,例如在文件夹之间移动文件以及在存储设备上管理文件的方式。将文件从手机移动到电脑时,只需将其插入 USB 端口,然后将其视为 USB 记忆棒即可。然而,长期失明的人大多更喜欢 iOS。像 VoiceOver 这样的辅助功能已经很成熟,其界面一直保持一致,没有频繁更改。

人们的每一个选择都体现着他们生活中积累的经验。因此,设计可以被视为一个为“经验”建造的“房子”添砖加瓦的过程,或者在一个他们从未体验过的新领域奠定基础的过程。无论我们如何定义它,作为设计师,我们都需要理解个人经验的深度和广度。当我们说我们设计时,意思是我们与人们同行,即使我们无法完全理解,就像盲人想象的杯子一样。

“设计就是与理解的人并肩前行。”

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

品牌数字化升级的秘密武器:兰亭妙微教你3个关键设计细节

清阳

在数字化时代,品牌不再只是视觉标识或标语,用户体验、信息呈现和交互流程同样影响品牌感知。兰亭妙微在高端网站和软件界面设计中,总结出三个可操作的设计细节,帮助品牌实现数字化升级。

一、信息层级与可视化优化

数字化品牌建设首先要确保信息传递清晰:
• 对内容进行分类和分层,核心信息优先呈现,次要信息辅助展示。
• 使用数据可视化组件,如折线图、柱状图或仪表盘,将复杂信息直观呈现。
• 保持界面风格统一,包括颜色、字体和间距,引导用户快速理解信息结构。
通过合理的信息组织和可视化设计,用户能够在最短时间内抓住关键内容,提高品牌信息传递效率。

二、交互设计与用户体验优化

用户操作的流畅性直接影响数字化体验:
• 提供即时反馈,例如鼠标悬停提示、动态更新和可操作图表,让用户操作更直观。
• 精简操作路径,减少不必要点击和跳转,使核心功能易于访问。
• 支持用户探索,通过筛选、展开和比较功能增强交互感知。
良好的交互设计不仅提升使用效率,也让品牌在体验中展现专业性和可靠性。

三、数据驱动的迭代与优化

数字化升级不能仅依赖一次性设计,需要持续优化
• 收集用户行为数据,包括点击、停留和操作路径,分析用户偏好和使用模式。
• 根据数据调整界面布局、交互逻辑和可视化呈现,使体验更加符合真实需求。
• 建立闭环迭代机制,让设计随着数据反馈不断优化。
通过数据驱动迭代,品牌数字化体验能够保持动态更新,适应用户变化和业务发展需求。

 
兰亭妙微在品牌数字化升级中的实践表明,核心不在于视觉美观,而在于信息清晰、交互流畅、数据驱动优化的全流程设计细节。通过这三个关键策略,品牌不仅能够提升用户体验,还能实现数字化资产的持续价值。
 

导航 为什么外部链接应该在新标签页中打开

清阳

大多数设计师在设计网站时,并不太关注链接。只要链接有效,能将用户引导至正确的页面,就万事大吉了。但良好的用户体验远不止于此。有些链接应该在新的浏览器标签页中打开,而有些链接则应该在原浏览器标签页中打开。设计师务必了解两者的区别。

浏览器标签改变了一切

过去,许多人都不喜欢在新窗口中打开链接。新窗口对用户来说很难管理。但浏览器标签页的推出改变了这一现状。现在,您无需打开新窗口,而是可以在新标签页中打开链接。最大的区别在于,浏览器标签页比浏览器窗口更易于用户管理。

当新窗口打开时,它会覆盖用户之前的窗口。用户会感到困惑,不知道如何返回。但是,当新标签页打开时,用户仍然可以在顶部看到之前的标签页。用户很容易理解如何在标签页之间切换。 事实上,大多数用户在浏览时都会打开多个标签页。浏览器已经发生了变化,因此设计师定位链接的方式也应该随之改变。

内部链接与外部链接

将用户引导至同一网站其他页面的链接为内部链接。内部链接不应在新的浏览器标签页中打开,而应在用户当前所在的标签页中打开。

在同一个网站打开新标签页既多余又令人困惑。如果是同一个网站,但页面不同,用户会使用导航菜单返回或根据需要导航到其他地方。让用户停留在同一个标​​签页中,有助于他们更好地理解网站的导航流程。

然而,外部链接应该在新标签页中打开。这些链接会将用户引导至不同的网站。许多设计师会犯在同一个标​​签页中打开外部链接的错误。这会带来许多问题,设计师需要了解。

后退按钮疲劳

在同一个标​​签页中打开外部链接,会给用户带来“返回键疲劳”。每次用户访问外部网站时,他们都必须点击“返回键”才能返回到你的网站。如果他们决定点击其他网站上的链接,他们就必须点击更多次“返回键”才能返回到你的网站。这对用户来说,是很多不必要的操作。

在新标签页中打开外部链接,用户可以尽情浏览其他网站,无需反复点击“返回”按钮返回到您的网站。他们只需点击您网站所在的标签页即可。无需反复点击“返回”按钮,也无需长时间等待。

减缓用户流量

在同一标签页中打开的外部链接也会降低用户浏览速度。许多浏览搜索引擎或链接分享网站的用户都在寻找信息。他们通常会点击页面上的多个链接,从不同的来源获取信息。

在新标签页中打开外部链接,用户可以一次性浏览页面,点击所有相关链接,然后开始消化和筛选信息。用户无需反复返回源页面继续浏览更多链接,从而减少浏览流程的中断。

当用户确实想要返回源页面时,这很容易做到,因为标签页会一直打开,直到用户手动关闭它。用户无需多次点击返回按钮并等待源页面重新加载。他们只需点击标签页即可轻松返回。

网站过度运作

在同一个标​​签页中打开外部链接不仅会让用户负担过重,也会让您的网站负担过重。每次用户返回您的网站时,它都会占用您的网站资源来加载页面。

在新标签页中打开外部链接可以节省大量资源。如果用户想返回您的网站,他们无需再次加载页面。他们只需点击您的网站标签即可。这既快捷又简单,而且不占用任何带宽。他们无需点击返回键或打开上下文菜单即可返回。

不准确的分析

很多时候,用户会点击文章段落中的外部链接,以便更好地理解文章内容。这并不意味着他们想在未读完文章的情况下离开您的网站。然而,您的网站分析结果却并非如此。如果您的外部链接在同一个标​​签页中打开,则表明用户离开您网站的速度比实际速度要快。

这是因为,当外部链接在同一个标​​签页中打开时,用户会完全离开您的网站。然而,在新标签页中打开的外部链接在用户访问外部网站时,仍会保持您的网站标签页打开。用户在您网站上的停留时间会在他们手动退出网站标签页时结束,而不是在他们访问外部链接时结束。

用户点击外部链接并不意味着他们想要离开您的网站。您不应将外部链接点击视为网站退出。唯一明确的退出方式是用户点击标签页上的关闭按钮。

外部链接影响您的网站和用户

将用户引导至不同网站的链接应在新标签页中打开。将用户引导至同一网站不同页面的链接应在同一个标​​签页中打开。如果您在与您的网站相同的标签页中打开外部链接,这会对您和您的用户造成影响。您不仅会遇到不准确的分析结果,导致网站运行更费力,还会使用户的工作负担加重、速度变慢。在当今链接主导网络的世界里,确保链接以正确的方式打开几乎与链接到正确的页面同样重要。

 

 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

为什么对话框中的“确定”按钮放在右侧效果最佳

清阳

设计师经常会思考对话框中“确定”和“取消”按钮应该放在哪里。“确定”按钮是完成任务的主要操作。

“取消”按钮是辅助操作,可以让用户返回到原始屏幕而不完成任务。根据它们的功能,最佳的放置顺序是什么?“确定”按钮应该放在“取消”按钮之前还是之后?

平台一致性不够好

许多人认为遵循平台惯例是解决问题的答案。虽然这看起来像是解决问题的办法,但实际上并非如此。它没有回答哪种布局对用户更有利以及原因。仅仅为了保持一致性而遵循平台惯例的建议根本不够好,只会让设计师徒劳无功。

“一致性”是设计师们常用的词。它也是人们不深入思考用户面临的设计问题的常见借口。如果连设计惯例存在的意义都不知道,遵循它又有什么意义呢?

如果某种设计惯例对用户有害怎么办?设计师是否应该为了保持一致性而盲目遵循它?是否应该因为设计师想要将平台设计一致性作为解决所有问题的答案而将糟糕的设计实践延续下去?

如今,某些平台设计惯例被广泛使用,因为它们对用户有用。但这里的重点是,平台设计的一致性永远不应成为设计师做某事的唯一理由。理解为什么应该以某种方式设计用户界面而不是另一种方式是关键。

按钮位置很重要

有人可能会认为,通过增加操作按钮的视觉重量清晰的标签使其更加突出,比其位置更重要。虽然操作按钮的视觉重量和标签是需要考虑的重要设计方面,但并非唯一的方面。

只关注一个设计方面而忽略其他方面,是粗心大意的设计师的表现。一个一丝不苟的设计师会思考每个设计方面如何影响用户。而主要操作和次要操作的布局,正是设计师最难搞清楚的。这就是为什么“确定”/“取消”按钮的争论在设计师中如此普遍。

为什么“确定”按钮放在右侧效果最佳

当你克服了平台惯例的争论后,你会质疑哪种布局效果最好。你可以通过分析设计如何影响用户来解决这个问题。

减少视觉注视

有必要验证设计师们常见的假设是否正确。一些设计师认为,将主要操作放在左侧次要操作之前对用户更有利,因为左侧操作更靠近用户,因此点击时间更短。

这很有道理,但你不能忽视一个事实:用户在选择操作之前会查看所有选项。这意味着大多数用户不会盲目点击主要操作按钮,而不查看旁边的次要操作按钮。

他们会先看到左侧的主要操作,然后再看右侧的次要操作。之后,他们会将目光移回主要操作并点击它。这会在多个方向上形成总共三个视觉注视点。

左侧有“确定”按钮,视觉注视点更多,并流向多个方向

使用右侧的“确定”按钮,视觉注视点减少,并流向一个方向

将其与位于对话框右侧、次要操作位于左侧的按钮进行比较。用户的视线首先停留在次要操作上,然后移至主要操作并点击按钮。这在一个方向上产生了总共两次视觉注视,从而为用户提供了更快的视觉流。

用户只会在每个按钮上注视一次,最终停留在主要操作按钮上。将主要操作按钮放在左侧或许能让用户更容易触及,但从用户的思维过程和视觉注视角度来看,将主要操作按钮放在对话框右侧实际上会更快。

映射到预期的按钮功能

当用户点击辅助操作按钮时,他们希望应用程序不执行任何操作,并返回到原始屏幕。因此,“取消”按钮的功能类似于“返回”按钮。

当用户点击主要操作按钮时,他们期望应用程序执行按钮指示的操作,并将他们带到下一个屏幕。因此,“确定”按钮的功能类似于“下一步”按钮。将次要操作按钮放在左侧,将主要操作按钮放在右侧,可以映射用户期望的“上一步”和“下一步”按钮的功能。

这与分页按钮的放置方式类似。将用户带到下一页的按钮位于右侧,将用户带回上一页的按钮位于左侧。这种按钮放置方式之所以有效,是因为它与用户从左到右的阅读和导航方向相呼应,其中右侧是前进方向,左侧是后退方向。

“确定”可让用户前进到下一个屏幕,“取消”可让用户返回到原始屏幕

对话框中的“确定”和“取消”按钮应遵循类似的交互模式,因为它们的功能类似于分页按钮。不仅如此,左右方向的模式也符合西方用户习惯。将主要操作放在右侧,将次要操作放在左侧,将使对话框按钮更容易、更直观地被用户理解。

为用户提供更高效的任务流程

对话框右下角的按钮更容易被用户点击,因为它遵循了古腾堡图表。在古腾堡图表中,右下角是终端区域。这是用户完成浏览后视线最终停留的区域。

将按钮放置在终端区域,可以让用户最后看到需要执行的主要操作。这不仅改善了视觉流程,也优化了任务流程。用户在浏览时不会跳过主要操作按钮。他们的目光会在浏览过程中直接落在按钮上,因此可以立即点击。

扫描对话框并采取行动既快速又简单,因为用户的眼睛停留在主要操作按钮上。

按钮放在角落里还是将它们放在一起?

设计师经常思考的另一个问题是,他们应该把按钮放在角落里还是把它们放在一起。当你把主要操作和次要操作放在对话框的角落里时,它们可以很好地映射到左右导航方向。然而,由于“确定”和“取消”按钮不是导航按钮,因此没有必要遵循方向映射。有时,这样做弊大于利。

按钮之间较大的视觉分离使得操作比较困难,并将一个操作与另一个操作隔离开来

如果应用程序即将执行用户无法撤消的关键操作,那么让用户能够同时看到“取消”按钮和“确定”按钮就显得尤为重要。在这种情况下,“取消”按钮的功能可能类似于“上一步”按钮,但它更重要的是,它充当了安全按钮,可以防止任何更改。

将“取消”按钮放在最左上角的危险在于,由于两个按钮之间的视觉距离过大,用户可能会忽略它。将“取消”按钮与“确定”按钮放在一起,可以让用户更容易地在一次注视中看到并比较这两个操作,从而选择最佳操作。

结论

当用户需要阅读重要信息或执行重要操作时,设计师通常会使用对话框。按钮的放置顺序会影响用户选择的操作。如果按钮的放置顺序清晰高效,可以防止用户选择错误的操作并犯错。

按钮的位置很重要,但也要记住注意按钮的视觉重量和标签。所有这些设计方面都会在用户浏览对话框时发挥作用。既然您理解了为什么“确定”按钮放在右侧效果最佳,那么您就有比平台一致性更好的参考依据了。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档