首页

7 个章节深度拆解:设计中如何打造直击人心的「愉悦感」

清阳 设计思维

谈及用户体验,愉悦是高频出现的核心关键词。让用户真正爱上一款产品,打造愉悦的使用体验是核心目标,也是设计的终极追求之一。
 
兰亭妙微UI设计公司认为产品体验中,触发用户情感愉悦的节点可大可小,恰到好处的设计能精准匹配用户的情感需求。恰到好处的成就感、意料之外的细节惊喜,都能唤醒用户内心的幸福感,而那些藏着愉悦巧思的设计细节,总能让人眼前一亮。
 

 

一、深度愉悦与表面愉悦

 
愉悦感可分为表面愉悦深度愉悦,创造卓越用户体验,是实现深度愉悦的核心前提。
 
当下仅聚焦产品功能、实用性与基础特性已远远不够,想要在市场中形成差异化、超越竞品,必须把提升用户满足感、兴奋感与参与感,前置到设计流程中,而非后期补救。
 
深度愉悦的核心价值:

image.png

  1. 打造终身客户价值,沉淀用户忠诚度
  2. 让产品自然融入用户日常生活
  3. 与用户建立心理安全与情感信任

image.png

它是体验里的 “独家秘方”,是产品脱颖而出的关键记忆点。
 

 

二、读懂 Kano 模型:愉悦感设计的底层逻辑

 
东京理工大学狩野纪昭教授于 1979 年提出质量保健与激励因素理论,1984 年正式确立Kano 模型,因高度适配互联网场景,成为产品与体验设计的核心方法论。

image.png

1. 基本型需求

 
也叫必备性需求,是用户对产品 “必须有” 的基础功能与属性。
 
  • 满足:用户不会明显满意
  • 缺失:用户会极度不满
     
    设计核心:守住底线,杜绝基础体验失分。
 

2. 期望型需求

 
也叫意愿型需求,是用户满意度与体验质量正相关的 “痒点”。
 
体验越好,满意度越高,是产品打造竞争力、超越竞品的关键。
 

3. 魅力型需求

 
也叫兴奋型需求,是完全超出用户预期、带来惊喜感的功能与服务。
 
无此功能不影响使用,有则大幅提升愉悦感,呈指数级提升满意度(区别于期望型的线性增长)。
 

4. 无差异型需求

 
有无该功能,对用户体验与满意度均无影响,可优先舍弃。
 

5. 反向型需求

image.png

也叫逆向型需求,提供后反而降低用户满意度,需严格规避。
 
Kano 模型核心启示:
 
  • 不满足基本需求,愉悦感毫无意义
  • 随着时间推移,愉悦功能会沦为性能需求,性能需求会沦为基本需求(例:下拉刷新、斜线命令已从惊喜功能变为基础 UI 规范)
 

 

三、先满足基础预期,再谈情感愉悦

image.png

我们可将体验维度定义为「令人沮丧 ↔ 令人愉悦」,中点代表可用但无记忆点的平庸体验。
 
把设计从 “沮丧” 拉到 “中点”,核心是:
 
  • 贴合用户预期,满足基础需求
  • 剔除难用、困惑的体验障碍
  • 提升操作效率,降低任务成本
 
结合 Aaron Walter 用户需求五层级,落地基础体验优化:
 
  1. 解决失败操作
     
    摒弃 “完美视觉” 执念,优先解决用户操作障碍,避免小问题毁掉整体体验。
  2. 简化复杂操作
     
    拒绝界面元素过载、视觉样式杂乱,保持设计语言统一;遵循行业标准化交互(如右上角个人中心、顶部搜索栏),降低用户学习成本;按操作优先级布局元素,用视觉层级引导用户行为,辅助用户构建清晰心智地图。
 

 

四、抓准时机:精准触发愉悦体验

 

愉悦感往往由特定场景 / 触点触发(等待、消费、升级等),无通用触发方案,核心是找到差异化触点,为用户创造价值。
 
让用户获得意料之外的反馈,能快速将负面情绪转化为愉悦。
 

1. 强化品牌个性

 
用独特的品牌调性,让产品在同类中快速脱颖而出。
 

2. 巧用微互动

image.png
微动画、触感反馈能实时回应用户操作,让界面更有温度,仿佛有真人交互。
 
例:空收件箱的趣味动画、操作成功的动效反馈、下拉刷新的流畅动效,都能提升参与感与愉悦度。
 

3. 无预期时提供帮助

image.png

在用户未主动求助时,主动解决潜在麻烦。
 
例:一键分享 Wi-Fi 密码,简化繁琐操作,提升体验便捷性。
 

4. 实时追踪反馈

image.png

让用户实时掌握进程信息,获得被重视的安全感。
 
例:Uber 司机信息展示、外卖配送轨迹追踪,都是经典落地案例。
 

5. 一键自动填充

image.png

验证码、表单信息自动填入,减少手动操作,极致简化流程。
 

 

五、落地执行:愉悦感设计的行动指南

 
愉悦设计的核心:功能优先,情感前置,聚焦关键时刻
 
  1. 从情绪板开始,做好前期调研
     
    打破同类产品局限,多维度挖掘设计灵感。
  2. 明确产品惊喜场景
     
    找到能触发情感共鸣的核心时刻,锚定情感连接点。
  3. 聚焦单一目标,打磨细节
     
    避免多目标并行导致信息过载、认知超载;从 ** 本能层(视觉)、行为层(交互)、反思层(情感)** 三层反馈用户情绪。
  4. 传递价值,明确设计意义
     
    愉悦设计不是为了 “好看”,而是为了达成用户目标,传递产品价值。
  5. 迭代设计,持续测试优化
     
    愉悦体验并非一蹴而就,需经过 “设计 — 测试 — 迭代” 循环持续完善。
 

 

六、警惕负面效应:愉悦设计的避坑指南

 
愉悦设计若运用不当,会产生反向效果,需提前规避风险。
 

1. 增加认知负荷与交互成本

image.png

过度追求视觉特效,会破坏基础可用性。
 
例:动态旋转配色界面虽惊艳,但易引发眩晕,阻碍信息获取与操作。
 

2. 审美疲劳

 
惊喜感具有时效性,长期重复会淡化愉悦感,需持续迭代情感化设计。
 

3. 愉悦的主观性差异

 
愉悦感因人而异,错误场景的情感化表达易引发反感。
 
例:任务失败时的幽默文案,可能让用户觉得缺乏同理心、被冒犯。
 

4. 安全的愉悦设计策略

 
优先在一次性、正面情绪场景植入愉悦元素,降低风险:
 
  • App 启动页
  • 账号设置成功页
  • 新功能引导页
  • 首次完成重要操作的反馈页
  • 空状态页面

image.png

这类场景使用频次低、情绪正向,既能传递惊喜,又不会引发厌烦。
 

 

七、总结

 
永远不要低估愉悦感对用户体验的提升价值,我们应主动为产品植入情感愉悦的设计巧思。
 
核心原则:
 
  • 愉悦感的本质是提供超出预期的惊喜,而非单纯堆砌功能
  • 坚守功能、稳定、实用的基础底线,愉悦设计不能牺牲核心体验
  • 用自然语言替代专业术语,适度融入趣味与温度
  • 设计的核心是用心,兼顾功能与情绪,打造有记忆点的使用体验

 

转载:优设

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

 

image.png

学会这三招,让用户快速下单!——兰亭妙微UI设计公司

清阳 设计思维

引流成本居高不下,访客进店却迟迟不转化?这是绝大多数电商商家的核心痛点。很多商家一味依赖降价、送赠品拉动转化,效果却微乎其微,前期投入的引流费用白白浪费。
 
兰亭妙微UI设计公司,结合《超级转化率》核心方法论,拆解激发兴趣→建立信任→立即下单三大转化阶段,搭配互惠、承诺兑现、信任状、畅销好评、痛点刺激、稀缺六大关键要素,用实战案例教你高效提升电商下单转化率。

image.png


 

第一阶段:激发兴趣 —— 用「互惠」拉近用户距离

 
互惠是激活用户购买欲的核心,能快速拉近商家与用户的关系,让用户主动关注商品。
 
核心落地方法:提高优惠获取门槛 + 主动为用户争取福利 + 暗示用户使用优惠是对自己的帮助。
 
实战案例
 
用户错过笔记本电脑赠品活动,咨询客服能否享受优惠:
 
  1. 客服先告知活动已结束,抬高优惠获取难度;
  2. 主动表示可为用户向店长申请延保、价保服务,牺牲自身精力帮用户谋利;
  3. 提醒用户务必使用优惠,否则自己会受批评,用共情心理推动用户下单。
 
