首页

从优秀到卓越的 UI 动画技巧 改善 UI 微交互的实用建议。

杰睿 设计资源

使标签中的内容滑动。

将显示缩放图像
左侧的内容淡入淡出。右侧的内容随标签滑动。

连接卡片的共享元素。

将显示缩放图像
左侧的内容会打开一个新的屏幕并向上滑动。右侧的卡片会展开并填满整个屏幕。

在您的内容中使用级联效果。

将显示缩放图像
左边的卡片通过滑动和淡入出现。右边的卡片具有相同的动画,但每张卡片都有短暂的延迟。

使内容将其他元素推开。

将显示缩放图像
左侧的动画在其他内容之上进行动画处理。右侧的动画随着内容的扩展而将其推出。

使菜单在上下文中显示。

将显示缩放图像
左侧菜单从下方飞入。右侧菜单从创建它的操作展开。

使用按钮来显示不同的状态。

将显示缩放图像
左侧的按钮显示指示状态的文本。右侧的按钮使用容器来显示不同的事件。

引起对重要事物的关注。

将显示缩放图像
左侧的示例使用颜色和位置来突出元素。右侧的示例使用微妙的动画来吸引用户的注意力。

结论

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

✨ 审美积累 | Misso 工作平台设计赏析

杰睿 设计资源

信息密度高,也可以呼吸感十足。
今天分享一组我非常喜欢的 Web UI 作品——Misso 工作效率平台设计。项目来自 BEHANCE 上的 Dotcode Studio,主打 B 端 SaaS 场景,设计在视觉和信息组织之间达成了很好的平衡。
这组设计最吸引我的是**「信息密度与视觉节奏的平衡」**。它大量使用网格和卡片进行内容分区,同时通过圆角、灰阶配色和轻量图标,削弱了B端界面的压迫感。
核心亮点:
  • 主色冷静理性,大量留白让复杂信息不拥挤
  • 字体层级明确,搭配简洁图标强化指向性
  • 模组化卡片设计,兼容多种信息类型、适配响应式场景
  • 微交互动效自然,增强可用性但不喧宾夺主
