首页

兰亭妙微｜智能电视端 UI 设计核心原则（实战总结）

涛涛 设计思维

兰亭妙微设计公司深耕商业 UI/UX 设计十余年，在智能电视、OTT 盒子、智慧大屏等项目中积累了大量实战经验。电视端 UI 与移动端、PC 端设计逻辑差异显著，核心是适配遥控交互、远距离观看、暗光环境三大特性。本文结合真实项目复盘，整理出一套可直接落地的电视端 UI 设计基础规范，帮你避开常见误区。

评论(0) 浏览(237)

UI 设计思考全总结｜兰亭妙微：做设计，到底要思考什么？

涛涛 设计思维

设计的最终目的，是让产品更好用、更有价值、更能解决真实问题。在兰亭妙微服务 B 端系统、企业平台、可视化界面的多年里，我们始终认为：好设计不是凭感觉，而是靠清晰、完整、落地的思考体系。

评论(0) 浏览(181)

为什么争夺用户注意力是未来设计趋势？

清阳 设计思维

在信息过载的数字时代，用户注意力已成为最稀缺的资源，设计的核心使命不再是单纯追求视觉美观，而是科学管理、尊重并守护用户注意力，这正是未来设计的核心走向。
 
很多人误以为设计依赖直觉与感性，是难以拆解的 “黑匣子”，行业内也充斥着 persona、故事板等基础方法论的重复内容。但优秀的交互设计背后，藏着可被解构的科学逻辑，兰亭妙微UI设计公司将从体验痛点、行业乱象到正向设计，拆解注意力设计的本质。
 
 

一、忽视注意力：糟糕设计引发的致命后果

 
设计失误从来不是小问题，在关键场景中，不良界面会直接引发灾难性后果，根源都是违背基础可用性原则、无视用户注意力分配。
 
  1. 航空事故：1989 年波音 737 客机坠机，因界面未明确标识故障引擎，机组误关正常引擎，导致 47 人遇难、74 人受伤。

    image.png

  2. 工业爆炸：2005 年 BP 炼油厂爆炸，控制室 HMI 界面违反可用性原则，操作人员误读反馈，造成 15 人死亡、180 人受伤，经济损失惨重。
  3. 公共预警失误：2018 年夏威夷误发导弹紧急警报，源于操作界面模板设计模糊，官员一键选错，引发全民恐慌。
 
这些极端案例印证：设计的底线是保障安全，而保障安全的核心，是让用户精准获取关键信息、集中注意力做正确决策。日常产品中，忽视注意力的设计同样会造成操作繁琐、认知混乱，持续消耗用户精力。
 
 

二、滥用注意力：数字时代的 “分心陷阱”

 
企业开始重视用户体验后，部分从业者却扭曲设计原则，用心理学手段操纵用户注意力，最大化停留时长而非提升体验，催生了全民分心的现状。

image.png

  • 早在 2012 年，谷歌风投合伙人乔・克劳斯就提出 “分心文化”：数字产品持续刺激大脑，让用户失去长期思考能力，闲置时便陷入焦虑。
  • 前谷歌产品经理 Tristan Harris 发布内部倡议，呼吁科技公司停止利用人性弱点，尊重用户注意力，但这一问题至今未解决。
 
如今，多任务功能（画中画、分屏）看似便捷，却加剧认知负荷；营销部门将 UX 设计师沦为 “提升参与度的工具”，而非优化功能。
 
斯坦福研究数据显示：人类平均专注时长从 2004 年的 2.5 分钟，暴跌至 2023 年的 47 秒，降幅达 66%。频繁切换任务会持续加重认知负担，削弱用户深度专注能力，引发生活与工作的双重焦虑。
 
 

三、正向设计：守护注意力，创造高价值体验

 
唐纳德・诺曼在《为更好的世界而设计》中强调：设计应正向引导行为，而非操纵用户，营销式的行为操纵违背职业道德。
 
典型反例：投资应用 Robinhood 曾用游戏化界面、推送通知、庆祝动画诱导用户频繁交易，而非理性投资，最终因争议被迫改版，回归理性投资体验。
 
而真正优秀的注意力设计，以用户目标为核心，帮用户聚焦关键信息、减少认知消耗，在高风险领域价值尤为突出：
 
  1. 驾驶安全：HUDWAY 平视显示器，让驾驶员专注道路，无需低头查看信息，降低事故风险。

    image.png

  2. 行车预警：特斯拉前方碰撞警告系统，通过视觉 + 声音双重提醒，快速抓取驾驶员注意力，规避碰撞风险。

    image.png

  3. 工业生产：Solomon 科技的 3D 视觉 AR 系统，实时识别组装部件，帮操作员集中注意力，减轻精神压力。

image.png

未来，医疗、安全、制造、军事等高风险领域将成为技术应用核心，能否科学管理用户注意力，直接决定产品价值与社会意义。
 

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

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(185)

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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(260)

学会这三招，让用户快速下单！——兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(162)

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

清阳 设计思维

数据可视化的核心，是点、线、面的科学组合与艺术表达。兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(232)

APP UI 弹窗设计全解｜兰亭妙微设计实战总结

涛涛 设计思维

弹窗是移动端界面交互的核心组件，贯穿用户操作全流程，直接影响产品体验与转化效率。兰亭妙微设计团队结合多年项目实战，从分类、样式、场景、规范四个维度，系统梳理 APP 弹窗设计逻辑，帮助设计师精准选型、高效落地。

评论(0) 浏览(295)

兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(148)

兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(161)

兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(201)

分类

日历

链接

个人资料

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

存档