首页

表盘设计分享【一】

杰睿

0bea951f32f9ca9d51675197c681577c.jpg

8cd1d0f8382224270c1eff7b82da4b4c.jpg

633f3d9c9f83e736d861afe2d428c110.jpg

859b302bd0daa2efe3a2dbfc6b69497f.jpg

44320e08d38b3268bd8b5b0c8975ee46.jpg

 

在数字产品设计中,响应式设计早已成为连接功能与体验的关键路径。智能手表的表盘,作为最核心的信息承载区,正在向“可感知、可适配、可延展”的方向不断演进。而我们将其类比为“数字卡片”,正是因为二者在设计逻辑上的高度契合:都追求信息层级的清晰展现、内容与场景的灵活适配,以及操作的直观反馈。

卡片设计以模块化、结构清晰、响应灵活著称,能在不同屏幕与使用场景中自如调度内容展示方式。而智能手表的表盘设计同样需要在极小的显示空间内,精准传递时间、健康、通知等多维度信息。通过响应式设计的引入,表盘可以根据环境光线、使用者习惯、交互状态等动态变化,自动调整元素的排布与表现形式,实现“信息即所需,界面即交互”。

例如,在运动状态下表盘可自动突出心率与步数;而在夜间,它又能切换为更具护眼性的低亮模式。这种“感知上下文”的能力,让表盘从一个静态的界面,变为一个贴近用户、主动适应的智能卡片。

响应式的表盘设计,不仅提高了使用效率,更拓展了产品体验的边界。它像一张随时变化的数字卡片,安静却聪明地陪伴在你腕间,把复杂的系统逻辑转化为可感知的温柔细节。

 

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

如何通过单个视觉组件将信息可视化

杰睿

WechatIMG25.jpg

WechatIMG26.jpg

WechatIMG27.jpg

WechatIMG28.jpg

 

单个视觉组件实现信息可视化,并非简单的图形替代文字,而是通过视觉语法构建信息的传递路径,让接收者以最低认知成本获取核心内容。
以最基础的柱状图为例,若仅展示单一数据维度,确实显得单薄。但通过优化设计,它能承载更丰富的信息:柱体高度对应数值大小(基础信息),柱体颜色饱和度区分数据可信度(附加维度),柱体顶部的小三角标记同比增长率是否为正(关联指标)。这三个设计元素共同作用,使一个柱状图既能呈现具体数值,又能说明数据质量与增长态势,信息密度提升却未增加理解难度。
视觉组件的有效性,取决于信息层级的清晰划分。像仪表盘的设计,指针指向的刻度是核心信息(当前值),表盘颜色分区(绿色、黄色、红色)界定正常、预警、危险区间(判断标准),指针末端的细微抖动表示数据采集的实时性(动态属性)。这种设计让观者先捕获核心数值,再通过辅助视觉元素理解数值所处的语境,符合人类认知的递进规律。
关键在于找到数据间的内在关联性,并转化为可感知的视觉关联。例如用树状图展示公司组织架构时,方块面积对应部门人数(数量关系),方块间的距离表示协作频率(关联强度),方块颜色表示绩效等级(评价维度)。三个视觉变量相互配合,一个组件就能说清 “有多少人”“协作如何”“表现怎样” 三个层面的信息,且这些信息通过空间布局形成有机整体,而非孤立存在。
优质的单个视觉组件,是在有限视觉空间内建立信息的有序结构,让每个视觉元素都承担明确的信息传递功能,既不冗余也不缺失,实现 “一图抵千言” 的精准传达。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

信息架构设计 | 全球导航、上下文导航、本地导航的区别是什么?

杰睿

“导航系统并不是单一的工具,而是由多个互补的导航方式组成。” ——《信息架构:超越Web设计》
 
在信息架构里,导航系统不止一种。
我们常说的“导航”,其实包含了三个维度:全球导航、上下文导航、本地导航
如果你把网站当成城市地图,三者的区别就像
 
全球导航(Global Navigation) 相当于城市主干道。
总是在页面的显著位置(如顶部、侧边),无论用户在哪一页都可见。 
作用:提供站点的整体结构轮廓,保证“不会迷路”。
举个例子:你在电商平台首页、商品页、购物车页,都能看到顶部的“首页 / 分类 / 购物车 / 我的”。
 
 
本地导航(Local Navigation) 像是某个商圈里的路标。
 它只在特定区域内出现,展示该部分的子页面结构。
 作用:帮助用户在当前模块内自由切换,不跳出当前上下文。
比如你点进“具体单件商品”后,在侧边出现同商品分类就是本地导航。
 上下文导航(Contextual Navigation) 像是你在某家咖啡店里看到“附近的甜品推荐”。
 它不是常驻的,而是出现在特定内容中,基于语义提供额外链接
作用:提供延伸阅读、关联信息,拓宽用户探索路径。
对“单件产品”的批注延展,这就是上下文导航。
“全球导航帮助用户定位站点结构,本地导航指导区域内部的浏览,上下文导航则引导语义关联的跳转。”
 
如何为你的产品选对导航层级?
信息量不大? 全部用全球导航即可。
内容分区明确? 加上本地导航提升效率。
内容密集丰富? 增设上下文导航,增强探索体验。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
 

用户体验中的神经设计:认知科学如何帮助我们打造更佳的界面

杰睿

通过 AI 辅助创建的图像

说实话,我们大多数人在设计屏幕时并不会考虑人脑。我们关注的是布局、间距和颜色。但事实是:设计并非发生在屏幕上——而是发生在用户的大脑中。这就是神经设计的用武之地。

神经设计就是运用认知心理学和神经科学来构建直观、轻松甚至略带愉悦的界面。我之前并没有学过神经科学,但自从我开始了解大脑的运作方式后,我的设计方式就彻底改变了。

以下是我所学到的知识 — — 有真实的例子、用户体验法则和一些你可能想看看的书籍精华。

1. 大脑是懒惰的(好的方面)

我们的大脑天生就具有节能的本能。这意味着人们几乎总是会选择阻力最小的路径。当你的用户界面过于复杂或选项过多时,大脑就会说:“不行。”

记住希克定律

提供的选择越多,做出决定所需的时间就越长。

想想谷歌的主页只是一个标志和一个搜索栏。这并非偶然——它的设计是为了减少认知负荷。

Google.com

您可以做什么:

  • 确定主要行动的优先级
  • 保持表单简短(就像 Typeform 那样)
  • 删除无用的元素

2.人们先看到,后思考

设计首先是情感驱动,其次是逻辑驱动。这意味着色彩、布局甚至动画都能在第一秒就建立信任。

让我们来看一个例子:Duolingo 的应用程序使用友好的插图、有趣的语气,以及一些感觉像大脑“拍拍背”一样的小奖励。它降低了学习新语言的情感障碍。

图片来源——匹兹堡杂志

以下是Susan Weinschenk 所著《神经网络设计》一书中的一条重要建议:

“我们不会做出合乎逻辑的决定。我们会做出情绪化的决定,然后用逻辑来证明其合理性。”

您可以做什么:

  • 使用温暖、友好的设计语言
  • 让入职培训感觉像是手把手指导,而不是测验
  • 添加微妙的动作,使操作感觉灵敏(就像Apple在 iOS 中使用弹跳或淡入淡出一样)