这种方式既让用户感受到优惠的稀缺性,又通过情感联结激发购买兴趣。
 

 

第二阶段:建立信任 —— 三层加固,打消决策顾虑

image.png

信任是高客单价商品转化的关键,尤其针对新用户,需循序渐进筑牢信任壁垒,分为承诺兑现、信任状、畅销好评三个层级。

 

 

1. 承诺兑现:用细节与案例做实宣传

image.png
空泛的 “假一赔十” 难以打动用户,需用完整逻辑建立信任。
 
核心落地方法:前置承诺亮点 + 配套可验证的保障措施 + 真实用户案例佐证。
 
实战案例
 
笔记本商品首页先打出 “轻薄、高清、高性能” 核心承诺;
 
商详页用具体重量、屏幕参数、处理器性能对比,直观兑现宣传亮点;
 
评价页展示用户真实反馈,验证产品优势,彻底打消用户疑虑。
 

2. 信任状:借权威背书强化信赖

image.png
信任状是权威符号,能将用户对第三方的信任转移到商品上。
 
常用信任状:专家参与、权威资质证书、官方榜单、检测报告、品牌授权、多年深耕经验。
 
比如京东金榜、官方旗舰店认证、专业检测报告等,都是提升信任度的强力背书。
 

3. 畅销好评:用社会认同推动决策

 
利用用户从众心理,用销量与口碑证明商品价值。
 
常用表达:销量 X 万、X 万人选择、热卖榜榜首、X 万 + 好评、高口碑见证。
 
清晰展示销量数据与好评率,让用户觉得 “大家都买,品质一定靠谱”。
 

 

第三阶段:立即下单 —— 临门一脚,促使用户行动

 
用户有兴趣、信产品,却仍犹豫,核心原因是无需求、不着急、购买力不足。针对前两类核心用户,用痛点刺激 + 稀缺快速推动下单。
 

 

1. 痛点刺激:唤醒焦虑,激发购买欲

image.png
找到用户对品类的厌恶点,用图文、视频放大痛苦,激发用户 “远离痛苦” 的本能。
 
比如突出厚重电脑携带不便、普通屏幕画质差、卡顿影响办公等痛点,让用户意识到 “不买就会持续受困扰”。
 

2. 稀缺营造:制造紧迫感,快速决策

image.png

用限时、限量、限名额制造紧张感,让用户从理性思考转向感性决策。
 
常用方式:仅剩 X 件、仅限前 X 名、限时 X 小时优惠、专属名额仅 X 个。
 
这是推动用户 “立即下单” 的最后关键一步。
 
转载:优设

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

 

image.png

色彩心理学:换个颜色销量飙升 60%,色彩应用全指南

清阳 设计资源

 

在产品改版与品牌搭建中,色彩调整几乎是必做环节 —— 它能直接影响用户对品牌的感知,建立情感连接,牢牢抓住用户注意力。兰亭妙微UI设计公司,从色彩基础原理到实战应用,帮你系统掌握色彩运用逻辑。
 

 

一、色彩基础核心概念

image.png

1. 色彩原理

 
色彩感知由物理原理生理原理共同作用:
 
  • 物理原理:光照射物体后反射,对人眼产生刺激,形成色彩视觉。
  • 生理原理:人眼与大脑对光的波长、色彩三属性做出的视觉反应。
 
人眼看见色彩,必须同时满足三个条件:光、物体、眼睛
 
可见光谱波长范围约380nm(紫)~750nm(红),不同波长对应不同色相。

image.png

2. 色彩三要素

 
所有色彩都由三大核心属性定义,是配色的基础:

 

  1. 色相:颜色的本质类别,如红、黄、蓝,由光的波长决定。image.png
  2. 明度:色彩的明暗程度,可理解为颜色中加白 / 加黑的量,反射光越多明度越高。image.png
  3. 饱和度:色彩的鲜艳纯净度,纯色饱和度最高,混入灰 / 黑 / 白会降低饱和度。

    image.png

 

3. 常用色彩模型

 

设计中高频使用的色彩模式,适配不同场景:
 
  • RGB(光色模型):加色混合,红、绿、蓝三原色叠加出白色,用于屏幕显示(手机、电脑、电视)。

    image.png

  • HSB/HSV:以色相、饱和度、明度定义颜色,设计师直观调色首选。
  • HSL:与 HSB 类似,区别在于饱和度与明度的计算逻辑,更适配界面动态配色。

    image.png

  • CMYK(印刷模型):减色混合,青、品、黄、黑四色叠加,用于纸质印刷。

    image.png

  • HEX(十六进制):Web 设计专用色值,格式为#RRGGBB,精准定义 RGB 色彩。
 

 

二、定义色彩:必须掌握的关键要点

 

1. 色彩观:文化与场景的深层影响

image.png

色彩的含义受文化、信仰、历史、自然环境约束,设计需保持敏感度:
 
  • 文化习俗:中国红象征喜庆繁荣;伊斯兰文化中绿色代表生命。
  • 历史符号:中国黄色代表皇权;古埃及白色用于祭祀。
  • 自然关联:绿色绑定环保、自然;蓝色传递冷静、信任。
  • 社会符号:彩虹色成为平权运动标识,是社会文化赋予色彩新意义。
 

2. 色彩偏好:人群差异规律

 

(1)年龄偏好

image.png

  • 0-2 岁:偏爱高饱和亮色(红、黄、蓝)。
  • 3-12 岁:喜欢明亮多彩色(橙、绿、紫),受动漫、游戏影响大。
  • 青少年:追求潮流个性化,偏好流行色。
  • 成年人:正式场景偏爱中性色(蓝、白、灰),私人场景更个性化。
  • 老年人:接受柔和暖色(深蓝、棕、米色)。
 

(2)性别偏好

image.png

  • 男性:倾向稳重明亮的冷色调(蓝、绿)。
  • 女性:传统偏好红、粉,当代审美多元,蓝、紫也广受喜爱。
 

(3)地域偏好

image.png

  • 中国:喜红、黄,寓意吉祥。
  • 日本:偏爱淡雅柔和色(樱花粉、浅蓝)。
  • 地中海:明亮高饱和色,适配阳光气候。
  • 北欧:冷色调(浅蓝、灰、绿),贴合自然环境。
  • 拉美:热烈明快色(红、黄、橙),契合热情文化。
 

3. 色彩心理语义

 
色彩情感可归纳为三维因子,精准描述色彩感受:
 
  • 评价性:自然 / 粗俗、优雅 / 丑陋、喜欢 / 讨嫌。
  • 活力性:温暖 / 寒冷、动态 / 静态、明亮 / 昏暗。
  • 潜力性:男性化 / 女性化、坚硬 / 柔软、沉重 / 轻盈。

image.png

4. 色彩情感:用颜色传递情绪

image.png

色彩是情绪的视觉语言,电影、设计中常用色彩切换表达角色心境与剧情走向。

image.png

  • 冷色:冷静、理性、疏离。
  • 暖色:热情、温暖、亲近。
  • 高饱和:活力、张扬、醒目。
  • 低饱和:高级、沉稳、柔和。
 

 

三、色彩驱动转化:实战成功案例

 
数据证明,色彩优化能直接提升销量与转化率:
 
  1. Heinz 番茄酱:包装从红色改为绿色(联动《怪物史莱克》),销量暴涨60%,靠色彩绑定情感共鸣。

    image.png

  2. HubSpot:红色按钮转化率比绿色高21%,高对比度色彩强化视觉吸引力。

    image.png

  3. 电商平台:橙红色 “立即购买” 按钮,比白绿按钮转化率提升5%,暖色激发行动欲。

image.png

研究显示:用户 90 秒内形成对产品的第一印象,90% 的判断受色彩直接影响
 

 

四、品牌色彩升级:为什么改?怎么改?

 

1. 色彩升级的核心原因

 
  • 业务战略更新,品牌理念迭代。
  • 产品定位、目标用户群体变化。
  • 用户审美偏好升级,体验需要优化。
 

2. 色彩升级落地方法

 

(1)前期分析

 
  • 追踪趋势:参考潘通年度色、设计平台(Behance/Dribbble)流行色。
  • 竞品调研:分析直接 / 间接竞品的色彩体系,找差异化。
  • 自身诊断:梳理现有色彩问题,保留核心品牌色基因。
 

(2)理性色彩体系搭建

 
用奥斯特瓦德、孟赛尔、NCS、PCCS 四大国际色彩体系,把感性配色转为精准理性定义,实现全球统一视觉。
 

