最实用--UI图标设计规范
杭州/UI设计师/4年前/2559浏览
版权
最实用--UI图标设计规范
作为一名 UI 设计师,图标设计是我们刚入门就必须学会的必备技能之一,它是用户界面中不可或缺的元素。

UI界面中图标种类为启动图标和工具图标
启动图标,就是一个APP的logo和启动按钮。设计启动图标,就是在一个固定的图标区域中设计一个具有图标寓意和品牌特征的图形。
我们常见的启动图标类型包含下面这些类型

启动图标输出尺寸
默认的情况下,我们使用 1024×1024 尺寸来设计启动图标,这个参数在 iOS 和 Android 中都适用。x 的屏幕中,图标使用 60x60px;在 2x 的屏幕中,就使用 120x120pt;3x 则是 180×180px。

工具类图标,在应用中有明确功能,提示含义的标识作用。
我们常见的工具图标类型有线性图标、面性图标、视觉图标(拟物化图标、轻质感图标、3D图标)。

线性图标常见的以下几种类型

线面图标常见的以下几种类型

面性图标常见的以下几种类型

视觉图标常见的以下几种类型

图标输出规范
图标输出尺寸
绘制工具类图标一定要确保所有的图标都相同大小。在UI界面设计中,网格的大小必须要是4或12的倍数(安卓是8的倍数,iOS是4的是倍数)。@2x下作图要保证是4的倍数,这样可以整除2,适配@1x的屏幕;@3x下作图就需要是12的倍数了,这个数值可以整除2、3、4,适配@1x和@2x的屏幕,界面中通常使用的图标尺寸24*24px、48*48px。

图标命名规范
ICON 命名要求较为严格,涉及到我们切图给开发,所以我们命名争取做对,且需严格遵守规则,正确的命名原则:类型_位置_功能_状态_大小

图标输出尺寸规范源文件:链接: https://pan.baidu.com/s/1ZFgZCS1t91paWk3sS_UpWg 密码: 6w2v
28
Report
声明
80
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
You may like
相关收藏夹
Log in
28Log in and synchronize recommended records
80Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share













































