3.熟悉的感觉很好

大脑喜欢模式。当用户看到自己熟悉的事物时,他们会感到安全,并且能够掌控一切。

记住雅各布定律

用户大部分时间都花在其他网站上。因此,他们期望你的产品也能以同样的方式运作。

让我们看一些例子:Instagram 的底部标签栏亚马逊的购物车图标Gmail 的撰写按钮——它们都遵循常见的视觉隐喻,以减少学习曲线。

您可以做什么:

  • 遵循原生平台惯例
  • 使用常见的图标和术语(除非您是 Zara,否则不要将购物车称为“我的包”)
  • 除非有充分理由,否则避免不必要的改造

4.记忆很短暂——真的非常短暂

认知科学告诉我们,用户的工作记忆中一次只能记住大约4个条目。因此,如果你的应用依赖于用户记忆指令,那么它注定会失败。

“米勒定律”来了

一般人的短期记忆只能保留 7 件(正负 2 件)物品。

真实案例:你有没有尝试填写表单,但错误信息只有在提交后才会显示,而你却忘了哪个字段出了什么问题?这简直就是记忆噩梦。

您可以做什么:

  • 将任务分解成小的、可管理的步骤(例如Airbnb 的分步主机设置
  • 使用内联验证
  • 保持标签靠近输入(不要让用户滚动或猜测)

5.反馈=安全

大脑会不断检查:这有效吗? 我能控制吗?如果用户界面没有响应输入,用户就会感到不确定——即使后台一切正常。

用户体验法则:反馈循环原则

人们需要立即得到反馈来了解其行为的结果。

例如,Slack在消息发送时会显示“正在发送…”的动画和勾号。这能建立信任,尤其是在快速对话中。

您可以做什么:

  • 显示加载状态、成功消息或错误提示
  • 允许用户撤消操作(如 Gmail 的“撤消发送”)
  • 动画过渡到信号系统状态

如果你想深入了解,可以参考以下书籍推荐

以下几本书确实帮助我将神经科学和用户体验联系起来:

  • Susan Weinschenk 的《神经网络设计》 ——超级易读,示例丰富
Susan Weinschenk 的《神经网络设计》
  • Susan Weinschenk 撰写的《每个设计师都需要知道的关于人的 100 件事》 ——设计师的最爱
苏珊·温申克 (Susan Weinschenk) 的《每个设计师都需要了解的关于人的 100 件事》
  • 史蒂夫·克鲁格的《别让我思考》 ——虽然不是神经科学,但完全符合大脑的行为方式
史蒂夫·克鲁格的《别让我思考》
  • 唐纳德·诺曼的《设计心理学》 ——以人为本的设计思维的经典见解
唐纳德·诺曼的《设计心理学》

好的用户体验不仅仅是让事物看起来美观。它在于理解人脑的运作方式,并围绕此进行设计。神经设计提醒我们,我们设计的不是屏幕,而是思维中的体验

当我们做得好的时候,一切都会顺利。

所以下次调整布局或重新设计流程时,问问自己:
现在什么对大脑来说最容易?
这个问题比任何花哨的工具都更能帮助我做出更好的决策。

……

 

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

如何用ChatGPT的新图像生成器创建UI(4o)

杰睿

ChatGPT 是否有可能生成 UI?

我之前测试过几次,但结果却令人失望。

下面是我两个月前在一份时事通讯中分享的一个例子。

升级前通过 ChatGPT 生成

它看上去太卡通了,不太实用。

然而,上周,OpenAI 推出了一个重大更新,所以我决定再次尝试。

根据我的提示,我能够生成更好的UI模型。我甚至可以根据自己的需求创建多个设计选项:

通过 ChatGPT 生成

今天,我将向你们展示我进行的实验、我使用的提示以及过程中的一些惊喜和收获。

让我们开始吧。

背景

OpenAI 宣布,现在可以使用 GPT-4o 在 ChatGPT 中生成高质量图像,而不是使用较旧的 DALL·E 模型。

它更擅长遵循指令,并且可以更好地呈现图像中的文本。

上周,许多人尝试将照片转换成人工智能艺术作品——这就是吉卜力风格艺术潮流流行的原因。

我也尝试过:

通过 ChatGPT 生成

但在网上看到很多有趣的艺术作品后,我想:

如果我可以使用 ChatGPT 生成对产品设计师真正有用的 UI 会怎么样?

实验就是从这里开始的。

实验

1. 创建详细的提示

我使用 ChatGPT 来帮助我生成我想要的 UI 的详细提示。

# 为名为“SkillVerse - 热门微课程”的应用设计一个简洁、现代的移动 UI 界面(iOS 风格)。布局应遵循以下结构化部分。## 1. 状态栏(顶部)- **样式**:标准 iOS 布局(顶部安全区域)---## 2. 标题部分- **居中标志**:“SkillVerse”  - **字体**:中等粗细,小尺寸  - **颜色**:蓝色文本  ---## 3. 特色课程轮播(水平滚动)- **风格**:具有圆角和柔和阴影的可滑动卡片  - **卡片**:    -**卡 1**      - 标题:**动态设计简介**      - 字幕:*4 月 2 日开始*      - 视觉:动画缩略图    -**卡 2**      - 标题:《自由职业者精通 Excel》      - 字幕:*3 月 31 日开始*      - 视觉:生产力图标  ---## 4. 导航标签-**标签**:    - **趋势**(活跃,**粗体标签**带有**蓝色下划线**)    - 受到推崇的    - 已注册    - 已保存  ---## 5. 过滤行- **过滤器(下拉菜单)**:    - **过去 7 天**(基于时间)    - **所有主题**(类别)    - **所有级别**(难度)  ---## 6. 热门课程列表- **布局**:可重复课程项目的垂直堆叠:  - **左**:圆形缩略图    - **中心**:      - 课程名称      - 级别(例如,初学者、中级等)    - **右**:保存图标  - **底部**:入学人数 + 趋势(例如,入学人数 2.4k,+12%)   ---## 7. 底部导航栏-**标签**:  - **主页**(活动,突出显示颜色)    - 搜索    - 活动    - 轮廓  - **风格**:    - 下方有标签

然后我将其粘贴到 ChatGPT 中的新聊天窗口中,然后单击“生成”图标。

2. 生成代码支持的 UI

令人惊讶的是,ChatGPT 在右侧打开了一个额外的面板,触发了它的 Canvas 功能。然后它开始生成代码。

这立刻让我想起了克劳德的神器功能。

ChatGPT 的屏幕截图

然后我点击了右上角的“预览”按钮。

生成了响应式、代码支持的 UI。

ChatGPT 的屏幕截图

看起来很有趣,但似乎不如克劳德那么精确/精致。

3. 要求提供视觉模型

由于我的目的只是生成一个图像(一个可视化模型)而不是一个代码支持的 UI,因此我请求后续提示来纠正它:

创建一个可视化模型。而是一个视觉模型。

结果如下:

通过 ChatGPT 生成

结果出乎意料地好,尤其是与 ChatGPT (DALL·E) 之前生成的版本相比。这是一个巨大的提升。

测验:你能在上述 AI 生成的 UI 中找到多少个拼写错误?:)

4. 要求缩小用户界面

尽管用户界面看起来不错,但我仍然对图像截断感到有点困扰,所以我问了:

顶部和底部看起来有点截断。您能将 UI 缩小 20% 左右,让它整体更小一些吗?顶部底部看起来有点截断。您能将 UI 缩小20%左右, 让它整体更小一些吗?

结果如下:

通过 ChatGPT 生成

看起来不错!

5. 要求生成设计选项

然后我开始更有创意了……我想,如果我让它生成多个设计方案供我参考会怎么样?那会更有帮助!

所以我写了这个:

创建三个设计选项。使用相同的核心内容,但根据以下描述改变布局、UI 元素和视觉重点:选项 1. 大胆且引人入胜- 优先考虑视觉冲击力和品牌表达选项 2. 功能强大且快速- 优先考虑速度、清晰度和生产力- 紧凑的用户界面,卡片更小,信息层次更密集选项3.个性化和温暖- 优先考虑联系、信任和个性化- “为你推荐”轮播,包含人工智能策划的课程建议- 社会证明(头像、徽章、朋友活动)- 添加“社区”选项卡,用于同行共享内容

结果如下:

通过 ChatGPT 生成

再次,我对 GPT-4o 图像生成能力的提升感到震惊。

虽然这三个选项看起来仍然非常相似,但如果仔细观察,就会发现一些小细节 - 例如“搜索”图标、社交证明和副本 - 试图使每个版本都与其他版本区分开来。

不过,结果肯定还有改进的空间。例如,由于一张图片中包含了大量信息,ChatGPT 的精度开始下降。你可能会注意到,部分文本变得无法识别/扭曲。

6. 将设计转换为 Figma 文件

接下来,作为一个有趣的测试,我使用Codia AI 的插件根据 ChatGPT 生成的视觉模型生成 Figma 设计。

Figma 中的屏幕截图

所有组件(包括文本)都可以在 Figma 中编辑。

它使用的字体系列是 Intel。

好得可怕。

如果我想进行更改,这使我能够自定义 UI 模型。

最后的想法

ChatGPT 生成 UI 视觉模型的能力是一个巨大的提升。与之前版本相比,它提供了更高的精度和对提示的遵循性。

话虽如此,速度还是有点慢,准确率还有待提高。有时图像生成到一半就停止了;有时结果很随机,而且与指令不完全一致。

当我要求 ChatGPT 根据设计选项创建 3D 模型时,事情变得有点扭曲和奇怪——但还不算太糟。

通过 ChatGPT 生成

不管怎样,这已经是一次很棒的升级了。我现在能生成以前无法生成的东西了。

这一切都在 ChatGPT 聊天窗口内完成。多么方便啊?

我非常兴奋并希望未来会有更好的升级。

设计不再具有颠覆性。我们还能重新找到设计灵感吗?

杰睿

黑色田野上的复古未来主义插图。现代雕塑和雕像,超现实的几何形状,线框,赛博朋克元素和透视网格。流行迷幻科技风格的抽象矢量插图。
作者:Martyshova

是的。我们想知道为什么产品设计界这么多人都走到了崩溃的边缘?我想说,我不认为设计已死。只是我觉得我们迷失了方向。

2023年,Airbnb首席执行官布莱恩·切斯基(Brian Chesky)曾说过: “设计师必须有勇气。”说实话,我们过去确实很有勇气。一种无所畏惧的自信,一种打破现状的近乎疯狂的喜悦。“惊喜与愉悦”、“精益求精,保持简洁”一直是我多年来领导设计团队的座右铭。

我陷入了以收入为中心、痴迷于图案设计的陷阱。

然而,不知何故,在某个时刻,也许是在无休止的会议、OKR、业务目标和盈利报告的催促下;又或许是因为公司内部不断边缘化设计——这种自信消失了。我们从协作型的摇滚明星变成了解决问题的小齿轮,再变成了生存主义者。因为现在机器来了。

观察氛围

多年来,我本着脆弱的精神,陷入了以收益为中心、痴迷于图案设计的陷阱。DS 是一种令人兴奋的、以特定价格点进行设计的方法。让我们去创造收益!让我们去优化利润!让我们快速实现各种创意!我们为什么要在应该创新的时候重复造轮子呢?

听起来很熟悉?
这就像个兔子洞。我和同事们聊过,大家都觉得,

  • 为什么每次想到 ux/ui 设计我都会感到沮丧,尽管我对它充满热情?
  • 为什么我对当前的设计和产品方法感到沮丧,即使它有效?(是吗?)
  • 为什么尽管我热爱我所做的事情,但我的创造力却不再因工作而得到满足?
  • 为什么怀念互联网的狂野西部时代,尽管它充满了模糊性?
  • 尽管设计无处不在,但它已经消亡了吗?

如果我们用设计系统的方法录制一张专辑,每首歌在技术上都是完美的,但它们听起来本质上都一样。哪个用户会因为反复听这首歌而受到启发呢?我们自己的设计故事已经支离破碎了。

我们很多产品设计人员都生活在艾维所说的“企业议程已将设计和创新的重点从目标转移到利润”的境地。追求收益令人精疲力竭。创造性的故障排除被误认为是创造力。基于卡班板混乱和闪电般快速发布的产品经理微观管理的压力。MVP 地狱景象。毫无结果的 A/B 测试,因为利益相关者不理解。整体创新解决方案被所谓的“安全”的快速解决方案扼杀。而这一切都是有代价的。灵感更少,活力更少,友善更少,压力更大。更多的自我限制。更多的模仿。更多千篇一律、复杂而扁平的用户体验。等等。

转变

过去一周,我的观点与多年来形成的理念发生了转变。我最近去一家大型游戏公司面试领导职位,面试的主题是如何创造收入。这才是整个团队最关心的问题。他们没有考虑用户需求,也没有考虑他们正在构建的工作和体验的乐趣。这些从未被讨论过。

这真的让我很困扰。非常困扰。这不是我第一次遇到这种情况。我一次又一次地发现,出现了两件事:

  • 在大多数设计文化中,设计的乐趣和喜悦是不存在的
  • 人类基于价值观的行为优先于人类情感

我们大多数人都在无意识中直接促成了这一点。我们甚至没有意识到这一点。然而,要论证人类首先是情感实体,这并不需要太多说服力。我们能够立即感知和感受事物,然后再运用逻辑,这与人类的进化直接相关。然而,我们的设计方法在很多方面都缺乏这种能力。

(我在这篇文章中只关注设计的作用。但科技领域其他角色的出现,以及流水线投资回报率驱动的 IDEO 方法,无疑导致了设计优先级的下降,不再以用户感受为重点。)

我们需要重新进行重大的直觉选择并重新感受事物。

我是如何开始转变的?

有两件事无疑产生了最大的影响。

- 新的 Google Material DS “发送”按钮
。-

采访乔纳森·艾维。

 

两者都重点讨论了“欢乐与喜悦”和“火花”的设计。

谷歌界面的更新打破了所有固有规则,打造了独特的数字体验。他们抓住了机会,用数据验证了这一可能性,最终他们的努力让用户参与度提升了4倍。

Jony 在Stripe大会上的采访非常鼓舞人心。如果你今年需要看一部作品来了解设计对我们这个瞬息万变的世界的重要性,那非看不可。他让设计回归了它的本源,那就是那神奇的“火花”。

当我思考这些时,我发现伟大的设计中存在着一些更具体的事情——颠覆。