(3)应用落地规则

 
  • 区分场景:基础色(品牌色 / 辅助色 / 状态色 / 灰阶)+ 风格化色(大促 / 日常)。
  • 比例控制:遵循6:3:1黄金配色法则,控制用色数量,避免杂乱。
  • 视觉合规:保证明度差异,遵循 WCAG 无障碍标准,兼顾色盲用户。
 

(4)科学验证手段

 
用感性工学、模糊层次分析法等方法论,结合眼动、脑电等用户测试,验证色彩效果。
 

 

五、UI 设计中色彩的核心价值

 
  1. 建立品牌认知:统一品牌色,强化识别;用色彩传递品牌调性(科技选蓝、健康选绿)。
  2. 梳理视觉层级:用色彩区分功能区,对比色突出重点信息。
  3. 提升可用性:保证文本与背景对比度,色彩统一不混淆。
  4. 引导用户行为:高饱和色做行动按钮,固定色做状态反馈(绿成功、红警告)。
  5. 兼顾无障碍:不只用颜色传递信息,搭配图标、文字,适配色盲用户。
  6. 营造情感氛围:按产品属性选色(健身用橙绿、金融用蓝灰),适配季节与节日。
  7. 尊重文化差异:全球化产品做本地化色彩适配,避免文化误解。

转载:优设

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

 

image.png

解锁按钮设计10大密码

清阳 设计资源

无法想象没有按钮的页面是什么滋味,那定会像没有方向盘的汽车,让人不知所措吧?也无法想象按钮设计不恰当,会给用户带来怎样的困扰?

面对十万火急的任务需求,如果需要调动全部理性脑,深呼吸三秒,才能找到想要执行操作的按钮入口,我想这样的产品设计是失败的,是会被用户所唾弃的。

兰亭妙微UI设计公司,将详细剖析按钮的神秘面纱,了解它、研究它,让按钮设计成为产品的得力助手,为我们的产品赋能,为我们的工作提效,下面就让我们开启这场神秘之旅吧!

目录

一、按钮的定义

二、按钮设计的种类

三、按钮设计的尺寸

四、按钮的构成

五、按钮设计的作用

六、按钮的位置

七、按钮的颜色

八、按钮在UI界面的设计原则

九、按钮设计的注意事项

十、按钮弱化设计的六种方式

一、按钮的定义

按钮在我们生活中起着很大的作用,它就像我们的小助手一样,帮我们一键开启想要的任务,凡事都能一键触达。

按钮在UI界面中,是一种界面交互控件,通常以矩形、圆形或其他几何形状呈现,具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作,如提交表单、执行命令、导航页面、切换状态等。

按钮一般包含文字标签、图标或两者的组合,以清晰传达其功能。同时,按钮在不同状态下会呈现出不同的视觉效果,如默认状态、按下状态、悬浮状态、禁用状态等,为用户提供操作反馈和引导。

二、按钮设计的种类

1. Antdesign对按钮的种类划分

次按钮

常规按钮,用于非主要动作。如果不确定选择哪种按钮,次按钮永远是最安全的选择。

主按钮

突出“完成”、“推荐”类操作;一个按钮区最多使用一个主按钮。

文字按钮

弱化的按钮,采用更轻量的按钮样式,可用于需大面积展示按钮场景,例如下面的站酷活动页就用了很多的文字按钮,只有当按钮被选中时,按钮才会高亮选中。

图标按钮

图标提供视觉线索,避免逐字阅读按钮文案,更高效地使用界面,让页面看起来更加的简洁。

在按钮中添加图标

用于对按钮含义补充解释,提高按钮识别效率。

2. 按钮的样式种类

按钮的样式可以从多个方面进行分类和设计,以下是一些常见的样式分类:

按颜色划分

  • 单色按钮:按钮背景为单一颜色,如蓝色、绿色、红色等,常用于强调按钮的主要功能或操作。
  • 渐变色按钮:按钮背景为渐变色,可以是线性渐变或径向渐变,通常用于增加视觉吸引力和现代感。
  • 透明按钮:按钮背景透明或半透明,通常用于与背景融合或突出按钮上的文本和图标。
  • 彩色边框按钮:按钮背景透明或浅色,但有彩色边框,常用于需要突出按钮边界的场景。

按形状分

  • 矩形按钮:这种是最常见的按钮形状,适用于大多数界面设计。
  • 圆形按钮:按钮形状为圆形,通常用于表示播放、暂停等操作,或用于具有特定功能的图标按钮。
  • 圆角按钮:按钮形状通常为圆角矩形,常用于需要柔和视觉效果的场景。
  • 自定义形状按钮:根据设计需求,按钮可以是任意自定义形状,如星形、心形等,常用于创意设计或特定主题的界面。

按边框分

  • 无边框按钮:按钮没有边框,背景和文本直接显示,常用于简洁的界面设计。
  • 细边框按钮:按钮有细边框,常用于区分按钮与周围元素,同时保持界面的简洁性。
  • 粗边框按钮:按钮有粗边框,常用于强调按钮或与背景形成强烈对比。
  • 虚线边框按钮:按钮边框为虚线,常用于表示辅助操作或非主要功能。

按图标分

  • 图标按钮:按钮上只有图标,没有文本,常用于表示通用操作或节省空间的场景。
  • 图标+文本按钮:按钮上既有图标又有文本,图标通常位于文本左侧或上方,常用于清晰表达按钮功能的场景。

按阴影样式分

  • 无阴影按钮:按钮没有阴影,常用于简洁或平面风格的界面设计。
  • 轻微阴影按钮:按钮有轻微的阴影效果,常用于增加按钮的立体感和层次感。
  • 明显阴影按钮:按钮有明显的阴影效果,常用于突出按钮或与背景形成强烈对比。
  • 动态阴影按钮:按钮的阴影效果会随着鼠标悬停或点击等交互动作而变化,常用于增加交互体验的趣味性。

按动画种类分

  • 无动画按钮:按钮没有动画效果,常用于简洁或传统的界面设计。
  • 悬停动画按钮:当鼠标悬停在按钮上时,按钮会有动画效果,如颜色渐变、边框变化、图标旋转等,常用于增加交互体验的趣味性和吸引力。
  • 点击动画按钮:当点击按钮时,按钮会有动画效果,如缩放、震动、波纹等,常用于增加交互体验的反馈感。

马蜂窝的功能主按钮,在点击的时候都会产生动画,交互感十足。

加载动画按钮:

当按钮处于加载状态时,按钮会有加载动画效果,如旋转图标、进度条等,常用于告知用户操作正在进行中。

3. 按钮的几种状态

3.1 默认按钮

按钮的初始状态,通常具有正常的颜色、形状和文字显示,等待用户操作。

3.2 待激活状态按钮

待激活状态按钮通常用于指示某个功能或服务尚未激活或启用,用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态,并引导用户进行下一步操作。

3.3 点击状态按钮

当用户点击按钮时,按钮会呈现按下的状态,通常通过改变颜色、形状或添加阴影等方式来表示。

3.4 禁用按钮

在某些情况下,按钮会处于禁用状态,无法进行操作,通常会以灰色或半透明的方式显示,提示用户当前操作不可用。

3.5 加载状态按钮

加载状态按钮通常用于指示某个过程正在进行中,例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理,而不是卡住或出现错误。

3.6 危险提示状态按钮

危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果,例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性,以避免误操作。

下边这两组弹框就是运用了危险按钮,来提示客户未来即将面临的风险,警示作用非常的明显。

三、按钮设计的尺寸

1. Web端的按钮尺寸建议

在Web端,按钮尺寸没有固定标准。不过,一般来讲,按钮的高度常在32px-48px之间,宽度可根据内容灵活设置,但最好不要小于48px,这样方便用户用手指(触屏设备)或鼠标点击。

像一个简单的“提交”按钮,宽度可能是80px左右,高度是36px左右。这些尺寸能保证按钮在视觉上比较舒适,易于交互。

2. 麻省理工触摸实验对按钮尺寸的指导

麻省理工触摸实验室通过对人类指尖的研究,得出了关于界面按钮大小设计的一些重要参考数据。

对于食指,平均宽度在16至20毫米,指腹触摸区域尺寸为10至14毫米,指尖触摸区域尺寸为8至10毫米;对于拇指,平均宽度为25毫米,指腹触摸区域尺寸为12至16毫米,指尖触摸区域尺寸为10至12毫米。

由此建议,食指触摸的按钮应保证在8毫米×8毫米以上,且控件间距应保证至少在1毫米以上;拇指触摸的按钮应保证在10毫米×10毫米以上,且控件间距应保证至少在2毫米以上。

