我们每天都在设计图标,并且保持这样的状态超过15年。身为设计师,想必你已经阅读过很多关于图标设计的文章,但是今天的文章不一样。

今天的文章不会花费很长时间来单独介绍某一个图标的设计。而是设计任何一套图标应当遵循的基本流程,以及一定要注意的8个关键的注意事项,你可以将这些经验带入到一些现成的案例当中去验证。

这个注意事项清单,也可以被视作为给设计师所编写的图标设计指南,即使设计趋势发生变化,这些规则和经验依然适用。遵循这些规则和技巧,能够确保图标从设计到使用都可以更加无缝和顺畅。

当然我们并没有重新发明轮子,相反,我们会以这种方式来呈现我们的工作流程细节,希望它也能帮你有效地组织工作。

循序渐进地设计图标

像我们需要系统而大量地设计图标,设计流程是最重要的事情。正如你所看到的,绘制流程在图标绘制之前,就已经开始了。

1.了解你要创建的图标的含义。明白不同图标的使用场景,不同的图标分别代表着什么,了解哪些图标需要使用隐喻,哪些图标使用现实世界中真实的形象。

2.梳理出图标正确的隐喻,脑暴出可能的符号和形象。记住图标的含义和形象之间的关联,以最佳的形式呈现图标,直指本质。

借助词典和单词集来获取图标相关的概念的关键词,同义词和定义。简化和抽象你的想法,你会找到一个抽象概念「翻译」出来的对象。

3.不要拘泥于现在当前的任务和状态,尽量进行彻底的调研,尽可能地搜集相关参考资料。可能有人已经为这一主题设计了很不错的图标版本,可以参考已有的设计,获取灵感。

4.确定图标的样式。图标应该是扁平的,线性的,Material Design,是用符号还是借助手绘来呈现。有的 UI界面有很清晰的要求,比如 iOS 平台和 Material Design,如果 UI 有非常清晰固定的设计风格,那么图标的设计需要尽量贴近。

5.按照选定的方式来呈现设计,看看它最终呈现是否正确。保持整体设计的一致性。

6.注意图标要矢量化,连基本的草图都应该是矢量化的。

7.在 UI 布局中测试图标的设计。

Icons8 的实战案例

按照上面的流程,能够绘制出不同样式足够优秀的图标合集。下面是我们在这样的流程下所设计出来的图标示例。

▲ Material, Outline: Science and Studies Icons

▲ Carbon Copy: Animals

▲ Nolan Icons: Aging

注意事项清单

如果你像我们一样每天设计图标的话,也会碰到各种各样的问题。其中最重要的是下面的注意事项清单,它们能够确保我们不同的人在不同的时期不同状态下,设计出来的图标能够协调到一个主题、一个系统当中。如果你也要设计图标的话,可以将下面的清单打印出来,贴在自己的桌子旁边作为参考。

1. 像素完美

让图标踩在每个像素点上,确保清晰不模糊。

2. 视觉重量

用斜视的方法来感知图标,看看成套的图标是否都具有相同的大小。斜视、调整、再看、再调整,直至均匀理想。为了保持总体视觉重量的一致性,我们会使用「完美的圆形和正方形」来和所有的新图标进行对比。

3. 几何图形

尽量使用简单坚实的几何形状来绘制所有必要的线条,它们会让你的图标显得更加牢固可靠,具有吸引力和说服力。

4. 清晰简洁

删除所有无法传达图标概念的细节,避免让图标显得沉重而复杂。

5. 足够的空间

确保图标内每个细节和元素都有足够的空间,不会显得过于拥挤或者空旷。

6. 对比度

在黑色和白色的背景上检查图标的全部细节,看看是否其中的每种颜色都是可见的,以及元素之间的对比是否足够。

7. 视觉统一

检查线条的粗细重量,边角的大小,配色方案,细节层次和设计元素在整个合集中是否是不变且一致的。

8. 图层排序

确保图标中图层顺序清晰而规整。这是一种良好的习惯和专业的精神。

希望以上内容对你学UI设计有一些帮助,感谢你一直关注UI设计思维,我们将一如既往的为你分享各种UI设计经验文章和提供高质量的UI设计培训学习服务,帮助你快速成长,让你的设计变得更有价值。

