ICON规范图是什么样

ICON就是图标的意思,对于UI设计师来说,每一个ICON看似很平常,实际上它都是有一个必须遵循的规范要求的,这样才能够保证整个项目视觉上的统一,那么ICON规范图应该如何绘制呢?

操作方法

  • 01

    这里我们以sketch软件为例来进行了解,当然你也可以使用PS/AI,任何软件都是可以的,看自己的操作习惯。

  • 02

    首先我们来绘制最外层的图形,最外层的图层是一个正方形,高宽都是44px。

  • 03

    为了方便观察我们将填充给关闭掉,并且需要注意,最外层的图形描边方式为外部。

  • 04

    接下来我们继续进行绘制,绘制一个42px的正方形,这个范围内就是我们图标绘制的安全区域。

  • 05

    42Px的方形描边方式为内部,如果仍然是外部的话就会有重叠了。

  • 06

    接下来我们绘制一个同42px相同的圆,将圆和42px正方形居中对齐,描边方式为内部。

  • 07

    接着我们再绘制一个42px宽,28px高的矩形,关闭描边开启填充,与图形居中对齐。

  • 08

    再复制一个42px宽,28px高的矩形,与图形垂直居中对齐。

  • 09

    最后我们再绘制一个36px的方形,居中对齐,描边方式内部,这样我们就绘制好了ICON规范图,在绘制ICON的时候尽可能不要超过红色区域。

(0)

相关推荐

  • 想提高面试通过率?回答好这10个问题征服面试官

    之前UI黑客发表了一篇叫<面试了50多位UI设计师,我总结了这些求职技巧>的文章,在网上得到很多设计师认可,感谢各位支持. 文章列举了我在面试的时候经常问的三个问题,但是没有进行详细解答. ...

  • U享会|小程序专场(下)-产品案例分析及设计需注意的“坑”

    上一篇<小程序专场(上)>,通过对小程序业态分析及结合相关案例分享,详细介绍了小程序裂变的相关内容.而本篇文章,主要介绍的是:告诉大家如何搭建一个完整且优秀的小程序产品,以及你在开发小程序 ...

  • 利用SKETCH创建彩色开关

    @呼啸而过Charles :Sketch是Mac平台上超火的图片处理软件,功能强大,并且比起PS它更加轻量级。感谢Sebastien Gabriel,本教程由他制作。下方是最?效果。不赘言,直入主题。 ...

  • 开发协作-切图类别与规范

    切图标注作为连接UI设计到技术开发两者的工作模块,缺其不可.合格的.严谨的切图可以大大减少技术人员开发返工率. 一个互联网产品从构思到落地,大致分为以下环节: 发现商机 – 市场调研 –  头脑风暴 ...

  • APP界面切图命名和文件整理规范

    规范的命名方式可以提高客户端程序员的开发效率和团队协作.个人觉得标识符命名原则:尽可能的用最少的字符而又能完整的表达标识符的含义. 切图命名英文缩写三个原则: 1 较短的单词可通过去掉"元音 ...

  • 如何规范图表的适配—— 以环形图为例

    越来越多的设计师通过组件的方式支持业务需求,组件是设计的沉淀但同时也需要设计师对每一个细节场景的深入思考.本文通过探索常用三大图表之一的环图适配问题,总结图表适配的一般方法. 01了解环图 了解环图之 ...

  • 企鹅汇图地点采集拍摄规范

    企鹅汇图地点采集拍摄规范,列出一些例子,帮助大家看看自己拍的照片是否能够通过!使用企鹅汇图的朋友,一定很纠结自己拍的到底能不能通过吧,明确了规范,才能拍得舒心,放心!本篇,可以告诉大家,企鹅汇图的拍摄 ...

  • 用「8点网格」来规范你的设计

    8点网格流行有一段时间了,我最早知道这种设计方式是在看了谷歌的Material Design设计规范之后开始认识这种设计方式的.发现这种设计方式实在是太适合我这种理科出生的设计师了,所以在这里也给大家 ...

  • UI日常-切图切图怎么破?

    作为一名"小小"的UI设计师,切图可以说是我们日常工作的必修课.一些设计师认为切图规范不重要:或是切图是设计助理的活:又或者是单方面认为,开发应该100%的按照我们的切图去写代码. ...