该研究还指出,大多数用户可以舒适可靠地击中 10 毫米×10 毫米的触摸目标 。

3. iOS对按钮尺寸大小的规范

从按钮图标尺寸来看,根据苹果官方设计指南,iOS中按钮图标有不同标准。小图标尺寸为24×24pt,用于小型按钮,如导航;标准图标为32×32pt,用于普通按钮,适合次要操作按钮;大图标是 40×40pt,用于宽大按钮;特大图标则为48×48pt,用于特大按钮。

不同设备屏幕尺寸也有对应的建议图标尺寸,如iPhoneSE建议24pt,iPhone14及iPhone14Pro建议32pt,iPad 建议40pt 。

在最小触摸区域方面,iOS规定最小触碰区域为44×44pt,这种尺寸一般适合主要操作按钮。

四、按钮的构成

UI按钮的组成主要包括以下几个关键元素:

1. 圆角

圆角的大小决定了按钮的气质和视觉感受。小圆角常用于常规按钮,如4px圆角;圆角越大,越有亲和力,人眼往往不喜欢非常锋利的物体,所以通常不建议使用0圆角的按钮样式,根据我大量的体验,我发现市面上确实也是带圆角的按钮居多些。

2. 图标

图标用于直观表达按钮的功能或状态,如加载中、编辑等。图标的设计应与整体页面风格一致,并确保其含义明确易懂。

3. 内间距

内边距能够扩大按钮的可点击范围,帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然,你也可以根据你设计的实际情况做适当调整,规矩不是死的。

4. 容器

容器是包含所有视觉和交互元素的框架,包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。

5. 边框

边框定义了按钮的边界,常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。

6. 文案

文案是按钮上的文字描述,用于表达按钮的含义和功能。文案应简洁明了,易于理解,同时具有一定的吸引力。

7. 背景

背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。

8. 投影

投影用于凸显层级关系,帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用,以打造更好的视觉体验。

佐糖首页为了促进转化,特意将“开通会员”的按钮用投影凸显处理,带投影的按钮明显有向前走的感觉,比没有投影的按钮看起来更加显眼。

小小投影在页面中不仅起到增加空间感的作用,还起到了业务强调的作用,已经不仅仅是样式的一个承载了。

这些元素共同作用,不仅提升了按钮的功能性,还增强了其美观性和用户体验。在设计UI按钮时,应综合考虑这些因素,以确保按钮既美观又实用。

五、按钮设计的作用

Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动,并帮助用户防错。

1. 触发操作

1.1 提交与确认

在表单填写场景中,如用户注册、登录、信息提交等,按钮用于触发提交或确认操作,将用户输入的信息发送给系统进行处理。

1.2 执行功能

在各类软件中,按钮是执行具体功能的主要方式,如在图像编辑软件中,“裁剪”“旋转”“调整颜色”等按钮,可让用户快速实现相应功能。

2. 导航跳转

2.1 页面切换

在多页面的应用或网站中,按钮可实现页面之间的切换,如网站的首页、产品页、关于我们页等,通过点击按钮,用户能方便地浏览不同页面内容。

2.2 菜单展开与收起

用于控制导航菜单的展开与收起,节省页面空间,提高界面的整洁度和易用性。

3. 状态控制

3.1 显示与隐藏

可用于控制某些元素的显示与隐藏,如在电商网站中,点击“查看更多商品详情”按钮,可展开隐藏的详细商品信息。

飞书中的这个小小按钮,它承载着隐藏折叠的功能,让页面看起来更加的简洁有序。

3.2 启用与禁用

在某些功能需要满足一定条件才能使用时,按钮可用于表示该功能的启用或禁用状态,如在未填写完必填项时,“提交”按钮处于禁用状态,无法点击。

中国移动云盘的登录页就是这么设计的,当前面信息没有填完,后面的登录按钮始终是禁用的状态,只有当信息填完,且填写正确,按钮才会亮起。

4. 提供反馈

4.1 操作反馈

当用户点击按钮后,按钮会通过颜色、形状、动画等方式的改变,向用户提供操作反馈,告知用户系统已接收到操作指令。

4.2 引导提示

在一些复杂操作或新功能引导时,按钮可作为引导提示的一部分,告知用户下一步操作,如在新手引导流程中,突出显示“下一步”按钮。

心岛日志的新手指引中就是这样设计的,按钮在其中起了很重要的指引作用。

5. 数据交互

5.1 数据筛选

在数据展示界面,如表格、列表等,按钮可用于对数据进行筛选,方便用户快速找到所需信息。

钉钉打卡这个界面中,多亏有了日、周、月的筛选按钮,才让数据筛选变得如此便捷。

5.2 数据排序

通过点击“按时间排序”“按销量排序”等按钮,用户可对数据进行重新排序,以满足不同的查看需求。

6. 品牌传达

很多产品的按钮颜色都是与它的品牌色高度一致的,它既是按钮,又是品牌色的传递大使。

网易云音乐的按钮色用的网易红,钉钉打卡的按钮用的腾讯蓝,都是在传递自己的品牌色,同时也是在进行指令的传达。

六、按钮的位置

在日常设计中,页面无疑少不了按钮位置的摆放,那么按钮放置在什么样的位置合适,这也是一个值得深思的问题,也许我们已经司空见惯了按钮的位置摆放,但是我们知道它为什么要放这里或者那里吗?下面我们来看下这几种设计模型,让它告诉我们,为什么,在特定场景下,按钮位置要这么放?

1. 设计依据 – Z型视觉模型

1.1 原理含义

Z型视觉模型是一种描述用户在浏览网页或界面时视觉轨迹的理论模型。

它的布局遵循字母Z的形状,指用户的浏览路线——从左到右,从上到下的的视觉运动轨迹。

首先,人们从左上角到右上角进行扫描,形成一条水平线;第二步,向页面的左下侧,创建一条对角线;最后,再次向右转,形成第二条水平线,当观众的视角以这种模式移动时,它形成一个虚构的“Z”字形。

1.2 视觉区域

  • 区域1:位于页面左上角,是用户视线最先关注的区域,通常放置最重要的信息,如网站标志、导航栏等,能第一时间吸引用户的注意力并让用户对页面内容有初步的整体认知。
  • 区域2:在区域1的右侧,用户的视线在水平移动时会经过该区域,可放置一些与区域1相关的辅助信息或次要的导航元素等。
  • 区域3:位于页面中部偏左,当用户视线继续向下移动时会关注到该区域,通常用来展示页面的核心内容,如产品介绍、文章主体等。
  • 区域4:在页面的右下角,是用户视线的终点区域之一,可放置一些重要的操作按钮或补充信息等,以吸引用户在浏览完主要内容后进行进一步的操作或获取更多信息。

1.3 应用案例

在电商网站中,商家会把热门推荐或主打产品放在区域1和区域3,以吸引用户的注意力。

在产品详情页面,将“加入购物车”“立即购买”等按钮放在区域4,方便用户在浏览完产品信息后进行购买操作。

天猫商城就是这样做的,把网站的LOGO图放置在左上角(区域1),把产品图放置在左下角(区域3),最后在用户浏览了全部页面之后,在右下角(区域4)放置购买按钮,引导用户下单。

在这个带有销售场景的页面设计中,购买按钮放置在右下角符合用户浏览习惯,也符合Z型视觉模型。

在B端应用软件中,可能运用的功能比较多,按钮也比较多,通过大量分析和观察发现,它们大部分喜欢把按钮放置在每次视觉运动线的起点或者终点的位置。

腾讯云是这样处理的,中国移动网盘是这么处理的,看似巧合,其实也有它合情合理的一面,因为每一个动作的开始和结束都会更加的引人注意。

这就跟人们每次入职一个新公司一样,刚进去时会特别卖力、小心,后面时间长了,也就形成免疫,习惯了,但是当最后要离开这家公司的时候,最后心情又会特别复杂,回想起自己在这里成长的岁月,就会心生很多的感慨,也会特别的记忆深刻。

也许这也是为啥很多页面设计,喜欢把重要的按钮放置在每次视觉运动线的起点或者终点吧!

七、按钮的颜色

按钮的颜色在界面中不仅起到视觉点缀的作用,同时也是按钮状态的一种呈现和反馈。

按钮颜色不是千篇一律的品牌色,它也经常需要根据业务场景的不同,更换颜色,比方说红色-删除按钮、黄色-告警按钮、绿色-通过按钮、蓝色-更多按钮,不同的按钮在颜色设计上都会有所区别。

此外,在设计按钮颜色时,有一些基本规范。