如果您今年关注一件事以了解为什么设计对于我们这个不断变化的世界如此重要,那就是它了。

在数字体验的早期,没有数据,没有关键绩效指标 (KPI),也没有流水线式的技术开发方法。当时的设计纯粹是为了品牌价值、功能和实验。我们有两个代码库:HTML 和 Flash。工作的多样性令人兴奋。网站以及最终的原生应用都易于使用,易于导航,没有算法,非常人性化。

我们也只是想打造一些我们的朋友和同事会谈论的非常酷的东西。

设计团队和工程团队围坐在一起,讨论他们想要构建的目标,并在整个过程中不断合作。如同合作伙伴一样。一份简单的路线图充满了宏大的想法和雄心壮志。方法是什么?“我想要一个能够实现_____的酷炫解决方案,因为我想做_____。”

我们受到的启发是(用艾维的话来说)“设计一些能够推动物种发展的东西”,“为人类服务”。我们也只是想打造一些非常酷的东西,让我们的朋友和同事谈论。

有些品牌正在疯狂地颠覆这个领域。比如Acorn和Airbnb。但当突破设计界限的设计如此罕见时,这对任何人来说都不是好兆头。什么时候突破设计界限的设计非常罕见,这对任何人来说都不是好兆头。

最新的颠覆者

人工智能。

我们正为此疯狂。长期以来,我们一直谨慎行事,构建一套设计方法论式的设计系统,结果却事与愿违。我和其他人一样,也为自己的谨慎行事感到内疚。不到五年,产品设计将不再像过去十五年那样存在。这原本是一个令人恐惧的前景,直到我直面恐惧。

想想看,不用再构建模式库了。不用再花费无数时间迭代数据和最佳实践。不用再熬夜撰写和设计战略方案了。这可不是设计,而是繁重的工作。说真的,让机器来做吧。

我可以重新做我最擅长的事,运用我的智慧、想象力和经验来推动事情发展。当然可以。报名吧。我就是来干这个的。

设计会发生什么?

我们不再打破常规。我们遵循着基于指标和绩效的群体思维美学。我们各自为政,各自为政,各自为政。我们用耗时的方法来构思创意。我们迷失在迭代的泥沼中。我们没有逼迫自己打破常规。

如果我们退一步,纵观设计的全局,就会发现我们所做的最伟大的设计,其核心都是“颠覆性”。敢于创新,敢于思考。它不断尝试新事物,探索新的视野。然而,我们对这门学科的内在部分却感到厌恶。

我不知道“幸运眷顾勇者”这句话是谁说的。

我的一个使命就是让它重新回到我们的世界。

回去工作。

让我们打破思维定势。

让我们都做些史诗般的事。

 

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

2026 年影响设计的 5 个 UX/UI 趋势

杰睿

计发展日新月异——转瞬即逝,你就会落后。把握设计的发展方向是成功的一半。以下根据目前的发展情况,概述了五大可能在 2026 年占据主导地位的 UX/UI 趋势。

上周,我在一个熙熙攘攘的共享办公空间里画界面时,一位刚接触 Figma 的学生设计师朋友凑过来问我:
“你是怎么跟上这些变化的?”
这句话深深地触动了我。多年从事设计行业,我明白了:洞察潮流才能保持敏锐。以下是我关注的领域。

1. 人工智能驱动的个性化做得好

我现在用的新闻应用会根据我的阅读习惯,根据文章的长度和深度来筛选文章。无需手动调整——它就能满足我的需求。

  • 以我的播客应用程序为例:早上播放短剧,晚上播放深入访谈,这一切都是因为它追踪了我的习惯。

设计的任务是打造一个能够学习且不会让用户感到害怕的系统。通过人工智能实现的个性化应该像一个乐于助人的朋友,而不是一个跟踪狂。关键在于平衡智能自动化和用户控制。

2. 游戏之外的增强现实

AR 正在摆脱游戏的桎梏。想象一下一款家居维修应用:它将虚拟的架子投射到厨房墙上,让你四处走动,看看它们是否合适。

  • 这不是空谈,它能解决实际问题。无论是家具采购、装修翻新还是培训培训,AR 都能让决策更清晰。

到2026年,AR设计将成为标杆。还在觉得它只是个噱头吗?是时候重新思考了,否则你就错失良机了。

照片由XR ExpoUnsplash上拍摄

3. 人工智能作为设计师的助手

人工智能工具正在彻底改变我的工作流程。最近,我请一位人工智能工具为一个 SaaS 项目快速设计图标——一分钟内就得到了 10 个方案,全部符合 WCAG 标准,并且符合品牌形象。

  • 它并没有抢走我的工作;它让我可以自由地完善用户流程并应对人工智能无法触及的挑战。

真正的问题并非AI能否设计,而是我们如何与它合作,将项目推向新的高度。不妨把它想象成一位由你掌控全局的智能助手。

4. 包容性设计将改变游戏规则

我吃过不少苦头才明白这一点:为“普通”用户设计是失败的。在一个项目中,我重新设计了一个移动应用的注册表单,因为我意识到它对于手抖的人来说太笨重了。

  • 重新设计后,一位视力低下的用户表示:“第一次我不需要放大。”额外的好处是:每个人都觉得它更流畅,而不仅仅是目标群体。

到2026年,包容性设计将不再只是一张纸,而将成为一项竞争优势。满足多元化需求,打造人人喜爱的产品。

5. 轻松结账

上周末,我通过一个应用程序预订了一张餐厅餐桌——甚至都没注意到我已经付款了。指纹验证,我的常用设置自动应用,搞定了。

  • 最好的结账方式融合了速度和信任:生物识别、智能默认和清晰的确认以避免任何压力。

设计的作用是减少摩擦,同时保持用户的控制力。设计的目的是让日常操作感觉安全,而不是草率。

 

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

兰亭妙微 软件开发与电子病历医疗界面设计服务

杰睿

 

 
 
兰亭妙微作为专业的软件开发公司,在行业深耕 16 年,由清华团队全程主导技术与设计方向,积累了扎实的行业经验。在 QT 软件开发领域,我们的技术团队成员平均拥有 8 年以上相关工作经历,熟悉 QT 框架的各类功能模块与开发技巧,能够根据企业不同的业务场景,定制开发稳定可靠的桌面应用程序。从需求沟通阶段的功能梳理,到技术方案设计时的架构搭建,再到开发过程中的代码编写与测试优化,每个环节都有严格的质量把控标准,确保交付的软件在运行效率与稳定性上符合客户预期。
设计服务方面,我们兼具用户体验设计公司与界面设计公司的双重优势。在高端网站设计业务中,团队会先深入了解企业的品牌文化、核心业务与目标用户群体,结合市场流行趋势与实用功能需求,打造既符合品牌调性又适配多终端的网站。从首页的视觉呈现到内页的信息架构,从交互逻辑的顺畅性到加载速度的优化,都经过细致打磨,助力企业通过线上平台有效展示自身形象。在 B 端界面设计与 APP 界面设计中,始终以用户体验为核心考量,通过前期的用户行为调研与业务流程分析,合理规划界面的信息层级与操作路径,让复杂的功能模块变得条理清晰,提升用户的操作效率。
在医疗健康领域,我们尤其在电子病历医疗数据分析界面设计上积累了丰富经验。设计过程中,团队会与医护人员、医疗信息管理人员进行多轮沟通,深入了解临床工作流程、数据记录规范与分析需求。针对电子病历中大量的文字信息、检查数据与诊疗记录,采用分类标签、数据可视化图表等设计方式,让医护人员能够快速定位关键信息。同时,考虑到医疗工作的严谨性,在界面的操作反馈、数据校验等细节上做了特殊处理,减少误操作的可能性,让医疗信息的录入、查询与分析过程更加高效便捷。
秉持 “敬事而信,德智兼修” 的企业理念,16 年来我们已服务过超 300 家来自金融、医疗、工业、教育等多个行业的客户,完成 640 多个不同类型的项目,在设计与开发领域积累了良好的口碑。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

