首页

单一项目设计管理说明书

涛涛

本文主要介绍了 ALINE STUDIO 推出的《单一项目设计管理说明书》,该说明书是其十年工作经验的总结,旨在为设计师解决单一项目推进中的问题

惊艳的UI作品

涛涛

本文围绕惊艳作品展开,分享了多个具有创新性的设计案例

科学的 UI 设计流程以及如何提升 UI 视觉效果

涛涛

这篇文章主要分享了科学的 UI 设计流程以及如何提升 UI 视觉效果,结合学生作业案例,解答了设计中常见的问题,内容通俗易懂

PC端网页的UI设计趋势

涛涛

显示设备的多用化、智能手机应用的普及化、电子设备触摸屏的普及,这些环境变化推动了 PC 网页 UI 设计的新动向。

安卓UI设计系列知识

涛涛

本文是安卓 UI 设计系列知识的第三篇,主要围绕安卓设计的适配、入手方法、设计准备及画图方法展开

进阶 UI 设计能力指标体系

涛涛

本文是《进阶 UI 设计 能力指标体系》系列的上篇,围绕 UI 设计师进阶及市场需求展开

如何做好 UI 设计

涛涛

本文围绕 “如何做好 UI 设计” 展开,分享了一系列相关要点

8 个易于实践的 UI 设计技巧

涛涛

本文总结了 8 个易于实践的 UI 设计技巧,可帮助设计师改善设计并为后续实践提供指导,具体内容如下。

以冷静包容的视角审视苹果史上最激进的 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

存档