首先,从功能角度看,主要按钮通常会使用比较突出的颜色,像鲜艳的蓝色,这是因为蓝色醒目又不会过于刺眼,能引导用户去点击。次要按钮(如取消、返回)的颜色会稍淡一些,比如浅灰色,让用户知道这是相对次要的操作。

从颜色搭配来说,按钮颜色要和背景色有足够的对比度,方便用户识别。比如背景是白色,深色按钮就会很清晰;如果背景颜色较深,那按钮可以用浅色或者高亮度颜色。

另外,颜色的选择也要考虑产品的风格和使用场景。例如,在一个游戏软件里可能会使用更活泼的色彩,像红色、橙色;而在办公软件里,通常会采用比较沉稳的色调,如蓝色、黑色。

八、按钮在UI界面的设计原则

1. 可识别性

1.1 视觉清晰

按钮应采用用户熟悉的设计样式,如带有矩形或圆角矩形边框的填充按钮、带有阴影的填充按钮、幽灵按钮等。

1.2 文字明确

按钮上的标签应准确、简明直接地介绍其功能,避免使用过于通用或模糊的表述,让用户清楚点击后会发生什么。

2. 易操作性

2.1 位置合理

将按钮放在用户期望看到的地方,如遵循F型或古腾堡原则,在页面的视觉焦点区域放置重要按钮。

2.2 尺寸适宜

按钮大小应反映其在屏幕上的优先级,更大的按钮用于更重要的操作,同时要适配用户的手指,避免误触。

3. 一致性

3.1顺序得当、逻辑一致

按钮的顺序应反映用户与界面之间交互的逻辑,如“上一步”按钮通常在左边,“下一步”按钮在右边。

3.2 状态样式一致

按钮应具有一致的状态样式,如默认、按下、聚焦、禁用等,一个产品中,这些状态样式要高度的一致,不能在这个页面按钮样式是这样的,跑到另一个页面,样式又发生了改变。

著名的格式塔心理学也是这么认为的,它强调人对事物的理解是基于整体的、有组织结构的,如果按钮设计做到一致性,对提高产品的整体性是有非常大的改进的。

4. 简洁性

4.1 避免过多

避免在一个界面中使用过多的按钮,以免让用户感到无所适从,应优先考虑最重要的操作。

4.2 功能单一

每个按钮应尽量只执行一个主要功能,避免一个按钮承载过多复杂的操作,降低用户的认知成本。

希克定律指出,人的决策时间会随着选择的增加而增加。在按钮设计中,简洁的设计能减少用户的选择和认知负担,使用户能更快地做出决策并执行操作。

5. 美观性

5.1 风格统一

按钮的设计风格应与整个UI界面的风格保持一致,包括颜色、形状、字体等方面,形成统一的视觉体系。

5.2 对比协调

在保持整体协调的基础上,通过对比突出重要按钮,如使用高对比度的颜色、较大的尺寸等,吸引用户的注意力。

情感化设计理论强调设计应该注重用户的情感体验。美观的按钮设计能够传递积极的情感信息,增强用户和产品的情感连接。

6. 要符合习惯

奥斯卡·王尔德说过:“习惯一旦养成,便很难改变。”

所以我们在设计按钮的时候,一定要符合人性的习惯,而不是试图改变人们的习惯。

九、按钮设计的注意事项

1. 按钮设计要有分组意识

带有分组的按钮摆放,让人看起来总是更加的有序,也更利于用户进行操作,面对同类型的功能操作点无需跳跃着去寻找,能很快在相似功能操作区域找到。

360的分组意识很强烈,三个不同区域的图标按钮样式都做了明显的区分,让界面看起来更加有序,操作起来也更加的便捷。

2. 按钮排列视觉上要有主次

切不可一行按钮中出现多个高强调的按钮,Antdesign对这个也做了诠释,会对用户的行为进行错误的引导,也不利于聚焦。

通义这个页面虽然有多个选中的按钮,但是没有全部用高强调的按钮,只有强推荐的操作“开始录音”才用了强按钮。

其它通过相对浅的颜色做了弱按钮选中处理,视觉上主次分明,信息主次表达上也清晰可见。

3. 不要在按钮中放置两个图标

当一个按钮同时兼顾两个交互动作的时候,一定要区分设计,不能赤裸裸的展示在一个按钮中,而不做任何区分。

4. 返回按钮宜放置在左边

具有返回意义的按钮,应该放在左侧,暗示其方向是回到之前,例如上一步。

5. 按钮文字不宜太长

简短的文字更易被用户阅读和记住,在一个按钮上最多不超过5个文字,重要的按钮一般使用2~4个字。

十、按钮弱化设计的六种方式

❶ 用纯灰色文字的弱化按钮

❷ 用灰色边框+灰色文字的弱化按钮

❸ 用颜色边框+颜色文字的弱化按钮

❹ 用灰底+灰色文字的弱化按钮

❺ 用浅色底+颜色文字的弱化按钮

❻ 用纯颜色的弱化按钮

十一、总结

通过本篇文章的探讨,我们深入了解了B端按钮设计的九大核心要素。

从按钮的基本定义到Antdesign的分类,再到尺寸、构成、作用、位置和颜色等细节,每一部分都是提升用户体验的关键。

按钮设计不仅关乎美观,更影响着用户的操作效率和满意度。在UI界面中,遵循设计原则和注意事项,确保按钮既实用又具有吸引力,是每位设计师的职责。

希望本文能为设计师们提供有价值的参考,激发更多创新灵感,共同推动B端产品的交互设计向更高水平发展。

转载:人人都是产品经理

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

 

image.png

超多案例!教科书级数据可视化几何设计指南

清阳 设计思维

数据可视化的核心,是点、线、面的科学组合与艺术表达。兰亭妙微UI设计公司,从平面构成底层逻辑出发,拆解点、线、面三大几何要素在图表中的作用规律,结合散点分布、柱状宽度、趋势表达等实战案例,揭示几何形态如何提升数据传达效率与视觉美感。
 
在进入图表几何设计前,先掌握设计核心基本功 —— 平面构成的点、线、面。我们视觉所见的一切形态,都可抽象为这三种基础元素:点是图形的起点与最小单元,线由点连续运动形成,是形态的高度概括,面由线围合或延展而成,承载画面主体体量、决定视觉基调。
 

 

一、点线面的几何形态特征

 
从形态学与几何学双维度,解析点、线、面的视觉语言与设计规律。
 

1. 点:一切图形的基础单元

image.png

点是相对视觉概念,指画面中面积占比极小的图形,面积增大时,点的视觉属性会逐步弱化。
 
  • 形态因素:大小、形状、色彩、肌理。点的大小由空间对比关系决定,无固定尺寸;形状不限、色彩与肌理用于强化视觉特征。
  • 几何因素:面积、位置、数量、方向。面积包含空间对比与点间比例;位置分绝对坐标与相对关系;多点点阵可形成方向感,进而构成线、面、体。
 

2. 线:点的运动轨迹

image.png

线是点的移动路径,核心表达方向与趋势
 
  • 形态因素:宽度、形状、色彩、肌理。细线轻盈精致,粗线沉稳大气;直线简洁明确,曲线柔美多变;渐变、透明、阴影可丰富层次。
  • 几何因素:位置、长度、方向。定点运动形成直线,变向运动形成曲线;两点定位决定直线属性,斜向上表上升、斜向下表下降;多点连接可形成折线、曲线与封闭图形。
 

3. 面:承载数据的视觉主体

image.png

面是有体量的形态,可由点扩大、线封闭、点 / 线密集排列三种方式构成。
 
  • 形态因素:几何形、有机形、偶然形、不规则形;棱角面硬朗尖锐,圆角面圆润饱满;虚实可通过渐变、透明度、肌理实现。
  • 几何因素:大小、位置。面积决定视觉体量,位置影响画面平衡,是图表视觉调性的核心掌控者。
 

 

二、数据可视化的几何图形分类

 
按点、线、面几何属性,可将主流可视化图表分为三大类,叠加 3D 效果可延伸至 “体”。

image.png

1. 点图:聚焦分布与相关性

image.png

以小体量单元呈现,核心表达变量关系:
 
  • 散点图:展示两个连续变量的相关性,通过点的位置判断分布规律,识别异常值,用颜色、形状区分多组数据。
  • 气泡图:散点图升级版,承载 3 个及以上变量,X/Y 轴定位置,额外变量映射气泡大小、颜色,适合多维度对比与关联分析。
 

2. 线图:聚焦趋势与变化

image.png

以线条轨迹表达数据动态:
 
  • 折线图:展示时间 / 有序类别下的连续趋势,直观体现变化速度、幅度、周期。
  • 衍生类型:阶梯图适配突变数据,雷达图、路径图用于多维度对比与轨迹呈现。
 

