首页

科学的 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

Spotify Wrapped 的社会意义

杰睿

科技行业如何终结后现代主义并促进个人主义
Wham! 音乐节、可口可乐广告,以及例行的家庭聚餐;西方的圣诞周简直是老生常谈。我们甚至在十二月有了一个新的传统:一年一度的 Spotify Wrapped。我们甚至还有一个新的十二月传统:一年一度的 Spotify Wrapped。
乍一看,这个概念似乎是一个绝妙的营销策略,但其背后却隐藏着更深层的含义。为什么这些音乐回顾会迅速走红?为什么人们想要分享他们听过的音乐?
Spotify 告诉我:“2024 年,你经历了‘末日永久波浪艺术摇滚’阶段。” 这到底是怎么回事?这到底意味着什么?真的值得分享吗?
如果Spotify Wrapped在 20 世纪初就存在,那么大多数列表看起来都会一样:“你最喜欢的艺术家是 Ella Fitzgerald、Billie Holiday 和 Frank Sinatra。”
20世纪后半叶,社会发生了变化。“Wrapped”这个词原本是针对亚文化的。“你是垃圾摇滚乐手,你最喜欢的艺人是爱丽丝囚徒乐队、声音花园乐队和涅槃乐队。”或者,“嘿,嘻哈乐手,你最常听2Pac、Biggie和武当派。”这些亚文化在如今的时代已经基本消失了。
如今,人们的听歌模式高度个性化。Spotify 不仅通过其 Spotify Wrapped 满足了这一需求,还推出了 AI 生成的个人播放列表和歌曲推荐。
在本文中,我将探讨 Spotify 以及其他行业应用中的个性化功能。我将探究音乐消费随时间的变化,以及个性化如何提升 Spotify Wrapped 的文化重要性。
照片:Spotify
人们是如何变得“不同”的
我们必须区分三个不同的时期:现代性、后现代性和网络现代性。
在启蒙运动至20世纪60年代的现代性时期,个人的消费选择并不多。创意世界主要只对精英阶层开放,产品大多在本地生产,工人阶级的日常生活主要集中在工作和家庭上。
这种与世隔绝的生活导致了某种程度上单一的文化。普通人只能收听地方电台,他们会在市中心的服装店购买裤子和裙子,他们的观点也受到当地酒吧/酒馆/麦芽酒馆的影响。因此,大多数人的长相几乎一模一样,听的音乐也大同小异。市场替人们做决定。人们只是适应提供给他们的产品。
19世纪,上层和中产阶级会专门去剧院欣赏交响乐或歌剧。他们会买票,全神贯注地欣赏音乐。
随着收音机和唱片机的发明,人们把音乐带进客厅成为可能。一家人围坐在音响旁,聆听新闻、故事或音乐。
20世纪40年代,汽车收音机普及,人们开始在旅途中听音乐。当时艺术家的数量仍然很少,所以近代晚期的人们大多听杜克·艾灵顿、本尼·古德曼和格伦·米勒的大乐队。音乐的宏大叙事从19世纪的古典音乐转向了20世纪初的爵士乐。
始于20世纪60年代的后现代时代,人们的生活发生了翻天覆地的变化。战后工业带来了大量新的可能性。新的通讯技术和更廉价的运输方式催生了全球化经济。
消费者开始拥有更多选择和闲暇时间。因此,他们可以将更多精力投入到自己的身份认同、时尚和爱好中。亚文化应运而生。孩子们组建摇滚乐队,并按照亚文化的模式行事。
乐器如今已普及,中产阶级也开始拥抱音乐,乐队的数量也随之急剧增长。飞利浦于1963年发明了磁带。从此,乐队录制样带成为可能,而为青少年时期的暗恋对象制作混音带也成为了一种表达爱意的方式。
第一批个性化播放列表诞生了。索尼于1979年推出随身听,人们甚至可以在乘坐公共交通工具时收听这些播放列表。当时人们的智力水平较低,无法完全理解音乐中的微妙之处和张力,因此音乐需要变得更加简单。然而,由于非音乐学院的音乐家也开始创作歌曲,音乐也逐渐走向了更简单的创作形式。
音乐越来越成为一种背景娱乐,而非一项主要的活动。它也变得孤立起来。古典音乐和爵士乐的宏大叙事被抛在身后,亚文化随之兴起。
亚文化的兴起部分源于电子乐器的多样化选择。电吉他为各种摇滚乐的出现铺平了道路,而合成器和打击乐则为说唱、舞曲和流行音乐奠定了基础。
不同类型的文化形成了独特的时尚潮流,并与社会和政治运动紧密相连。叛逆者偏爱朋克音乐和滑板美学,浪漫的少女们则崇拜男子乐队和杂志,而足球流氓则热衷于地下舞曲和运动服饰。
公司同样抓住了这一趋势,并创建了能够满足特定人群需求的品牌(MTV、杂志和时尚品牌)。
随身听 — 图片来源:Silas GregoryUnsplash
20 世纪 90 年代末,互联网成为主流,孩子们现在可以接触到更加多元文化和多样化的文化/流行音乐。
互联网论坛和社交媒体应运而生,让世界各地的人们得以相互联系。超越自身亚文化圈,寻找文化同伴的可能性也随之提升。科技公司及其产品也变得更加精巧,能够利用智能系统满足用户的个人需求,而非群体欲望。
本世纪的音乐消费方式发生了翻天覆地的变化。Napster和Kazaa等互联网下载以及Winamp等音乐播放器的出现,使得消费者越来越关注单曲而非整张专辑。
Napster,来源:XDA和 Kazaa,来源:Poihouston
随着Spotify等流媒体服务的诞生,这一现象得到了进一步发展。无限量收听服务让音乐爱好者能够创建自己独特的个人播放列表,从而进一步摧毁宏大叙事。
社会从由电台主持人主导的音乐体验,到通过购买黑胶唱片和 CD 唱片(由唱片店中的流派部分引导),再到让用户完全控制其播放列表的 Spotify。
这个世纪中最后一个时代是后现代主义的延续,它被冠以多种名称:表演主义(Eshelman)、超现代主义(Lipovetsky)、另类现代主义(Bourriaud)和元现代主义(Vermeulen & Van den Akker)。
我认为在线部分的影响最为显著,因此认为数字现代主义是最合适的标签,这个术语由艾伦·柯比 (Alan Kirby) 在其 2009 年出版的书《数字现代主义:新技术如何瓦解后现代主义并重塑我们的文化》中提出
我个人会提倡赛博现代主义,甚至赛博主义(这样现代主义就可以被彻底抛弃)。但我们已经眼花缭乱了,所以别再提我的建议了。
如果你想了解更多关于现代主义和后现代主义的区别,你可以阅读:科技和披头士乐队如何改变艺术、性、工作和真理
对音乐的影响
20世纪初,剧院观众有足够的体力听完整部马勒或肖斯塔科维奇的交响曲。在后现代时期,平克·弗洛伊德的《月之暗面》、Depeche Mode的《Violator》和Radiohead的《Kid A》都被认为是完整的音乐作品,应该作为整张唱片来聆听。然而,在数字现代时代,用户开始对歌曲进行精挑细选。
Spotify 最近改变了其界面,使每首曲目的独特艺术家变得更加明显,这表明听众已经越来越多地从拥有单个艺术家的播放列表转向拥有各种艺术家的收藏。
新的 spotify 播放列表 UI 更加强调每首曲目的独特艺术家
智能算法同样允许连续播放,类似于社交媒体或约会应用上的无限滚动设计。这带来了一种内容永不结束的用户体验。消费者随时可以跳过一首歌曲/一段视频/一次约会,因为下一首歌曲/一段视频/一个女朋友随时可用。这导致了“微波炉心态”。人们渴望即时的改变和满足感。
艺术家们别无选择,只能创作能够直接抓住听众注意力的歌曲;“跳过”按钮很快就被用掉了。因此,一首歌曲吸引听众注意力所需的时间大幅缩短。齐柏林飞船乐队可以轻松完成4分钟的吉他前奏,但当代流行歌手必须快速进入副歌部分,以免失去听众的注意力。
同样,音乐也从主要的娱乐来源(戏剧)变成了一种背景活动。音乐理论的机制超出了本文的讨论范围,但流行音乐,尤其是它的和弦和进行,确实变得简单得多。
尽管这种简化,音乐需要张力才能令人愉悦。所有艺术形式都依赖于某种形式的张力和释放。没有张力,就无法获得满足感。
在过去的一百年里,我们见证了音乐从用不和谐音符营造张力,到运用现代制作技巧来增添张力的转变。如今的音乐很大程度上依赖于有趣的节奏、音色层次和质感——而这些是后现代乐队所无法运用的。
听众还可以使用具有更广阔声音频率范围的音响设备,从而使制作人可以为音乐的低端(低音)添加更多微妙之处。
在现代,人们通过巧妙的作曲营造紧张感。钢琴会弹奏出“怪异”的音符,小提琴则会加入一些相互矛盾的音符。在后现代,失真的吉他、高亢的歌声和体育场摇滚鼓组营造出一种不适感。而在数字现代,引人入胜的节奏和音景则吸引着听众。
歌词也变得更加 感性化个性化。大卫·鲍伊、鲍勃·迪伦和披头士乐队反复运用虚构人物来讲述故事。科特·柯本、埃迪·维德和杰夫·巴克利则更多地发自内心地表达情感。这种趋势在21世纪初的Emo音乐运动中得以延续。
如今,大多数流行音乐都极具个人色彩,因此在创作张力之外,又增添了另一种张力。Spotify 提供了一项功能,允许听众在欣赏音乐的同时查看歌词。
Spotify 展示的歌词变得更加个性化和情感化
Spotify 的商业动机
Spotify 采用标准的免费增值模式,提供包含广告的免费套餐和需要付费订阅的高级套餐。对于像 Spotify 这样的公司来说,用户增长至关重要。用户越多,收集的行为数据就越多。这让他们能够改进产品,通过个性化服务进一步吸引(甚至培养)用户,并满足其商业伙伴(投资者、风险投资家、广告商和唱片公司)的需求。
用户流失率是最重要的绩效指标之一。该指标追踪用户退订的速度和幅度。与大多数硅谷公司一样,Spotify 拥有一支增长团队,他们利用数据分析、用户访谈和市场趋势来确定锁定用户的策略。
Spotify Wrapped 在留住这些用户方面发挥着至关重要的作用。这一机制是许多人不愿错过的社交礼仪的一部分。取消订阅 Spotify 意味着用户将失去 12 月的习惯,这可能会损害他们的社交地位。
Spotify 对用户了解得越多,他们年度的Wrapped就越个性化,Spotify 也就越能打造出符合用户习惯和需求的用户体验。个性化播放列表和推荐固然是宝贵的工具,但不难想象未来人工智能将被用于创造更加个性化的体验。音乐和歌词可以根据个人数据进行调整。迟早,你可能会拥有自己的专属“音乐家”。
Spotify 使用人工智能创作音乐还有另一个经济动机。人工智能音乐创作者会从中获得版税,从而挤走原创者,进一步扩大其市场主导地位。Spotify 已经在用于专注力的背景音乐播放列表中(例如,轻松爵士咖啡馆或专注极简电子乐)推出了这一概念。现在,人工智能艺术家也受到了大力推广
个性化的其他领域
Spotify 并非唯一一家应用个性化服务的公司,而是全球趋势的一部分。其他行业也需要借鉴,才能理解个性化播放列表如何影响个人生活。
电影行业经历了与音乐行业类似的转型。从现代电影狂热者走进影院,到后现代主义者根据一系列电视频道或借用VHS录像带挑选电影,再到数字现代主义者拥有提供无限选择、却只推荐少数几部电影的流媒体服务。
现代主义购物者会去当地时装店购买仅有的牛仔裤,而在后现代全球化时代,运输和生产成本降低,邮购目录和购物中心提供了更多选择。像亚马逊或Zalando这样的数字现代在线商店为购物者提供了无限的选择,同时推荐特定的个性化商品。
20世纪初,人们吃的都是家乡特色菜,但随着移民的涌入,食物的选择也变得丰富多样。印度菜、印尼菜和意大利菜也应运而生。如今,数字化现代的外卖应用提供了丰富的菜品选择和推荐。
图片:Spotify
网上约会
或许,约会和性的世界就是社会从现代单一文化社会走向分裂身份的最好例子。
现代男人会在教堂或乡村体育俱乐部找到他的邻家女孩。现代男人是异性恋,现代女人也是。20世纪60年代的性革命带来了改变。女性开始获得越来越多的权利,同性恋也逐渐被接受。
后现代的约会生活从教堂转移到了夜生活场所,派对爱好者可以找到志同道合、与自身亚文化相契合的人。同性恋者可以在同志酒吧找到同伴。
现代数字时代的约会搜索已基本转移到线上。这意味着找到符合某人特定特征的人会更容易。
因此,异性恋或同性恋的性别壁垒或许可以被打破。数字现代的性身份认同完全碎片化。约会应用为用户提供了丰富的个人筛选条件和性偏好,从泛性恋、双性恋、酷儿到女性、异性恋或性取向。
对人们的影响
本文概述了世界如何从单一选择的现代,经过多元选择的后现代时代,走向无限选择的数字现代主义。我们身份的重要性和作用与这些趋势相符。
音乐听众从适应现代社会习俗,成为亚文化的一员,变成完全独特的人。
Spotify 通过提供“发现每周”“每日精选”播放列表来促进这一转变。除了这些个性化播放列表外,Spotify 还提供连续播放功能。该软件会分析用户播放列表的内容,并继续播放与该播放列表中特定歌曲匹配的歌曲。
如今,用户的聆听模式如此独特,以至于这可能会让他们陷入存在危机。他们的音乐身份是什么?他们的聆听行为是否符合他们的个性?他们如何向社交环境展现自我?
Spotify Wrapped 的重要性如今已显而易见。该机制允许用户向所有想了解自己的人分享真实的自我——至少用户是这么认为的。
在现代社会,人们会根据有限的可用产品调整自己的行为。数字化现代产品则能适应用户的需求。自适应设计是用户体验领域中经常使用的一个术语。这究竟揭示了关于人和产品的哪些信息?
社会是否正在经历产品行业的哥白尼式革命?这一转变发生在20世纪90年代,当时唐纳德·诺曼(Don Norman)提出了用户体验设计这一技艺。他彻底改变了设计行业,将用户,而不是公司或技术,置于设计的中心。
个人如今是否已成为宇宙的中心?这是否意味着社会真的以自我为中心?世界无疑已经变成了一个高度个人化的社会。然而,这种现象仍然依赖于文化。
美国独具个人主义色彩,与欧洲截然不同。欧洲重视个人主义,但又将其融入社会潮流。许多亚洲和非洲国家集体主义特征多于个人主义特征。亚洲的个人更多地代表着某个家庭或部落,而非个人选择的产物。
图片:Spotify
我们是谁?
如果我们探讨个人身份,那么首先要提到的是法国存在主义者。让-保罗·萨特认为,许多人的身份认同取决于他们的工作。
“一位尽职尽责的咖啡馆服务员会将自己完全认同于服务员的角色。但这种认同是一种不诚实的表现,因为它否定了人类意识的超越性。”
虽然这种说法在一定程度上是正确的,但千禧一代和Z世代的个人身份认同对工作的依赖程度较低。他们倾向于寻找与自身职业相匹配的工作
近代以来,工作机会稀少,人们往往选择从事一些基础性工作。而如今,劳务行业提供了更多的就业机会,为劳动者提供了找到符合自身意愿的工作的途径。
同样,民族认同在人们的生活中也变得不那么重要了,至少对年轻人来说是这样。数字现代主义让我们能够消费的媒体远远超出国家媒体(BBC、法国电视台等)和企业报纸。
任何读过三页历史书或研究过地缘政治战略的西方人都会意识到,西方新殖民主义政府有很多令人尴尬的地方。正如荒诞派作家阿尔贝·加缪所说:
“民族主义不是原因,而是结果,是集体神经症的结果。”
非盎格鲁撒克逊人的Z世代在成长过程中以英语作为第二母语,他们观看“YouTube英语”,出国留学,并迅速与持有不同护照和母语的人建立恋爱关系。Z世代的民族认同感正在逐渐消退。
另一个曾经给予我们物品的机构是教堂。正如朱迪斯·巴特勒所说:
“宗教实践的表演维度是将宗教规范作为身份构成的一部分来体现的一种方式。”
世界正在快速经历世俗化转型。教堂出席人数骤减,青少年也越来越少参与他们父母所倡导的宗教运动。
提到朱迪斯·巴特勒,顺理成章地接下来要谈的是性。我已经讨论过我们的性身份认同是如何变得碎片化的。正如米歇尔·福柯指出的:
“规范性观念是通过权力在身体、个人和群体中实施而得到阐述和植入的。”
如果性别认同是一种社会建构,那么智力独立就会使性偏好不那么严格。
值得一提的是,政治光谱中保守派人士或许仍会坚守自己的宗教、国籍、性别角色、性取向和工作。然而,对于进步派人士来说,这些支柱正在瓦解。越“西化”,社会就越个体化也如此)。
尤其是盎格鲁-撒克逊国家,已经变得高度个人化,人们强烈渴望展现自我,却无法再依赖古老既定的符号。
在欧洲,人们会展现自己的个人身份,但通常不会强迫他人。美国人在这方面则更具攻击性。他们可能会要求周围的人使用他们独特的代词,在自己的汽车上贴上各种带有奇特政治信息的贴纸,并赋予自己超越正当言论的“言论自由权”。对某些人来说,言论自由意味着侮辱的自由。
那么,人们该如何以文明的方式探索和分享自我?纹身文化的蓬勃发展表明,人们正在寻找其他形式的自我表达。性取向也被用来展现个人特质。然而,人们渴望更多能够展现个人身份的工具。Spotify Wrapped 就是其中之一——一个重要的工具。
 
兰亭妙微(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
 

日历

链接

个人资料

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

存档