vb.net 获取系统图标_微商城和小程序商城图标8个设计注意事项相关推荐

  1. 带你认识微商城和小程序商城以及APP商城电商解决方案的区别

    随着移动互联网的快速发展,越来越来多的企业开始在移动互联网布局,而移动电商也成为当代的标志名词.微商城.小程序商城.APP商城等移动端日益火热,受到越来越多的商家喜爱.那么,它们又有哪些区别呢? 一. ...

  2. 关于网站、微商城和小程序制作教程指导协助说明

    关于网站.微商城和小程序,甚至系统自带的宣传海报系统的操作使用步骤,我们都一一进行提供专业教程指导,目的只有一个让各位网友自己熟练掌握,多项技能,少花费用. 定力不足,半途而废 但是,我们逐渐发现不少 ...

  3. 判断 小程序_社区团购小程序商城系统,可以从哪些方面判断?

    原标题:社区团购小程序商城系统,可以从哪些方面判断? 社区商城系统属于电子商务行业品种,有数据表明发现,有72%的客户是通过网络渠道了解服务商.了解产品.了解行业的,那么你要做的就是在网络中辨识真伪. ...

  4. 企业微信小程序可用存储空间不足_如何用微信“小程序商城+企业微信”,搭建企业智慧新零售系统?...

    许多企业或是个体商家,都做了微信小程序商城,或者是正打算做小程序商城,但是对于小程序商城开发制作好之后的运营却是一头雾水,不知道怎么运营.今天我们说一说"微信小程序商城+企业微信" ...

  5. java代码实现购物车小程序_使用Taro实现小程序商城的购物车功能模块的实例代码...

    Taro 是一套遵循 React 语法规范的 多端开发 解决方案. 现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的 ...

  6. 小程序获取用户手机号_社区团购小程序应该如何推广才能获取更多用户?

    如今社交裂变已成为时下最流行的引流方式,而最好用的社交裂变工具无疑是拥有巨大用户量的微信小程序了.那么作为开展社区团购的有效工具,社区团购小程序应该如何推广才能获取更多用户呢?今天赤焰信息就为大家解答 ...

  7. python实现宿舍管理系统_基于PYTHON微信小程序的病历管理系统的设计与实现

    好程序设计擅长JAVA(SSM,SSH,SPRINGBOOT).PYTHON(DJANGO/FLASK).THINKPHP.C#.安卓.微信小程序.MYSQL.SQLSERVER等,欢迎咨询 今天记录 ...

  8. 怎么查电脑系统版本_查中考分数线小程序功能更新,填志愿必备参考

    中考查分小程序功能: 可以查近10年上海16个区的零志愿,名额分配,1-15志愿分数线等功能,纵向查历年各区的分数线,以学校维度横向查单个学校所有分数线,版本以后会陆续迭代 这个版本更新内容: 小程序 ...

  9. springboot审核功能怎么做_开发的微信小程序商城怎么利用分销功能做营销

    现在很多客户开发小程序商城的情况,不仅是需要做在线支付,还要做分销功能等,因为这些方式可以帮助产品直接从生产商到消费者的转介,现在互联网这个发达,商家可以通过小程序分销商城借助好友关系进行传播,现在很 ...

最新文章

  1. 你的每个哈欠老板都知道!被AI摄像头全天盯紧,亚马逊快递小哥不干了
  2. 为JS和C#类加一个扩展方法吧:P
  3. hibernate的inverse用法
  4. CISCO PVST+配置和结果验证 per vlan spanning tree(51cto 实验10)
  5. Android mock for循环,Android单元测试(五):依赖注入,将mock方便的用起来
  6. 使用Maven搭建Struts2框架的开发环境
  7. 拓扑排序——杂物(洛谷 P1113)
  8. php pdo 新建数据库,php – 使用PDO数据库类而不是每次都创建新...
  9. linux rdate
  10. django框架搭建网页后台,运行后网页打不开的解决方法--windows系统下
  11. sql server 2000 打了sp4补丁包仍不能监听1433端口问题的解决
  12. 如何用金山打字通等软件练习准确地打JAVA语言
  13. 2014Gartner技术成熟度曲线
  14. w10如何共享计算机硬盘,电脑在win10系统下设置局域网内磁盘共享的方法
  15. ios logo 启动页大小
  16. word删除空白页面
  17. 背景图片background
  18. 秋招斩获所有互联网大厂面经之算法
  19. Java第二课:图形界面(实现QQ登陆界面)
  20. python的简单使用_用python简单处理图片

热门文章

  1. 手机服务器缓存在什么位置,手机服务器缓存设置方法
  2. 用python写期货程序-python如何运用在期货(我用python做期货)
  3. Markdown 编辑阅读器
  4. Camstudio-免费的屏幕录像软件中文版下载使用教程:
  5. 《Adobe Flash CS5中文版经典教程》——1.7 使用“工具”面板
  6. 服务器Raid级别调整
  7. iframe异步提交
  8. SMBus协议与IIC协议区别
  9. 使用stm32 定时器TIM3 的重映射引脚 捕获正交编码器数据的一些积累
  10. C#笔记(学生管理系统实战 - 用户登录)