3. 面图:聚焦对比与占比

image.png

以封闭色块呈现,视觉体量感强:
 
  • 柱状图:分类数据对比首选,垂直柱适合少分类,水平柱适配多分类场景。
  • 面积图:折线图填充强化趋势,凸显峰谷与区间变化,多变量重叠时需控制透明度。
  • 饼 / 环 / 玫瑰图:饼图展示占比(建议≤7 类),环图提升空间利用率,南丁格尔玫瑰图适配相近数值对比与周期数据。
 

4. 体:3D 立体强化视觉

 
为点线面添加立体效果,增强体量感与视觉冲击力,适用于大屏、展示类可视化场景。
 

 

三、点线面在可视化中的实战设计技巧

 
结合数据特征,用几何形态优化图表可读性与美感。
 

1. 点图设计:用形态区分维度

image.png

  • 分类变量:用形状、颜色、肌理区分不同组别。
  • 连续变量:用渐变色映射数值区间,清晰呈现分布梯度。

image.png

2. 线图设计:用线条传递情绪

image.png

  • 线条样式:数据量少用曲线 + 标记点,柔美清晰;数据量多用直线,硬朗易读、凸显峰谷。
  • 多线区分:用颜色区分变量,用粗细、虚实对比基准值(均值、极值)。

    image.png

  • 3D 效果:添加阴影打造悬浮感,提升层次。

image.png

3. 面图设计:用比例与色彩规范视觉

 
  • 柱状图:优先矩形 / 圆角矩形,最佳柱宽:间距 = 1:2;分类数据用不同色相,有序数据用同色系明度 / 饱和度渐变。

    image.png

  • 面积图:多变量重叠时设置低透明度,保证数据可读。

    image.png

  • 饼图:按从大到小顺时针排列,用不同色相区分分类。
 

进阶技巧:斐波那契数列规范柱宽

image.png

多图表连续展示时,柱宽易凌乱。可采用斐波那契数列固定柱宽(移动端推荐:21px、13px、8px、5px、3px、2px、1px),控制梯度范围、保证韵律感,同时兼顾数据可读性。
 

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

 

image.png

掌握工业 HMI 通用,彻底告别界面杂乱低效

清阳 设计资源

兰亭妙微UI设计公司,发现很多互联网设计师、刚入行的新手,甚至自动化工程师,在工控屏、产线中控界面的布局上极易陷入误区:按钮、数据、导航随意堆砌,要么界面拥挤信息混乱,要么元素摆放毫无逻辑,既加重一线工人操作负担,又无法满足工业场景的规范性与实用性。
 
今天给大家分享一套工业领域高频复用的实用布局技巧 ——三区布局法,逐区拆解实操规范,搭配可直接落地的案例与模板,新手也能快速上手,高效解决工业 HMI 布局难题。

 


 

一、为什么工业 HMI 首选三区布局法?

image.png
工业 HMI 的设计逻辑,与互联网 App、普通 B 端后台截然不同:它不追求个性化、情感化视觉效果,核心诉求是高效、规范、无干扰,操作效率与生产安全是第一准则。
 
三区布局法能成为工业 HMI 的通用标准模板,核心源于 3 点优势:
 
  1. 贴合操作员操作习惯:固定区域划分可让操作员快速形成肌肉记忆,无需反复寻找功能,大幅降低学习与操作成本;
  2. 信息层级清晰有序:核心设备状态、关键操作按钮优先置于显眼位,次要导航与辅助功能合理归位,彻底杜绝信息堆砌;
  3. 多场景灵活适配:小屏机床触控屏、大屏产线中控屏均可基于核心逻辑调整,通用性拉满,契合工业界面标准化布局要求。
 

 

二、三区布局法:核心规范与实操要点

 

三区布局的核心逻辑是顶区定状态、中区做核心、底区保便捷,三大区域功能定位明确,不可随意混用,具体规范如下:
 

1. 顶区:状态 / 报警区 —— 一眼掌控设备安全

image.png
顶区是操作员打开界面的第一视觉焦点,核心作用是快速呈现设备运行状态与报警信息,落实工业场景 “安全优先” 的设计原则。
 
  • 高度占比:界面总高度的 10%–20%,不占用中区核心操作空间;
  • 核心内容:设备运行状态(正常 / 停机 / 故障)、分级报警信息(红 = 故障、黄 = 警告,按优先级排序)、操作员 / 时间 / 班次等基础信息;
  • 设计要点:字体清晰易读,文字与背景对比度≥4.5:1;报警信息适度突出(可轻微闪烁,避免花哨干扰);顶区少放操作按钮,防止误触引发安全风险。
 

2. 中区:核心监控 / 操作区 —— 界面核心交互载体

image.png

中区是 HMI 界面的核心区域,占比最高、操作最频繁,布局合理性直接决定整体操作效率,完美契合工业 HMI “极简高效” 原则。
 
  • 高度占比:界面总高度的 60%–70%,为布局核心重点;
  • 核心内容:遵循 “一屏一核心” 原则,监控界面展示设备运行参数、工艺流程;操作界面放置启动、暂停、故障复位等核心按钮;
  • 设计要点:核心操作按钮优先置于右侧 / 中间,适配右手操作习惯;触控热区≥48px,兼容戴手套、螺丝刀操作;核心数据优先用仪表盘、折线图可视化呈现,避免大段文字与表格堆砌。

    image.png

image.png

image.png

 

3. 底区:导航 / 常用操作区 —— 便捷切换不占核心空间

 
底区主打界面快速导航与高频辅助操作,兼顾便捷性与界面整洁度,不挤占中区核心空间。

image.png

  • 高度占比:界面总高度的 10%–20%,与顶区呼应形成对称规整布局;
  • 核心内容:监控 / 参数设置 / 故障查询等导航按钮、画面切换、亮度调节等常用辅助操作;
  • 设计要点:导航按钮统一尺寸、均匀分布,采用 “图标 + 文字” 降低识别成本;常用操作按钮与中区核心按钮做视觉区分,严格遵循工业色彩规范,避免区域功能冲突。

image.png


 

三、导航设计补充建议

 
工业 HMI 优先采用直观外露式导航,相比西门子 HMI Template Suite 的隐藏式汉堡导航,虽少了部分显示空间,但学习成本更低、交互步骤更少,更适合一线工人快速操作。

image.png

同时,不建议使用超过 2 级的导航,多级导航会导致功能定位困难,大幅降低操作效率、增加学习成本。
 

 

四、实战适配:不同场景的三区布局调整

 
三区布局法并非一成不变,可根据屏幕尺寸、场景需求灵活调整,核心逻辑保持不变:
 
  1. 小屏机床 HMI:合并顶区状态与底区导航,最大化释放中区核心显示空间;

    image.png

  2. 标准屏设备 HMI:采用标准三段式布局,底部整合固定导航与常用操作,规整易用;

    image.png

  3. 大屏产线中控 HMI:扩充中区监控内容,展示全流程可视化界面,分模块呈现产线状态、报警、生产进度等复杂信息。

    image.png

 

 

五、总结

 
三区布局法是工业 HMI 设计的基础通用解法,也是最易落地、实用性最强的布局技巧。无论新手设计师还是资深从业者,都能借助这套方法,快速搭建规范、高效、安全的工业 HMI 界面,避开布局杂乱、操作低效的常见问题。
 

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

 

image.png

兰亭妙微UI设计公司,用11条总结,聊聊Vision Pro如何彻底改变UX设计行业

清阳 设计思维

Apple推出的突破性产品 Vision Pro 在科技界引起了轰动,新的设计趋势即将到来。苹果首席执行官蒂姆·库克在 WWDC 2023 上自豪地展示了这款全新设备,展示了增强现实 (AR) 和空间计算的新时代。

 

凭借 Vision Pro,Apple 再次展现了其突破创新界限的能力。本文将探讨 Vision Pro 如何彻底改变 UX 设计行业并改变我们与技术交互的方式。

一、摆脱传统显示器的束缚

Vision Pro 将用户从传统显示器的限制中解放出来,开创了空间计算交互的新时代。

image.png

通过无缝融合增强现实和空间计算,苹果推出了一种独特的输入方法(结合眼动和手势),类似于鼠标或触控板。这一创新让用户体验设计师有条件打造超越屏幕限制、身临其境和直观的用户体验,开辟了无限的可能性。

彩云注:当我们大多数人已经习惯了 2D UI 的设计模式,这种新的交互方式,给了我们很多创新的空间,比如结合眼睛和手势,我们可以给用户带来更自然直觉的新体验。

