ICON制作如何保持一致性?

用户头像
广州/设计爱好者/7年前/1388浏览
ICON制作如何保持一致性?

主要针对图标视觉比重问题解决方案!

一、图标重要性


图标,在一个APP界面中占据的面积并不大,但是方寸之地却承担了APP大部分的引导入口,是UI设计中至关重要的一环。好的图标才能给界面更好的体验,以及符合客户的APP品牌要求。


设计一个图标不难,但是设计一套图标时难度升级,其中我们要注重的点在于:

  1. 大小统一

  2. 风格一致

  3. 留白一致

  4. 简洁明了


二、图标制作不一致?


首先我们来对基本图形的视觉比重有一个认知,比如我们在下面同样大小的背景下制作图标,如图:

分别画上正方形、圆形、三角形,如图:

结果如上,我们会发现正方形 > 圆形 > 三角形,造成这样的原因是由于留白不统一,也就是视觉比重不统一,进而造成统一大小背景却画出不一样大小的图标,你们这个问题该如何解决呢?


三、制作具有统一性的ICON


(1)以制作大小为128PX的图标为例,首先制作图标辅助图形,可以以1PX为单位的单元格(外正方形描边1PX,内外正方形四周距离1PX)、3PX为单位的单元格(外正方形描边3PX,内外正方形四周距离3PX)、或4PX单元格(外正方形描边4PX,内外正方形距离4PX),单元格像素越大,做出来的图标错落感会强些,单元格像素越小,图标更稳定些。如图所以进行制作:

(2)在辅助图形上应该遵行的规则如下:

正方形:边长为内部正方形的边长;

长方形:宽为内部正方形的边长,高为外部长方形的高;

圆形:直径为外部正方形的边;

多边形:抵外部正方形的边长;

(3)牛刀小试一下:

最后,利用这样的辅助图形制作出其他具有大小统一,风格一致的图标,如下(是不是很简单啊,简单就对了,赶紧也去试试吧)







27
举报
|
38
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
我的钱包-UI界面设计-app
UI_3D图标火箭炮<新春促销>
矢量立体简约UI蓝白图标
科技医疗透明柜UI界面设计
【新年UI图标】珠宝icon
Security Camera UI kit
【新年UI图标】游戏/娱乐icon
【新年UI图标】家具icon
UI 登录界面设计模板包
【新年UI图标】30个图标
UI通用设计素材1
高级表盘系列UI源文件
新拟态风格 UI设计组件库
【新年UI图标】影音icon
高级感金属拟物 UI设计组件库
【新年UI图标】酒店icon
UI界面 组件
【新年UI图标】美食icon
新能源APP应用UIKit
UI_3D图标炮仗<新春促销>
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
盲盒APP UI设计
【新年UI图标】美妆icon
智能家居中心 简约 UI设计组件库
你可能喜欢
大家都在看
登录注册