[[icon 综合画布.canvas]] [[图标 ICON 视觉风格总结.canvas]] 看我的Figma吧。 ## 设计原则 ### 图标识别性，尽可能的简单、 - 人脑不喜欢复杂的结构。 - 美团面试官提问，我觉得蛮有道理的，识别性最重要。 - 关于图标的含义，千万不要觉得自己熟悉，用户就熟悉，我们看了太多的图标了，用户可不觉得。 创建一个易于识别、高度简化的设计。过多的细节可能会使界面图标变得混乱或难以辨认。努力实现一个简单、通用的设计，大多数人可以快速地识别。一般来说，当图标使用与它们发起的操作或所代表内容直接相关的熟悉视觉隐喻时，它们能够最好地发挥作用。 #AppleGuidelines ### 风格的统一 - Maintain visual consistency across all interface icons in your app. #AppleGuidelines -  - **In general, match the weights of interface icons and adjacent text.** Unless you want to emphasize either the icons or the text, using the same weight for both gives your content a consistent appearance and level of emphasis. 通常情况下，匹配界面图标和相邻文本的字重。除非你想强调图标或文本中的任何一个，否则两者使用相同的字重可以使你的内容具有一致的外观和强调程度。 - **光学对齐。** - 如果需要，可以添加填充来实现自定义界面图标的视觉对齐。一些图标 - 特别是不对称的图标 - 在几何居中而非视觉上平衡时可能看起来不平衡。例如，下面显示的下载图标在底部具有更多的视觉重量而不是顶部，如果它被几何居中，则会使其看起来太低。 - 尺寸对齐 - 光学调整 - 调整后，视觉上更加居中了。 ### 利于拓展 例如想好一种组合形式 ## 最佳实践 ### 利于交互 尤其是移动端 ### 视觉风格的一致。 [[图标 ICON 视觉风格总结.canvas]] #### 和文字搭配时 #### 一样的描边重量 #Google  #### Vertical centers  ### 考虑低分辨率屏幕 大多数用户并非高清显示屏，不能为了自己舒服，忘记用户。 ### 相似的图标不要放在一起 很容易造成误点，除非有颜色区分，我在 C3 当中，经常把社区当成报表。 ### 像素对齐 #### 来自 sketch 用居中对齐来画图标可能会更好，因为未封闭的图标，会自动变成居中对齐。 #### 来自微软 注意是图形的像素对齐，而不是路径。这样才能保证在低分率屏幕中清晰。 ![[Pasted image 20210112232756.png|400]] #### Google  ## 图标含义思考 - [[常见 Icon 含义记录]] ### 线性和面性的区别？ #### 结论 - 面性图标识别性＞线性图标 - 人的大脑在识别线性图标时，会比面性图标更显吃力 - 面性图标的引导性要强于线性图标； - 实图标承载的信息相对更重，参考选中状态。 #### 面性图标 - Medium 上有作者做过实验，面性图标的识别度性强于线性图标。 - Ios app store 中，也是 ios8 开始从线性转成了面性图标。 #### 面性图标 - 线性图标的装饰性更强一些。 来源：[面性图标与线性图标的区别？|UI|观点|呆总丶 - 原创文章 - 站酷 (ZCOOL)](https://www.zcool.com.cn/article/ZMTA3OTQ3Ng==.html) ## 寻找图标资源步骤 ### 线性图标 - [[remixicon]] 无路径，但是经典 - [[iconpark]] 字节 - Iconly ### 插画类图标 - [[Flaticon]] - [[icon8]] 本地客户端 - [[Iconfont]] - [[Iconfinder]] ## 第三方管理工具 [Notion列表](https://chichibin.notion.site/B2C-f0049c5443eb4c189ca012faeab02fe6) ## 图标设计文件管理 ### 竖排+名字 我个人是比较喜欢这种，看到名字感觉更有掌控感？ 来自[CoolIcon](https://www.figma.com/file/QsVKsh1GaXA7cchKcmJ3P9/coolicons-%7C-Free-Iconset-(Community)?node-id=79%3A40) 来自Untitled UI  ### 来自 Phosphor Icon 也比较常见，但是看不到图层名字。  ## 资源 ### 图标生成 #### 所有风格icon [Project - Recraft](https://app.recraft.ai/project/e5d9ce97-7213-430a-9444-bee685bc5bf2) #2023-6 #ai生成icon 最新发现的。这类产品以后估计会很多吧。  #### 应用icon 一键生成 ios 安卓 web 等平台的应用图标 [IconKitchen](https://icon.kitchen/) ![[Pasted image 20211101123801.png]] ### 教程 - [Icons – Material Design 3](https://m3.material.io/styles/icons/applying-icons) #Google - [Icons - Foundations - Human Interface Guidelines - Design - Apple Developer](https://developer.apple.com/design/human-interface-guidelines/foundations/icons) #AppleGuidelines - [Icon 图标 - TDesign](https://tdesign.tencent.com/design/icon#header-14) - 腾讯设计中心的文章，说的也不错。 - [重新审视图标中的细节](https://mp.weixin.qq.com/s/3F8cgRgHSV0Y4SoD9AlHBw) - 微信 #公众号/WEDESIGN ，的文章，质量不错。 - [[设计资源与工具#图标教程]] - [Inside Sketch: how we redesigned our toolbar icons for Big Sur and Monterey · Sketch](https://www.sketch.com/blog/2021/10/14/how-we-redesigned-our-toolbar-icons-for-big-sur-and-monterey/) Sketch 官方重设计图标的心得，提到使用居中对齐来画图标，会更好。因为未封闭的图标，会自动变成居中对齐。 - ![[Pasted image 20211025160303.png]] ### 设计资源 - [Doodle icons – Figma](https://www.figma.com/community/file/1019353050314527791) 可爱的手绘线性风格图标 400+ - [Iconsax](https://iconsax.io/) 有 figma 文件，6 种不同风格每个图标。 - 谷歌官方的 figma 文件，用[[变体]]做了不同风格，很给力。 - [Hicon (Free icon pack) - +2700 Editable icons – Figma](https://www.figma.com/community/file/1023171235158207826) 一组比较可爱的线性图标 ![[Pasted image 20210925124925.png]] #圆润 #线面性 #黑白模式 ### 动态类 [[设计资源与工具#动态类]] ### 图标交付 - [【第2148期】Figma + Gitlab CI 一键交付 SVG 多色图标库](https://mp.weixin.qq.com/s/-aWtVV3nnig_-kHW2h2Pcg) ### 待归类 - 大家有没有把 svg 图标变成 ttf 的常用方法 <https://icomoon.io/>