二、美学与功能的结合

Vision Pro 的设计将美学与功能无缝结合。这款设备采用铝制框架和曲面玻璃,外形类似滑雪护目镜,清楚地表明它的预期用途是在家庭和办公室等受控环境中。

包含用于图像捕获的物理按钮和用于调整的数字表冠确保了直观的控制,而灵活的表带和面罩使用户专注并屏蔽外部干扰。

image.png

彩云注:在考虑未来交互方式和视觉的时候,需要多结合硬件和软件的交互及视觉效果,怎样达到最直观的操作效果。

三、增强现实和空间计算

Vision Pro 主打增强现实,使其有别于以前的混合现实设备。通过将虚拟世界和物理世界无缝融合,用户体验设计师现在可以创造增强用户对现实感知的体验。

image.png

从将信息叠加到真实世界的物体上,到创建交互式 3D 环境,设计引人入胜、情境丰富的新体验。

四、设计新的输入方式

对于 Vision Pro,用户体验设计师将需要考虑传统鼠标和触控板之外的新输入方法。

image.png

用于图像捕获的物理按钮和用于调整的数字表冠为设计师提供了交互设计的新途径。设计直观和无缝的控件对于确保流畅和沉浸式的用户体验至关重要。

五、空间音频和沉浸式声音场景

Vision Pro 的突出特点之一是它的空间音频功能。通过集成内置的“音频 pods”,苹果通过创造丰富而身临其境的声音场景来增强用户体验。

image.png

这种革命性的音频本地化方法使设计师能够从不同的方向模拟音频源,从而与数字环境进行更吸引人、更逼真的交互。

六、顶尖的硬件和技术

在底层,Vision Pro 由苹果的标准 M2 芯片和专用于视频流的新 R1 芯片提供支持。

image.png

微型 OLED 显示屏,每空间提供令人印象深刻的 64 个像素,相当于标准 iPhone 像素,确保呈现清晰、充满活力的视觉效果。此外,与蔡司合作提供定制嵌入玻璃也体现了 Apple 的包容性和可访问性体验标准。

七、EyeSight:协作体验和社交能力

苹果推出了一项名为 EyeSight 的突破性功能,利用前置显示屏向房间内的其他人展示用户的眼睛。

image.png

通过捕获初始面部扫描,Vision Pro 在弯曲的前玻璃上创建用户的“真实眼睛”。这种对个人头像的创新使用促进了更真实和身临其境的社交互动,使用户能够在数字领域进行更深层次的联系。

八、聚焦工作场景

Apple 对电子邮件和桌面等与工作相关的应用的重视表明,Vision Pro 是想主打一种生产力工具。

image.png

通过与 Microsoft Office 等现有应用和流行的线上会议服务无缝集成,这款头戴设备使专业人员能够增强他们的工作流程并更有效地协作。

这种工作第一的方法使 Vision Pro 与其他优先考虑游戏和娱乐的设备区分开来。

九、打开内容的新维度

Vision Pro 开辟了内容消费和创作的新维度。不透明显示屏允许较暗的环境,非常适合展示从 iPhone 拍摄的 2D 照片以及捕捉空间照片和视频。

image.png

影院选项为用户提供了完整大屏幕的错觉,而游戏体验则投射到虚拟大屏幕上,提供身临其境的游戏体验。

十、与内容巨头合作

苹果与迪士尼联手,正在建立令人兴奋的内容合作伙伴关系,这预示着 Vision Pro 的光明未来。

image.png

随着 Disney+ 的推出,用户可以期待一系列身临其境的互动娱乐体验。苹果和迪士尼之间的合作证明了 Vision Pro 在重新定义我们消费媒体方式方面的潜力。

十一、新的设计工具和工作流程

为了适应 Vision Pro 的独特功能,Apple 推出了 VisionOS,这是一款专为空间计算设计的新操作系统。

image.png

这个新平台提供了丰富的教育功能,包括天文学、健康和音乐创作应用。此外,现有 iOS 和 iPadOS 框架的集成确保了开发人员的无缝过渡,并为专门针对 Vision Pro 定制的广泛应用生态系统铺平了道路。

总结

凭借 Vision Pro,Apple 向用户体验设计行业的革命迈出了大胆的一步。通过将增强现实、空间计算和尖端硬件相结合,苹果公司创造了一款开启交互和沉浸新维度的设备。

随着用户体验设计师拥抱 Vision Pro 的功能,我们可以期待超越传统界面的突破性体验,使用户能够以前所未有的方式与数字内容和环境互动。

用户体验设计的未来已经到来,在 Vision Pro 的引领下,它看起来前景无限光明。

转载:优设

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

 

image.png

兰亭妙微UI设计公司,深度拆解组件设计的6种状态类型

清阳 设计思维

组件状态是用户理解产品交互的核心,虽不直接显示却决定操作逻辑。兰亭妙微UI设计公司基于 Material 3 规范拆解启用、禁用、悬停等 6 种常用状态类型,详解状态层设计及各状态的适用组件与设计规则,助力打造清晰流畅的交互体验。

image.png

一、组件状态:交互体验的核心骨架

 
组件状态,是组件 / 元素在界面中当前可交互性与行为属性的直观表达。它虽不显性呈现,却是用户判断 “能不能点、点没点中、当前选中谁、操作是否生效” 的关键依据,直接影响产品的易用性与专业度。

image.png

基于 Material 3,界面交互组件最常用的6 种基础状态如下:
 
  1. 启用态:可正常接收用户交互
  2. 禁用态:不可交互,明确限制操作
  3. 悬停态:光标悬浮时的提示状态

    image.png

  4. 聚焦态:键盘 / 语音选中时的高亮状态
  5. 点击态:按压 / 轻触时的实时反馈
  6. 拖拽态:按住并移动时的状态提示
 

状态层设计原理

 
状态层是一层半透明叠加层,用于统一、清晰地标识组件当前状态。

image.png

  • 以同色系、固定不透明度实现视觉一致性
  • 可整元素覆盖或局部圆形区域应用
  • 同一时间仅叠加一个状态层,避免视觉混乱
 
层级结构:内容层 → 状态层 → 容器层
 

 

二、6 种状态完整设计拆解

 

1. 启用态(默认可交互)

image.png

定义:组件已就绪,可正常响应点击、输入、选择等所有操作。
 
  • 为交互组件的默认样式,遵循组件预设视觉规范
  • 适用于:按钮、输入框、开关、单选 / 复选、芯片、列表项等几乎所有可交互组件
  • 设计要点:保持高对比度、清晰可识别,传递 “可操作” 信号
 

2. 禁用态(不可交互)

image.png

定义:组件暂时 / 永久无法使用,不响应任何操作。

image.png

  • 视觉特征:低饱和灰色、低对比度、降低视觉权重
  • 核心规则:不可聚焦、不可点击、不可悬停、不可拖拽
  • 适用组件:按钮、卡片、复选框、芯片、列表项、单选、开关、输入框
  • 不适用组件:应用栏、徽章、对话框、导航栏、菜单、浮层、标签页
  • 设计要点:同一布局可同时存在多个禁用组件,不冲突
 

3. 悬停态(光标悬浮)

image.png

定义:PC 端光标停留在可交互元素上触发的提示状态。

image.png

  • 视觉:低透明度叠加层,搭配柔和淡入淡出动画
  • 适用组件:按钮、卡片、复选框、芯片、列表项、滑块、开关、输入框
  • 不适用组件:应用栏、对话框、导航栏、菜单、浮层、标签页
  • 核心规则:同一时间仅一个组件可处于悬停态
 

4. 聚焦态(键盘 / 语音选中)

image.png

定义:通过 Tab 键、语音等方式选中元素时的高亮状态。

image.png

  • 视觉:焦点环 / 高亮叠加层,明确当前操作位置
  • 适用组件:所有可交互组件(按钮、输入框、选择器、列表项等)
  • 不适用组件:应用栏、横幅、对话框、导航栏、浮层
  • 核心规则:同一时间仅一个组件可聚焦,提升键盘操作可访问性
 

5. 点击态(按压 / 轻触反馈)

image.png

定义:用户点击、轻触、键盘确认操作时触发的即时反馈。

image.png

  • 视觉:波纹效果 / 加深叠加,强感知 “操作已生效”
  • 适用组件:按钮、卡片、复选框、芯片、列表项、输入框
  • 不适用组件:应用栏、导航栏、对话框、菜单、浮层、标签页
  • 核心规则:按操作顺序触发,同一时间仅一个组件生效
 

6. 拖拽态(按住移动)