以冷静包容的视角审视苹果史上最激进的 UI 变革

杰睿

苹果自 2013 年发布 iOS 7 以来,在 UI 设计上做出了最大胆的尝试,当时他们放弃了拟物化设计和隐藏纹理,转而采用扁平化设计。多年过去了……拟物化并隐藏纹理,以支持扁平化设计。多年过去了……
在这次深入探讨中,我们将揭秘 Liquid Glass 究竟是真正的创新,还是仅仅一种光鲜亮丽的复古风。设计师可以从这种转变中汲取哪些经验教训?在光鲜亮丽的背后,是否隐藏着新的、可采用的 UI 模式?这种视觉上的飞跃是否仍然具有包容性?
“我们把屏幕上的按钮做得如此好看,让你忍不住想舔舔它们。” ——史蒂夫·乔布斯
这句话并非偶然出现。在 iOS 26 中,苹果似乎正在重现其 Aqua 时代的魅力——没错,我也曾被 MacOS 上那些光滑、“可舔”的屏幕气泡所吸引。如今,这种致敬风格回归——经过重新命名和重构——我们来认识一下 Liquid Glass。或者应该说……Lick-quid Glass。
液态玻璃——这是苹果对其全新数字元物质的称呼,它为一个全新的视觉时代……或者至少是下一代 iOS 系统奠定了基调。但它不仅仅是一个闪亮的新款套件——它就像一种与系统共存、呼吸和响应的材质。
它能弯曲光线,在触摸下变形,并流畅地适应环境。没错,屏幕再次带来令人愉悦的体验。在一般设计中,“视觉盛宴”指的是能够立即吸引注意力并带来美感的视觉效果或物体。但这种美感背后隐藏着一种微妙的平衡。美学-可用性效应表明,即使功能本身没有任何改变,我们通常也会认为有吸引力的界面更易用。我之前就写过关于“内心愉悦”的文章。
显然,苹果不仅仅是在装饰界面——他们还将视觉享受融入到功能之中,这正是我们对现代操作系统的期望。但在深入探讨细节之前,让我们先彻底解决视觉联想的问题。
该图像由 Oleg Safranov 使用 AI 生成,并经过了一些后期制作
在像《少数派报告》这样的科幻电影中,我们看到了漂浮在半空中的透明界面——或许这是迈向增强现实未来的一步。然而,尽管苹果的Vision Pro可能真正将界面定位为空间层,但在其他现有设备上,这种错觉并不完全成立。好吧,智能眼镜仍在酝酿之中,当它们真正到来时,像这样的半透明界面或许最终会找到真正的归宿。
也就是说,这些玻璃状的 UI 元素在动态视频背景或滚动页面上看起来令人惊叹——这已经是一种享受。
该图像由 Oleg Safranov 使用 AI 生成,并经过了一些后期制作
我决定寻找液态玻璃元素能给用户带来的联想,并听到过类似的想法:“光滑的硬糖”、“果冻”、“肥皂滴”、“半透明的粘液”或“闪亮的软糖块”。圆润、粘稠的液体外观让人联想到粘稠的物质
有一段时间,我无法确切地定义这个界面让我想起了什么,然后我突然明白了。就像一滴融化的(仍然清澈的)蜡烛还没有完全凝固,就已经开始变得浑浊和半透明。它仍然柔软,仍然温暖,仍然略带粘稠——但它已经开始成形了。iOS 26 中的“液态玻璃”也唤起了类似的视觉感受:介于流动性和脆弱的稳定性之间,不断变换着它的存在感。
苹果强调,Liquid Glass 通过透镜效应(光线穿过材料时发生弯曲、折射和聚焦)在视觉上呈现出独特的质感 苹果设计团队表示,这种效果在现实世界中是可以直观识别的:就像一滴水如何聚焦阳光,或者放大镜如何在视觉上拉近物体一样。
图片来源:Apple.com / WWDC 2025 演示文稿
如今,同样的原理也融入到了界面设计中。不同于 iOS 7 磨砂面板(至今仍可见)带来的背景虚化效果,液态玻璃能够动态弯曲光线,如同现实世界中的半透明或半透明材质。因此,界面元素轮廓清晰,却又不失轻盈。它们仿佛漂浮在内容之上——存在感十足,却又不会分散注意力。
苹果建议不要堆叠此类元素,也不要到处使用液态玻璃效果,这样界面才能与下方的扁平内容区分开来。我正在撰写一篇深入探讨全新液态玻璃设计系统和指南的文章——敬请期待。
据苹果公司介绍,这种透镜效果有助于分离界面各层,从而营造自然的深度和层次感。这是一种更微妙的分离形式:不是阴影,而是微光。阴影仍然存在,但它们变得更加动态,模拟了界面水滴在内容上方移动或被移动时的起伏。此外,它们会随着UI元素的大小而变得更加丰富。
“Islandy”界面
苹果显然更注重内容,并减少界面,这就是为什么我们可以看到界面部分变得更加紧凑和通透。
一个突出的例子是 Safari,它的导航栏不再紧贴屏幕,而是悬浮在屏幕上方。通常,我们确实会看到更多悬浮按钮或按钮组,而不是紧密的导航栏。这无疑是视觉上的胜利,但也给设计师带来了更多工作——现在你不仅要考虑静态布局,还要考虑这些元素如何在不同状态下随上下文变化。
图片(gif)来源:Apple.com / WWDC 2025 演示文稿
玻璃岛有时会变成装饰性的糖果,完全透明看起来很光滑,但它在繁忙的背景下会挣扎:纹理扭曲和混合,导致可读性和对比度问题。
历史已经出现过这种情况。在 iOS 7 中,苹果在透明度和细字体方面做得过头了。这个方向很大胆,但到了 iOS 7.1(2014 年 3 月),他们开始有所收敛:添加了“降低透明度”的开关,提高了对比度,并恢复了纯色背景以恢复可读性。
“辅助功能”设置的屏幕截图
是的,我们可以改进和定制外观,使其更易用、更易于访问,但它真的符合包容性的理念吗?我们将在本文后面讨论这个问题。
界面感觉如此流畅、自然,并且不断运动,以至于对一些用户来说,它近乎不稳定:按钮会变形为上下文菜单,元素在触摸下像黏液一样伸展,所有这些都伴随着边缘照明、光学畸变和闪烁的高光。对许多人来说,它可能看起来很动感。但对另一些人来说,它可能会让人感到不知所措或迷失方向,尤其是对那些对运动敏感的人来说。这就是为什么像“减少运动”这样的系统级选项仍然至关重要。
苹果是否真正听取过意见?
纵观历史,苹果的每一次新品发布都会引起轩然大波,尤其是当它标志着视觉或技术层面的重大变革时。作为设计师,当这些变革影响到整个操作系统的设计语言时,我们尤其兴奋。
我至今仍记得 iOS 7 带来的激动:视觉上的彻底革新让你的 iPhone 焕然一新。那时候,如果你想要一个全新的界面,通常得买个新设备或者扔掉旧设备,但单是这次更新就让你的手机看起来焕然一新。尽管它引发了大众的强烈不满——毕竟,熟悉才能带来舒适感。iOS 的早期版本试图通过模仿现实世界,让用户沉浸在熟悉的氛围中——因此才有了那么多木质纹理和真实物体的模仿。
这次,我选择了等待。我看着各种反应纷至沓来——更多的是愤怒,更少的赞扬,以及铺天盖地的表情包。我给了它大约两周的时间。既不是要抨击它,也不是要美化它。因为设计评论的意义不在于破坏或奉献,对吧?它关乎平衡。我想看看苹果如何回应第一波反馈(在 Beta 2 中,他们已经调整了模糊和对比度),当然,我也想听听我的设计社区的意见,总结一下大家的反馈,然后再与我自己的进行比较。
很难找到愿意捍卫玻璃方法的人,但特别是Darren Yeo 的文章证明,可以用较少的情感来分析事物,这更多地反映了批判性思维,而不是消极的反应。
我记得亨利·福特曾经说过:“如果我问顾客想要什么,他们会告诉我一匹跑得更快的马。”人们不知道自己想要什么,除非你把东西展示给他们看。—— 史蒂夫·乔布斯
用UI代替AI?投资者和用户都表示失望——他们期待的是AI,而不是一个精致或彻底改造的UI。因此,股东诉讼Tucker诉Apple Inc.等)如今成为头条新闻,指控苹果夸大了在上届WWDC上发布的Apple Intelligence的功能。该诉讼声称苹果缺乏整合AI的切实计划,并认为在真正的AI功能迟迟未能推出的情况下,设计更新只是“空洞的花言巧语”。
但公平地说,设计也是一种创新。如果苹果真的带来了一场视觉革命,这本身就可以算作一次突破。从设计师的角度来看,这不仅仅是“光鲜亮丽”——而是数字界面体验和行为方式的转变,无论是现在还是未来。
苹果的决策(即使是那些备受争议的决策)往往会在整个行业引发连锁反应。无论受到赞扬还是批评,它们都奠定了行业基调。我们一次又一次地看到,竞争对手最终也采用了类似的模式和整体风格。
活力岛——在你意想不到的地方。图片来源:www.gizchina.com
苹果:“这是新界面。” 某公司:“给我两个小时。”图片来源:https://9gag.com/gag/awyYm9D
我们知道,苹果不止一次承受了众怒——而且每一次,他们都证明了自己的举动是经过深思熟虑的,既服务于现有的生态系统,也服务于未来的产品。如果今天他们正在构建无缝的跨设备体验,并定义统一的设计语言,那么明天我们就会看到更广阔的前景。
其他公司推出了什么
苹果并非唯一一家试图塑造设计未来的公司。让我们来看看其他公司是如何做的,重点关注谷歌的 Material Expressive 和 Airbnb 的精致设计语言。
有些设计师觉得这些图标“过度渲染”。图片来源:www.airbnb.com
Airbnb 的重新设计在设计界引发了褒贬不一的评价。一方面,专业人士对带有动态效果的新图标(即所谓的“Lava” 3D 图标格式)赞不绝口,称其为“ UI 的一次大胆变革”和“图标行为的重新定义”。这些图标以 3D 微视频的形式呈现,显得生动、流畅、动感十足……而且……富有立体感。但当它们静止不动时,是不是感觉像是回到了 CorelDRAW 时代?
我的第一反应是,Airbnb 新图标的复杂性感觉像是对 AI 生成图像的直接回应。Michal Malewicz证实了我的话:https://www.youtube.com/shorts/3k3V-0dbRe8
如今,工具让图标的细节和纹理更加丰富(之后还能通过AI动画制作),设计师们几乎被迫跟上时代的步伐,不仅在创造力上,还在Cinema 4D、Blender和非AI工具的帮助下,在复杂性上不断提升。当视觉的丰富变得毫不费力时,极简主义突然感觉……不够华丽。
然而,社区反馈,尤其是在Reddit上的反馈,凸显了执行过程中的矛盾。一位用户指出:“图标看起来像插图,而不是可操作的菜单项。”
暂时无法在飞书文档外展示此内容
好的,让我们来看看 Google 带来了哪些新东西。 借助 Material 3 Expressive,Google 引入了超越传统缓和曲线的运动物理系统。该系统采用基于弹簧的物理驱动运动,使交互感觉更自然、响应更灵敏、更生动。它仍然是一个生动的扁平化设计,但现在配备了全新的弹簧,在运动中熠熠生辉。
动效再次成为视觉语言的决定性力量。对于设计师来说,这标志着一个重大转变:动效不再仅仅是装饰——它已成为核心设计元素。无论是通过基于弹簧的动态效果还是流体透镜,界面如今都“感觉”生动活泼,并以符合我们身体预期的方式做出响应。谷歌利用 2D 动效为 UI 注入情感深度,而苹果则更倾向于沉浸式的 3D/空间交互。
平板时代终结了吗?
随着 iOS 26 的截图曝光,人们开始将其与Windows Vista进行比较:半透明面板、光泽反射、柔和阴影以及丰富的光影效果。它在 2007 年给人一种未来感,但也因耗电和给性能不足的硬件带来过重负担而臭名昭著。
图片来源:wikipedia.org
设计师们创造了“Frutiger Aero”这个术语——一种复古未来主义的美学风格,以渐变、镜头光晕和超抛光玻璃表面而闻名。它融合了 Aero(不要与 Aqua 混淆)的视觉风格和 Frutiger 字体的清晰度,定义了 2000 年代中期整个 UI 文化时代。
看似Liquid Glass拥有相同的视觉DNA,但意图却截然不同。Vista用玻璃般的镀铬装饰了静态UI。而iOS 26则将界面变成了一个互动式表面。这不仅仅是视觉造型——而是一种计算材质,能够根据光线、运动和环境进行调整。Vista的UI只是闪烁的光泽,而Liquid Glass则能弯曲光线。Aero只是悬浮在空中,而Liquid Glass则能弯曲。如此这般,材质的光芒与荣耀交织——讽刺的是,尽管名字如此,但苹果让它感觉比谷歌的UI更“Material”。
当然,iOS 26 继承了玻璃态主义,并对其进行了进一步的改进。玻璃态主义本身可以看作是新拟态主义的一个子集,它借鉴了新拟态主义使用深度来定义交互的理念。我个人很欣赏使用 Z 轴来构建分层的空间界面。
玻璃态技术的核心似乎是追求隐形。但一旦叠加了边缘光、背景扭曲和毛玻璃效果,屏幕很快就会显得杂乱无章,让人分心,眼睛疲劳的速度比预想的要快。
在很多地方,这简直就是认知超负荷和可读性低下的噩梦。玻璃折射需要一定的透明度才能达到最佳效果,而这种透明度会让一半的背景显得格格不入。
这句话出自总是爱讽刺的米哈尔·马勒维茨(我最喜欢的作家之一),他声称自己创造了“玻璃态”一词。
话虽如此,Liquid Glass 给人的感觉确实优雅。而且,就像所有大胆的设计革新一样,一周后你可能就不再注意到它了。但如果视觉上的“惊艳”消退,杂乱感依然存在……我们需要时间来观察它的效果。
苹果公司要求不要将玻璃堆叠在一起。图片来源:Apple.com / WWDC 2025 演示文稿
我们见证的只是一种新的视觉风格,还是扁平化设计的缓慢衰落?极简主义 vs. “实体感”……非扁平化的极简主义?光线、深度、动感、透明度——所有这些元素共同作用,让界面感觉更生动、更真实。
液态玻璃并不排斥极简主义,而是增加了视觉……嗯,触觉?“视觉触觉” ——可以这么说吗?
扁平化设计会如此出乎意料地过时吗?不会。但人们的期望正在转变,习惯了这种新界面的用户将开始要求一种更加感官驱动的体验。
Android,你走吧?
设计变得计算化?
“Liquid Glass” 标志着我们——界面/用户体验/产品设计师,以及开发者——的深刻转变。长期以来,我们一直将设计系统视为 UI 模式、组件、指南、字体,有时还有动画的集合。但苹果表明,一致性不再仅仅关乎对齐和间距。
一切始于材料本身的一致性——它的响应性、粘度以及在光线和压力下的表现。在液态玻璃中,材料的一致性成为设计一致性的基础。界面的弯曲、反应和适应方式成为统一设计语言的一部分——不仅体现在外观上,还体现在它的行为和响应方式上。
这种新型数字超材料不仅外观独特,其作用如同一种反应灵敏的物质,甚至如同活体。它不仅通过外观,更通过运动传递灵活性和触觉反馈。它不再仅仅是视觉上的一致性,而是计算上的一致性
说到这里,我们以前经常听到苹果公司谈论计算摄影,相机不仅能捕捉世界,还能通过图层、滤镜和算法来解读和计算。现在,计算设计似乎正在兴起。
图片来源:Apple.com / WWDC 2025 演示文稿
液态玻璃并非一次性渲染,而是持续计算。它能够动态适应光线、内容和环境,实时响应周围环境和用户输入。这种材质会弯曲、折射和反应;它的每一个细节都经过多层计算:高光阴影色调亮度表面图形
这改变了游戏规则:界面不再仅仅是布局,而是行为。
设计师和开发者不再专注于静态的界面元素——我们正在塑造实时的、响应式的内容。
暂时无法在飞书文档外展示此内容
Figma X 帐户的预告片——它可以像应用效果一样简单吗?
然而,作为一名实践型设计师,我并不喜欢现在用 Figma(或 Framer)构建高保真原型意味着需要通过叠加样式和调整背景模糊来模拟效果。扁平化设计让我们免去了这种麻烦。当然,Liquid Glass 的预制 UI 套件已经面世(之后还会有更多),但为了在逼真的数字环境中令人信服地呈现产品,我们现在还必须处理计算量巨大的视觉效果,这不可避免地会加重项目的负担,更不用说最终的界面了。
苹果告诫设计师不要过度使用液态玻璃。然而,我们已经看到一些早期概念(例如全玻璃的 Spotify 或 Instagram 重新设计)滥用并过度使用了这些玻璃面板,将优雅变成了“视觉盛宴”。
图片来源:Apple.com / WWDC 2025 演示文稿
苹果显然希望新版能够快速流畅地推出。他们已经为我们无缝过渡到 Liquid Glass 做好了准备。设计师们已经提供了指南,甚至还有Icon Composer等工具来帮助应用适应新风格。对于 SwiftUI 开发者来说,只需编写 .buttonStyle(.glass) 即可轻松上手——一行代码即可将 Liquid Glass 应用到你的界面。我将在下一篇文章中深入探讨官方指南。
硬件能跟上 Liquid Glass 的步伐吗?
乍一看,玻璃界面可能只是一层视觉效果。但尝试复制它,你很快就会意识到挑战的规模。一位尝试重现这种效果的 Android 开发者分享了以下内容:
说实话,我真不知道苹果是怎么做到的。在尝试模仿之后(使用 AGSL 着色器——作者注),我对液态玻璃产生了全新的敬意。我猜他们也用了着色器——只是更加精妙。苹果花了数年时间打造一个可以实现这一功能的系统。安卓系统还没达到这个水平。也许小米或其他中国品牌会找到解决办法。但在我们找到开源解决方案之前,在安卓系统上实现真正的玻璃形态仍然遥不可及。
这不仅仅是令人惊艳的动画,更是材质行为、光照、触觉反馈和实时着色器协调一致的系统。Liquid Glass 需要强大的性能、精准的操控……以及理想的 120Hz ProMotion 显示屏才能真正闪耀。
图片来源:Apple.com / WWDC 2025 演示文稿
在 Reddit 上,一次这样的尝试(这次是在网络环境中)遭遇了严重的限制:
我们发现浏览器支持有限,这迫使我们不得不使用一些不太理想的解决方法。随着时间的推移,WebKit 引入了 backdrop-filter CSS 属性,但它仍然是性能杀手——浏览器每次滚动时都必须重新计算模糊效果。也许 Apple 已经在其设备上对此进行了优化,但我强烈建议任何在 Apple 以外的平台上构建 Liquid Glass 设计的人都进行彻底的性能测试。
看来,苹果的硬件和软件的紧密结合再次为其带来了优势。
半透明还是透明?让我们来聊聊无障碍
如今,苹果 经常被誉为包容性设计的领导者,但这种声誉是随着时间的推移逐渐积累起来的。在上世纪八九十年代,视力受损人士几乎没有内置的辅助功能。他们不得不依赖 Echo II 等第三方屏幕阅读器——而且即使是这些阅读器也并不总是能正常工作。虽然 Windows 用户受益于 JAWS 和 Window-Eyes 等更成熟的工具,但苹果却落后了。他们在辅助功能方面的首次重大尝试——OS X 10.2 Jaguar 中的Universal Access——漏洞百出且不可靠。
直到 OS X 10.4 Tiger 和 iPhone 3GS 的推出,一个新时代才开启:VoiceOver被集成到系统中,盲文显示器也得到了支持,缩放功能也成为原生功能。2013 年,蒂姆·库克表示:“当我们致力于让设备无障碍时,投资回报率 (ROI) 并不重要。我们这样做是因为这是公平且正确的。”
图片来源:Apple.com / WWDC 2025 演示文稿
在 WWDC 上,Apple 强调了其对无障碍功能的承诺。他们推出了辅助访问等功能,方便认知障碍用户使用,并展示了一系列新工具:眼动追踪、车辆运动提示、个人语音、实时语音、桌面放大镜、盲文访问等等。此外,App Store 中推出的无障碍营养标签也体现了他们向更高透明度迈进的决心。Apple 将此视为一项重要的组织优先事项:“无障碍是我们一切工作的一部分”,并通过专门的 WWDC 会议、实践实验室和持续的推广活动来强化这一点。
我将在下一篇文章中深入探讨 Apple 在 WWDC 2025 中推出的无障碍更新。
与所有担忧相反, WWDC 25 上发布的新内容有很多值得探索的地方,其中只有一个亮点:苹果现在允许用户仅使用眼睛来控制他们的 iPhone 或 iPad——由于内置的眼动追踪技术,不需要额外的硬件。
但看着Liquid Glass,却有一种令人不安的似曾相识的感觉。苹果或许又一次陷入了困境:视觉上的愉悦可能会掩盖视力受限用户的需求。
iOS 26 beta 2 已经带来了一些改进。图片来源:9to5google.com(左)和 macrumors.com(右)。
苹果提供了调整“液态玻璃”外观的选项——降低透明度、增强对比度或减弱动态效果。任何人都可以随时在设置中修复这个问题。这很有帮助。但这也暴露了一个更深层次的问题。
图片来源:Apple.com / WWDC 2025 演示文稿
在包容性设计中,用户不应该为了查看界面而调整设置。好的设计默认就具有包容性,无需切换、滤镜或叠加层。Liquid Glass 赋予用户更多控制权,这值得称赞。但它也提醒我们:可访问性并非一项额外功能,而是一条底线。视觉上的愉悦永远不应以牺牲清晰度为代价,尤其是在我们讨论视觉障碍时。
对于普通用户来说,Liquid Glass 或许只是一种炫目的设计噱头。但专业设计社区却对此有不同的看法。熟悉WCAG(Web 内容可访问性指南)的人会从包容性的视角来看待这类界面。
根据指南,常规文本的最小对比度应该是4.5:1 ,对吗?但是,如果背景本身是一个不断移动的半透明层——模糊并渗透到其下方的所有内容,会发生什么?
苹果提供了动态图形颜色反转功能,以便根据背景调整按钮对比度。但在实际应用中,此功能在较为静态的场景中并不总是有效——例如,在通知中,我们已经看到过不仅对比度极低,而且全白的情况。
“好的设计是无形的。” ——迪特·拉姆斯
但它也不应该是不可读的。我相信我们会看到修复的。
图片来源:Apple.com / WWDC 2025 演示文稿
液态玻璃模仿了现实世界的透镜效应——苹果设计团队自己也指出了液滴如何弯曲光线,或者透镜如何拉近物体。但如果这真的像透镜一样,为什么它不像真正的透镜那样翻转远处物体的图像呢?好吧,我想我可能有点过度分析了。
在 iOS 26 中,由液态玻璃铸造而成的按钮表现有所不同——为了营造更清晰的状态,这种扭曲会以奇怪的方式扭曲背景,绘制出令人分心的图案。这既缺乏视觉说服力,也缺乏光学准确性。这些扭曲会造成视觉噪音,让眼球充斥着毫无用处的图案。随着时间的推移,这种压力会逐渐累积,使界面感觉更像是视觉混乱,而非精致的致敬之作。
最后——如果有人只是不喜欢玻璃表面怎么办?无论是完全透明还是部分透明,单色还是饱和色,这个新界面可能感觉就像他们从未要求安装的视觉“皮肤”。而且,它没有“恢复平面”的开关。
苹果是不是彻底扼杀了扁平化设计?或许并非完全如此——但他们确实让界面变得生动活泼,更具沉浸感。这是产品,是战略,是设计创新……才是卖点。是产品、是策略、是设计创新……才是销售的关键。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

