Sketch Barcelona更新丨液态玻璃效果玩转iOS 26设计

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

Sketch的最新更新 Barcelona (2025.2.1) 为设计师带来了强大的新功能,特别针对macOS 26和iOS 26的设计需求。以下是对重点功能的深入介绍:

1. 玻璃效果(Glass Effect)玻璃效果是Barcelona更新的核心亮点之一,帮助设计师创建符合macOS 26和iOS 26现代审美(如液态玻璃效果)的界面。它在Inspector(检查器)的全新 Effects(效果) 面板中提供,适合为UI元素添加透明、模糊和动态视觉效果。Sketch Barcelona更新:液态玻璃效果带你玩转iOS 26设计_1.jpg

  • 两种设置模式

    • Auto(自动):为元素应用基础的毛玻璃外观,快速实现苹果设计语言中的标准玻璃效果,无需手动调整参数。适合快速原型设计或希望保持一致性的场景。

    • Custom(自定义):提供对玻璃效果所有参数的完全控制,允许设计师根据需求精细调整效果,创造独特的视觉风格。

  • 可控参数(Custom模式)

    • Blur(模糊):调整玻璃效果的模糊程度,控制背景内容的清晰度。

    • Distortion(扭曲):改变玻璃表面的扭曲感,模拟真实玻璃的折射效果。

    • Depth(深度):控制玻璃效果的立体感,增强层次感。

    • Chromatic Aberration(色差):引入色彩分离效果,模拟光线通过玻璃时的色散现象,增加真实感。

    • Brightness(亮度):调整玻璃效果的明亮程度,影响整体光感。

    • Saturation(饱和度):控制玻璃效果的色彩强度,可营造鲜艳或柔和的视觉效果。

    • Specular Highlights(高光):添加镜面高光,模拟光线在玻璃表面上的反射,增强材质感。

  • 应用场景:玻璃效果特别适合用于创建卡片、侧边栏、弹出窗口等需要半透明效果的UI元素,能够与macOS 26和iOS 26的现代化设计语言无缝衔接。

2. 同心圆角(Concentric Corners)同心圆角功能通过自动对齐图层圆角与容器的圆角属性,提升了设计效率和视觉一致性。Sketch Barcelona更新:液态玻璃效果带你玩转iOS 26设计_2.jpg

  • 功能概述

    • 新增 Auto(自动) 圆角样式,允许图层的圆角自动与最近的容器(container)对齐。

    • 对齐基于图层与容器的距离,或者容器的内边距(padding)进行动态计算。

    • 确保嵌套元素(如按钮、卡片或子组件)与父容器(如框架或堆栈)的圆角视觉上保持一致。

  • 工作原理

    • 当选择Auto模式时,Sketch会根据图层相对于容器的位置,自动调整圆角半径。

    • 如果容器具有内边距,计算会考虑内边距的影响,确保圆角在视觉上协调。

    • 例如,一个按钮嵌套在带有圆角的卡片中,按钮的圆角会自动匹配卡片的圆角样式,避免视觉上的割裂感。

  • 优势

    • 减少手动调整圆角的工作量,特别适合复杂布局或需要快速迭代的设计。

    • 提升设计一致性,符合现代UI设计中对圆润、统一外观的要求。

    • 适用于动态布局(如堆栈或自适应组件),自动适应不同的容器大小。

  • 应用场景:常用于设计卡片式布局、嵌套按钮、对话框等,确保所有元素的圆角风格协调一致。

3. 渐进透明(Progressive Alpha)渐进透明功能为设计师提供了一种更直观、快速的方式来实现图层的渐变淡出效果,取代了传统的Alpha蒙版设置。Sketch Barcelona更新:液态玻璃效果带你玩转iOS 26设计_4.jpg

  • 功能概述

    • 在Inspector的不透明度(Opacity)滑块旁新增了 Linear Gradient(线性渐变) 按钮,允许用户切换到渐进透明模式。

    • 用户可以通过在画布上调整“停止点”(stops)来控制透明度的渐变效果,类似于渐变工具的操作。

    • 提供了一种比设置Alpha蒙版更简单的方法来实现图层的淡出效果。

  • 操作方式

    • 点击Linear Gradient按钮后,画布上会出现透明度渐变的控制点。

    • 用户可以自由移动、添加或删除停止点,精确控制透明度从完全不透明到完全透明的过渡。

    • 例如,可以让一个图层的底部逐渐淡出,营造出柔和的视觉效果。

  • 优势

    • 比传统Alpha蒙版更直观,减少设置复杂蒙版的工作量。

    • 支持动态调整,适合快速实验和迭代。

    • 与渐进模糊等功能结合使用,可以创建更复杂的视觉层次效果。

  • 应用场景

    • 常用于滚动视图中的内容淡出(如列表底部)。

    • 适用于创建柔和的过渡效果,如对话框的背景、悬浮卡片的边缘等。

    • 在需要动态透明效果的动画原型中表现尤为出色。

4. 其他关键更新除了上述核心功能,Barcelona更新还包括以下内容:Sketch Barcelona更新:液态玻璃效果带你玩转iOS 26设计_3.jpg

  • 渐进模糊(Progressive Blurs)

    • 新增三种模糊类型:Uniform(统一模糊)、Linear Progressive(线性渐进模糊)和Radial Progressive(径向渐进模糊)。

    • 渐进模糊支持多个可调停止点,允许在画布上自由调整模糊过渡。

    • 适用于创建复杂的背景效果或强调视觉层次。

  • 更新的Apple UI库

    • Apple为macOS 26和iOS 26更新了Sketch的UI库,新增支持玻璃效果的组件。

    • 可在 Settings > Libraries 中启用,方便设计师直接使用最新的Apple设计资源。

Sketch团队正在为macOS Tahoe重新设计Sketch应用,Barcelona更新是这一过程中的重要一步。这些新功能(如玻璃效果、同心圆角和渐进透明)为设计师提供了强大的工具,以适配Apple最新的操作系统设计趋势。

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作