使用感受:
这类视觉风格在“效率类”工具平台中非常常见,但 Misso 的版本尤其**“亲切”**,不像传统 B 端那么冷峻。可以作为 CRM、任务管理、数据看板等平台的风格参考。
适用场景建议:
适合 B 端 Web 产品、数据仪表盘、工作流工具等高信息密度的页面,特别适合希望在「专业感」与「友好性」之间找到平衡的产品团队。
兰亭妙微(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

14 个逻辑驱动的 UI 设计技巧,助您改善任何界面

杰睿 设计思维

设计用户界面绝非易事。布局、间距、字体和颜色的选择数不胜数,很容易让人不知所措。而当你考虑可用性、可访问性和用户心理等因素时,挑战只会越来越大。
但好消息是,UI 设计其实没那么复杂。从事产品设计师二十多年,我发现我的大部分视觉和交互设计决策都遵循一套清晰的逻辑准则。这些准则并非源于艺术天赋或直觉,而是直截了当的指导原则。
当然,创意天赋固然有用,但很多让界面直观、包容、赏心悦目的元素绝对是可以学习的。拥有结构化的方法能让你做出明智、一致的设计选择。如果没有它,你基本上只能依靠反复试验来让事情“看起来正确”。
最好的学习方法是什么?实践出真知。那就让我们深入探讨一些实用的 UI 设计技巧吧。
修复示例界面的 UI 设计技巧
以下设计是一个社区博客平台的个人资料页面。第一个示例是原始设计。第二个示例是快速应用一些逻辑驱动的 UI 设计技巧的结果。
即使你没有太多的UI设计经验,你大概也能看出最初的设计感觉不太“对劲”。这是因为它包含许多设计缺陷,可能会对可用性产生负面影响。你可能已经发现了其中一些。
现在,让我们逐步了解改进原始设计的过程,并使用这些 UI 设计技巧逐步解决每个问题:
根据元素之间的密切关系来划分空间
界面元素之间的间距大小应取决于元素之间的关联程度。关联程度越高的元素通常应该靠得更近,以显示它们的关联性。不相关的元素之间应留出更多空间来分隔。
以这种方式使用间距是将信息拆分成更小组别的最有效方法之一。如果你将每个组想象成一个矩形,你会注意到界面是由许多小矩形套在更大的矩形中构成的。首先在最内侧的矩形上应用较小的间距,然后随着向外移动,逐渐增加矩形之间的间距。
确定界面元素之间的理想间距可能是一项令人沮丧且耗时的任务。有无数的选项可供选择。与其一次一个像素地反复尝试,不如创建一组简单的预定义间距选项,以便更快地做出决策。
设置简单 T 恤尺寸的间距选项,以 8 点为增量。这也称为使用 8 点网格,因为所有界面元素最终都会与一系列以 8 点为间隔的垂直和水平辅助线对齐。对于更详细的界面,您可以使用 4 点为增量,以便更好地控制。
与排版比例尺类似,间距选项应该随着元素尺寸的增大而相应增大。这可以确保间距与较大的界面元素成比例。
在我们的示例中,无论矩形之间的关联程度如何,它们之间都只使用了预定义的超小间距 (8pt) 和小间距 (16pt)。这会导致设计看起来杂乱、挤压,并且难以理解。根据元素之间的关联程度增加间距有助于清晰地区分和分组内容。
以下是应用预定义间距选项之前和之后的示例。
2.确保界面元素具有 3:1 的对比度
对比度是衡量两种颜色之间感知亮度差异的指标。它以 1:1 到 21:1 之间的比例表示。例如,黑色背景上的黑色文本对比度最低,为 1:1;而白色背景上的黑色文本对比度最高,为 21:1。有很多工具和Figma 插件可以帮助你测量色彩对比度,我最喜欢的是Web AIM 在线对比度检查工具Figma Contrast 插件
为了确保视障人士能够清晰地查看界面细节,请至少满足Web 内容无障碍指南 (WCAG) 2.1 AA 级色彩对比度要求。这意味着,表单字段和按钮等用户界面元素的对比度至少需要达到 3:1。
在我们的示例中,图标和按钮的对比度太低。低对比度按钮的风险在于,视力较差的人可能无法识别它们是按钮,因为他们看不清按钮的形状。为按钮添加对比度足够的边框,可以提高可访问性。按钮的浅灰色背景填充也被移除,这样人们就不会误认为它们处于禁用状态或非活动状态。图标的低对比度问题可以通过使用深灰色轻松解决。
使用单个主按钮执行最重要的操作
对于大多数网站或应用项目,您需要设置三个按钮权重来指示操作的重要性:主要、次要和第三级。根据界面的复杂程度,您可能还需要较小或较大的按钮尺寸。
以下按钮样式熟悉易用,且具有清晰的视觉层次,并非仅仅依赖于颜色。它们并非设计按钮样式的唯一方法,但却是一种安全的选择。了解更多按钮设计技巧,以避免常见错误。
主按钮的目的是突出显示界面上最重要的操作。这有助于人们了解下一步该做什么才能完成他们的任务。
使用主按钮的指南:
如果界面上没有最重要的操作,请对这些操作使用二级或三级按钮。
避免在屏幕上使用多个主要按钮。它们会争夺注意力,并导致用户对下一步操作感到困惑。
在我们的示例中,我们假设“关注”操作是最重要的,并将其作为主要按钮。
确保按钮具有足够的目标尺寸
与大目标相比,小目标更难点击或触摸。对于运动控制能力受损的人,或者单手用拇指握住手机的人来说尤其如此。
尝试并遵循以下准则,以确保按钮(和其他交互元素)具有足够的目标尺寸:
按钮尺寸至少为 48pt x 48pt。这与 8pt 网格对齐,并且略大于 WCAG 建议的 44pt x 44pt。
使常用按钮更大,以提高效率并避免错过它们。
按钮之间至少间隔 8pt,以防止人们误按错误的按钮。
在我们的示例中,两个按钮的目标尺寸已经足够,但仍有足够的空间来加宽按钮。由于还有空间,您可以加宽按钮以增加其目标尺寸。
5.确保重要内容可见
人们不会使用他们看不到的东西。将内容隐藏在交互式菜单后面是保持界面简洁简洁的便捷方法,但这存在风险,因为有些人可能会忽略这些内容。如果空间允许,请尽量确保重要的内容和操作在需要时清晰可见。
在我们的示例中,操作隐藏在交互式菜单中,以帮助简化设计。虽然看起来简洁明了,但存在一些风险,可能会让用户错过这些操作。由于需要留出空间来显示“分享”和“收藏”这两个操作,因此请将它们显示出来,以确保用户不会错过。
减少大文本的字母间距
让大标题看起来更好的一个小技巧是减小字母间距(字母之间的空间)。减小字母间距的程度取决于字体和大小,但通常情况下,文本越大,减小字母间距的幅度就越大。
这是因为许多字体设计用于长篇正文的小字号阅读。它们被称为“正文型”字体,字母间距较大,以便在小字号下更易辨认。对于“显示型”字体,您可能不需要减小字母间距,因为它们设计用于大字号,通常字母间距较小。
在我们的例子中,人名的字母间距减小了,以提高美观度。
不要仅仅依赖颜色作为指标
不要仅仅依靠颜色来传达含义或区分视觉元素,因为视力低下或色盲的人可能无法看到指示符。使用其他视觉提示来区分界面元素。
在我们的示例中,有两个地方可能会令人困惑。让我们来更清楚地解释一下。
如果您查看文章列表上方的 3 个标签页,可能不太容易看出“文章”是被选中的标签页。这是因为标签页的颜色差异非常细微,用于指示选中状态。在选中的标签页上添加下划线有助于使其更加清晰。
同样,在底部导航中,我们采用了微妙的颜色变化来区分所选图标和其他图标。为了更加明显,所选图标被填充了颜色。
尽量避免使用多重对齐
使用的对齐类型越多(左对齐、右对齐或居中对齐),界面看起来就越复杂、越混乱。我们的眼睛在移动时,为了跟上每种对齐方式,不得不更加费力。当界面中的一个小组件或部分使用多种不同的对齐方式时,这一点尤为突出。
坚持单一对齐方式(或尽可能少的对齐方式)有助于简化界面,使其看起来更整洁。
在我们的示例中,标签页居中对齐,而页面上的大多数其他元素则左对齐。这种混合对齐方式增加了不必要的复杂性,导致认知负荷(使用界面所需的脑力)略有增加。将标签页左对齐有助于保持界面整洁。
确保文本对比度为 4.5:1
为了帮助确保有视力障碍的人能够清晰地阅读文本,它需要满足以下 WCAG 2.1 AA 级对比度要求:
小文本(18px 及以下)需要至少 4.5:1 的对比度。
大文本(粗体字重 18px 以上或常规字重 24px 以上)需要至少 3:1 的对比度。
在我们的示例中,未选中选项卡上的小文本对比度不足。使用较深的灰色可以提供足够的对比度。
10.考虑移除容器以简化界面
将信息分解成更小的相关元素组有助于构建和组织界面,让人们更快、更容易地理解和记忆。
您可以使用以下方法对相关元素进行分组:
将相关元素放在同一容器中
空间相关元素紧密相连
使相关元素看起来相似
将相关元素对齐成一条连续的线
使用容器是分组界面元素最有效的视觉提示,但它可能会造成不必要的混乱。寻找机会使用其他分组方法,它们通常更巧妙,有助于简化设计。
在我们的示例中,每篇文章周围的容器是不必要的,因为已经使用了多种其他分组方法。移除容器还可以为内容腾出更多空间。
仅使用常规和粗体字体
虽然某种字体有很多种粗细,但这并不意味着你需要在 UI 设计中全部使用它们。使用过多不同的粗细会给界面带来干扰和混乱,也会使统一使用每种粗细变得更加困难。
仅使用常规和粗体字重,保持设计系统简洁明了。某些字体提供半粗体选项,如果粗体字重过重,可以使用半粗体代替。
快速使用提示:
使用粗体字体来强调标题。
对于其他较小的文本,请使用常规字体粗细。
如果您决定使用非常细或粗的字体,请将它们保留用于标题和较大的文本,因为它们在较小的尺寸下可能难以阅读。
在我们的示例中,文章详情使用了三种不同的字体粗细。即使“超细”和“细”字体粗细的对比度高于所需的 4.5:1,但某些用户仍然可能难以阅读这些字符。将字体粗细增加到“常规”有助于提高可读性并简化设计。文章标题使用“半粗体”有助于使其脱颖而出。
仅使用两种字体粗细即可得到以下设计。我们正在应用 UI 设计技巧,目前进展顺利,但仍有一些问题需要解决。
12.保持一致
UI设计的一致性意味着相似的元素在外观和工作方式上保持一致。这不仅应该体现在您的产品中,也应该体现在其他成熟产品中。这种可预测的功能可以提高可用性并减少错误,因为用户无需不断学习其工作原理。
在我们的示例中,每篇文章的照片都有尖角,与按钮和图标的柔和圆角不匹配。将照片的角弄圆有助于创建更一致的视觉语言。你可能认为像这样的小细节不会带来太大的变化,但它们加在一起,就能让设计看起来“恰到好处”。
不要混淆极简主义和简单性
极简并不意味着简单。设计师倾向于极简界面,因为它们看起来美观简洁。极简界面元素和样式较少,但理解和使用起来并不一定简单。
极简界面通常会显得模糊或令人困惑,因为它们缺乏良好可用性所需的关键细节。简化不仅仅是减少。删除或隐藏太多内容可能会损害可用性。你需要确保没有删除关键信息或细节。
在我们的示例中,底部导航图标看起来简洁明了,但它们的含义清晰吗?可能并非每个人都清楚。在图标上添加文本标签有助于确保人们能够理解它们的含义,尤其是那些使用屏幕阅读器(一种使用语音或盲文向盲人描述界面的软件)的用户。
平衡图标和文字
当将图标与文本配对时,请尝试确保它们具有相似的视觉突出性,以获得更加平衡和有凝聚力的外观。
在我们的示例中,底部导航栏中的图标和文字略微不平衡。图标和文字颜色相同,但图标更粗更大,使其更加突出。将文字加深可以增强其突出度,使其与图标保持平衡。将文字对比度提高到至少 4.5:1 也能确保视力不佳的用户也能轻松阅读。
我们做到了!
仅凭一些简单的UI设计技巧,我们就能够识别并解决示例界面中的一系列问题。当然,您可以根据需要进一步调整视觉风格,使其更贴合特定的品牌个性。不过,在本例中,我们专注于确保基本原则的正确性。
我希望你开始明白,UI 设计并不需要让人感到不知所措。虽然它有时看起来像是一门只有天赋异禀的人才能掌握的神秘艺术,但许多优秀的界面设计都植根于清晰、合乎逻辑的指导原则,就像你在这里学到的那些一样。
依靠客观指导而非主观意见,设计直观、易用且视觉精美的界面会更加轻松(且快捷)。你越多地运用这些 UI 设计技巧,它们就越能自然而然地融入你的设计流程。以它们为基础,勇于探索、实验,并在此基础上进一步激发你的创造力。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
 

交互设计思维的流程

涛涛 交互设计及用户体验

在设计一个优秀的互联网产品时,设计流程往往分为几个阶段,每个阶段都有清晰的目标和方法。这不仅帮助我们找到真正的用户需求,也确保设计思路清晰、可执行。下面,我们用简单易懂的方式来讲解整个设计流程。

交互设计是什么?有什么用?

涛涛 交互设计及用户体验

交互设计( interaction design, IXD ),从字面上来说,交互即为相互作用相互影响,设计即为理解与传达。在互联网产品中,交互设计对用户体验产生很大的影响。本文将围绕交互设计进行分析,与你分享。

UI设计的深度解读:从理念到实践的全面剖析

涛涛 设计管理与成长

在数字化时代,用户界面(UI)设计已成为连接用户与产品不可或缺的桥梁。它不仅仅是屏幕上的视觉呈现,更是用户体验(UX)的核心组成部分,影响着用户的认知、情感及行为。UI设计不仅仅是美化界面,更是一种通过精心策划的视觉与交互元素,引导用户高效、愉悦地完成任务的艺术与科学的结合。本文将从UI设计的理念、原则、流程、趋势以及实践技巧等多个维度,对其进行深度解读。

每个公司都需要自己的产品体验报告

涛涛 交互设计及用户体验

当产品体验报告不再是 PPT 里的静态文档,而成为实时迭代的决策引擎,传统五要素模型正经历三维进化:

Tesla Model 3 用户体验设计测评总结

涛涛 交互设计及用户体验

Tesla Model 3 在智能化与极简设计上表现突出,但导航与语音功能的短板、安全隐患(无 HUD)仍需优化,物理按键的取舍是未来迭代的关键争议点。

日历

链接

个人资料

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

存档