旗下产业: A产业/ A实习/ A计划
全国统一咨询热线:010-5367 2995
首页 > 热门文章 > UI设计 > UI设计中的图标设计指南
UI设计中的图标设计指南
时间:2020-08-14来源:www.aaa-cg.com.cn点击量:作者:Gella
时间:2020-08-14点击量:作者:Gella

  这是一个注意事项清单,也可以被视作为图标设计指南,即使设计趋势发生变化,这些规则和经验依然适用。遵循这些规则和技巧,能够确保图标从设计到使用都可以更加无缝和顺畅。今天AAA教育郭老师就针对UI设计中的图标设计指南进行简单的说明一下。
 

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

 



 

  循序渐进地设计图标
 

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

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

  梳理出图标正确的隐喻,脑暴出可能的符号和形象。记住图标的含义和形象之间的关联,以最佳的形式呈现图标,直指本质。借助词典和单词集来获取图标相关的概念的关键词,同义词和定义。简化和抽象你的想法,你会找到一个抽象概念「翻译」出来的对象。
 

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

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

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

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

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

  Icons8 的实战案例
 

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

 



 

  图标设计

 



 

  动物图标

 



 

  老式图标
 

  注意事项清单
 

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

  1. 像素完美
 

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

 



 

  2. 视觉重量
 

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

 



 

  3. 几何图形
 

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

 



 

  4. 清晰简洁
 

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

 



 

  5. 足够的空间
 

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

 



 

  6. 对比度
 

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

 



 

  7. 视觉统一
 

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

 



 

  8. 图层排序

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

        总结

       想要让 图标设计更加优秀,其实在很多时候都需要在细节上打磨即可。郭老师之前也分享过《2020年UI设计的10个趋势》、《UI设计中评论区设计指南》、《UI设计中启动页的三种设计类型》、《UI设计中响应式设计技巧》等,类似这样的方法有很多,后面我还会继续补充。如果你想了解更多的知识,请把问题留言给在线小姐姐,我会进行一一解答。想看更多,敬请关注AAA教育官网。



 

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可先就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可推荐就业!

©2007-2021/北京漫动者教育科技有限公司版权所有
备案号:京ICP备12034770号

老师想和你聊一聊

©2007-2021/ www.aaa-cg.com.cn 北京漫动者教育科技有限公司 备案号: 京ICP备12034770号 监督电话:010-53672995 邮箱:bjaaa@aaaedu.cc

京公网安备 11010802035704号

网站地图