首页

资讯/灵感全都有!2026年4月设计资讯第二波!

清阳 行业趋势

兰亭妙微UI设计公司分享资讯

一、全文速览图

image.png

二、安全边界:Anthropic泄露潜藏的暗网危机

Anthropic 内部文件意外流出,揭示了其最强模型 Mythos 的恐怖算力。该模型虽具备重塑行业的潜力,但也因可能被攻击者用于挖掘系统漏洞而引发安全危机。官方声明称,在正式发布前需确保防御者已做好应对这种新型算力冲击的准备。

image.png

 

图源:Anthropic, Getty Images

此次泄露迅速波及资本市场,导致网络安全相关股价剧烈波动。分析师指出,Mythos 揭示了 AI 技术在安全攻防中深度嵌入的现状,反映出利用 AI 进行威胁防御已成常态,同时也暴露出单点泄露可能引发的系统性金融风险。

image.png

 

图源:Anthropic, Getty Images

随着 Mythos 的曝光,OpenAI 等巨头的对标模型也浮出水面,预示着 AI 正从辅助工具进化为攻防核心。未来技术博弈将进入“以 AI 对抗 AI”的新阶段,攻击者与防御者在更高维度上的算力对决,将彻底改写网络安全的竞争格局。

三、技术边界:英伟达仅凭矢量数据渲染

NVIDIA证实DLSS 5并非通过读取游戏引擎的3D几何或材质数据运行,而是仅凭2D渲染帧与运动矢量进行AI推断。这意味着该技术本质上是通过分析图像来“幻化”细节(如皮肤与光照),而非精确重建场景。

image.png

 

图源:NVIDIA

虽然这带来了惊人的视觉增强,但也导致AI会在早期预览中产生原画中不存在的细节“幻觉”,引发了外界对画面真实性与艺术还原度的质疑。

四、设计边界:谷歌 AI 画布的无限可能

Stitch 正在重构 UI 设计范式,推出 AI 原生无限画布并引入“氛围设计”概念。用户不再受限于枯燥的线框图,只需通过自然语言描述业

image.png

务目标或灵感,AI 代理即可理解设计意图并并行处理多模态输入,让创意探索从底层逻辑转向感官体验。

 

图源:Google

平台实现了人机交互的自然化,支持用户通过语音指令进行实时设计对话与方案筛选。同时,Stitch 能将静态画面瞬间转化为交互原型,由 AI 自动推演点击逻辑与用户旅程,并支持通过 URL 提取设计系统,极大简化了从规则制定到原型生成的复杂流程。

image.png

 

图源:Google

五、法律边界:Vogue 与 Dogue 的商标博弈

时尚巨头康泰纳仕正式起诉恶搞杂志《Dogue》,指控其封面设计侵犯《Vogue》商标权。这本由独立创作者创立的实体刊,因让狗狗模仿人类大片而走红。目前,康泰纳仕不仅要求经济赔偿,更强制要求销毁所有库存杂志。

image.png

 

图源:dogue

创始人 Portnaya 坚称《Dogue》是基于对话与重新诠释的艺术创作,旨在为独立创作者争取表达空间。然而,面对销量微薄与高昂法律费用的悬殊对比,这场“大卫与歌利亚”式的博弈陷入僵局,创作者正通过众筹寻求法律援助。

image.png

 

图源:vogue

六、自然边界:皇家植物园的品牌新姿态

Johnson Banks 为爱丁堡皇家植物园(RBGE)打造的品牌重塑旨在整合四个园区的品牌感知,确立了“四处花园,一个植物世界”的品牌愿景,将爱丁堡、本莫尔、道伊克和洛根的花园融为一体。

image.png

 

图源:johnsonbanks

还专门设计了边框,可以用来框住作品,并提醒人们它们始终存在,而不是事后才想起来的。

image.png

 

图源:johnsonbanks

这些标志首次展示了一款全新的定制字体,共有四种字重。它是Nomada Incise的定制版,线条棱角分明,优雅别致。最细的字重中包含一系列连字,呼应了西巴尔迪亚符号及其边框的生动呈现。

image.png

 

图源:johnsonbanks

七、文明边界: 剑桥创新对历史的推动

剑桥地区以其创新和发现而闻名,而这一切始于其世界闻名的大学校园内,如今已发展成为环绕该地区的欧洲领先的知识生态系统——融合了 5000 家创新驱动型公司、60 家跨国公司、5 个医院信托机构、36 个研究园区、2 所大学(剑桥大学和安格利亚鲁斯金大学)以及蓬勃发展的初创企业和投资者群体。

image.png

 

图源:johnsonbanks

以图解为主题,并将其运用到代数、方程式、图表和文字游戏中。这既充分利用了该地区的科学声誉,又为方案增色不少,同时还创造了一种独特的视觉和语言。

image.png

 

图源:johnsonbanks