image.png

定义:用户按住组件并拖动时的状态,提示 “正在移动”。
 
  • 视觉:低饱和叠加、轻微抬高阴影,低调不干扰
  • 适用组件:卡片、芯片、列表项、滑块
  • 不适用组件:按钮、应用栏、导航栏、对话框、菜单
  • 核心规则:同一时间仅一个组件可拖拽,避免界面混乱

 

转载:人人都是产品经理

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

 

image.png

兰亭妙微UI设计公司:10 个产品趣味设计细节拆解:高手如何用巧思打动用户

清阳 设计思维

好奇心是用户探索产品的核心驱动力,有趣、新颖、有温度的设计,能快速抓住注意力、激发互动欲,让产品从同质化中脱颖而出。本文精选 10 个趣味 UI/UX 设计案例,从情绪表达、互动引导、视觉风格等维度拆解,兰亭妙微UI设计公司帮你快速 get 高手的设计思路。
 

 

1. 形象化心情场景:让情绪表达更直观

image.png

日记类产品的核心是记录情绪,Moo 日记 App 打破传统文字 / 单色标签的局限,为每一种心情匹配专属动态场景插画
 
动态视觉让情绪传递更具象,丰富的标签体系覆盖更多情绪状态,用户无需文字描述,就能精准定格当下感受,提升记录的愉悦感与完成度。
 

2. 萌系 IP 陪练:把健身变成趣味互动

image.png

健康需求崛起让运动类产品竞争加剧,Rumbo 健身 App 以毛茸茸软萌 IP作为健身伙伴,替代冰冷的器械 / 数据展示。
 
软萌形象弱化健身的枯燥感与压力感,用陪伴感建立情感联结,让用户更愿意坚持训练日程,轻松实现产品差异化。
 

3. 童趣动效图标:唤醒情感共鸣

image.png

动态图标是提升模块关注度的利器,孩子王 App 首页金刚区的「儿童馆」图标,采用小孩侧空翻入场动效
 
灵动的童趣动作贴合产品定位,既突出核心功能入口,又唤醒用户童年记忆,用情感共鸣降低用户抵触心理,提升点击意愿。
 

4. 结构化空状态:告别单调空白

image.png

新用户首次使用时,空状态是极易被忽视的体验触点。Moo 日记个人中心相册入口,摒弃传统文字 + 简单插画的形式,采用照片结构化展示填充空状态。
 
既让界面更饱满、不突兀,又提前暗示相册功能形态,降低用户认知成本,让无数据页面也有设计感。
 

5. 对话式引导:像聊天一样完成操作

image.png

生硬的步骤指引容易让用户放弃,罐头冥想 App 采用朋友式对话交互做操作引导。
 
温和的语气、生活化的表达,消解用户防备心,让引导过程更轻松自然,大幅提升流程完成率,适配冥想类产品的舒缓调性。
 

6. 签到前后差异化:兼顾吸引与体验

image.png

签到是提升用户留存的经典手段,美团外卖会员签到做了精准的视觉分层设计:
 
  • 签到前:红包样式 +摇摆动效,强视觉吸引促使用户点击;
  • 签到后:进度条展示,弱化视觉比重,避免遮挡核心功能。
     
    一强一弱的设计,既保证签到转化率,又不影响整体界面体验。
 

7. 个性个人中心:用 IP 抓住眼球

image.png

image.png

个性化时代,千篇一律的个人中心已无法满足用户。白日梦 App 采用鬼马动态 IP+ 独特视觉风格,打造辨识度极高的个人中心。
 
呆萌有趣的动态效果瞬间抓人眼球,满足用户对独特性的追求,强化产品记忆点。
 

8. 手绘暖系风格:营造温馨氛围

image.png

UI 风格日趋多元,独特画风能深化用户印象。好好养宠物 App 主打手绘风 + 暖色系,手绘图标、治愈插画贯穿界面。
 
温暖柔和的视觉感受,贴合宠物陪伴的产品调性,让用户使用时倍感温馨,提升情感依附。
 

9. 电子相册空状态:触发场景联想

image.png

马蜂窝 App 的空状态设计紧扣旅行属性,采用相框 + 随机风景插画形式,点击可切换不同风景。
 
模拟电子相册的交互,唤醒用户旅行回忆,激发创作 / 分享欲,让空状态从 “无用页面” 变成 “情感触发点”。
 

10. 自定义形象装扮:绑定个性化与转化

image.png

用户追求专属体验,好柿花生 App 在个人中心开放形象自定义功能,装扮道具可通过抽奖获取。
 
既满足用户个性化展示需求,又以抽奖机制提升用户活跃度与商业转化,实现体验与收益双赢。
 
转载:优设

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

 

image.png

一篇讲透!设计师必看的交互基础术语全解,兰亭妙微UI设计公司

清阳 交互设计及用户体验

本文聚焦交互设计核心认知,清晰区分UI 设计、交互设计、UX 体验设计,并逐一拆解高频交互术语,兰亭妙微UI设计公司帮你快速建立完整的交互知识体系。

image.png

二、交互设计核心认知:分清 UI / 交互 / UX

 
很多刚入行的设计师,容易混淆 UI、交互、UX 三者的边界,先把核心定义与关系理清楚。

image.png

1. 三者核心定义

 

  • UI 界面设计:聚焦产品最终视觉呈现,负责排版布局、色彩、图标、视觉样式等落地工作,核心是把界面做美观、规整
  • 交互设计(IXD):制定界面操作规则与功能使用流程,比如外卖下单步骤、提醒设置逻辑、AI 对话交互方式等,核心是让用户会用、好用
  • UX 体验设计:以提升整体用户体验为目标,覆盖需求分析、交互设计、UI 设计、用户测试等全流程,是包含交互与视觉的顶层设计
 

2. 最简单的区分方法

image.png
  • 只做视觉落地、满足产品需求 → UI 设计
  • 制定操作流程、定义使用方式 → 交互设计
  • 以体验为目标,统筹视觉与交互 → UX 体验设计
 

3. 三者关系与工作流

 
三者并非孤立,而是高度关联、相互影响:

image.png

  1. UX 包含交互与 UI,先定交互方案,再做 UI 视觉是标准工作流;
  2. 交互逻辑直接影响用户体验与 UI 布局,UI 设计也必须适配交互操作;
  3. 好设计要兼顾操作流畅视觉协调,不能顾此失彼。
 

4. 交互设计的交付与工作场景

image.png

  • 核心产出:线框图 / 原型图,配合流程连线、逻辑备注说明交互规则;
  • 常见误区:不必死磕高保真可交互原型(Axure/Figma 动效),核心是输出清晰可落地的方案
  • 职场现状:简单需求可在 UI 设计中同步完成交互;复杂功能 / 逻辑(尤其 B 端)必须独立做交互设计,减少改稿、提升效率。
 

 

三、交互核心术语扫盲(一文看懂)

 

1. 基础概念类

image.png

  • 人机交互(HCI):人与机器 / 软件的所有互动行为总称,开关机、点击、输入、鼠标操作等都属于此,界面交互是其子集。
  • 交互设计(IXD):特指软件界面的操作规则与流程设计。
  • 交互界面(UI):可触发操作、获得反馈的可视界面,纯静态图片 / 视频不属于交互界面。
  • 交互原型:分静态(线框图,表达逻辑)与动态(可操作演示,用于验证)两类。
  • 交互文档:记录项目交互逻辑、规则、细节的团队协作文件,用于信息同步与存档。
 

2. 流程与行为类

 
  • 交互流程(User Flow):用户完成一个目标的完整步骤,如首页→选品→下单→支付的全路径。
  • 交互事件:用户单次操作 + 系统反馈的完整过程,包含触发、行为、反馈、动效,是 Figma 等工具的交互基础单位。
  • 交互方式(Trigger):界面预设的触发规则,移动端以手指操作为主(点击、长按、拖拽、重压),PC 端以鼠标 / 快捷键为主。
  • 交互操作(User Action):用户实际做出的操作行为,与 “交互方式” 匹配才能正常触发功能。
  • 交互反馈(Action):用户操作后系统给出的响应,如页面跳转、弹窗关闭、支付成功提示等。
  • 交互动效(Animation):反馈的视觉动画形式,如页面滑入、弹窗弹出、点击动效等。
 

3. 评价与体验类

  • 交互体验:用户使用功能时的操作感受,仅聚焦产品交互环节,不含定价、客服等外部因素。
  • 交互可用性(Usability):衡量交互是否好用、易上手的核心标准,决定设计方案的优劣。

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

 

image.png

日历

链接

个人资料

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

存档