UI系统图标设计规范自学之路

 刚开始自学UI,想着画各种图标,各种界面,但是,开始连基础的线性图标都画不好,大小参差不齐,线条有问题,曲线像素错误。经过一堂深刻的自学课程,终于明白如何画好系统图标,线性和面性图标。另外感谢王铎老师经典课程。

 下面我来抛砖引玉,自己将一点心得展示。

 首先,做好UI图标规范,有48.32.24三种等级图标,我以48乘以48像素为例。给每个图标背景做三种规范,48,44,40三个矩形框。试想一下,要让图标大小统一,应该是保证图标的实体面积基本上一致才能统一。

图片发自简书App

 圆形用48*48,方形44*44,长方形用40*48,这样,从视觉效果上能达到基本统一。

 下面,新建文件,记得在首选项和路径项都要选上像素对齐。描边绘制要统一用外描边,圆头,拐角圆,保证风格一致。我采用外轮廓用2像素,内结构用1像素。下图设置:

图片发自简书App
图片发自简书App

  绘制图标时候,灵活作用钢笔,锚点移动,像素对齐。肯定能得心应手。下面是我做得一些,个人感觉后面的还是会有些大小不合适,需要再改进。

图片发自简书App

图片发自简书App

图片发自简书App

图片发自简书App

谢谢。有不好的多提意见,大家一起交流学习,一起进步。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容