将自己最喜欢的创意与剑桥郡广袤无垠的天空的静态和动态影像相结合,打造出一套可应用于多种媒体的设计工具包。

image.png

 

图源:johnsonbanks

转载:优设

兰亭妙微(蓝蓝设计)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

解锁按钮设计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 设计|蓝色配色实战指南:界面高级感这样做

涛涛 设计管理与成长

大家好,这里是兰亭秒微设计。作为专注 UI/UX 视觉体系搭建的设计团队,我们在金融、科技、生活服务等多领域项目中发现:蓝色是 UI 设计里适配性最强、容错率最高的主色,但想做出高级、耐看、有品牌记忆点的界面,配色逻辑远比 “选个蓝” 更重要。

7 个章节深度拆解:设计中如何打造直击人心的「愉悦感」 发布时间:2024/12/31

清阳 设计思维

引言

 
谈及用户体验,愉悦是高频出现的核心关键词。让用户真正爱上一款产品,打造愉悦的使用体验是核心目标,也是设计的终极追求之一。
 
兰亭妙微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

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

清阳 设计思维

争夺用户注意力:为何它是未来设计的核心趋势

 
在信息过载的数字时代,用户注意力已成为最稀缺的资源,设计的核心使命不再是单纯追求视觉美观,而是科学管理、尊重并守护用户注意力,这正是未来设计的核心走向。
 
很多人误以为设计依赖直觉与感性,是难以拆解的 “黑匣子”,行业内也充斥着 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。

 

image.png

移动端表格设计:5 个实用解法,彻底解决小屏数据展示难题,兰亭妙微UI设计公司

清阳 移动端UI设计文章及欣赏

移动端表格设计:5 个实用解法,彻底解决小屏数据展示难题

在 B 端移动端设计里,表格适配一直是公认的难点:表格天生依赖横向空间,而手机以竖屏为主、以阅读为核心场景,编辑与复杂操作受限,直接照搬 PC 端表格必然水土不服。
先明确核心前提:做移动端表格前,先判断非做不可吗?复杂配置类功能,可直接引导用户跳转 PC 后台处理(如飞书移动端限制表格横屏编辑),避免强行在小屏做冗余功能。
结合销售外出查看 CRM 客户数据、拨号、查地址的真实业务场景,把设计思路分为保守派(保留表格形态)和激进派(重构展示形式),兰亭妙微UI设计公司,分享 5 个落地性极强的解决方案。

image.png


一、保守派:保留表格形态,轻量化适配

1. 横竖屏一键切换

image.png

针对表格横向信息过多的问题,放弃体验差的重力感应切换,在表格区域设置悬浮切换入口,用户点击即可一键横屏,快速总览完整数据。

image.png

  • 优势:实现成本低,可全局复用,适配纯阅读场景
  • 局限:仅支持查看,无法做数据编辑、批量操作

2. 固定表头 + 滚动指示灯

竖屏展示表格,针对性解决三大阅读痛点:

image.png

  1. 数据对应混乱:冻结首列表头,横向滚动时始终可见关键字段
  2. 屏效过低:适度缩小字体,提升信息密度
  3. 滚动无预期:添加滚动指示灯,清晰提示当前查看进度
  • 核心:像给表格加了可视化滚动条,降低阅读认知成本

二、激进派:重构展示形式,贴合移动端习惯

3. 关键字段收折展示

image.png

简化表格,只外露3-4 个核心字段,其余信息折叠隐藏,点击展开查看完整内容。
  • 选字规则:通过「重要度 + 字段长度」十字分析,优先选短文本、高优先级字段
  • 适用场景:字段数量适中,用户需快速识别数据的场景

4. 卡片式列表呈现

image.png

在收折基础上升级,用卡片规整信息,外露高频操作按钮(如客户列表的拨号键),兼顾信息展示与操作效率。
  • 优势:符合移动端视觉习惯,操作路径更短,是 B 端移动端最常用方案
  • 适配场景:外勤人员快速查看、一键操作的业务(如销售、配送)

5. 全信息详情卡片

image.png

强化卡片展示能力,单张卡片完整承载所有数据,无需再跳转二级详情页,一站式完成信息查看与操作。
  • 优势:信息一站式展示,减少页面跳转,大幅提升操作效率
  • 典型场景:配送员订单、外卖详情、销售客户速览等高频轻操作场景

最后:移动端表格的设计边界

设计时要明确功能边界:移动端优先满足阅读、筛选、快捷操作,复杂编辑、配置、批量处理等需求,果断引导至 PC 端完成。
没有完美的方案,只有贴合业务的选择 —— 先抓用户核心诉求,再选适配的展示形式,才是移动端表格设计的核心逻辑。
 

兰亭妙微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 设计必须死抠的细节(原创干货)

涛涛 设计管理与成长

很多 UI 设计师软件熟练、审美在线,但产出总不够精致、不够专业、开发落地差,核心原因就是:细节没抠到位。

日历

链接

个人资料

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

存档