图标 设计师 图形 小图标是界面的核心组成部分，承载着信息传递的重要作用。作为页面的最小展示单位，图标设计也是最能考验设计师基本功的一项工作。不过设计师熟练掌握的，往往只是单个图标的风格化绘制方法。在这个过程中，设计师更关注图标的美感和细节，而忽略了从宏观的角度考量「图标表达的准确性」、「不同图标之间的关联」、以及如何帮助业务「快速实现客制化功能」。更多图标干货：如何拥有一个画图标的好习惯？我总结了这 8 个方面！对于 UI 设计师来说，图标设计的能力至关重要，也是提升感官体验的重要方向。阅读文章 > 一、金融行业图标设计常见问题问题 1：金融行业功能服务名词抽象，设计师难以精准表达金融行业内，许多功能服务名词抽象，如工资理财、活期产品、定期产品，都没有可直接映射的物理形态，行业内也没有统一标准，设计师只能凭借经验绘制，难以精准表达。问题 2：关键词图形化的结果不一致，增加了客户的认知难度参与图标绘制的设计师分散在各业务线，每个人都依据自己的经验自由发挥，导致对同一关键词呈现的图形化结果不一致，增加了客户的认知难度。问题 3：工作模式割裂，难以满足千人千面的灵活配置及高端客制化需求以往的工作模式，由不同的设计师提供切图给不同的运营经理进行配置，这样多对多的模式导致沟通成本高，还经常出现配置重复、错误等问题。接下来，我们将从平安银行业务的特性出发，以金刚区双色图标为例，还原一个图标从诞生到前端展示的全过程，分享建设图标生态过程中的实践经验：2 个方法和 1 个工具「联想筛选法」「图标元素周期表」和「图标管理平台」。二、联想筛选法平安银行 App 是一款金融领域的 C 端产品，覆盖了账户、理财、贷款、保险和生活等多项综合服务，拥有着 400+丰富的功能服务类型，同时，这些功能服务的名称相较于其他行业都更为抽象。比如大家经常能接触到的电商平台，购物车、服饰、鞋包等，都有非常明确的物理形态，设计师只需要据此进行风格化处理，即可形成一个能精准表达相应含义的图标。但是在金融领域，许多功能对应的则是虚拟服务。如理财或保险，是没有物理形态的，且业内没有形成统一的标准，在用户层面还没有建立起统一的认知。那么如何绘制易理解、易识别的图标，是对设计师的一个考验。这里向大家介绍一种相对普适的方法「联想筛选法」，主要分为三步：第一步 了解服务特点图标代表某一功能服务的入口，起到帮助用户定位识别的作用，所以我们只有充分了解这项服务的实际含义与特点，才能真正绘制好一个图标。以保险为例，设计师首先需要思考保险是什么？它是给消费者提供保障与补偿，帮助消费者抵御风险的系列产品。因此我们在绘制图标时，需要充分体现“保障”和“抵御风险”的作用。第二步 映射联想了解服务特点后，设计师可进行简单的图形发散，即根据这项服务的实际含义和特点，联想相关的图形。比如下雨天撑起的一把伞、起到保护作用的盾牌、保险箱或一把锁，再比如在保险服务过程中用户通常接触到的一些实体物件，如保单。不过有一些功能服务，我们很难联想到合适的图形，这时就可以用文字来表达，如表达「税」的图形。一般情况下，我们通过从物理映射到相关性联想，再到文字表达这样的方法，逐步发散思维，就可以找出一些能表达其含义的图形。第三步 查重筛选拓展出几个图形后，如何筛选出最合适的那个呢？我们可以通过「契合度」「专属性」和「拓展性」这 3 个原则进行筛选，需要注意的是，这三个原则是有先后顺序的。① 契合度主要是分析哪个图形与该功能定义更为贴切。对于保险来说，契合度排序为：盾牌＞保单 ＞雨伞＞锁。② 专属性我们需要从全局的角度看这些图形，是否被其他功能占用。比如在业内，「锁」更多代表的是密码，而「保单」的样式和普通的账单难以区分，故可以排除。③ 拓展性需要考虑该图形在造型上是否容易和其他图形组合。因为功能服务往往不是单独存在的，通常会与一些相关功能共用图形（在第 2 个小节我们会分析拓展性案例）。通过以上 3 个步骤，就可以快速选择出最契合功能服务的图形。如最适合保险的图形是「盾牌」，它既高度契合保险服务本身的含义，同时也具有一定的专属性和拓展性。三、图标元素周期表通过上述联想筛选的方法，可以帮助设计师快速选择出与功能服务契合度较高的图形。不过绘制图标的设计师，是分散在各业务线，其中不乏新入职的同学。大家对方法的理解和掌握程度不一，导致不同的设计师，对同一关键词图形化的结果不一致，具体表现如下：同类型的功能服务，设计师使用完全不同的图形化元素，从而难以建立长期统一的客户认知。例如，同时用皇冠和钻石代表「权益」相关功能。即使图形元素一致，在风格化绘制的过程中，也会出现多种不同的样式。例如常用的人民币符号，在前期上线时就出现了七八种样式。为了解决上述问题，我们尝试沉淀出一套实现标准图形规范的快捷方式「图标元素周期表」：经过分析，现有功能服务名称多为 A+B 的组合结构。还是以保险为例，相关的功能有保险商城、保险服务、保险测评、跨境保险等，这类组合功能我们可以将其拆分为：保险+服务、保险+商城、跨境+保险这样的形式，进行图标设计。这样我们只要组合两个独立元素，就可以得到表意精确的组合图标，组合的形式可以是内外或左右结构：独立元素可以分为主图形和辅图形，经过组件化，最终形成「图标元素周期表」。业务设计师可以根据功能服务的特性，自由组合主辅图形即可。这大大减少了图形化结果不一致和样式不统一的问题。不断重复应用关键图形，可以建立并强化客户对相关功能服务的整体认知。当客户看到盾牌，马上可以联想到保险，就像看到放大镜，就知道是搜索功能一样。四、图标管理平台前两个部分介绍了联想筛选法和图标元素周期表两种方法，可以帮助设计师完成图标绘制。不过要使精心设计的图标，在前端正确展示，还需要开发与运营经理的参与。以平安银行为例，依托智能推荐能力，我们为客户提供千人千面的服务，且针对不同资产等级的客户，定制更符合客群审美的专属主题。因此在 UI 层面，图标需要配置更灵活以及满足换肤需要。我们尝试构建「 图标管理平台 (ICON ZOO) 」，旨在为设计师、开发和运营经理搭建沟通桥梁，将绘制好的图标标准化命名，上传至图标管理平台，平台将自动生成图标的 URL（唯一在线链接）。不论是开发调用，还是运营经理在后台系统配置，都不需要设计师单独提供切图，而是直接调用图标管理平台的 URL。这样大大减少了配置错误率，也方便我们随时对图标进行更新和换肤，同时提高工作效率。图标管理平台不仅能管理全平台的公共图标，业务设计师也可以创建业务图标空间，满足不同角色的协同需要。写在最后今天，我们从业务的角度出发，详细阐述了一个小图标从诞生到前端应用的全过程。看似一个很小的环节，如果在图标体量比较大且参与人数多的时候，沟通不畅通，就容易出现失控的情况。设计师需要感性和理性并存，感性可以为设计注入灵魂，理性可以让我们从业务角度出发，深入探寻问题本质，逐步找到最终的解决方案，帮助团队实现更高阶的目标。欢迎关注作者微信公众号：「 OnepinganDesign」本篇来源：优设网原文地址：https://www.uisdc.com/financial-icon-drawing
图标 用户 标签 今天和大伙分享一个非常不错的产品，那就是爱彼迎。爱彼迎（Airbnb）是一个出租住宿民宿的网站，提供短期出租房屋或房间，让旅行者通过网站或手机发掘和预订世界各地的独特房源，为近年来共享经济发展的代表之一。我第一次用爱彼迎产品的时候，发现爱彼迎用户体验、设计都非常的不错，给人感受专业、舒适、信任带有设计追求的产品。虽然爱彼迎今年已经退出中国市场，聚焦出境游业务，但是爱彼迎的产品体验有很多点值得学习，今天我将从 12 个维度进行分析。往期产品拆解：文档类产品解题宝典！24个细节全面拆解Notion一、前言Notion 是一款融合笔记（Notes）、任务（Tasks）、知识库（Wiki ）以及数据库（Database）的 all-in-one 生产力工具，产品主要服务于互联网群体。阅读文章 > 一、品牌理念从这张图我们清楚看出爱彼迎符号融入了人、地点和爱的品牌愿景。爱彼迎说任何人都可以画出的心形，超越了语言和文化，颂扬了爱彼迎的热情好客精神，而热情好客的新调色板则反映了人们的开放心态。爱彼迎的品牌色红色更好的传达了爱、热情好客品牌理念。二、品牌符号我从 App Store 找到最新的爱彼迎的 logo，发现爱彼迎的颜色有所变化，偏向粉一些的红色，更具有活力的颜色。爱彼迎的 logo 好看是有原因的，我发现图标是由三角形区域中设计的，导致图标给人的感觉很稳，同时利用简洁的线条进行图形绘制，非常不错的符号。例如日本三菱的 logo，也类似这种设计形式，虽然是三个菱形组成，但是都是在一个三角形下进行设计，显得非常的稳。同时我发现跟名字也有关联，菱字和菱形的关联。非常的经典、克制、耐看，从小就很喜欢这个 logo。三、启动页每一个 app 都有启动页，而爱彼迎用浅灰色的 logo 作为启动页。感受最深就是这个 App 没有广告，保持最纯粹的页面。四、首页设计爱彼迎首页目标非常的明确，顶部卡片利用大投影使得视觉层级是最高的，同时配上红色大按钮“搜索房源”的描述来提高用户的点击效率。五、卡片设计爱彼迎卡片设计非常有细节，banner 的比例是 3:2，用户的头像在图的右方，做了一个破形处理，让户主和图片关联起来，非常有创新的布局，让平庸的界面更加设计感，同时大部分用户都是右手操作，头像在右下角，在操作的热区，体验会更佳。六、标签细节爱彼迎标签一样很有细节，重要的标签颜色和普通不一样，重要标签是棕色色值而普通标签只是浅灰色，有个层级的对比。标签的左右安全距离保持一致，当字数有变化的时候，标签感受和规范是一致的。七、透明细节爱彼迎评分标签背景是带一点透明度的，如果用纯色会突兀，而有透明度显得界面通透、清新。右上角爱心图标白色描边+黑色透明+微投影，为了更好兼容白色图片和黑色图片。八、布局细节爱彼迎首页下滑有一个探索全球奇屋，全屏都是美丽的民宿，采用瀑布流的设计布局，图片之间错开展示，自适应的高度设计，头部大 banner，下面配上小图，具有节奏感。左上角按钮大小高宽的点击区域大于 88px(基于 2 倍图）体验非常的好。九、沉浸式体验点击进入民宿，主图铺满 3/4 的手机界面，用户可以进行左右滑动查看民宿图片细节，用户还可以上下切换名宿，整体给用户沉浸的感受。当用户点击喜欢的按钮，界面的背景色黑色变成彩色背景，给用户明显的感知。我发现这些介绍页面可以翻译成中文，也可以显示原文（葡萄牙语）对应各国国家爱彼迎又做了对应的翻译处理，作为用户是非常的友好，能完全看的懂，满足国际化设计。十、弥散色彩爱彼迎有几处用了弥散的色彩，例如选择感兴趣的民宿，背景会加入一些弥散色彩做一些设计区分。个人中心也会在背景上用品牌色作为弥散色彩进行设计，让页面更加丰富。弥散光设计！网易阿里大厂都在用的刷屏级新设计风这阵子不是有一种设计流行风悄悄刮了起来嘛！阅读文章 > 十一、图标设计发现爱彼迎的图标都是灰色线性图标，同时每一个风格的民宿会专门赋予一种图标，保证了图标的一致性。线性图标的优点是简洁、高效，减少对内容的视觉干扰，能给用户带来极致的感受。想绘制线性图标，这里有 6 个前辈为你踩过的坑我们作为 UI 设计师，一开始入门接触最多的就是图标，而现在很多设计师都钟爱线性图标，导致很多新手设计师也跟随主流的脚步选择线性图标去设计，但是线性图标是不是真的像我们看起来那么简单呢？阅读文章 > 十二、字体设计仔细的人会发现，爱彼迎专门为自己的 APP 设计了数字字体和英文字体 airbnb-cereal-font，字体比较时尚、粗壮，特别应用在标题、评分、价格重要信息上具有很好的识别性。字体也可以给产品提高品牌性，形成差异化。总结品牌符号可融入企业的愿景和理念。品牌色的选择好的话，可以达成差异化。为 APP 打造一款数字字体和英文字体可以提高产品的品牌性。破形的设计还可以运用在 APP 的布局中，会有创新性的效果。整个 APP 的图标风格需要保持一致，这样用户的感受是一致的。图片的清晰、美观、高雅可以给整个 APP 提高美感，这个需要根据 APP 的定位来确定。感谢大家阅读～～ 关注黄小伟设计，分享好的设计。本篇来源：优设网原文地址：https://www.uisdc.com/airbnb-design-2
用户 图标 品牌 前言对于金融类 App，设计流行趋势是什么？如何在设计中更好地体现银行的企业理念和品牌特色？如何提高金融类产品的用户体验？本文总结了九大设计要素，帮助你理解金融类 App 的 UI 设计。更多金融类产品的总结：15000字深度解析！银行金融APP的适老化设计指南引言任月月：据调查，中国人口老龄化程度在全球已处于中上水平。阅读文章 > 一、色彩在色彩心理学中，蓝色、绿色等冷色调，给人以冷静、稳定的感觉，体现了金融产品的科技感和可靠性。而红色、橙色、黄色，代表活力热情，也会像五星红旗带给我们的民族自豪感，可以用于金融产品要传达给用户的情感色彩。1. 品牌色一般 app 的整体色调，都会根据品牌色来设计，像下图的「招行企业银行」的首页，品牌色很好地应用在图标、按钮、文字链接、卡片背景、banner 这些地方。在界面设计中通过加入更多的品牌元素，可以潜移默化地让用户感受企业的价值，传达企业对用户负责的态度，提升用户对产品乃至企业的信任感。2. 弥散渐变色其次，也可以采用近两年流行的弥散渐变风格。弥散渐变是一种轻量舒缓的设计色彩。如果想要强化顶部导航栏或者个人中心页面顶部的视觉感，利用品牌色作为背景颜色，会显得顶部视觉厚重；如果利用白色或者浅灰色做背景色，而显得单薄。我们来看下图，用弥散渐变处理的方式做页面背景色或者在白色卡片的边缘位置强化色彩，不仅可以丰富视觉表现力，还可以和卡片内容相呼应。所以不妨试下这种十分干净清爽的新设计方式。更多渐变形式：用80张案例，帮你掌握20种渐变色表现形式！hi，我是鱼先生，终身学习践行者。阅读文章 > 二、文字界面中另一个重要的构成元素是文字，文字向用户传达信息，合理的使用文字样式非常重要。在金融界面中，我们常常用粗细体、字体大小、文字颜色深浅等来拉开文字层级，增强内容的可识别度。像 iOS15 设计风格，大标题导航也是这个道理。另外，定制字体的使用，也十分流行。这几年越来越多的公司，开始定制字体，根据自己的品牌特质去做一些特殊的字体。比如下图的「支付宝」，这些金融数据的数字，采用特殊字体的方式来设计，视觉效果更佳。三、图标图标作为功能入口、用户的操作载体，图标的设计也可以为界面添彩。目前市面上，金融类 App 的图标设计风格，主要分为以下三大类：1. 线性图标轻质简约，大多数 App 都采用这类风格。如下图的「宁波银行」的金刚区图标设计，外部深色线框加内部彩色线条（品牌色橙色+对比色蓝色+邻近色黄色）点缀。2. 面性图标颜色搭配丰富，视觉冲击力强，页面效果更加生动，常用于重要功能图标的设计。下图「京东云企业管家」首页的功能图标设计，面性图标+毛玻璃质感，图标更有质感和层次感。3. 线面结合新型的图标流行趋势，线高度概括图标的含义，面装饰点缀，风格独特出彩。下图是「涨乐财富通」的图标设计，黑色线性边框+红色内部线条+渐变红色圆形点缀。四、布局1. 留白对于布局，除了基础的信息功能框架，留白是关键。我们在工作中可以发现，很多高级感的设计通常都具有大片的留白。太过紧密的间距、没有明显的区分隔断、复杂的背景，都会大大降低用户的使用感。留白设计能使整个页面不至于太过抢眼，可以给予设计呼吸的空间，让用户快速找到所需要的信息。2. 圆角卡片此外，圆角卡片的使用，也是布局流行趋势之一，圆角会更突显矩形内的内容，有助于用户将视线聚焦于内容本身。大圆角有轻松活泼的感觉，小圆角、直角更像是一种强调，表现得严肃庄重，给人一种信任感。对于金融类 app 来讲，该使用多大的圆角，是根据整个 app 的调性来定的。比如「招行企业银行」，因为是 B 端产品，整体的调性是专业、安全，加上其 logo 的内置图形是招商银行的品牌 logo“M”图形，有棱有角的。所以在整个 App 的界面设计中，采用的是小圆角卡片，小圆角图标等等。五、插画无论在界面设计，还是在品牌营销中，很多场景都需要插画来塑造产品的气质和氛围。插画有助于将我们的品牌故事讲给用户听。这两年流行的插画风格多种多样，那什么风格会更适合应用在金融类 App 的设计中呢？1. 几何插画一般几何图形多为产品界面和宣传内容的抽象，线条和几何色块的结合，搭建出用户实际使用场景，更加简洁、清晰。下图为「中信银行」首页，banner 就是采用几何图形插画设计风格，绘制了一幅居家悠闲的画面，挺符合中信银行的定位：“有温度的银行”“信守温度”。2. 轻拟物插画在一些快速入口图标，或者重要的卡片中，会采用轻拟物插画设计来重点突出要素。下图为「广发银行」发现精彩 app 的头条页面，就嵌入了轻拟物插画，强化了这个卡片内容的色彩感和层次感。3. 2.5d 插画2.5d 立体的造型，本身更有真实感，在界面设计中可以吸引用户更细致的欣赏。下图为「京东云企业管家」的首页，新人福利模块就采用了 2.5d 插画风格。六、品牌 IP疫情第 3 年，隔离使得人们对于图片所呈现出的故事和情感，有着更为强烈的情绪反应。在 App 界面设计中，越来越多的应用了情感化设计，来赋予产品一种拟人化的情感，与用户互动，让用户感受产品的温度。那相比于品牌或者 Slogan，品牌 IP 更具备这种实力。比如广发银行的“小发羊”。「广发银行」是一家广州起源的银行，小发羊融入了广州本地人的性格属性（慢性子、爱吃、精打细算、很师奶），同时也匹配了银行业务本身的需求。在 app 的界面设计中，小发羊应用在了启动页的设计、广告设计以及养成类社交游戏和 IP 周边品牌馆，让用户从业务和日常生活都离不开。七、微交互动效UI 设计中通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪、取悦用户，让用户的认知过程更为自然，用户体验更加精致到位。是一个很好塑造品牌个性的机会。比如「平安数字口袋」app，上图中的金融页面的金融小工具模块和顶部的投资 icon，作为重点功能入口采用了动态图标微交互设计，吸引用户眼球，辅助用户理解。八、数据可视化大数据时代，数据的展示是必不可少的，所以在金融、理财、账户管理等页面上，借助图形化手段，更加清晰有效的传达信息。上方左图是中国农业银行基金经理信息的页面，右图是招商银行的。左图只能粗略感知到这个基金经理的盈利能力，右图中可以对基金经理的投资风格一定了解。大片文字和图文结合两种方式相对比，数据可视化的优势一目了然。九、组件化、模块化组件化是利用原子系统从原子、分子、组织、模版、页面来快速搭建页面，让设计语言标准化体系化。模块化是在组件化的基础上，将产品分成几个模块，通过模块的组合配置，就可以创建不用需求的产品，满足客户的定制需求。下图是我们兆日的设计体系部分截图，我们的设计团队构建了全面的设计组件库，同时对接开发，一一对应实现 UI 控件。这样设计更新迭代中可以非常高效通过更新组件库去整体更新所有页面样式，方便协同办公提升效能的同时，保证全渠道体验一致性。写在最后近两年来接触了大大小小几个银行项目，无论是 0 到 1 设计，还是改版设计都有一定的收获和感悟。希望本次对金融类 App 设计的复盘能给大家提供一点思路，让产品越来越好。同时也欢迎各位小伙伴来共同探讨与指正～欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/financial-app-design-elements
图标 入口 快速 编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的金刚区设计。上期回顾：新手科普！4个方面帮你快速熟悉UI组件中的瀑布流编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。阅读文章 > 一、组件介绍快速入口 (Quick Links / Quick Access)，国内也会用颇具东方特色的「金刚区」来称呼。在一个结构比较复杂的 APP 首页或者主页面中，快速入口往往扮演着功能导航、曝光和引流的运营角色，通常表现为一组有序排列的图形入口。快速入口不管是位置还是权重都处于页面的中心地带，所以设计时需要格外注意基础和细节。这里我会介绍一些快速入口通用且基础的设计方法，但因为这个组件变化非常多样，所以可能无法面面俱到。诸如更符合页面需要的布局方式，以及图标如何绘制等，这些将是大家需要长期打磨练习的地方。二、使用场景当一个页面内除开本身需要承载的内容之外，还需置入超过四个功能模块的入口时，我们就可以考虑使用快速入口这个占用空间小，信息密度大且美观的入口展示形式，故而在多数 App 中快速入口集中出现在主页和个人页；而在诸如美团、大众点评等综合性更强的 App 中，下级分类页面也会使用快速入口。所以总结下来，快速入口大多出现在：首页、下级主页、个人页这三个地方。快速入口在页面中的地位应该无需赘述，各位用多了 APP 也能总结出它常常出现在主要页面中中间靠上的核心区域。如果有 Banner，则通常会出现在 Banner 下方，如果没有 Banner，则会直接置于标题栏下方。三、设计要点1. 布局方法① 页面内等分等分的快速入口可以表现为一个 (1~3)行 (4~5)列的矩阵，6 列的也有（起点精选页），但是比较不常见。设计时我们优先确定每个背景视图的尺寸，如何确定呢？首先是宽度，单个视图的宽度具体是多少其实并不重要，重要的是总宽度，即 390 减去页面两侧边距的大小（边距不固定，根据实际情况设置），再用这个数值除以列数，这就是背景视图的宽度。高度则需要根据图标和文字区域的总高来确定，例如图标 (包含安全区域或几何背景) 为 4444pt，文字段 12pt 苹方默认高 17pt，图标和文字之间给 4pt 间距，上下边距 8pt，那么视图的总高就是 44+17+4+82=81pt。当然高度这一项中，上下间距的自主性比较大，你也可以选择留更小或更大的间距来调节矩阵在视觉上的松紧程度，尤其是多行矩阵，更需要注意上下行之间的远近，这会影响观感。总之一切都以设计师预期的视觉效果为准。② 超范围滚动尽管大多数等分的入口矩阵同样可以采用多分页滚动的形式 (淘宝、京东)，不过我们这里说的超范围滚动则更接近于滚动卡片那种非等分的，会在最右侧边界被裁断的形式，例如网易云、Keep。在这种布局下，我们需要优先确定图标与图标之间的间距，将它们调整到第一屏有 4 至 5 个，且默认露出下一个图标的一部分。最左侧的图标与其余页面元素左对齐即可。③ 主副型布局有些 APP 需要更加明确地区分入口的权重，则会采用强弱对比的主副型入口，主副型入口属于等分的一种，两类入口的背景视图可以不同高且不同宽 (支付宝)，也可以同高也高宽 (马蜂窝)。在实际设计过程中，按照等分的规则各自确定两类入口的背景视图区域即可。2. 视觉形式① 图标 / 文字我们日常使用的绝大多数 APP 都采用了上图标下文字的视觉形式，这种形式具有更普遍的适用性。② 卡片形式之前在瓷片区的文章中有提到过，一些快速入口会像瓷片区一样做成卡片拼贴的样式，指的就是如下图所示的这种视觉形式。卡片形式的入口对图形设计能力要求颇高，尤其是几个权重最高的入口，由于快速入口只能使用图形来修饰内容，为了匹配这几个入口的权重，设计师往往需要绘制精细度比一般图标更高的插画，所以我并不推荐新手尝试这种样式。③ 主副形式与主副型布局相对应的视觉形式，通常会采用不同类型的图标来表达不同的权重，权重高者往往使用更精细的插画图标，权重低者则使用基础的线性、面性或线面混合图标。而像支付宝、美团这样的 App，反而使用最简单的线性图标来表达功能之核心，之基础；权重则使用不同的背景色来物理区分。3. 图标类型① 基础渐变在基础图形上加入了同色相不同明度的渐变，就可以做出一套简单、够用的快速入口图标，尽管不适合风格化强烈的 App 页面，但胜在通用性强，首页、个人页都能采用。② 几何背景指的是图标拥有一个圆角矩形或者圆形的纯几何背景，实际图标则一般使用纯色或渐变。这种类型的图标好处是更容易做到视觉大小的统一，并且由于实际图标方面不需要太多的修饰，设计起来也更加简单。不过几何背景的图标也有进阶的变体，背景上可以做成不规则形状，图标上也能加入更多细节 (甚至 3D)，总之能做得非常花哨，例如美团外卖的入口图标：③ 色彩交叠因图标中存在重叠的两部分而使得这部分色彩更深。这个类型的图标本质上与渐变没有区别，都是色彩运用的一种手段，只不过交叠类图标使用得比较少见，所以会相对更具辨识度。④ 扁平插画在图标中直接使用插画，自由度更高的同时，风格化也更明显，非常有利于品牌风格的塑造，唯一的缺点是对设计师的要求相对偏高。对插画来说，纯扁平或是微渐变都是可以的，前者更易表达场景，后者则往往会有更加立体的观感。⑤ 玻璃拟态近年来大火的风格化设计之一，做起来简单却很有视觉效果。特征是图标中的会出现两个上下关系的层级，下层往往采用渐变或纯色的色块，上层图形则会模拟亚克力、云母、磨砂玻璃的质感。具体做法为背景模糊，以及为自身边缘添加高光描边。近年来越来越多的在主流 App 中出现，例如飞猪、站酷。实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。阅读文章 > ⑥ 实物图片实物图片一般多用于电商类 APP，在进行商品分类时会直接采用特征典型的商品，优点是比图标更直观、易辨认，缺点是对图片的要求较高，对视觉大小统一的调整也需要更加细致。当然，人像也算是实物图片的一种，多用于影视类 App。除了上述 6 个比较常见的分类，快速入口这个区域的图标还有很多奇特的类型，例如 2.5D 轴测图、文字类、3D 类，甚至多种类型图标混合使用等等。因组件本身的设计开放性极大，几乎没法全部涵盖到。所以图标类型方面的知识，还需要大家自己在工作和学习中慢慢积累。四、样式拓展1. 自如自如 APP 的快速入口设计向来别出心裁，值得大家一直放在手机里观察它的设计改版。自如在这一版本中，将 12 个格子其中的两个格子合并成了一个宽格，既强调了这个格子的内容，又让这三行图标发生了一定变化，不至于枯燥。2. 起点在快速入口中加入动效听起来是个很多余的做法，因为对这些图标的交互几乎没有观察后续反馈的必要(都直接跳到另一个页面了)。不过起点在这里做了一个动效的示例——在某个你想强调的图标中加入循环动效，可以起到吸引用户注意力的作用。3. 其他样式结尾快速入口的组件就介绍到这，后续所有有关组件的介绍都会同步更新！本篇来源：优设网原文地址：https://www.uisdc.com/quick-links
图标 页面 用户 大家好，这里是设计夹，今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小，却包含着很多细节。作为通用的视觉化语言，把握住其中的设计细节至关重要。之前有分享过关于图标设计的文章：5000+干货！从4个方面掌握图标设计的基础知识Hi，小伙伴们，Q 什伍最近花了两周时间，整理了这篇关于图标设计的文章解析，分享给大家。阅读文章 > 这次总结一下图标设计的属性以及在图标设计中，很重要但容易被忽略的知识点。在 UI 设计中，图标主要有两大类：一类是 APP 启动图标，每个 APP 独一份；另一类是系统 icon，搭配文字，方便用户快速理解信息，也是这篇文章重点讲解的内容。风格常见的图标风格有线性、面性、彩色、写实、3D 等，图标的选用因页面的设计风格、图标的位置等原因会有所差异，主要的作用是反馈动作和吸引用户更多注意力。线形/面性：最基本也是做常用的风格，广泛用在页面设计中。彩色：通常用于反馈用户的操作或者增加用户的注意力。3D/写实：当页面中的某个内容需要引起用户高度注意时使用，一下抓住用户的视线。Tips: 现在字节、百度新推出的一些年轻化产品中，有很多精致的 3D 写实图标，极具个性，很好地迎合了年轻用户的喜好。在扁平风格流行的当下，这样的尝试也是一种突破。如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！背景QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。阅读文章 > 重量简单的线性图标重量轻，看起来更简约，不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容，那么更适合选用简约的、重量轻的线性/面形图标，防止页面过于杂乱。相反，如果当前的页面中只有文字，信息量很少，那么更适合利用重量大的彩色甚至 3D 图标来增加页面的丰富性，让页面看起来更有设计感，给用户带来视觉上的愉悦，简约而不简单。属性构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等，表达式规则是统一的，以便只给观看者识别图标所需的最小更改。描边粗细：手机上常用到的描边粗细有 2px、3px、4px。2px 的看起来会显得更加精致，4px 的描边视觉较重，可以用在优先级较高的区域作为功能性图标,。端点/节点：图标的端点有平头、圆头和方头，图标的节点有斜接连接、圆角连接、斜角连接，具体使用哪种样式要根据页面的情况统一设置。圆角半径：方形的图标边角过于锋利，用户有时候看起来会不舒服，圆角图标更圆滑，相对来说更容易让用户接受。虽然圆角用的更普遍，但具体使用哪种，还是要考虑页面的整体风格再决定。网格图标的外形有圆形、方形、三角形甚至不规则形状的，所以我们很难将不同形状的图标尺寸完全统一。这个时候网格就起到很关键的作用，有了网格相当于提前将图标限定范围，在网格范围内根据图标的重量和重心灵活调整大小，这样会让不同形状的图标看起来更统一。视觉校正由于设计软件的局限性，虽然有些图形已经居中对齐，但有时候还需要进行视觉校正。最典型的图标案例是“播放”图标，利用设计软件对齐中间的三角形后，会发现三角形的位置看起来偏左。利用软件对齐后，我们还需要再用眼睛确认一遍，我们可以将三角形向右移动，保证三角形的重心与圆形的重心一致，这样整个播放图标看起来会更舒服。角度设计图标时，我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视，所以大多数的图标都没有透视，看起来会更简洁。带透视的图标会给用户营造一种空间感，可能会感到认知失调。虽然这种带透视的图标能引发用户关注，但不建议这么设计。比例图标比例通常使用 8 的倍数作为基准，例如 8px、16px、24px 和 32px，以便在各种环境中进行流畅地切换。除此之外，在移动端等屏幕尺寸较小的页面中，还会使用 4px 的倍数，来实现多功能性。清晰图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小，要尽可能做到对用户友好，可以使用一些简单的隐喻设计，但含义不能过于复杂。一个图形能说明的问题，没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义，这样反而会影响用户的操作。细节这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息，特别是对于尺寸很小的系统图标，最好只保留最基本的内容，移除多余的装饰元素。一致性这里说得一致性，并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面，线性、面性等多种图标风格可以一起使用。但在同一个页面场景中，执行相同功能的图标应该保持相同的样式。熟悉感面对不同的操作系统，例如 iOS 和 Android，同一功能对应的图标也会有差异。针对不同的系统，我们可以选用大多数用户熟悉的图标，这样用户能更快地理解图标的含义最后以上就是常用却容易忽略的图标设计细节，希望通过这些内容能帮助你对图标设计有更深的认识。欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/11-icon-design-details
图标 是一个 彩蛋 Hi，我是彩云。最近在研究竞品时发现了一个动效非常丝滑，设计非常新潮的 APP，叫 Zenly，里面还埋了很多彩蛋设计，把体验设计做到了极致。严格来说，Zenly 不算是一个新 APP，上线的时间还比较早，但这次 5.0 大版本更新后，设计风格更加新潮大胆，它们不是在追随趋势，而是在引领趋势。我想作为一个视觉设计师，对这种风格新潮的应用趋势，是必须加以关注并研究的，所以今天就跟随彩云的视角对这款应用做一个赏析吧。实际上它上一个版本的设计也非常优秀，所以我会把更新前后的设计变化也做一个介绍。这次会重点介绍 5.0 更新的内容，因为升级后的风格更加有自己的个性了。更多改版案例复盘：大厂实战！vivo官网APP首页改版设计过程复盘vivo 官网 APP是什么？阅读文章 > 如何系统化进行设计改版？用一个实战案例教会你！项目背景当公司的发展规模到一定程度时，考虑到信息安全、持续采购成本与相关风险，企业会采取自研的方式来实现部分协同工作软件的自产与自用，本文将以内部目标管理系统为例，阐述我们是如何系统化的做企业系统设计改版。阅读文章 > 视觉设计这次大版本更新，在风格上改变很彻底，几乎是截然不同的设计风格了，从 APP 图标到界面里的功能图标、背景、图形、颜色都做了很大的改变。1. 扁平多彩的图标和界面应用主图标除了冰棍造型保持延续外，整体效果从清新可爱到暗黑潮酷，有了一个非常大的变化。在上一个版本中 UI 风格中规中矩，设计团队好像是在犹抱琵琶半遮面，压抑着内心情绪一样，而到了这个版本，就彻底放飞自我了。关于主图标还有一个小彩蛋的设计就是当你完成了它的一些任务后，可以解锁更多的主图标效果，算是给了用户更多的个性化体验。我目前已经解锁了 2 个图标了。其实这个应用还藏了不少彩蛋设计，后面会讲到。这里做的好的地方之一是，主图标的风格跟内部界面保持了很好的一致性，从图标就能感受到内部界面的风格特点。5.0 版本的图标风格化更加明显，用到了非常大胆的渐变色，具有很强的风格特点。2. 多重渐变颜色APP 中的颜色体系也是跟随整体调性做了巨大改变。在上一个版本中，主要以白色加一些微渐变颜色为主，而到了最新 5.0 版本，主色调改为了暗色系。在这种颜色氛围下，很适合增加一些比较酷炫的渐变色，这在 APP 中几乎随处可见，包括图标、背景、图案、按钮、文字等等。3. 超大字体上一个版本中字体字号相对还比较常规，而到了这个版本，字号设计变得非常大，几乎是到了比较夸张的地步。单纯从字号上来看，在其他 APP 中就不太常见，也算是一个记忆点了。只是个人觉得有点大的过分了些，美观度没有太好。4. 3D 质感表情表情设计也算是 Zenly 的一大特色之一了。在上一版中的质感，整体来说是比较偏清爽可爱的，虽然也有一定的 3D 质感，但总体来说做的都比较弱。而到了这个版本，3D 质感做的特别强，且颜色细节做的特别多，仿佛到了舞厅那种感觉，把潮酷风拉满了。（上一个版本使用语音还会有一个同步的表情跟随你一起说话，但到这个版本去掉了，有点可惜）而且它这里的表情不仅仅是设计上做的炫酷，还是有声音的，当你给好友头像发表情的时候，会有相应的表情配音，表情音其实是蛮少见的。结合声音，也算是它的一个设计亮点了，值得学习。带上耳机，可以感受表情音效，做的非常好动效设计动效设计可以说是 Zenly 中的一大亮点了，它的动效无处不在，且丝滑无比，是一个非常值得参考学习的地方。其实，动效设计现在越来越被重视，尤其在 UI 行业内卷到这种程度的时候，丝滑的动效越来越会影响用户的使用体验。在大厂，老板们对动效的要求也越来越高，大家都在追求极致丝滑的感觉，这个 APP 就是被推荐的参考之一。Zenly 被 Snapchat 收购后，动效体系的打通可能也是一个重要因素，母公司 Snapchat 的动效也是极其优秀。我自己体验下来，感觉它们做的这些动效有一个很关键的地方在于，动效的风格节奏和弹性度做得非常好。整个 Snapchat 动效体系都是以 Q 弹为特征，Zenly 延续了这种动效风格，动效风格也是品牌的一部分，在这里得到了很好的应用。我们可以从这款应用中学到动效应该用在哪些地方，以及这些动画的节奏和动态曲线等等。1. 融入品牌感的动效设计在添加好友这里有一个地球的酷炫动效，跟应用的核心功能有一个很强的结合，让这个动效有了更多价值。添加按钮的确认动效也做了 Z 轴上的旋转，虽然是一个细节设计，但也与整体的 3D 风格保持了统一。2. 符合物理规律的动态设计动效设计要想给用户带来自然流畅的感觉，符合物理运动规律是一个很重要的点，像这里的冰棍弹起的动态效果就好像很多冰棍凑到一块儿，因为很光滑加上冲击力比较大，被高速弹起然后由于重力下落直至静止后，再出现一个点赞的动效，整体看下来就很自然。因为在 Zenly 中，冰棍就是代表了一个个用户，所以动效元素也融入了品牌元素，每一个元素的运用都是有意义的。3. Q 弹的动效设计在 Zenly 中有大量的动态元素，甚至包括了很多文字内容。比如在注册环节，文字是一串串错位出现，然后又同时增加了明显的回弹效果，整体看下来显得非常 Q 弹，符合它们年轻的品牌个性。在回弹设计中也用了一些迪士尼动画 12 原则中的形变规律，对动态图标做了夸张的设计，让动画有趣又真实。比如在首页中的小房子图标，大家仔细看这个图标的扭动，是由一个预备动作+挤压变形+旋转组合而成的，这样就能让这个动画变得更加生动有趣。4. 呼吸感的动效设计在核心功能路径上，Zenly 把动效做得更加极致。因为整个应用的核心玩法是基于定位来的，所以 Zenly 把定位图标做了非常夸张的设计，用到了多种动态效果进行叠加，用了略快的呼吸节奏不断给用户反馈当前的位置。5. 充满生机的动效设计在 Zenly 中做的特别好的一点就是对于反馈的设计，几乎没有哪一个地方是完全静止的，让整个应用充满了生机和活力。就算当前页面本不会有动态变化，也会将你做的手势交互尽可能的给你一些动态反馈。在游戏中，及时反馈是一个非常核心的设计，可以说游戏就是靠不断的给玩家反馈让人沉迷其中的，在 Zenly 中这一点也得到了运用。比如在这个地图页面，你用手滑动侧面，也会给你反馈，而且跟随力度大小，反馈的形态也会有相应的动态变化，值得我们学习。再比如这里的卡片和信息提示，在你拖动的时候都会给到你即时的反馈，这种反馈对用户来说是非常友好的，可以算是一种惊喜体验。6. 动态分享背景在分享的时候可以预览不同的分享模板，并且背景上添加了动感的文字，显得动感十足。在一些背景设计上，如果期望能动态生成背景，文字可能是一个很好的方式，又一个学习点。7. 抖动与活力的反馈设计抖动也是 Zenly 的一大特点，会在很多关键路径上给用户即时的触感反馈。看，又讲到了反馈机制，大量的反馈让应用有了更多活力。玩法设计1. 解锁模式应用中模仿了很多游戏的做法，利用上瘾机制，让用户通过一个个小任务去解锁更的体验玩法。万字读书笔记！产品设计宝典《上瘾》全面解读！（上）为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？阅读文章 > 万字读书笔记！产品设计宝典《上瘾》全面解读（下）《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。阅读文章 > 2. 表情连续发射在地图上，点击好友头像可以连续对他发射表情，这个表情还可以累积计数，是一个让用户很有点击欲望的设计，每个表情还有完全不同的配音，我就经常喜欢连击这些表情。对方收到这些表情时，如果数量比较多，会直接在他屏幕上爆开，是一个蛮有意思的设计。3. 地图标记地图标记应该是它的一个核心玩法设计之一了，它会根据你在某个对方停留的时长以及时间段，判断你是在家还是在公司。这也就是为什么它不断的提醒你要把手机定位功能改为始终允许，不然它的很多设计就没法正常玩耍了。4. 彩蛋设计在应用中还预埋了不少彩蛋设计，在一定的条件下会触发，给用户创造惊喜感。不同距离的导航提示也有做区别设计。我们可能会对附近的定位提示习以为常，但当在定位距离很远的地方，比如我在深圳，如果搜索美国的话，要想去到那边的话，规划的路线提示会出现飞机动效，出乎意料。再比如在上一个版本中，当你在地面上的缩放比例已经是很小时，双击或者双手持续放大，会出现裂缝到地心，且每次触发后看到的地心场景居然还是不一样的，当时发现这个彩蛋的时候简直惊讶到我了。只可惜在新版本中，这个彩蛋设计被去掉了，我猜可能是这个彩蛋埋的太深了，用的人过少所以就去掉了，设计最终还是要服务于用户。总结最后总结一下，这款应用非常值得设计师朋友们体验学习，设计风格上做的非常大胆和新潮，尤其是动效设计上做的非常体系化，体验起来非常丝滑。如果你平时也有体验产品的习惯，那么这个 APP 一定不要错过了，也欢迎你在体验过程中把你觉得比较惊喜的地方留言和大家一起分享吧。欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/zenly-5-0
蝙蝠 图标 椭圆 编者按：这篇文章来自英国资深设计师 Dmitry Novikov，他是著名 Mac 管理类工具 CleanMyMac X 背后的视觉和体验设计师，他将设计的过程和想法发布到他自己的 Behance 当中：CleanMyMac 可能是 Mac 平台上最常用的 APP 之一，你之前可能在很多地方听到或者看到过这个产品。很幸运我有机会能和 MacPaw 团队合作，共同完成产品的设计。在这个过程中，我受益良多。一方面，作为一个系统管理和优化工具，MacPaw 的团队有着超强的执行力和开发能力，这使得他们是非常好的合作对象。另一方面，CleanMyMac X 内部包含有很多不同的功能组件，它们需要以各种各样的方式协同合作，这对我而言也是一个新鲜的设计过程。我注意到，当我们使用造型不完美的对象更加令人愉悦。无菌的空间和完美的物品，甚至可能会让人产生失真感和排斥感，我们会非常小心，害怕会破坏这种完美的状态。制作一个被调教到完美的界面并不容易，不过想要赋予界面以自然感，则是更高的挑战。由于这个应用当中大量的地方需要用到超椭圆，而这些元素最终都是要转化成为代码的，而这才是整个项目中最无法忽略的一项挑战。注释：超椭圆，又因 Gabriel Lamé 而被命名为 Lamé 曲线，是一种类似椭圆的封闭曲线，保留了半长轴和半短轴的几何特征，并围绕它们对称，但整体形状不同。在笛卡尔坐标系中，曲线上所有点 ( x , y ) 的集合满足方程：其中n、a和b是正数，竖线 | | 数字周围表示数字的绝对值。让整个应用的主界面具有自我描述性是非常重要的，各个分支应用的图标和名称理应清晰地传达含义，并不完全对称的「Scan」扫描按钮超出了 UI 界面的范畴，可以快速的吸引用户的注意力。CleanMyMac X 专注于 3 个核心要素：清理、保护和速度。在设计过程中，我们为每个模块设计了大量的图标，有趣的的是，有很多图标和 UI 元素是半透明的，结合动画来呈现的时候，这些图标元素有清晰的淡入淡出的效果，这些超大的图标有一部分是和插画师 Alexander Ageev 合作来完成的。在设计过程中，我还为各个不同的模块使用了不同的渐变背景，来方便用户对于不同的模块予以区分。同时，我们还创建了许多极具创新性的产品原型，并将它们落地到实际的产品当中去，比如可视化地帮你查看 Mac 存储空间的「空间透镜」功能：此外，还考虑到日常使用场景，我还增加了一个位于顶部菜单栏的快速下拉菜单，方便用户无需打开程序直接调用功能：得益于团队协作和强大的开发能力，CleanMyMac X 获得了 iF 和 2020 年红点奖。延伸阅读：960 万张图只选一张！Netflix 的海量封面图是怎么设计出来的？前几年，基于深度学习的设计系统「鹿班」问世，关于 AI 驱动型的工具是否会革掉设计师的命的讨论甚嚣尘上，如今这个场景依然历历在目。阅读文章 > 深扒！连拜登团队都在用的Figma是如何成长起来的？相信这几天设计圈和产品圈的同学都在讨论 Figma 封禁大疆的团队帐号这个事儿，经过多轮文章和视频的洗礼，这个事件的始末和性质相信大家已经掰开了揉碎了看明白了。阅读文章 > 电影设计美学！封神的诺兰版《蝙蝠侠》里，导演亲手捏出了蝙蝠车诺兰的蝙蝠侠三部曲中的蝙蝠车 Tumbler 可能是蝙蝠车历史上最没蝙蝠特征的蝙蝠车。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/cleanmymac-x-design
图标 风格 质感 金刚区作为产品功能架构重要的组成部分，是设计师重点发挥的区域，也是风格切换最为活跃的。而金刚区图标是最重要的表现对象，设计师在图标设计上面耗费心力，出现了丰富多样的视觉表现风格。体验了众多产品之后，黑马哥为大家精选了金刚区图标设计最突出的 10 个风格，通过这些案例带给大家感官体验层面的更多灵感启发。晶白风格的扁平突破晶白风格是通过白色质感来实现的，通过对图标元素进行透明度变化、投影、内阴影、外发光等进行设计，使得更有层次感。相较于扁平化的图标设计来说，晶白风格更有层次感和质感，作为金刚区图标设计运用非常普遍。除了通过白色不透明度渐变来实现以外，也会随着背景或者环境色的变化融入色彩渲染，呈现出更丰富的设计细节。晶白风格图标就是通过两端白色渐变，配合两端颜色不透明度来进行深浅控制，也可以通过内阴影和外发光等来增强质感。众多设计软件都可以实现，灵活性非常高。磨砂玻璃质感的运用磨砂玻璃质感的设计表现是近些年较为流行的设计趋势，被广泛运用到视觉设计的众多领域。在 UI 场景中作为视觉感强化被普遍应用，其中在图标设计上的表现尤为突出，呈现出了众多的优秀案例。金刚区作为产品架构中的重要组成部分，也是更新较为活跃的部分，对于视觉感的要求非常重要。磨砂玻璃质感的图标很多产品都会阶段性使用，也是因为这一类风格具有典型的特点和视觉张力，能够形成比较大的视觉差异，带给用户不错的感官体验。磨砂玻璃质感图标可以通过 Sketch、Figma 等软件的背景模糊功能实现；如果是 PS 和 AI 等没有背景模糊功能的软件，则可以通过模糊度结合剪切蒙版来实现。实现的方法很多，大家可以多多尝试，这是一类比较容易掌握的图标风格。强化图标微质感的深入图标设计从写实到扁平，再到微质感，都在不同的时期进行改变，通过风格的优化避免用户的视觉疲劳。写实类图标视觉疲劳度较大，在年轻化的趋势中显得过于繁琐，而介于写实和扁平之间的微质感被深入探索。微质感的深入可以使得图标风格突出，质感和层次感强化了图标的立体空间感，在整个界面中可以形成视觉差异。可以体现出模块的重要性，也是图标设计感体现的一种方向。通过渐变色、不透明度渐变、投影、内阴影等形成层次变化和光影效果，多图层刻画来强化图标质感和层次感。2.5D 风格的巧妙结合2.5D 也称之为伪三维，在前两年非常流行，作为插画风格延伸出来的，当时 2.5D 插画被普遍运用到众多领域。把一个独立元素作为原子，通过原子的数量分布形成 2.5D 场景。将 2.5D 风格结合到图标设计中，可以使得图标更容易形成立体感，设计师不会受制于透视基础的薄弱。无论是 C 端还是 B 端场景中的金刚区图标都比较适合，很容易基于简单的立体造型上设计出丰富的变化。比如结合玻璃质感、微动效或者其他设计趋势均可，设计的驾驭度很高。2.5D 风格的图标很容易掌握，只要绘制好基础原子部分，就可以演变形成各式各样的 2.5D 造型。可以通过 AI 软件的 3D 功能轻松绘制，大部分场景都是基于立方体、圆柱体等基础造型进行变形。三维的立体感强化三维类的图标设计相较于 2.5D 风格来说，空间感和透视角度更加深入，光影的变化更加丰富。图标设计中的三维立体感强化，对于设计师的要求更高，掌握一个三维软件需要一定的学习成本。随着 C4D 等三维软件的走热，掀起了一股学习热潮，被运用到金刚区图标设计中，带来的视觉效果也是非常不错的。较强的空间立体感和光影效果，在界面中的视觉呈现尤为突出，也能带给用户更好的感官体验。插画风格的简化融入随着用户对于感官体验的升级，风格特征的差异化体验至关重要，而插画风格的融入可以提升图标设计的特征感。插画风格运用到图标设计中，需要做简化处理，可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中，不仅可以使得图标具备差异化的视觉效果，也能烘托出整体设计的质量。通常矢量风格的插画类图标比较常用，由于图标占比限制，不合适表现特别繁琐的插画风格。可以是微场景的插画表现，或者是局部元素的插画表达，这一类图标风格将会在未来被广泛运用，以此来提高图标设计的视觉差异化表达。立足于品牌的图标设计立足于品牌做设计，这是设计师需要深入探索的方向，而金刚区图标设计亦是如此。品牌基因融入到图标设计中，可以辅助突出产品的品牌感，也能形成设计表达的差异化。品牌基因化的图标设计具备一定的特征性，也是视觉差异化的一种形式。通常的做法有将品牌色全部融入图标中，或者品牌色作为图标配色点缀；也可以提取品牌 LOGO 辅助图形形成基因图形，融入到图标造型设计中；也有结合吉祥物来突出品牌感的，融入吉祥物造型、局部图形、轮廓图形等；如果图形角度无法提炼，也有提取品牌文化、服务特征、用户群体特征、行业特征等，从中提炼关联性的图形融入图标设计中，以此来强化品牌感。品牌作为设计的思考起点，不仅可以输出差异化的设计作品，也能串联起整个项目设计的规范。造型叠加丰富色彩搭配如果觉得质感一类图标表现力比较繁琐，但是又不想只是简单的线性或者面性图标，造型叠加和配色叠加形成的图标风格算是介于两者之间的存在。通过图形之间叠加丰富图标造型，叠加部分配色的调节丰富图标色彩搭配，形成的图标风格比较年轻化。视觉效果也是深受年轻用户的喜欢，带来不错的感官体验。这一类风格的图标可以通过布尔运算设计图形部分，颜色的叠加效果可以通过图层样式实现，也有一些是图形分割之后进行分别着色的。通常叠加部分的颜色会往更深的方向延伸，大家可以尝试不同的形式去进行配色，选择符合主题的图标配色效果。动效图标强化局部差异微动效运用到图标设计中尤为普及，特别是在金刚区模块，可以作为突出功能的强化。动效图标已经成为一种独特的表现力，相较于静态来说更有吸引力，也能带给用户更加趣味性的感官体验。在金刚区模块中，动效图标通常是用于区别特殊功能，或者需要重点突出的服务或者主题活动等。不改变整体图标的风格，只是动态和静态的区分，需要个别做动效，形成表现力的差异才能达到重点突出的目的。作为设计师来说，动效也是需要掌握的基础技能，可以提高我们的设计表现力，也能将交互动作表达得更清楚。大厂出品！10个值得学习的微动效案例设计动效在 UI 设计场景中的运用强化了感官层面的体验，也使得交互设计更加易于理解，通过动效辅助功能操作的理解度。阅读文章 > 主题化图标风格普及随着情感化设计的普及，金刚区图标在特定主题节日也会进行氛围强化，主题化图标设计越来越多。比如在春节、中秋节、国庆节、端午节等场景中，根据主题设计图标更能体现我们是有温度的产品。可以是主题元素的融入，或者主题氛围感的渲染，要嘛就是主题文案的融入，形式已经是非常丰富了。虽然不同节日主题效果各有差异，不过这一类主题化的图标设计，已经成为非常普及的风格特征。除了节日主题以外，根据运营需求也会进行主题化强化，众多自定义主题活动也会结合到金刚区图标设计中。这一类视觉表现力比重较大，视觉感统一性较强，带来的视觉张力和感官体验都非常不错。小结金刚区在产品中就像百变金刚一样，随着众多因素而变化，是更新迭代较为活跃的。图标设计的风格也是丰富多样，本文仅是抛砖引玉，总结了 10 个较为流行的图标设计风格或者趋势。希望这些案例总结可以加深大家对于金刚区图标的风格认知，大家也要继续体验探索，总结出更多风格特征，强化我们的图标设计能力。研究微软 Fluent 图标规范后，我总结了这9个知识点！最近我在学习使用 Figma，会在社区查找一些大厂的设计系统文件学习，看到一篇微软 Fluent 系统图标规范文档，还挺详细的。阅读文章 > 6大章节！图标设计基础知识全方位入门指南前言做好图标设计是一个入门级 UI 设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/icon-design-6
图标 套色 样式 前言SVG 格式图标在软件界面中有广泛应用，它与生俱来的矢量属性，使其在高分辨率屏幕上的表现非常完美。SVG 是一个基于 XML 标记语言的开放网络标准格式，拥有跨设备多平台的兼容效果。前面我们有分享过一篇关于 WPS 图标的文章《探索 WPS 3000 个图标设计背后的故事》，得到了很多网友的积极反馈。相信界面设计的小伙伴们都很熟悉 SVG 格式了，这次，我有一个棒的想法想分享给大家：利用 SVG 图标套色，来完成不同界面的适配。如何重新设计3000个图标？来看金山团队的实战案例！项目背景近些年，WPS 组件页在完善基础功能的同时，增加了许多新功能。阅读文章 > 什么是 SVG 图标套色？图标套色的简单来说就是利用 SVG 格式的文本属性，使用 XML 格式标准，在 SVG 文档中增加 CSS 样式，通过修改 CSS 样式属性，精准控制 SVG 格式图标颜色，通过修改透明度控制图形显示与否，从而变换图标的风格外观。基本原理：修改 SVG 的样式，生成不同风格的图标用处一：颜色适配这里有几个插件，都用到了“保存”、“打印”这些功能。因为主题色不同，即使是同样外形的图标，还是需要根据主题色的不同输出适配各个插件的图标。采用图标套色的方法，就可以避免这类图标资源的重复输出。相同功能需要两套不同主题色的图标用处二：皮肤适配现在多数软件一般都有皮肤功能，不同用户需求，衍生出风格各异的皮肤，各种颜色，深浅不一，一套图标满足不了所有，为了视觉效果需要对每个皮肤输出特定颜色、风格的图标。图标数量如果很多，投入的成本将随皮肤数量呈几何倍增加，图标套色就可以很好的解决这类问题，只需要通过修改图标颜色和风格即可适配。通过修改映射配置，可以得到不同颜色的图标套色方法我们先看看图标套色之后的效果：修改映射配置，可以得到线、面不同风格的图标简单来说，实现这种效果有下方五个步骤:套色方法五个步骤以下方几个图标来做示例：SVG 示例图标第一步，确定图标线、面风格设计师将图标线、面风格确定下来，并保证两者效果上可以兼容，即轮廓一致。同时兼容线、面两种风格效果第二步，定义图标颜色在确定了图标的风格之后，将图标中用到的 7 种颜色，根据一深一浅再拆分为 14 种（具体几种颜色可根据图标设计需要来定），深色用于填充线性图形，浅色用于填充面性图形。根据线、面风格需要，定义图标的颜色第三步，给颜色定义样式名给 14 种颜色，分别定义好 CSS 样式名（样式名遵循 CSS 规则即可）。给颜色定义样式名第四步，给 SVG 图标添加 CSS 内部样式SVG 格式图标默认是没有 CSS 样式，需要手动将 CSS 内部样式添加到 SVG 文档中，并将 SVG 路径颜色与 CSS 样式名关联起来。给 SVG 添加 CSS 样式第五步，样式属性配置机制添加内部样式之后，需要开发小哥哥在软件中增加对 SVG 图标 CSS 样式属性的映射机制。修改映射机制配置文件中 CSS 样式属性，就可以控制图标风格变化。修改配置代码即可改变图标颜色完成了以上五个步骤，通过修改软件中的映射机制配置文件，就可以改变图标风格。应用案例了解了步骤方法，我们以 WPS 为例来讲解图标套色在实际案例中的应用：案例一：前面有提到我们的四大组件，WPS 由文字、表格、演示、PDF 四组件组成。每个组件都有各自的主题色，文字主题色为蓝色，表格绿色，演示橘黄色，PDF 红色。多数图标都含有主题色，但外形是一样的，因各组件主题色不同而导致了很多图标的重复输出。套色用处之一的颜色适配，可以让图标变色以适应不同的组件色，避免图标的重复。不同主题色图标的变换效果案例二：WPS 有推出多个风格各异的皮肤，因为图标数量的关系，无法每个皮肤都输出一套图标，目前只能使用默认的线性图标。也因时间和维护成本而导致图标风格的单一。套色用处之二的皮肤适配，能使图标改变风格以适应不同的皮肤，既能满足图标风格多样，又能满足时间和维护成本的可控。不同风格图标的变换效果案例三：深色模式的配色与浅色模式大相径庭，图标使用的颜色也截然不同，适配需要输出两套图标资源，因不同深浅色模式而导致的图标资源重复输出。WPS 组件功能区的图标有几千个，输出和维护都很费精力。套色用处之二的皮肤适配，在深浅色模式下也能适用，改变图标颜色以适应不同的深浅色模式，避免图标的重复输出。深浅色模式下图标的变换效果总结通过以上的案例不难发现，SVG 图标套色技术的价值，主要有以下几个方面：1. 时间和维护成本的降低利用图标套色方法，设计师只需要输出一套图标资源，就完成了多组件、多风格、深浅色模式适配。开发小哥哥也可以删掉适配用的冗余代码，提升了图标的管理和软件运行效率；2. 个性化需求的满足后期可以增加自定义扩展，让用户配置图标风格，更好地满足个性化需求；3. 服务器资源的节约更少图标资源，更小压缩包，更少空间和宽带的占用。采用新技术，帮助设计、开发更好地完成多场景适配，降低了整体流程的执行难度，为项目节省了大量时间，避免过多精力投入在重复工作中，为最终完成目标创造了有利条件。同时也解放了生产力，有了更多的时间可以去关注高价值的项目。工作中经常能遇到重复的内容，这都有提升和优化的空间，寻找更高效的方法，让工作变得轻松简单。记得关注我们，下次还有更多好玩、有趣的内容分享给你～实战案例！WPS 2021 年度设计改版完整复盘随着用户使用 WPS Office 的场景逐渐多样化、对产品的体验要求也逐渐提高，我们在视觉层面上围绕着「以用户为中心」开始了一次全新的视觉改版：追求简洁、高效、一致的办公环境，精心打造极致的办公体验。阅读文章 > 欢迎关注作者微信公众号：「CED设计团队」本篇来源：优设网原文地址：https://www.uisdc.com/svg-icon
图标 素材 相片 本文要推荐的「Reshot」是一个整合、收录三大类型素材免费图库，网站提供超过 40000 个 SVG 免费图标、超过 1500 个插图素材和超过 25000 张相片，这个网站最大特色是素材都能实时下载并适用于商业用途，无需付费，使用时也不用标记出处来源。Reshot 素材内容都是由 Envato Elements 专业设计师提供，因为没有人比设计师更懂设计，因此在网站里无论是图标、插图或相片都具有相当高质量，绝非滥竽充数。而且 Reshot 为素材提供各种可用格式，像是 SVG、PNG 或任何你想得到的格式，没有注册或下载限制，使用上更流畅。依照网站使用的「Reshot Free License」授权说明，所有 Reshot 提供的图标、插图和相片都可用于社群媒体贴文、在线营销广告、教育、商业或编辑项目，无论是商业或非商业用途皆可，也被赋予下载、复制、修改、分发或公开使用等版权许可，没有署名出处的要求，如果可以也欢迎加上来自 Reshot 网站的字样。Reshot网站链接：https://www.reshot.com/使用教学开启 Reshot 后从首页选择要浏览的素材类型，例如 SVG Icons、Vector Illustrations 和 Stock Photos 三种，也能透过上方搜索字段最左侧的类别进行搜索目标选择。Reshot 为免费图标、免费插图和免费相片图库各自提供一个独立的搜索首页，从每个页面上方输入关键词查找相关结果，网页中间也会穿插一些推荐标签可快速显示相关的素材内容。搜索时还能从最右侧进行更进阶的搜索选项调整，例如免费图标可选择要搜索图案或图标集，相片显示长方形、正方形的搜索结果，对于要精确找到素材来说会很有用。在搜索结果就会显示并预览相关素材，将光标移动到图片上点选右下角「下载」保存图片，或进入相片页面浏览更多完整信息。点选进入相片页面后，除了有更大张的预览图，下方也会有相片名称、作者、分辨率大小、授权和关键词（用于延伸查找更多相关相片），点选右侧的「Download Image」就能免费下载图片。Reshot 也收录超过 40000 个 SVG 向量图格式的图标，一样透过搜索或是标签显示相关素材，然后将光标移动到图标上方就会显示复制 SVG 程序代码或下载图标的按钮。或是点选进入图标详细信息页面，会有更大张的预览图、标题、图标集、作者和标签，如果想要找更同一套图标的图案，可以点选图标集名称或将页面拖曳到下方显示的相关结果，从右侧点选对应的按钮可「复制 SVG 程序代码」或是「下载为 SVG 格式」。另外 Reshot 免费插图素材（Vector Illustrations）部分操作方式一样，点选进入素材页面后显示下载按钮有「下载向量图」和「下载 PNG 格式」两种，在 Reshot 提供的素材都是使用相同的授权方式释出，如果有需要也可参考 Reshot Free License 授权说明。值得一试的三个理由：网站收录三大类型素材包括免费图标、插图和相片图库所有素材都能实时下载并适用于商业用途，无需付费或注册账号使用时不用标示出处来源或是链回到原始页面快收藏！收录超过25万个免费图标素材网站的「Share Icon」如果想要寻找好看的图标图案，我曾经介绍过许多免费资源，大家可以从各种网站中寻找自己需要的素材，毕竟对大多数使用者来说要自己绘制图标图案还是有不少难度，还好网络上已有现成图标可直接使用，减少重新开发需要耗费的成本和时间。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/reshot
标签 用户 图标 前言标签栏是用户进入 APP 的第一触点，绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。它作为移动应用中最常见的元素之一，是 UI 设计师们绕不开的课题。一个好的底部标签栏可传达出产品的核心功能、品牌形象及设计理念，还能用作判断应用是否精致的标准，用户可通过第一触点来感受这个 APP 是粗糙的还是精致的。所以看似简单，但要想设计出视觉美观、反馈清晰的底部标签栏，有很多值得我们深究的地方。那么标签栏为何存在？背后满足的需求和场景到底有哪些？能给产品、用户带来什么价值？本文将从很多优秀产品中，挖掘出值得学习和借鉴的设计亮点，对标签栏作出思考及分析，希望能帮到大家。本期大纲了解标签栏标签栏常见设计规范标签栏组合方式图标切换样式标签栏功能样式延展总结了解标签栏1. 为什么要设计标签栏？虽然我们看到如淘宝、京东、美团等主流产品都使用了底部标签栏，但并不是所有的产品都需要，部分工具、打车类型的 APP 就没有使用标签栏，所以在设计一个产品之前应该思考，为什么需要、有没有更好的其他方式代替。在这里，我们先了解其作用，然后结合需求思考与产品的的契合度，最后再决定是否使用它。传达核心功能底部标签栏一般由 3~5 个功能（入口）组成一个完整的产品架构，这些功能基本都属产品的核心，可以帮助用户避开产品中其他信息的干扰、精准快速的找到这些功能并使用它。突出重要功能即便有些不是产品的核心功能，但用户的操作频率极高、可能是核心功能的前置条件或索引，也会将入口置于底部标签栏，常见的有扫一扫、搜索、发布作品等。需要注意的是，这种功能在操作之后大部分都会进行二级页面跳转，与其他标签的等级权重并非平行。多种展示方式因产品定位不同、受众用户不同，接收信息的方式也有区别。标签栏能灵活的承载多种视觉展现方式，以传达出不同的产品气质。例如：受众群体范围非常广泛且存在一定的互联网文化差异的产品，使用纯文字标签；而对于长期活跃在互联网环境下年轻化的专业用户，且产品较为轻量，标签栏使用纯图标会显得更加简洁、更有气质。定位用户坐标用户可通过被激活的标签（高亮、颜色变化）清楚自己当前所处位置，减少用户思考或通过其他信息解读而花费不必要的时间。2. 为什么放在底部?首先，将标签栏置于底部非常方便用户拇指与设备进行交互，基于单手操作的便利性，无论左、右手，其大拇指都处在设备底部的自然覆盖区域；其次，因用户是通过从上到下、从左到右的“F”型浏览顺序，设备底部对用户产生的视觉注意力相对较低，置底导航不会分散其注意力，同时又方便用户随时切换至其他感兴趣的功能模块。根据史蒂文·霍伯（Steven Hoober）在对移动设备使用情况的研究结论中表明：抱着手机的人占 36%、两只手使用手机的人占 15%，而 49％的人依靠一只手在手机上完成事情，也就是说，仅用大拇指操作手机的用户可能高达 75%，这足以说明将 Tab 栏置于底部体验会更好，很大程度上提高用户的操作效率及频次。绿色代表可以轻松到达的区域；黄色代表需要延伸的区域；红色表示难以到达，需用户改变手持方式。3. 标签栏结构底部标签栏结构布局相对来说比较简单，主要有以下几种元素组成：1 – 用于承载标签栏所有元素的容器；2 – 激活状态下的图标，高亮提示，明确用户当前所在位置，点击不会跳转到其他功能模块（舵式导航除外）；3 – 激活状态下的标签文本，作用与上述相同；4 – 未激活状态下的图标，相比激活状态，视觉层级较弱，点击会跳转至对应的功能模块；5 – 未激活状态下的标签文本，作用与上述相同。标签栏常见的设计规范1. 标签数量为确保底部标签栏表现清晰、反馈及时，iOS、Android 两大平台在设计规范中都对标签数量给了相同的建议，将底部标签数量控制在 3~5 个之间，低于 3 个会过于占用页面底部空间，浪费资源，超过 5 个会让结构变的复杂，且用户在操作中容易发生误触。针对超出 5 个之外的标签，Google 建议将以汉堡菜单的形式隐藏、iOS 也将多出的标签隐藏并强制替换成“更多”入口，虽然可以将其视为一种解决方案，但体验极差，一方面用户无法提前感知隐藏的功能入口，极易忽略，另一方面，产品将重要功能隐藏可能会存在不可预知的风险。具体的标签数量如何决定，这还得根据产品的框架来确定，功能结构的划分会告诉你标签数量到底是 3 个还是 5 个。比如：功能比较单一的产品，3 个入口足以满足需求，对于结构复杂且超出 5 个的，需根据产品的核心功能、主推业务进行筛选，最终控制在 5 个以内即可。2. 标签间隔屏幕均分：这是在设计中使用最多的一种方式，不管标签有几个，都可以利用整个标签栏的宽度进行平均分布。例如：以 iOS 二倍图设计稿 750px 的宽度为基准，如果存在 5 个标签，那么每个标签就应该在 150px 宽度的区域内左右居中、并依次均匀排布在整个底部标签栏中。同等间距：比较少见，一般只有 3 个标签时才会选择使用这种方式，在标签较少的情况下，相比均分，视觉上看起来更为紧凑。3. 视觉分割缺少视觉分割的标签栏很容易出现错觉，让用户误以为这是页面底部的内容，对信息的区分非常不友好，我们可以通过投影、分割线、背景色、毛玻璃效果对标签栏作出明确的信息版块区分。标签栏组合方式1. 图标加文字组合这是最为常见的组合方式，当某种样式的图标被广大用户熟知、或频繁使用某个应用时，引人注目的图标能让用户快速理解，且不受文化、地域的影响快速触达目标，即便存在某种歧义，配合文字说明使其更加标准化，这种图文组合最为稳妥，不容易出错。2. 纯文字两大短视频平台「抖音/快手」底部标签栏就是当代纯文字标签的代表作，另外如小红书、百度翻译、高德地图…等也采用的这种方式。纯文字标签遵循简单易用的原则，方便直观的进行操作，对用户的影响力较小，让用户更专注于信息本身，例如需用户高度聚焦界面内容的高德地图，去图标化降低标签栏注意力是一种不错的表现方式。不过这种标签样式单一，对于信息延展会受到一定局限，如品牌传播、节日宣传促销等，所以纯文字标签不能乱用、滥用，比较适合用户群体跨度较大的产品。3. 纯图标一般适用于较为小众的产品，例如花瓣，所面向的用户群体是跨度非常小的年轻化互联网专业人员。纯图标样式较为简洁，能在一定程度上提升产品气质，虽然在识别度有所降低，但对于这类用户心智模型的建立已相对完善，所以用户并不完全依赖通过阅读文字才能理解标签含义，更可能是利用位置记忆、图形化等知识唤醒固有认知来快速定位。图标切换样式标签栏的图标设计这里就不做阐述了，如果不太清楚，请看这篇文章：6大章节！图标设计基础知识全方位入门指南前言做好图标设计是一个入门级 UI 设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。阅读文章 > 1. 图标切换风格众所周知，底部标签栏图标都有选中与未选中状态，其「线性
图标 圆角 体量 最近我在学习使用 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
图标 控件 声音 这五个核心概念是学习交互与设计心理学的基础，在唐纳德先生的设计心理学中有提到，分别是：示能、意符、约束、映射、反馈。很多没有接触过交互体验的设计师小伙伴们，总有会面临一个坎，那就是看别人做交互和体验的方案总是特别简单，一个流程或原型别人做出来之后，我们心里总会想，那不就是这样嘛？换我也能做，但是只要自己一上手就不行了。为什么？因为我们总是看着别人的结果下结论，而忽略了中间的思考过程。就好像是吃着别人做的番茄炒蛋，你会觉得不就是番茄和鸡蛋一起炒一下，然后放点盐和糖就好了嘛，我们只看到了结果，而忽略了对食材的选择、处理、顺序、结合。示能当我们看到一个控件，你觉得它不就应该在那里嘛，但轮到自己开始做，就压根想不到要去用那个控件，甚至是信息布局、流程节点、整体结构都规划不出来。所以很多 UI 设计师觉得做纯执行的工作很没有意思没有价值。因为方案是别人做好的，思考过程也是别人的，而商业设计师的核心是解决问题，解决业务和用户的问题，既然解决问题的角色都是 UI 的上游，那么 UI 设计如何体现价值呢？当然就是把交互体验的核心底层概念搞懂，和交互设计一样从设计侧去思考问题，赋能业务。OK，那么来我们先来讲：示能1. 示能心理学家吉普森将示能描述为：“关于有形物品如何传达出人们与它们互动的重要信息，这个特性被吉普森命名为“示能”。用很直白的话来讲，意思就是：事物通过自己外在的形态，向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是，例如一扇打开的门，告诉人们可以进出、通过。一张椅子，人可以坐、可以靠。假如，你面前有一扇门，门上有一个把手，这扇门告诉我可以利用这个把手与我进行互动，你可以用手、可以用脚，也可以用舌头，但手是最方便的。如果只是单扇门，那么我们可以利用推或者拉的动作打开，但如果是两扇门并排，两个把手在中央靠近，那么这时候门展示出来的意思就是两扇门都可以推或拉。但如果门把手在门的靠外两侧，那么意思就变了，变成了将门侧滑后才可以通过。那门为什么要设计成不同样式来展示不同示能呢？这个留给大家思考，这三种门设计的初衷是什么。在我们数字产品中可以有什么体现呢？例如一个开关控件（switch），开关本身具有两种互斥的属性和功能：开/关、启动/禁用，看到开关控件的外在样式，我们可以判断当前开关所属模块以及意符指示内容的状态是属于打开还是关闭。开关在现实生活中的表现样式有很多，例如一侧翘起的开关、可以拨动的开关、具有段落的按压开关、分型控制的开关、旋钮开关等大家别看开关看起来简单，但是在设计起来会遇到不少的问题，因为状态和意符形态在我们日常中过中很难成为一个标准，例如最常见的一侧翘起的开关，如果不加意符，我们不知道让哪边翘起才是开/关。如果你的房间就一盏灯，那么很简单，我闭着眼睛去按就行了，灯灭着那肯定就是关，再按一下那就是开。但如果在客厅中有多个并联的开关怎么办，一个灯可能收到 2 处甚至 3 处开关的控制，而每处开关的数量会在 3-5 个，这个时候不用意符去标识，就很麻烦了。回到数字产品上，开关的示能就简单多了，有颜色的状态表示开，灰色状态表示关，但是开关控件在刚用在数字产品上的时候，很多人经常误以为是滑动交互来控制开关，虽然滑动也可以，但本身依靠更简单的点击触碰就可以了。但如果控件做的很长，那么滑动的示能就会更明显。开关比较让人产生歧义的地方来自于意符，因为很多新人将一些控件的属性认为是有重叠关系，可以混用的，那就大错特错了，等会讲。2. 反示能和示能相反，指的是任何物体之间不能进行怎样的互动。例如我们经常做的人体工学椅，你可以靠坐在椅子上，并把手放在扶手上，但你无法在椅子上蹦跳，因为椅子无法支撑剧烈晃动。你也不可能用椅子打游戏，它本身不具备这样的功能。再比如我们裤子的口袋，设计师通过设计他的形状、大小、材质，帮助我们去盛放一些小物件，例如钥匙、手机、卡片，但是笔记本电脑你塞不进去，一头猪更塞不进去。数字产品中也会遇到一些有很明显反示能的控件，例如 segment Controls（分段控件/分段选择器/分段选择控件），它是 iOS 的原生控件之一，该控件的反示能就是无法通过左右滑动界面切换不同标签的视图，和 tab 不同。高手帮你学规范！iOS和Android规范解析之标签导航和分段控件从今天开始，将介绍iOS和Android设计规范中关于导航的部分。阅读文章 > 并且在该控件的描述中，seg 通常数量只能在 5 个以内，并且 5 个标签分别属于同类型的数据分割，只支持点击切换。它不能展开、不能滑动、不能移动、不能悬浮、不能进入二级页面也不能翻转。那有没有一种可能，或者一个场景需要这两种控件同时具备一些属性呢？是有的，例如这样在标签下是列表，而列表也支持轻扫的交互进行删除，如果使用 tab 则会产生冲突，而使用 seg 则在视觉上太重了，和产品调性不符。那么我们可以在示能上做一些调整，让这个控件看上去不能左右滑动，又不至于太繁琐。所以反示能将告诉我们，事物有哪些不具备的功能。同时反示能也是相对的，遇到多样化的场景和业务需求时，我们依然要学会变通。3. 不同场景中示能的变化一张桌子放在教室中，我们知道它是用来学习的，桌面上可以放书本、笔等，如果一个桌子放在户外，并且靠着墙壁，墙壁上有个洞，那么这个桌子当前示能表示为什么呢？一个肌肉发达的男人在健身房秀肌肉大家纷纷羡慕，但是如果不穿上衣走在马路上估计很多人会骂他变态。下方图标+文字形式的一个按钮，放在卡片的左侧和右侧大家感知一下，表现出来的示能有所区别。左侧更像是这个模块的标题，而放在右边才能让人觉得可点击交互。如果觉得不够明显我们再用三个点举例，放在不同位置的 3 个点小图标，所表达的示能相差巨大。再例如红色在弹窗中显示给人警示，但在活动页和价格数字上显示则给人感觉热闹的氛围和强烈的指引。这就是不同场景中同样事物表现出来的示能区别。所以设计师在设计方案的时候除了要将方案本身属性表达正确以外，也要考虑到场景的影响。4. 相同示能的不同表现方式与含义这里有一个概念叫做同构异型，说的是结构相同，形式不同。例如我们经常用到的 tab 与其视图的呈现，tab 的本质就是利用多个标签来切换标签下的视图，所以标签除了用 tab 的形式，还可以用下拉展开成为菜单的形式，只不过一个是平铺，一个是点开后再列表选择。再举个例子，例如筛选控件，如果我们需要一个实时筛选的功能，那么我们一般会这么做，在 b 端 web 设计中，会将一系列筛选条件横向摆放，每一个筛选条件都可以下拉展开进行筛选，但如果迁移到移动端中，因为横向距离受阻，就会纵向标签展开式的筛选模式，从结构上来说，这俩方案其实是一样的，都是在多个筛选条件中分别筛选出不同的标签。再例如一个父子集共生的内容卡片同构异形在设计样式上会有很多种，例如列表，例如上文说到的单控开关，虽然样式很多，但原理上单控开关都是一样的。对于初学者来说，不同控件理解的比较片面，所以就会导致一些控件的使用错误。说到同构异形那就不得不提到同形异构，例如一块素牛肉，外观和红烧牛肉一样，但是它是豆制品。我们再来看下面两个模块，根据整体来判断，两边的加号都是反映出可以点击添加的示能，但如果我们继续考虑交互之后的逻辑和流程就会发现问题所在了。前者添加的是标签，添加完后会显示在相关的区域，添加按钮不变。这里可以用一个比较形象的比喻，我有 4 张椅子，其中 3 张坐了人，第四张椅子的示能为：只要这张椅子坐了人，边上就会出现新的椅子，最多不超过 8 张，如果没有人坐则只显示一张椅子。但第二个模块中的添加按钮结合整体来看是和其他内容毫无相关的添加入口，就好像是第四张椅子上面坐的不是人而是套了一个大箱子，椅子不见了，原本应该和其他内容保持一致的外观也不见了，出现了一个新的东西，出现了新的示能。所以如果我们要按照第一种规则玩，那么这里就不能套箱子，如果要放箱子，就需要放在其他的地方。所以，初学者要警惕同型带来的使用误区，有时候长的很像的两个人，可能完全没有血缘关系。小结示能的概念大家已经了解了，对于我们设计师来说，尽量去搞懂更多事物在不同场景中的示能和反示能，需要解决问题的时候可以针对性的运用各种方案。意符1. 意符的类型与表现形式示能决定可能进行哪些操作，意符则点明操作的位置以及如何操作。设计师往往会说，我设计了一个很好的方案，它将告诉你产品的用途，但是用户却不知所措，虽然知道产品就在那里，但无法下手，因为意符不明确。例如我们最常用的人体工学椅，可以调节高低和后仰角度，调节的控制器是两个把柄。如果没有意符加入，我们经常会记不清哪一个控制器控制的是后仰角度，哪一个控制的是座椅高度，需要去做更多的尝试。所以意符告诉我们对事物的正确操作方式以及任何可感知的标识。说白了就是一个能够表达事物具体操作的符号。在日常生活中，双开门通常在商场、大型会议场馆内看见，因为考虑到人流量比较多，于是在门上就会出现推/拉两个文字意符，避免两侧的人同时推或者拉，引导人们正确通行。我们可以使用推/拉，但不可以用“按”，因为我们无法通过“按”的交互来操控门的开关。如何判断一个设计是否优秀，那么我们会观察其本身的示能和意符传达是否自然，如果意符表现的太过刻意或者画蛇添足那就是很糟糕的设计，例如在两扇透明的玻璃门上再添加推/拉的标识，就显得有点多余了。再例如切换短视频和翻页电子小说，我们不会用一个翻页按钮而是通过滑动来手势切换。当我们将内容设计全屏的时候就要考虑到当下示能的含义，所以就不要画蛇添足。OK，它的表意大家已经清楚了，那么在数字产品中，意符有哪些类型和作用呢？它们又可以帮助用户解决什么问题，我们来看一看。意符的类型文字文字意符是最常见的一种类型，利用文字描述来说明如何进行交互操作，但是中文文字博大精深，不同的描述给人的理解和感受完全不同。案例 1：开关开关控件单独拎出来不具备完整的含义，必须在相应的场景中。例如我们在通知、设置的场景中经常会用到开关，并且需要相应的文字描述来解释开关控制的内容是什么。这里的文字就是意符，用来解释开关的作用。开关本身具备的含义中是有这样两条原则：需要让用户感知操作后立即生效开关所属文本必须简单清晰无歧义所以咱们可以看下方的案例。当我们将文本描述为“不打开（关闭）则不再进行消息数字提醒”和“不接受推荐”后，会显得开关操作含义不明不直观。正确方式应该是正向且简单的描述，不要用双重否定等描述方式。默认描述为打开后的状态描述。再来拓展一下，我们会发现其实依然还有产品中的开关文字意符用了非正向描述，那按照你的说法不就错了吗？我们来看看小红书和微信的权限开关，这里分别是隐私设置和权限设置。这里理解起来会有点绕，大家看看能不能理解。首先“只允许我关注的人评论我”这是一个正向描述，没有问题，如果换成反向描述就会变成“不关注我的人不能评论我”，结合右侧的开关，逻辑层面就要多加一个双重否定的理解，所以这里的用正向没有问题。接下来看下面的关系设置：不把我推荐给可能认识的人，诶这里用了反向描述，大家来分析一下，这里是否合理呢？首先小红书在新下载应用打开时会向用户进行授权，为了帮助用户发现更多渠道的好友，所以默认在协议中就会去微博、通讯录里拉取好友的信息从而在浏览内容的时候进行更多好友的曝光和推荐，同时也会将我的信息推荐给认识的人，这样产品的活跃度、用户的曝光会提升。那么大家再来品一品这两句话：1.“不把我推荐给….” 2.“把我推荐给….”前者比较含蓄，后者则更主动，中国人的关系总体来说就是比较含蓄的，就好像是你可以给我推荐，但我不会主动要求，更何况像小红书这样的社交平台，“可能认识的人”对我来说价值并不是很大。所以我个人也觉得默认不推荐比较好。不知道这样的说法大家是否可以接受。再来看微信：不让他看和不看他。微信这个平台想必我不用多说，既然是熟人社交更多，那么默认肯定是全部开放，而有特殊需求才需要进行隐私设置，所以默认状态为不让他看-开关关闭，意思是我没有打开这项非友好的选项。那为什么会出现有的开关默认打开，有的开关默认关闭，还可以使用反向描述呢？我总结了下，如果涉及到一些隐私和权限的内容，一般我们默认为开关关闭。但如果是为了用户体验和效率考虑的内容我们可以默认为打开，例如视频播放结束自动播放下一个视频这样的设置。开关文字意符的描述方式还有几种不同的方式：内容标题+开关切换后状态与内容变化的描述第一种类型也就是上方说的案例，但是要注意的是，在描述状态变化的时候，文本要正向、简单的描述，例如开启后，接收 xxx 消息，而不要写成关闭后，不接受 xxx 消息。功能直接描述不添加说明文本，直接展示功能标题，例如微信听筒模式、消息设置、提醒等，直接用开关控制这些功能的打开和关闭，属于功能设置。还有一种是授权，例如允许他人查看我的收藏，对他人行为的约束，但不能描述为不允许他人查看我的收藏，因为刚才我们总结了，如果对于一些隐私权限的设置默认需要关闭，那么加上正向描述就不能使用“不允许“。批量整体描述对于同一种类型的功能设置，可以利用批量的形式做整体描述。再来看一个例子，示能在不够清晰的情况下，文本意符用来辅助对当前内容/状态的解释。例如 b 站在浏览内容的时候会出现“刚刚看到这里，点击刷新”，或者当我们在浏览信息到一个页面底部时发现无法继续滑动，会出现一行文案：我是有底线的，说明内容全部展示完毕。文字意符很直观，但也要避免歧义。图形/图标图标在某种程度上当作意符使用的频率会更高，虽然某些图标表意不明，但是因为简约、美观、生动、普适性强的原因，所以很多地方倾向于用图标，例如公共卫生间、商场的扶梯、通道，通常会用图标来代替文本，或者强图标+弱文本的形式。既然咱们要说图标意符，而且要突出图标意符的作用，那就必须有个前提，那就是抛开其他的变量、因素的影响，图标意符究竟有什么神奇的魔力。例如我们常用到的列表，很熟悉吧，接下来我将用图标来让这个列表的示能产生变化我们发现，只有文本的列表，示能不明显，而加上图标之后就很明确了，甚至加上不同的图标，示能也随之变化了呢？刷新、跳转、展开、移动、选中、删除、步进、开关、屏蔽、更多。但你不能用撑开、向上展开、旋转、翻转、折叠、回退等等。这些其实是很简单和基础的概念，但是很多工作多年的 UI 设计转交互体验的小伙伴就经常遇到这些问题，大家总是在问 UI 和交互的区别是什么，其实本质上它俩都是一个界面设计师必备的能力，不能拆开来谈。我们再来看一个例子，播放/暂停的图标，用来控制音频/视频的播放与暂停，在实体播放器上，我们能看到播放和暂停往往集成在一个按钮上，例如天猫精灵、电视遥控器等。而在数字产品中播放与暂停并不会同时放在一个按钮上，因为数字产品的图标是可以变化的，当前状态和切换状态可以有两个不同的意符表示，那实体播放器做成两个按钮就太多余了。还没完，当我们在观看视频的时候，界面中会显示暂停按钮，意思是点击后播放中的视频/音频会暂停播放。也就是暂停图标展示的是点击后的状态，而不是当前状态。但其他图标表示的意思却又和开关相反，例如横竖屏切换、收藏、点赞，显示的就是当前状态，而非点击后状态。为什么不一样呢？因为暂停/播放相当于一个按钮，用来控制视频播放，这里存在着一个控制和映射的关系，然而这里的暂停和播放按钮的示能是相反的。暂停图标的示能表示当前正在播放，而播放图标的示能表示当前已暂停。所以它和开关也不同，开就是开，关就是关，点赞图标的原理就如同开关。还有例如打开和关闭声音，看起来声音播放/静音有点像视频的暂停和播放。例如腾讯视频这里的视频声音控制，当前静音为声音关闭图标，而不是打开后播放声音的图标，我们再看 iOS 系统的里声音控的样式表现，说明当前声音为开启则显示的是开启声音的图标，经过交互控制后才会变成静音的图标。所以声音播放的控制和视频播放的控制在图标意符的使用规则上并不统一。那为什么会不一样呢？其实我也看到过一些声音图标和这个案例是反着来的。两个原因：1. 因为视频的打开和关闭只有两个状态，但是声音不同，声音在打开的时候还可以调节音量啊！如果和视频播放一样，在播放的状态下显示的是静音的图标，那么音量调节就会变成这样：是不是就很奇怪了，明明是正在播放的状态，显示的居然是静音的图标2. 暂停和播放的本质并不是开和关，而是中断和继续，在本质上和开关还是不一样的。而静音和播放的本质就是对声音的打开和关闭，如果我在声音边上加一个开关是不是就能弄清楚，为什么声音控制器的图标意符就是当前状态而不是交互后的状态。而视频的播放和暂停并不是开关。这下大家搞懂了吗？图标意符可以单独使用也可以结合文字使用，图标虽然有优点，但也有缺点，如果单独使用也需要注意使用的场景，比如举个例子，同样是放在导航栏的两个图标，但是在不同的界面中，大家可以感知到该图标的含义吗？它的示能和意符相结合成为了一个图标，但不够明确，在不同场景中如果没有文字意符的辅助就会不够明确。图形可以辅助表意，也可以用来指示区域，例如我们经常开车，会知道马路上会划分实线、虚线、虚实线、潮汐车道线，示意车辆可以在哪些区域行驶、以及形式的规则。我们在医院拍胸片的时候，胸片机器下方也会指示人应该站在什么位置，用一个方形的框框起来，或者会显示两个脚印的图形。在数字产品中图形的指示区域也非常重要，例如我们设计一个按钮，只有文字样式的按钮和具有图形背景的按钮在用户的点击感知上是不同的，后者的点击信心会更大，有了区域的划分就有了明确的操作界限。颜色颜色意符很好理解，通过色彩来表达如何与事物进行交互以及辅助表达。无论是实体产品或者数字产品中，警示的颜色大部分会用红色或者橙色来表示，例如在进行信息检查时，错误信息会被用红色样式标注出来，既告知用户出了什么问题，又提示用户在哪里出现问题。而需要热闹、活泼的氛围也会采用红色等暖色来衬托，因为暖色更加的醒目。有时颜色也是物体示能的一部分，例如紧急逃生出口、公交车上的安全锤、灭火器都是用红色的外观，表示在紧急情况下可以使用，但不要轻易使用。绿色表示安全、自然，但也有一些特殊场景下的不同感知，例如金融行业不太喜欢绿色，男士不太喜欢帽子使用这个颜色，除非你是比克大魔王。灰色则表示禁止、不可用、待激活等等。在数字产品中，色彩除了表示一些特殊的含义，也可以用来作为信息区分，在选择观影位置的时候，可以利用色彩显示不同区域位置的观影体验和价格的区别。更多的色彩心理学和色彩的使用这里就不展开了。声音声音意符就更有意思了，人们通过听声音来辨别发生方位、响度、发声物体以及声音的音色、质感。各种物体通过声音来传信息的方式也非常多样，而我举个例子，就能把大家带回到童年。你们还记得以前在学校电脑教室里一个企鹅图标开始闪烁吗？一个咳嗽声表示有人申请加你好友，一个敲击木头的声音表示有人上线了，一个滴滴滴的声音表示有新消息。还有在短视频里经常会用到的一种中断音效：滴————。你们会发现我怎么能打出有声音的文字，仿佛你们已经在听了。声音为什么很重要，因为人类的五感是在共同作用的，我们除了可以通过声音来判断事物本身，还可以用声音来感知当前行为的状态，例如打开手机的键盘输入音，这样的打字反馈更真实更有质感。还有在游戏领域我们经常会提到的打击感，当人物的武器打击在怪物身上，但声音并没有及时反馈，而是延迟 1 秒，这时候你就会觉得没有什么打击感，除了声音反馈，打击感的意符还有很多，例如受击物体的表现动作、击打区域、击打特效、动效、伤害显示、控制器反馈等等。动效动效也可以成为意符吗？它能表示什么含义呢？动效也是意符中非常重要的一种类型，他在我们日常生活中也用到的非常多。例如我们看到理发店门口正在旋转的彩色灯。这里也顺便给大家讲个小历史，理发店彩灯的由来：在中世纪欧洲，人们认为放血疗法对人的健康又很大的帮助，但是一般都由宗教仪式中的神职人员操作，到了亚历山大三世，他把这项工作交给了医生，但是当时的医生不愿意做这种下等人做的事情，便委托理发师来做，于是理发师就成立了理发师外科医师联合会，三色柱就是活动的标志，红色代表动脉、蓝色代表静脉、白色代表纱布。还有一种说法是在法国大革命时期，一家理发店是革命党人根据地，一次危险的活动中领导人在理发师的掩护下逃脱，最后为了表彰，允许他们用红、白、蓝三色的国旗作为标注，最后演化成了旋转灯，各国效仿。好了，题外话说完，我们再回到动效。如果你看到三色灯正在旋转，说明这家理发店正在营业，如果静止则说明停业，或者坏了。是不是很简单？那么在数字产品中，动效意符还有哪些作用呢？我们一一来盘点一下：1. 降低用户认知成本我们通过设计界面的转场、控件的唤出动效，告诉用户你将从什么地方去往什么地方，和你有关的控件是从哪里来，你可以怎么控制他。当你进行过交互行为后哪些内容变化了，它们是怎么变化的。这就好像你等的 45 路公交车从远方朝你慢慢行驶过来，停在你的面前并打开了车门，你选择了上车然后看到阿姨捧着电饭锅，拉动气门，接着爆炸。而不是当你站在原地直接爆炸。被红姨的支配还宛如昨日。所以一个好的动效能让你清楚事物的发展过程，以便于你更好的去理解。再例如我们在使用饿了么、美团等应用时，添加菜品会有掉入外卖箱的动效，这是一个非常好的动效应用。微信公众号策划将文章收起到浮窗也会有一个浮窗去向的引导，告诉你虽然文章在收入交互动作的结束是在右下角，但如果你想查看所有文章需要返回首页，在页面的左上角才能找到。2. 引导/提示/强化对于一些新人须知或者内容隐藏的部分，产品通常可以通过一个小动效来引导用户这里有新内容，例如淘宝二楼、印象笔记功能图标的切换、活动入口等等3. 氛围、强化视觉电商、直播界面中，有非常多的元素都是利用动效来刻画氛围和效果，刺激人们的感官。4. 表示状态当你在手机解锁的状态下输错密码或者在氪金时输错密码，输入框都会进行左右晃动来示意，老铁，这真的不对。5. 更多意符意符不局限于我列出的一些类型，我再举个例子，在一个不起眼的转角处，那里空无一物，就是很普通的一块空地，但如果那里被丢了一袋垃圾，那么这里就会出现越来越多的垃圾，因为第一袋垃圾就是一个意符，告诉别人这里可以丢垃圾，于是很多人就会把垃圾丢在这个角落里。很多人会觉得示能和意符好难区分，示能不是也包含意符吗，其实我们可以这样理解，在整个交互过程中有物体和操作者这样两个对象，物体本身表达的是示能，但它不具备沟通能力，而意符才是链接操作者和物体两者的桥梁，虽然我们平时往往看到的都是示能+意符的状态，但是我们也要区分本体的示能和用来沟通的意符两者的区别。小结意符和示能不可分割，设计师们在学习基础概念的时候要尽可能的一起去了解并学习。意符的种类繁多，所以我们在学习意符正确的时候方式时，首先要了解意符本身的“示能”，从而将意符更巧妙的结合在事物中发挥其正确的表意作用。设计师在设计意符的时候也要尽可能的多了解产品使用者（用户）的背景，意符的表达也有很大一部分效果来自于用户的经验和心智。即便我们认为该意符已经很清晰了，但是使用者并未接触过、不理解，说明该意符依然不合适。万字干货！15个著名的设计心理学原理和应用深度解析！“除非有更好的选择，否则就遵从标准”你是否有在听别人说某某原理法则时一脸懵 B 的时候？阅读文章 > 欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/signification
图标 系统 圆角 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
树冠 图标 颜色 3D 元素在设计中的应用广泛，之前向大家推荐了很多免费的 3D 素材下载网站，但是实际应用起来还是有局限的。今天向大家推荐一个可以免费使用、操作便捷上手超快的 3D 软件——MagicaCSG，它的软件大小只有2.64M，但是却可以建模渲染出完整的3D元素。MagicaCSG 来自于 @Simon_阿文 的推荐。MagicaCSG 的已经更新了一个版本，下面为大家简单介绍一下 MagicaCSG 的主要界面，并通过演示教会大家做一个非常可爱的 3D 小元素。MagicaCSG 的界面介绍MagicaCSG 的界面分为 2 部分——Model（建模）和Render（渲染）。Model（建模界面）Render（渲染）界面建模过程渲染过程3D 可爱小元素示范下面教大家如何做一个可爱的 3D 小松树。第一步 建模树干打开 MagicaCSG 后，主界面上有一个正方体，鼠标点击「Stroke」下方的小圆柱图标，将正方体改为圆柱体。选中蓝色箭头拖动调整到合适位置（注意只改变竖直方向的位置，不要水平移动，保证右侧「Gizmo」中「center」的 X、Y 数值都为 0）。然后在右侧「Gizmo」中将「Size」处将圆柱体大小修改为 X:7.5 Y:7.5 Z:15。修改好后将选择「Stroke」栏中的颜色，将树干颜色修改为「8a581b」。第二步 建模树冠树干做好后，在左侧「Layer」处新建一个图层。然后选择「Stroke」下方的小圆柱图标，点击主界面左上角的「+」号，新建一个圆柱体，选中蓝色箭头垂直向上拖出。然后调整左侧的「Cone」数值到最大，将圆柱体变为圆锥体。在右侧「Gizmo」中将方向锁定为 XY，用控件调整树冠大小。调整好大小后，选中蓝色箭头拖动调整到合适位置（按住鼠标右键可以调整视角检查）。选中刚刚建好的圆锥体，按住「shift」，拖动蓝色箭头复制一个出来。然后选择「Stroke」下方的球体图标，将其变成球体。然后点击「组合运算区」的第二项「减去」，将圆锥体的底面变成弧形，更符合松树树冠的形状。并相应的调整树干的高度。第一层树冠建好后，左侧「Layer」处再新建图层，以同样方法做第二层树冠。第二层树冠要比第一层树冠小一些。最后一层树冠要比第二层树冠再小一些，也是按照同样的方法制作。三层树冠都做好之后，再整体调整一下位置和大小。树冠模型建立好后，将树冠颜色分别修改一下：第一层树冠「1091a5」,第二层树冠「29aeb1」,最顶层树冠「57ca8f」。记得用来切形的球体的颜色也要修改，因为这关系到树冠底部的颜色，颜色比树冠本身颜色深一些就行。第三步 渲染建模的部分都已经弄好了，接下来就是渲染。点击界面左上角的「Render」进入渲染界面。首先调整太阳光「Sun」的角度，然后选一个暖一点的颜色「fff29d」；天空光直接点击「Sky」右边的照片小图标，选择系统预设天空光。如果想让光感更丰富，可以添加地面光，并修改光的漫射数值，使整体更明亮。第四部 保存输出制作过程中，我们可以随时点击右上角的保存按钮保存。渲染完成后，将松树调整成自己需要的角度，设置好尺寸，点击左下角的小相机图标就可以导出为 PNG 了。背景的颜色也是可以调整的，如果需要保存透明底格式的图片，可以选中「Background」下的「transparent」再输出就可以了。拖进 AI 中做一个简单的排版，是不是非常可爱?小提示1）MagicaCSG 目前只适用于 Windows 系统；2) MagicaCSG 有系统自带几个小模型，点击左侧上角的文件夹小图标就可以打开；3) 程序安装好后，若出现打开不了的情况，请进行以下操作后，重启电脑重新打开应用：在桌面右击——打开NVIDIA控制面板——管理3D设置——首选图形处理器——选择高性能NVIDIA处理器；进入电脑「设置」，系统——显示——点击进入「图形设置」——浏览——添加MagicaCSG应用程序。总结MagicaCSG 的功能肯定不及 C4D 和 Blender 强大，但是它便捷易学，对于想自己创建一些简单 3D 小元素的小伙伴来说是一个非常好的选择。MagicaCSG 安装包下载链接已经附在文末和开头，赶快自己动手自己尝试一下吧！不清楚的地方在评论区提出，小编会尽快为大家解答~感兴趣的小伙伴如果想进行更深入的学习，可以再尝试下面的入门基础教程：「使用 MagicaCSG 做一个精灵球」https://www.youtube.com/watch?v=lZc2VJJTr60&t=336s「使用 MagicaCSG 做星之卡比」https://www.youtube.com/watch?v=6ET53LGBF-g「使用 MagicaCSG 做一个立体 Android 精灵 1」https://www.youtube.com/watch?v=mNlbj_yUCAE「使用 MagicaCSG 做一个立体 Android 精灵 2」https://www.youtube.com/watch?v=EcTKbpGUaz4&t=425s「使用 MagicaCSG 做一个游戏手柄」https://www.youtube.com/watch?v=LFbn78gu9i0一整套3D图标打包下载！免费可商用！3dicons 是一套开放原始码 3D 免费图标集，收录超过 1440 个图片素材（网站上放了 120 个预览图标），这些图标素材采用 CC0 授权方式释出，可以免费使用于个人和商业用途，图标有四种默认的颜色风格、三种摄影角度和 HQ 渲染，提供多种常用格式像是 Figma、PNG Dy阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 MagicaCSG 安装包 松树源文件3.42M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/magicacsg
图标 图案 网站 Lineicons 是一套收录超过 5000 种图标的合集，主要设计风格为手工制作线条图标，适合使用于各种现代化用户界面，例如网页、桌面软件等等，对于设计师或开发项目来说非常有用。其实类似的图标资源还真不少：快收藏！超过 30 万个免费矢量图标下载的「SVG Repo」SVG Repo 是一个收录大量 SVG 向量图和免费图标的网站，依照说明，网站收录超过 30 万个图标图案，直接在网站探索或是以关键词搜索方式找到自己需要的图标下载，即使用于商业用途也没问题。阅读文章 > 超过 4500 个免费矢量图标打包下载的网站「Unicons」Unicons 是一套收录超过 4500 种图标的图标库，来自开发商 Iconscout，本身有四种不同风格设计，包括单纯线条（Line）、单色（Monochrome）、填满颜色（Solid）和更细边框线条（Thin Line），超过 20 种分类，像是箭头、品牌标志、商业、对话、云端服阅读文章 > Lineicons 分为两种方案：Free Basic 和 Pro，前者免费，但可使用的图标图案 532 个，而且没有提供 AI 源文件，使用时需要标示出处来源；若付费升级 Pro 方案就可开启完整五千多个图标集，使用无需标示出处，也会有向量图原始档可进行细部的编辑修改，付费方案依照授权用户数量而有不同定价，起始价格为 $29 美元（一年），定价上并不算太高。大家下载免费素材即可。Lineicons网站链接：https://lineicons.com/使用教学开启 Lineicons 网站后点选「Download Now」会看到两种方案比较表，分别是免费基本方案和付费 Pro 方案，可使用的图标素材数量不同，免费使用需要标示出处来源，如果只用得到 Lineicons 里其中几个免费图标的话，只要选择免费版即可。点选「Download Free」免费下载 Lineicons 图标集，目前共有超过 500 个基本图案。从网站上方选单选择「Icons」开启图标浏览工具，从这里可以探索各种分类的图标图案，或从上方搜寻字段输入关键词查找，调整预览图标大小、颜色，左侧则是 Lineicons 分类可找到特定类型的图标素材。在 Lineicons 网页如果右上角标示为 PRO 代表需要付费升级才能使用。如果用户只想寻找免费的基本图标素材，可以在浏览工具右上角切换「FREE」，如此一来图标查看器就只会显示免费版图标图案，减少大部分干扰。点选要取用的图标图案后就会显示程序代码，稍后将 Lineicons 的 CDN 链接加入网站，就能在特定位置加载图片，非常简单，透过 CSS 来调整图标颜色、大小或显示样式，从 Lineicons 网站也能单独复制特定图标 SVG 程序代码或下载为 SVG 向量图格式。从 Lineicons 首页找到 CDN 链接，将它加入网站的 head 就能快速加载特定图标图案，和其他常见的免费图标库差不多，好处是无需自行托管任何图标图案或字型。更多的使用说明和范例可参考说明文件。值得一试的三个理由：Lineicons 收录超过 5000 个图标图案，风格为线条图标免费方案可使用 532 个图标，使用时需要标示出处来源可透过免费 CDN 加载相关档案，以程序代码显示图案本篇来源：优设网原文地址：https://www.uisdc.com/lineicons
干货 合集 图标 大家好，2月的第2波实用设计干货合集来了！这一期的合集当中有些颇为不错的工具和素材，有全新的去背景服务PicWish、高素质插图包、包含海量图标和图片素材的 FIgma 插件，尤其是最后的3D图标和字体，素质特别高，值得下载：1、梦幻感十足的插画图包https://justgoscha.gumroad.com/l/serene-scenes-illustration-pack这是一组风格讨喜又百搭的插画图包，总计21张色彩多变但是整体风格高度一致的竖版的插画，这些插画几乎可以直接用到 APP 当中作为闪屏、背景或者着陆页。值得一提的是，这套插画如果注明出处就可以免费使用。2、免费的Ins轮播图模板https://www.flowjam.co/circular这个可以免费下载的模板就很简单了，它是给 Instagram 所设计的免费模板套装，可以用来设计轮播图，包含图标和装饰性元素，稍微改改就可以应用到各种不同的社交媒体平台上，其实也不算麻烦。3、背景去除工具PicWishhttps://picwish.com/很多旧的在线去背景服务都相继开始收费，不过新上线的去背景服务正好填补了这个空缺，直接完全免费，甚至还提供置换背景的服务，就像 PicWish ，不仅可以无限制地去除背景，而且可以添加别的图片背景，直接在线解决常见需求。4、设计稿直接导出为网站的工具https://figment.so/这个名为 Figment 的工具可以将你的 Figma 设计稿直接导出为可用的网站代码和素材，其中会包含相应的视频、链接、动画等，帮你最大程度地节省手动编辑的成本，当然，一些更加复杂的功能，可能需要额外添加进去。5、免费图标插画素材插件 Icons8https://icons8.com/app/figmaIcons8 的Figma 插件绝对值得再好好推荐一次的，作为图标、图片、插画素材领域的重要供应商，装上 Icons8 的插件之后，可以直接获取他们的海量素材，让你无需离开 Figma 就获得资源，不用打断你的整个设计流程。6、快速绘制3D图标的工具 Meshhttps://morflax.com/mesh3D 设计工具越来越多也越来越普及，最重要的是，借助服务器的运算性能，用户也无需在本地安装复杂的软件了。Mesh 这款工具出自 Morflax 团队之手，内置了200多个图标和预制模板，在确保素质的前提之下轻松使用，还保证了足够的自由度。Mesh 本身完全体是付费的，但是提供有限的免费试用，值得上手体验一下。7、人工智能 Emoji 推荐工具https://emojiai.com/在营销文案当中使用 emoji 几乎已经成了当下的标配了，而且要搭配的比较合乎情理其实也并非一件容易的事情，这个名为 EmojiAi.com 的网站可以根据你输入的文本，快速帮你筛选出合适的 emoji，确保内容和 emoji 的情绪是合理的。8、复古几何非衬线字体Tropican这是一款带有上世纪二三十年代风情的英文字体，字体本身加入了很多装饰性的笔触，字宽不一致但是文字之间的字间距和字偶距都经过细致的调整，气质独具一格，特别值得用一下。这款字体免费但是仅限个人使用，具体可以在文章开头和结尾的百度云链接中获取。9、电影院主题3D图标素材这是出自设计师 Mitya Andrievskiy 之手的一套免费图标素材，35 个 3D 图标，仅限个人使用，这些素材包含有 Figma 和 Png 两种格式，前者可以在 Figma 当中进行编辑，完全自定义。具体文件可以在文章开头和结尾的百度云链接中获取。往期干货：第一波！2022年1月精选实用设计干货合集大家好，2022 年第一波设计干货合集来了！阅读文章 > 第二波！2022年1月精选实用设计干货合集大家好，2022 年第2波设计干货合集来了！阅读文章 > 第三波！2022年1月精选实用设计干货合集大家好，2022 年第3波设计干货合集来了！阅读文章 > 第四波！2022年1月精选实用设计干货合集大家好，这应该是 2022 年农历新年前的最后一波设计干货合集了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 2月干货第二波30mnmfq 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-2-design-resources-vol2
图标 干货 合集 大家好，2月的第3波实用设计干货合集来了！这一波干货里应该有不少有趣的工具是你感兴趣的，比如仅需拖拽就能完成设计的交互设计平台，UI 展示性样机编辑器，实用性特别强的也有，字体和图标就不说了，还有推荐设计工具的平台。具体就往下看吧：1、无代码视频交互设计平台https://adventr.io/这个名为 Adventr 的工具其实是一个非常强大的无代码交互式流媒体内容编辑器，它让设计人员无需懂得代码，直接妥拽不同的流程和功能模块来实现各种各样的视觉效果，以前需要代码实现的功能，这次能够直接搞定了。这款工具是付费的，不过提供为期一个月的免费试用，值得上手体验一下哦。2、在 Canva 中访问300万 iconscout 图标https://iconscout.com/plugins/iconscout-for-canva这个是 iconscout 和 canva 合作的的一款插件，如果你日常会使用 Canva 设计各种素材和物料，那么可以装上这款 iconscout 所提供的插件，直接调用来自这一平台的超过 300 万图标。这类插件的好处在于，你无需离开当前的软件，就能获得高素质图标素材的支持。3、设计工具推荐平台 Toools Designhttps://www.toools.design/这个名为 Toools Design 的平台会专门推荐各种实用的设计工具和素材，网站本身会每周更新，值得一提的是，这个网站将各种类型的素材分门别类，方便你根据领域进行查询和筛选。4、开源免费图标合集 UI icons Linehttps://app.streamlinehq.com/icons/streamline-mini-line这是一组包含超过 1000 个高素质线性图标的素材合集，其中绝大多数的图标在设计之初，是基于 14×14 px 的像素网格来进行设计的，确保在低分辨率的屏幕上也有不俗的结果，同时它也可以导出矢量的版本。这套图标是开源免费的，并且遵循的是 CC 4.0的协议。5、展示性样机设计工具 UI Generatorhttps://uigenerator.org/有意思的事情是，并非所有的 UI 都是设计来「使用」的，在很多网页、APP 和 海报 以及Banner 当中，会使用一些展示性的 UI 样机来辅助呈现主题，这种样机如果重新设计工作量也不小，这个名为 UI Generator 的工具就是专门干这个事情的，它可以生成满足各种不同需求、贴合主题的 UI 界面样机，不求能用，但求能看。6、适用于云服务类产品的3D图标http://cloudicons.store/图标3D化似乎已经成了一个趋势，这个名为 Cloudtech 的服务提供一组总计 48 个可编辑的3D 图标，这项服务完全版是收费的，不过提供免费 Demo，如果其中正好有你看中的图标，不妨先试试看！7、快速构建网页组件的在线服务https://nimble-landing.vercel.app/Nimble 是一个在线的UI组件和代码编辑器，它提供一种更加便捷的可视化编程，来辅助你快速完成 UI 的设计和实现。目前 Nimble 支持 Tailwind CSS，你可以直接调用大量的 Tailwind CSS 资源，随后还会支持 bootstrap、bulma 以及 Material UI 等主流的 UI 组件库。8、复古加粗手写字体 Bald MontBald Mont 是一款带有强烈复古质感的字体，字体本身笔触较为柔和，但是带有立体的阴影，适合用于海报、Banner 等场合的标题文本。这款字体是免费的，但是仅供个人使用，你可以在文章开头和结尾的百度云链接中下载获得。9、免费 APP 图标设计素材这是一个名为 App Logo Icon Maker 的工具，或者说素材。它内置了 6800 + 的图标组合，让你可以在 Figma 当中快速创建出素质不错的 APP 图标。这波图标素材仅限个人使用，具体可以在文章开头结尾的百度云链接种获得。往期干货：第一波！2022年2月精选实用设计干货合集大家开工大吉！阅读文章 > 第二波！2022年2月精选实用设计干货合集大家好，2月的第2波实用设计干货合集来了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 2月干货第三波16m9q6v 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-2-design-resources-vol3
图标 风格 视觉 前言做好图标设计是一个入门级 UI 设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。不同位置的图标在界面中所起到的作用不同、风格也不同、其设计思路更是有所区别，例如金刚区、分类、标签栏、服务工具等。用图标准确的表达出实际含义，仅仅学其「形」是不够的，需要对图标有较为全面、系统的认识，了解图标的相关概念、正确的绘制方法及处理好一系列的细节，本篇文章将介绍图标设计的具体方法及要点，帮你规避掉一些常见的问题，让图标设计有理有据。本期大纲图标的定义常见的图标风格性格与气质设计规范与流程常见问题及注意事项图标资源总结图标的定义1. 什么是图标？图标是一种具有高度概括性的图形化标识，在界面中与文案相互支撑、搭配使用，隐晦或直白的表达内容的具体含义、属性特征、形象气质等丰富的视觉信息。从概念上来讲，图标可分为广义、狭义两种，广义指的是现实世界中的图形符号、且有明确指向的含义，而狭义的图标指的设备界面中的符号，这些设备泛指承载互联网产品的载体，如手机、电脑、iPad…等。在 UI 设计中主要具是针对狭义的概念。图标设计是一门学问，在我们的认知中，通常将图标理解为某个概念的抽象图形，通过设计清晰易懂的图形传达出比文字更高效率的信息，同时提升界面的美观程度。想要将图标设计的更加出色，则需要频繁练习、不断试错、持续探究并尝试新的风格，所以很值得我们花费大量的时间去钻研练习。2. 图标的基本特征一个界面是由文字、图标、几何图形、图片（音频、视频）组成，从 UI 设计师的角度，相对来说，其他三种元素大多运用到的是排版技巧，而图标则是需要绘制、创作的元素，在没有图标的情况下，纯文字也可以代替，可为什么贵还要费力费时的设计图标呢？原因主要有两点：首先，图标作为一种图形符号的存在，跟文字的复杂程度相比，在识别效率上有着先天的优势，因文字需根据语种、长短的不同，所占用的界面空间资源就不同，在文字较多的情况下，大大减低了用户浏览速度及信息传达的效率，固图标将文字信息进行了浓缩。好的图标不仅易于识别、效率更高，且让界面更加简洁，所以我们常见的图文结合界面，绝大多数都是图标在上、文字在下，或者图标在左、文字在右，这些设计足以说明图标视觉传达的优先级高于文字。其次，不同风格、样式的图标能让界面看起来更美观，提高用户的视觉舒适度。设想一下，如果界面没有任何图标的点缀，即便用户也能使用，但看多来多少都有些枯燥无味，全部用文字来理解内容还容易引起视觉疲劳。常见的图标风格1. 扁平风格扁平风格图标主要是由形状的描边、填充进行各种组合搭配来表达不同的含义，并通过不同的色彩体现出不同的视觉效果，最常见配色有以下几种：单色：简洁、清晰视觉效果，常见于基础功能图标。例如：B端功能入口，移动端个人中心、二/三级页面的工具栏等，也有很多app的金刚区利用底色块衬托反白的图标。双色：是很常见的功能性图标，至少由两个以上的元素组成，在单色的基础上加以色彩点缀，让本身就不是很突出的元素不再单调，如果融入品牌色，能提升整个界面品牌调性，适用场景跟单色图标相比则范围更广。多色：至少由三种或以上的形状、颜色组合而成，常用于金刚区、产品分类列表、定制化菜单等。渐变：渐变色的图标显得较年轻化，可以是单元素的渐变或多元素的渐变组合，能映射出一种活泼、热烈的氛围。例如：视频、直播等娱乐类型的APP，或车载UI等。不透明度：调整图标中某个元素的不透明度，可在不变换色系的情况下丰富配色细节，还能与底色融合的更加细腻，解决多色渐变视觉跳跃的问题。另外，在 UI 界面中，扁平化风格图标使用最多的当属线性、面性、线面结合这三种类型。线性线性图标主要是通过线条描边勾勒出来的图形，在界面中的尺寸普遍偏小，其线条不能过于复杂，否则将会影响辨识度，看似不多的简单线条搭配不同的色彩，则有很大的调整空间。面性面性图标主要通过剪影的形式来制作抽象的形体，相比线性图标则面积更大、视觉层级更高且更有体积感。通过不同色彩填充、切割手法塑造不同的设计感，以达到多种视觉表现的效果。线面结合线面结合的图标既有线段或轮廓、又有填充的色块，相比纯线/面性单一样式的图标则细节更加丰富，如果把控到位，会有更好的视觉效果及信息传达的效率，也不失趣味性。2. 拟物化风格拟物风格的图标主要通过细节和光影、根据现实世界中的物品塑形打造出图形立体效果，非常考验设计师的造型绘制、技法表现能力。这种风格的图标有着极强的代入感，能让用户快速领会图标所传达出的意图及气质。因为拟物化图标信息元素的高复杂度及突出的视觉效果非常抢眼，在页面中频繁出现会成为干扰其他信息的存在，游戏类应用中使用的非常普遍（不过多赘述）。在其他类型的应用中，大部分出现在营销类型的界面，例如专题页、成就榜、会员中心等。3. 轻质感风格跟拟物化图标相比，轻质感就不会有太多复杂的元素，主要通过各种色彩渐变、发光、投影等图层样式体现出非常柔和的立体感，整体风格偏年轻化，给人轻盈、简洁及精致的感觉。在设计过程中，请使用干净且和谐的配色，主要使用在界面较大区域的位置。4. 磨砂玻璃风格不仅仅是页面背景有毛玻璃风格，图标的毛玻璃风格也很出彩，主要通过背景模糊、叠加、剪切图层来实现（网上很多教程）。轻量渐变搭配毛玻璃的朦胧感，可以体现出图标的质感与神秘感。实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。阅读文章 > 除上述这几种风格的图标之外，还有例如 2.5D、3D、像素风、新拟态…等，但在 UI 设计中并不常用，就不一一举例说明了。性格与气质1. 性格走向（描边/拐角）力量型：粗线条、直角拐点，给人一种力量、狂野的感觉，常用于体育、健身、机械类型的产品；可爱型：粗线条、圆角设计，看起来活泼可爱，给人舒适、饱满的感觉，在儿童、教育类产品中很常见；严谨型：细线条、直角拐点，看起来工整、严谨，中规中矩，适合政府、法律类型的产品；精致型：细线条、圆润的拐角，柔和、干净、纤细且精致的感觉，很适合极简风格的设计，在艺术、金融、珠宝等奢华类产品中比较常见。2. 动态效果如果想要突出金刚区、工具列表中的某个功能入口，将图标设计成动态效果，既能保持整体图标风格的统一、又能单独突出功能的重要性，起到强调的作用，用来吸引用户的注意力，引导用户操作，提升其点击率。切记动效图标不能过多，当什么都突出了等于什么都没有突出。其次，在年轻化、娱乐类型的产品 Tab 栏中的图标切换时，加入动态效果，可起到画龙点睛的作用，还能通过动效表达出不同的情绪，降低切换时的枯燥感，好的 Tab 动效能传达出整个产品的气质。超全面！大厂都在用的 Tab Bar 图标动效设计类型总结Tab bar 作为整个 APP 的第一触点，给用户传递的理念及信息在整个 APP 中具有不可替代的重要性。阅读文章 > 最后，如果有类似运营或短期内的活动，需要吸引用户注意但又不适合固定在界面中的某个位置，这时可以设计一个动态图标悬浮在设备某个位置（注意用户体验及交互原则），既不过多的占用页面资源，还能同时显示在多个界面，一举多得。动效图标：@墨染 ART 授权设计规范与流程遵循图标设计规范有利于设计师之间的合作及接下来的设计，以及产品整体图标风格的统一性，起到约束的作用，即便在更换设计师的情况下，也不至于出现较大的问题。在制定合理的设计规范前需要先了解图标到底有哪些规范，应从哪些方面入手，以便接下来的图标设计顺利进行。1. 网格尺寸比例为了保持图标元素的平衡，尺寸大小需要保持一致，通常我们会建立基础网格尺寸进行图标的绘制，常见的网格尺寸有 16、24、36、48、64、128、512、1024，这些网格尺寸并非固定，也会根据设计中的特殊尺寸而变化。一个图标系统包括网格尺寸和图标元素两部分，设定好网格尺寸后，就需要用 keyline 来约束图标形状的长、宽比例了。最终设计的图标大小并不是跟随网格尺寸，而是根据不同的形状占比受制于图标 keyline，最终形成统一的视觉大小。从上图中可以看出，相同尺寸的图标在真实的视觉中相差很大，这就好比一个 100 像素的圆形、跟 100 像素的方形相比，站在逻辑角度，大小是相同的，但在视觉上，一定是方形显得更大。所以我们常说的图标大小相同，并非真实尺寸，而是视觉感受。2. 图标 keyline为保持图标视觉上的一致性和平衡感，需要先绘制 keyline 用来指导、规范图标设计。keyline 由圆形、正方形、长方形-横、长方形-竖、三角形和对角线组成，网格的大小需保持 4 的倍数，便于不同尺寸的图标都能适配，可使用 24*24px 的网格尺寸为基准，其他尺寸的图标可通过增加倍数以此类推，如 48*48px、72*72px……下图是以 24px 尺寸的网格参考基准示例（出血为 2px）：3. 确定图标风格根据产品属性及目标用户并结合应用场景，找到最符合自身产品性格、气质的图标设计风格，例如健身应用属力量、粗犷类型，圆角、曲线适合女性产品等，在前面的「性格与气质」中有举例说明。4. 图标绘制经过图标风格的确定，图标细节便是接下来绘制过程的核心部分，对线性图标来说，注重的是线条的粗心，而面性图标则注重各小图形之间的距离，所以在绘制时，需要保持线条、间距的统一，方便后期的图标更新迭代。线性描边粗细我们以 iOS@2x 为基准（避免@1x 的 3px 描边变成 1.5px，小数点），可适配最 2px、3px、4px 最常用的描边粗细，4px 视觉较重，用于优先级较高区域的功能性图标，2px 看起来会显得更加精致，在设计中，还需根据产品的行业属性及调性来确定描边的粗细，并统一起来。面性正负形间距面性图标需要确保每个单独的形状之间有足够的间距，以 24px 大小的形状为例，其间距不能小于 1px，以此类推，虽然未规定上限，但间距也不宜太大，否则无法相互组合关联，以实际视觉的舒适度为准。5. 创意提取根据行业类型及风格进行创意设计，如线性统一断点、融入品牌基因、单个元素倾斜、节日氛围烘托、修饰元素等，为图标塑造灵魂或传递更多信息而进行的二次创作。如何强化图标设计的品牌基因？我总结了12个方法！随着互联网产品的不断发展，产品设计越来越成熟多样，而同质化的设计也变得越来越严重。阅读文章 > 常见问题及注意事项1. 识别性图标存在的意义，主要是为了快速传递信息，不能让其成了无用的装饰品。随着互联网的普及、时间的积累，人们对一些线上图标信息的隐喻已根深蒂固，早就形成了惯性思维，所以我们设计的图标必须要符合用户的认知，能让用户快速理解，即便出现个别特殊情况，也要用文字清楚的标注说明，否则一旦让用户产生疑惑，图标就起了负面作用，在很大程度上影响使用体验。符合认知的图标能让用户下意识的理解且接近心理预期，减少学习成本，提升使用效率。2. 简洁美观图标是将现实世界中的事件/事务用抽象的图形表现出来，如果过于追求完美而设计的太复杂，还不如直接上图片来的快，所以不能过于展现真实物品的细节，最终设计出正确而不失真的图标尤为重要，这样既能用于传递信息，又便于用户快速且清晰感知。3. 视觉对齐为确保视觉平衡，异形元素在使用系统自动对齐后，会有一定的偏差，需手动微调进行视觉对齐。为什么你的图标看着不舒服？如何打造视觉平衡：正确的尺寸+视觉对齐+完美的圆角修饰。阅读文章 > 4. 保持一致针对大型项目，要想整个家族的图标更加和谐，保持相同的样式及设计原则着实不易，尤其是在多人完成设计的情况下，事先有一个清晰的设计原则和规范是必不可少的。图标都有着对应的视觉重量，例如描边粗细、填充模式、繁简程度等属性，需要做的就是控制好这些关键因素，让整体看起来视觉重量相同且能相互关联组合到一起，保持所有图标的一致性。5. 最小间隙单个图标的各元素之间要有呼吸感，需要适当的留白，如果描边过大，整个条看起来感觉像糊成一团或臃肿不堪，如果存在类似问题，可通过减小描边值或降低图标的复杂程度来解决。6. 使用 2 的倍数以偶数为单位的设计便于数据的计算（2 的倍数），例如正负形间距、描边值等，在 iOS@2x 设计下，@1x 也不会出现小数点。在移动端设计中，最小的图标为 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的数值，因此，可灵活的等比缩放。7. 延展性即便做好了前面的一切，图标设计工作也并未完成，需要做的是持续测试图标的可用性，做好后续的完善与优化，没有最好、只有更好，以确保上线后的效果和后续的迭代。图标资源库阿里巴巴矢量图标库： https://www.iconfont.cn/ ，90%以上常见的矢量图标下载；飞书官方图标库： https://iconpark.oceanengine.com/official ，海量资源可在线修改，调整描边、填充、单/双/多色、端点后下载 SVG 格式图标。虽然上述图标资源基本能满足我们的日常设计所需，但仅仅只能是作为参考而已，一味的图方便、投机取巧只会毁了自己的动手、创新能力。结语图标设计是一个非常庞大的版块，且有很多个分支，例如：金刚区、标签栏、应用图标…等，每个分支都有自己的一套设计法则，我们需要在不断的学习与创新中获得更多经验。一篇文章不足以道出图标设计的精髓，但可以在不断沉淀、相互探讨、持续的学习中一起进步。下篇「图片」文章再见。欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/basic-guide-to-icon-design
图案 图标 背景 Icons Pattern 是免费图标库「Flaticon」提供的在线工具，协助用户以喜欢的图标设计出独特的背景素材，可使用于手机、移动设备背景或是做为社群网站背景，也能调整每个图标尺寸大小、位置、不透明度、旋转方向和背景颜色等等，最终产生为 PNG、JPG、SVG 三种主要格式或 Base64 编码，下载前设定尺寸和图片大小。值得一提的是 Icons Pattern 产生的素材图案为无接缝图案（seamless patterns），只要小张的图片、重复拼接显示就能制造很漂亮的效果，而且符合各种尺寸和使用情境，我之前介绍过类似的无接缝图片产生器工具：想快速绘制出好看背景？用这个神器一分钟搞定！本文要推荐的「Everypixel Patterns」是最近新推出的在线工具，可以协助设计师产生更具个人化的图案，这些图案都是无接缝图案（Seamless patterns），对于要获得创作灵感、或产生全新图案来说都很有用，制作后直接从网站就能下载 SVG 向量图和 PNG 两种格式。阅读文章 > Icons Pattern 图标素材来源为 Flaticon 网站，网站本身就已收录超过 200 万个图标图案，不过并非每个图案或图标集都能免费使用，如果标示为 Premium 代表需要付费解锁，还好免费范围已有不少选择，有兴趣的朋友可以自己去动手玩玩看。想寻找类似于上图的手机背景但又没有合适的选择吗？不妨打开 Icons Pattern 工具自己制作一个吧！Icons Pattern by Flaticon网站链接：https://www.flaticon.com/pattern/使用教学开启 Icons Pattern 网站会看到简单三步骤教学，首先搜索、找到你要使用的图标，点选后将它加入并调整尺寸、颜色和背景，最后点选「下载」就能将设计输出保存为特定格式。从左侧选单点选搜索，找到特定的图标集或图标图案，点选就会新增到图片编辑区，也可以使用最下方「Random pattern」随机加入排列。很有趣的是 Icons Pattern 加入的素材可以进行进阶调整，像是配色、阴影、不透明度等等，不喜欢的话点选右下角「Clear」就能清除重来。点选左侧的调色盘设定图片背景颜色，调整后会实时显示于网页右侧编辑器。编辑完成后点选左下角「Download」绿色按钮保存图片。下载前可选择格式：PNG、JPG、SVG 或 Base64 编码，可设定图砖和图片大小，点选下方的绿色「Download Pattern」就能下载并取得图片啰！值得一试的三个理由：免费图标网站 Flaticon 提供的在线工具，以图标设计出独特背景图产生的素材图案为无接缝图案，只要重复拼接即可制造漂亮效果下载为 PNG、JPG、SVG 三种格式或 Base64 编码为什么我10秒就可以做出漂亮的背景图？有这个神器你也行！有时候我们需要一些好看的背景素材，时间一紧张可能就做得不咋地，没关系，今天给大家推荐一个自动生成背景纹理的网站。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/icons-pattern
在路上
表哥
张大湿
飞翔的企鹅
落霞与孤鹜
