图标 圆角 体量 最近我在学习使用 Figma，会在社区查找一些大厂的设计系统文件学习，看到一篇微软 Fluent 系统图标规范文档，还挺详细的。其中，我发现有些小点自己平时很少注意到，并且感觉对设计师定义图标规范也有一定的帮助，所以结合个人图标经验挑选部分内容来翻译成一篇文章，便于扩展自己的图标思维。（备注：以下的规范是针对尺寸 24px、线条粗细 1.5px 的图标）概述在前一个版本，Fluent 系统图标采用了 MDL2 和 Monoline 图标集合，比较大的特征是直角、方方正正的形状。不过随着 Win 11 系统的发布，我们可以看到 Fluent 系统图标也进行了比较大版本的优化，感知最大的地方就是图标变圆润了。设计理念有三个准则：熟悉的、友好的、现代的。图标形状遵循了用户熟悉的基本原则，示意上识别清晰，尽量远离隐喻含义。同时，细节处理更友好，采用了圆角和简洁的形状，并有两个主题：线性和填充。网格和基础形状规范化的网格，能促进图标的整体性和统一性，设计师绘制图形元素时也更有条理性。从 24px 图标尺寸开始，比较建议使用网格系统，内容安全区域是 20px，周围有 2px 的内边距。（留内边距主要是考虑个别图标居中分布和体量问题，有些图标元素会超出安全区域，比如修饰符类型图形）基础形状是网格的基础，正方形、圆形、纵向矩形、水平矩形采用定义好的模板尺寸，在相关图标体量上保持一致的视觉比例。圆形、矩形、正方形图标体量效果如下。（矩形体量看起来有点偏小，这种问题受限于图标尺寸空间小）线条图标线条应当采用一致的粗细，线条末端采用全圆角。对齐网格像素对齐很重要，特别是低分屏设备，图标可以看起来很清晰。由于线条粗细是 1.5px，需要保证 1px 是对齐像素的，避免内外都出现虚边。但在某些特殊场景，为了使图标体量居中分布，就会出现像素不对齐的情况，比如一条竖线。圆角Fluent 图标改动点较大的可以说是圆角了，传递了更柔和、更友好的体验感受。因此，我们认真打磨圆角的细节，定义了三种圆角数值。大圆角使用在线条直角或钝角处；当使用大圆角感觉形状太圆难以辨别时，我们可以使用中圆角；小圆角用于很小的细节或锐角处。（确实挺细的，也影响了整体的风格。如果追求统一大圆角的话，可能太偏圆润风格，更适合娱乐类产品用户吧）断口断口多存在复合图标上，断口间距是 1px。当图形角度堆叠时，圆角中心点需要一致，即外层图形圆角会稍大一点，使线条平滑过渡。（看起来确实挺和谐的）修饰符修改符应当谨慎使用，因为它对于一部分用户来说很难阅读。由于尺寸较小，修饰符元素要尽可能地简洁，常放于图标的右下角。设计师在绘制过程中，修饰符图形可以超出安全区域，使图标视觉感官居中分布。关闭状态如果已经建立的图标需要关闭状态，应当遵循模板：斜杠从左上角到右下角 45 度，撑满图标的安全区域。视觉平衡图标平衡很重要，我们也有测试的两种方法。第一种方法是画一个圆圈，帮助我们更好地感知平衡性。第二种方法是视觉重量测试 ，通过模糊来感知图标的区域面积，从而达到平衡的目的。命名随着更多图标的创建，我们必须非常有意识地命名，并尽可能地具有前瞻性，后续才能更好地协作。我们推荐图标命名使用形状的明喻，比如盾牌代替安全，星号代表收藏。总结以上就是 Microsoft Fluent 图标规范的一些小翻译总结吧，线条粗细、圆角、居中、体量、平衡、命名等方面还挺多细节可以打磨细化的，希望各位设计师能够结合业务来仔细琢磨，提炼出属于自己产品的图标规范。两万字超强干货！设计师必看的图标设计指南图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/microsoft-fluent-icon-norms
图标 系统 圆角 2021 年 6 月，微软发布了全新的 Windows 11 操作系统，采用了 Fluent Design 平台设计规范，视觉风格进行了大改版，更美观、更柔和、更现代。同时，设计上加入了毛玻璃模糊的材料效果、流畅的过渡动画和小元素动画。我体验一段时间后，有几个点感到挺惊喜的：大圆角、卡片、动效。因为这几点不太像我们脑海中固化的 Windows 系统方正设计风格，倒有点 Mac 系统味道了。其中，我发现了一些 UI 设计细节和亮点，觉得在桌面端产品风格上还是有参考价值的，所以和大家分享下。图标在系统图标方面，常规图标尺寸是 16px，描边粗细是 1px，矩形外圆角是 2px，线条末端是圆角，更加亲和，符合现代年轻用户的审美。在部分场景界面，系统图标采用了双色的设计风格，打破了界面的枯燥感，视觉层次更加丰富。图标风格上，还采用了轻拟物设计风格，加入了渐变、高光、阴影设计手法，图标配色和质感可以学习下。圆角Win 11 系统采用了两种圆角尺寸：4px 和 8px。8px 圆角用于顶级容器，比如应用程序窗口、弹出窗口和对话框。4px 用于页面内元素，比如按钮、搜索框等控件。从 4 点网格和 8 点网格取值，具有一定的专业性和统一性。布局在系统界面上，Win 11 使用了不同背景色来区分层次结构，主次清晰，可以将用户的注意力集中在最重要的内容上。一般分为两个层次：基础层和内容层。基础层是应用程序的基础，可以用灰色背景，位于底层，常用于导航、菜单等相关功能。内容层是主要信息呈现区域，一般为白色背景，可以是一张大卡片或者多个连续排列的小卡片。比如系统应用程序：Microsoft Store 主界面，大卡片通到窗口右侧和底部，使用起来还是挺舒服的。比如系统应用程序：设置，多个连续的小卡片。这种布局风格简洁、新颖，体验后，我觉得可用性挺高的。下拉菜单下拉菜单是很基础通用的控件，我特地截图查看了界面标注。连续的列表之间保留 4px 间距，这点挺好的，可以避免一种场景：导航菜单栏列表同时存在 selected 态和 hover 态，避免背景色黏在一起、圆角搭配不和谐的情况。还有，反馈框上下左右的空白处间距是 4px，不包含面板描边，视觉感官间距看起来比较和谐。下拉菜单也出了一种新的交互形式。点击功能下拉后，下拉菜单直接覆盖在功能上方，点击切换蛮爽的，不过从通用性维度需要再评估下。标签栏标签栏选中态和未选中态文字都是黑色系，选中线为蓝色，选中态也挺明显的，又不会很干扰主体内容，色彩噪音不会很大。动效界面的切换过渡动画、单个元素的反馈动画，我体验下来觉得挺惊喜、挺有趣的。特别是在单个图标的动画上，有些图标加入光影渐变变化感觉挺有质感的，连下拉箭头也有动画，真细致呀。系统应用程序 Microsoft Store，左侧导航图标也加入了动画，挺顺滑的。动画很有细节，运动前有起势准备动作，利用重力原理加入了形变，还加入一些修饰元素，丰富运动效果。深色模式该系统也推出了深色模式，相信桌面端产品适配深色模式将是个趋势。设计师如果早期能够把深色模式考虑进去，后面适配将大大降低各方成本。总结以上就是我体验 Windows 11 UI 后发现的细节和亮点总结。在规范层，图标风格、圆角、界面布局、下拉菜单、标签栏的定义都挺多细节可以挖掘打磨的，设计师也需要根据自身产品调性考虑该系统规范的可用性，不能盲目跟随。在动效层，设计师发挥的空间和价值挺大的，可以多做些创意。Windows 11全新设计语言如何引领设计新趋势 ？（附源文件下载）Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/windows-11-ui-design
卡片 组合 圆角 不知道你有没有发现，每次做 UI 设计，几乎都会遇到卡片容器，也会因为卡片没设计好，没创意，被领导 Diss。那么卡片到底要怎么设计？，有哪些细节需要我们注意？正好，我最近在研究卡片的玩法，发现一些我们很容易忽略处理细节的方法，如果掌握这些，可以帮助设计提升精致度和品质感。我挑选 4 个最具有意义的细节与大家分享，尤其是最后一个，很多设计师不敢尝试。卡片圆角方法卡片圆角看起来很简单，但是如果稍有不慎就会出现看着不和谐的现象。如果单纯卡片布局，其实圆角比较好定义，如下这种方式。常规的卡片圆角，我们可以根据产品设计中，所需要的圆角数量来定义几种大小就可以了，一般推荐 3~5 个就够了，不宜过多。可以用在小卡片、按钮、卡片和其他需要圆角的控件上。另外一种情况，卡片内继续嵌套卡片，这时候一般都会有圆角。那么两个卡片的圆角要怎么计算？面对这种情况，相对好用的方法是：内矩形的圆角是外矩形的 1/2，比如内矩形圆角是 16px，那么外矩形圆角是 32px。下面来看看两个案例。案例 1：上图，在大卡片情况下，左侧外卡片和内卡片圆角一致，这样设计出来效果，看着有些不和谐。右侧的方法内卡片圆角是外卡圆角的一半，这样的视觉看上去整体会和谐很多。下面看个实际应用案例。Dribbble案例 2：在分段导航控件场景下，左侧案例，内矩形和外矩形圆角相等，看着视觉感受不舒适。右侧，内矩形圆角是外矩形的一半，效果会好很多。下面看下这种导航的应用案例。Ghani Pradita卡片描边在一些场景下，如果我们整个产品界面的底色是白色，这时要添加白色卡片容器，同时只是单纯添加投影来区分层级，那么会显得有些模糊。白色背景下，如果添加投影的同时，再增加一描边效果，那么效果会好很多。上图，在白色背景的项目中，我们给卡片边缘加 0.5px 的线，色值#E9E9E9，这样就会清晰的轮廓，卡片层级会更清晰一些。CokePlay上面这个应用，在白色背景情况下，定义卡片，为了让信息层级清晰，特意在卡片上添加了描边效果。上图反面案例，同样的卡片设计，这个应用，卡片颜色和底部背景色一致，导致卡片几乎和背景融为一体，这样信息层级就会很弱，不推荐大家这样大面积使用。卡片组合版式卡片的组合版式，这个词也许你第一次听，因为是我发明的。到底什么是卡片组合版式？我这里指的是卡片与卡片之间的组合排版。上图案例中，这种组合版式，在设计中最常见，也是用得多一些，所以会显得比较常规。我们在前期做概念探索阶段，其实是可以打破这种布局模式的，挑战下其他思路。上图中，就是打破了原有的那种思路，尝试多卡片组合设计。下面，我们来看一些实际的设计案例。大家留意下我红圈标记的地方，这种卡片组合，就是我前面的那种多卡组合思路。MUSINSA&BALAAN上面两个上线的应用，通过卡片的组合排版设计，让画面更有张力和新鲜感。苹果官网卡片组合异形卡片异形卡片，很少有设计师会想到这样去布局，毕竟存在一定的风险。如果设计出来，效果还是蛮有惊喜的。我们今天讲的异形是除去圆形、方形的卡片。异形卡片的特点：不规则中有统一的规律，形式感强、张力、杂志感。BookletIF 设计大奖作品，Booklet 采用异形设计，增强了页面视觉张力。Kakao Webtoon这个动漫类 APP 应用设计，采用异形作为漫画人物容器承载，凸显画面趣味性和可玩性。EchoBehance@the octopus magazineBehance@SPOON. Brand Identity Renewal如果想打破现有模式，走创新方向，异形卡片可以作为一个切入点，毕竟异形卡片可以和品牌符号衔接起来，做创新拓展。写在最后卡片，在多形态业务中都频频出现，例如 C 端、B 端、Web 端、车载等，它的灵活性和适应性，受到广大设计师的青睐，对于开发人员来讲，适配性也很强。所以，既然这么重要的一个卡片容器，是值得我们去细致研究，以便于做出更好的卡片布局。今天我们讲了 4 个细节，我个人认为，如果说想发挥创意，最后一个异形卡片可以有更大空间。最后，大家可以自行在探索前期，多尝试创新。做好这4个细节，帮你快速提升卡片设计效果！Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「功夫UX」本篇来源：优设网原文地址：https://www.uisdc.com/card-design-details
落霞与孤鹜