等级制度决定一切——学会控制人们首先看到的内容

杰睿

什么是视觉层次?
视觉层次结构是指设计元素按重要性优先排列和呈现的方式。它回答了一个关键问题:用户应该首先看到什么?
通过控制用户浏览页面的方式,我们影响他们的理解和行为。有效的层级结构确保最关键的元素(例如主要操作、关键信息或导航)脱颖而出,而次要细节则保持辅助性但不引人注目。
为什么层次结构在 UI 设计中很重要?
人们不会阅读界面——他们只会浏览。研究表明,用户只需 3-5 秒就能对设计形成看法。结构良好的视觉层次有助于:
突出显示主要操作(例如注册按钮、特色产品)
明确哪些内容重要,哪些内容次要(例如,标题和正文)
通过避免过多的选择来减轻认知负担
通过使导航直观来提高可用性
如果没有明确的层次结构,用户会感到迷茫、沮丧或不确定下一步该做什么——从而导致更高的跳出率和更低的参与度。
视觉层次的核心原则
为了创建强大的视觉层次,设计师会结合使用多种技术来自然地引导视线。以下是最强大的工具:
规模:确立重要性最直接的方式
较大的元素自然会首先吸引注意力。此原则适用于排版、按钮、图像和其他 UI 组件。
示例:粗体、超大标题比较小的副标题更能吸引注意力。
专业提示:使用尺寸递增 — — 最大尺寸用于主要操作,中等尺寸用于次要信息,最小尺寸用于第三级细节。
颜色与对比度:用战略色调引导焦点
高对比度的颜色可以突出重点,而柔和的色调则会逐渐淡入背景。
示例:鲜红色的“立即购买”按钮在中性背景下显得格外突出。
专业提示:每个屏幕的强调色限制为 1-2 种,以避免视觉噪音。
字体粗细与风格:构建信息流
字体粗细(粗体、中等、常规)和样式(衬线、无衬线、斜体)有助于区分内容级别。
示例:粗体标题、中等大小的副标题和常规正文创建了清晰的阅读路径。
专业提示:使用一致的类型比例(例如,H1,H2,H3)以获得更好的可读性。
间距和对齐:组织内容,确保清晰
空白(或负空间)与元素本身一样重要——它可以防止混乱并将相关项目分组。
示例:部分之间的间距越大,不同的主题就越分散,而紧密的间距则连接相关元素(如标签及其输入字段)。
专业提示:使用一致的边距和填充来创造节奏和平衡。
放置:利用自然的扫描模式
在从左到右的语言(如英语)中,用户通常以 F 模式或 Z 模式扫描,从左上角开始。
示例:关键操作(如“注册”按钮)通常放置在右上角或中心,以实现最大可见度。
专业提示:将关键元素放置在眼睛首先自然看到的位置。
现实世界中强大的视觉层次示例
Spotify
使用粗体标题突出显示播放列表和专辑。
对比色使 CTA(如“播放”按钮)脱颖而出。
轨道之间一致的间距提高了可读性。
Instagram
大型、居中的图标引导导航。
高对比度的个人资料操作(关注、消息)脱颖而出。
空格将帖子分开,以提供干净、集中的提要。
多邻国
超大按钮鼓励互动。
顶部的进度条营造出一种成就感。
颜色编码的反馈(绿色代表正确,红色代表错误)强化学习。
如何提高你的视觉层次技能
如果您想像专业人士一样掌握视觉层次结构,请按照以下方法升级:
研究热门应用——分析领先产品(例如 Airbnb、Apple 或 Notion)的布局结构。
 对比前后效果——重新设计现有 UI,了解层级变化如何影响可用性。
使用 Figma 练习——在实际项目中尝试不同的尺寸、对比度和间距。
最后的想法
优秀的视觉层次结构不仅仅关乎美观,更关乎功能性、清晰度和用户控制。当用户能够立即了解应该查看的位置和操作时,他们会更加投入,更快地完成转化,并享受体验。
通过掌握层次结构,您不仅可以设计更好的界面,还可以设计更好的体验。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

日历

链接

个人资料

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

存档