MIUI论坛 下载APP

荣誉元老

Rank: 8Rank: 8

积分
35248
机型
小米手机3/4 WCDMA版
签到次数
149
MIUI版本
5.12.17
私信

MIUI七周年小米六周年MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI 7MIUI五周年小米平板首发纪念勋章小米手机3终身荣誉勋章MIUI三周年百万壁纸关注微信极客勋章完美图标纪念勋章关注腾讯微博关注新浪微博MIUI 100周VIP贵宾

[评测] 完美图标制作——MIUI V5“完美图标”浅析

[复制链接]
35937 70 |
2013-3-7 18:09 | 来自PC
| |
|
跳转
本帖最后由 hanyuo_o 于 2013-5-1 13:27 编辑

  MIUI V5发布之后,启动了“完美图标”计划,就是将第三方图标重新绘制一遍,让第三方图标如同系统自带图标一般,和MIUI整体风格高度契合。工程量巨大有木有!!因此需要大家群策群力,贡献出自己的一分力量,一同完成庞大的“完美图标”计划!那么我们绘制图标应该注意哪些问题呢?下面谈谈我自己的看法~

一、图标分类

  首先我们先来对系统图标以及官方绘制的200个第三方应用图标做一个简单的分析~
根据这些图标的特点,大体将这些图标按风格分为4种类型~

1.拟物型

此类图标的特点是根据实物的形象进行艺术化的二次加工

1.png

2.抽象符号型

此类图标的特点是根据应用的特点以一种抽象符号来表示,如“音乐”用音符表示。

2.png

3.二次加工型(主要针对第三方应用)

此类图标的特点是根据第三方应用的原始图标进行适当的二次加工(颜色、阴影调整等),使其具有系统图标的一些风格。

3.png


4.本色型(主要针对第三方应用)

此类图标基本与第三方应用原始图标相同,主要是针对图标规格与系统进行匹配

4.png

二、图标效果分析

1.就形状来说,V5系统的蒙版将图标统一为圆角矩形。

2.就图标样式来说,针对第一、第二、第三类图标,主要有以下几点共同点,如下图。

5.png

一个图标主要由以上几部分构成~


具体的实现方式是:

6.png

其中,蒙版是由系统自动完成的,因此需要我们绘制的部分就是图标的底版



三、图标绘制

通过以上分析,我们对于第三方图标的处理主要有两种方式(第三类和第四类):

一种方式如第三类图标的处理,是对第三方图标进行二次调整加工,使其具有系统图标的部分风格。由于V5的图标为圆角矩形,因此图标素材可以借用iOS版软件的图标进行修改。如UC浏览器的图标,对主体图案添加阴影。

7.png

第二种方式如第四类图标,主要针对iOS版的图标进行调整使其符合规格(扩展圆角矩形使其成为直角的矩形),下图以会说话的汤姆猫2为例说明。

8.png

因此,在我们自己绘制图标时,可以根据图标特点,可以向系统图标风格靠拢的选取第一种方式,根据iOS版图标进行二次加工(如UC浏览器),无法靠拢的就选取第二种方式,对iOS版图标按系统规格进行匹配(如Talking Tom2)。

下面是我自己绘制的一些图标:

9.png
10.png
11.png
12.png


四、扩展性

完美图标的出现,一是为了统一图标的样式,是桌面更加美观。二是为了有一定的扩展性,可以设置不同的系统蒙版任意变换图标形状,为主题制作者提供便利。下面我们来看看绘制好的图标的扩展性吧~~
13.png


通过上图可以看出,类似Talking Tom2的带有明显边框的图标扩展性稍有不足,变换图标形状时出现了些许问题导致美观度下降。因此,为了扩展性更好,我们绘制图标时应首选绘制无边框图标。


五、绘制过程中可能出现的问题

首先看一下要求:

22222.png

通过上图可以看到,图标的规格要求为
136px*136px
全填充(对于米1/1s来说是90px*90px),不允许有透明像素,并且虚线框区域为裁切区域,图标主体部分不可太大,否则会被裁掉。

14.png



以上就是我对“完美图标”的一些简单分析,不妥之处请大家多多包涵~~欢迎互相多多交流~~大家快去绘制图标吧~~!!!^_^

收藏43 分享  

已有 16 人评分 经验 威望 理由  

林立霖 + 3 感谢分享^_^
流颜菲雨 + 1 感谢分享^_^
e族汉编 + 1 分析的很好
Julone + 1 MIUI 因你更精彩!
晓茜 + 10 我也就是来看看,学习学习!
祥灬哥 + 10 + 1 感谢分享^_^
缺氧丶 + 1 精品文章^_^
小米脆脆酥 + 10 + 3 不顶不行!
哇哇卡西 + 10 精品文章^_^
幸福婴儿 + 10 + 3 竟然有写这么好的贴子!
秋阳西艾 + 4 必须加分
Kurtis614 + 2 MIUI 因你更精彩!
米二姐 + 10 MIUI 因你更精彩!
tom5 + 5 支持有分析的指导
、Stamina + 5 技术男!
7he_devil + 5 MIUI 因你更精彩!

经验 +88  威望 +7  查看全部评分

MIUI开发组

Rank: 8Rank: 8

积分
11374
机型
小米手机2/2S
签到次数
198
MIUI版本
6.11.4
私信

1000万用户纪念勋章关注新浪微博MIUI 100周

2013-3-8 10:55 | 来自PC
|
赞!!!很到位!!!

玩机之神

论坛唯一11、12、13连续三年荣获MIUI年度最受欢迎用户

Rank: 7Rank: 7Rank: 7

积分
117846
机型
小米Note3
签到次数
262
MIUI版本
V9.2.1.0.NCHCNEK
私信

MIUI 300周MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI五周年小米平板首发纪念勋章小米系统MIUI三周年百万壁纸关注微信极客勋章MIUI 100周小米手机元器件合体活动勋章

2013-3-7 18:10 | 来自PC
|
呵呵~~顶一下

已有 2 人评分 经验 理由  

黄梁一世 + 5 MIUI 因你更精彩!
hanyuo_o + 5 MIUI 因你更精彩!

经验 +10  查看全部评分

玩机之皇

哎呀~好像我挺水的样子

Rank: 6Rank: 6

积分
10511
机型
红米Note2 移动/标准
签到次数
60
MIUI版本
V7.3.2.0.LHMCNDD
私信

MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI三周年极客勋章关注微信关注腾讯微博关注新浪微博

2013-3-7 18:14 | 来自PC
|
顶一个~不错

已有 1 人评分 经验 理由  

hanyuo_o + 5 MIUI 因你更精彩!

经验 +5  查看全部评分

内测粉丝组

Rank: 6Rank: 6

积分
5131
机型
小米Note3
签到次数
178
MIUI版本
8.1.18
私信

MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI三周年百万壁纸关注微信关注腾讯微博关注新浪微博发烧友俱乐部

2013-3-7 18:15 | 通过手机发布
|
果断必须顶~~~加油

已有 1 人评分 经验 理由  

hanyuo_o + 5 MIUI 因你更精彩!

经验 +5  查看全部评分

玩机之神

MiPad用户组—前排掌门

Rank: 7Rank: 7Rank: 7

积分
75046
机型
小米Note2
签到次数
142
MIUI版本
V8.5.3.0.MADCNED
私信

MIUI 3000万MIUI 2000万1000万用户纪念勋章小米平板首发纪念勋章MIUI三周年百万壁纸极客勋章关注微信小米桌面关注腾讯微博关注新浪微博

2013-3-7 18:15 | 来自PC
|
支持一下

已有 1 人评分 经验 理由  

hanyuo_o + 5 MIUI 因你更精彩!

经验 +5  查看全部评分

荣誉元老

Rank: 8Rank: 8

积分
35248
机型
小米手机3/4 WCDMA版
签到次数
149
MIUI版本
5.12.17
私信

MIUI七周年小米六周年MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI 7MIUI五周年小米平板首发纪念勋章小米手机3终身荣誉勋章MIUI三周年百万壁纸关注微信极客勋章完美图标纪念勋章关注腾讯微博关注新浪微博MIUI 100周VIP贵宾

 楼主| 2013-3-7 18:22 | 来自PC
|

社区版主

急用户所急,想用户所想

Rank: 7Rank: 7Rank: 7

积分
83736
机型
小米Max2
签到次数
223
MIUI版本
8.1.18
私信

2018新年勋章MIUI真实车主勋章2017圣诞节勋章MIUI3亿用户纪念勋章感恩节勋章万圣节勋章米兔月饼勋章国庆勋章MIUI七夕鹊桥勋章MIUI七周年MIUI 9纪念勋章小米众筹2周年小米7周年勋章“澎湃S1 ”芯片纪念勋章初音勋章2017年小金鸡勋章APP 1000万MIUI 300周为奥运加油勋章小米六周年MIUI 2000万1000万用户纪念勋章MIUI 7流量王MIUI五周年MIUI三周年百万壁纸关注微信极客勋章MIUI6 荣誉勋章MIUI V5内测元勋关注腾讯微博关注新浪微博MIUI 100周MIUI六周年

2013-3-7 18:25 | 来自PC
|
学习了,会PS的童鞋加油

已有 1 人评分 经验 理由  

hanyuo_o + 5 MIUI 因你更精彩!

经验 +5  查看全部评分

玩机之皇

Rank: 6Rank: 6

积分
5489
机型
小米手机5
签到次数
80
MIUI版本
6.11.5
私信

1000万用户纪念勋章关注腾讯微博关注新浪微博

2013-3-7 18:26 | 来自PC
|
支持

已有 1 人评分 经验 理由  

hanyuo_o + 5 MIUI 因你更精彩!

经验 +5  查看全部评分

荣誉元老

Rank: 8Rank: 8

积分
35248
机型
小米手机3/4 WCDMA版
签到次数
149
MIUI版本
5.12.17
私信

MIUI七周年小米六周年MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI 7MIUI五周年小米平板首发纪念勋章小米手机3终身荣誉勋章MIUI三周年百万壁纸关注微信极客勋章完美图标纪念勋章关注腾讯微博关注新浪微博MIUI 100周VIP贵宾

 楼主| 2013-3-7 18:27 | 来自PC
|

荣誉元老

爱米柚 爱生活

Rank: 8Rank: 8

积分
123499
机型
小米手机5
签到次数
240
MIUI版本
8.1.22
私信

2018新年勋章2017圣诞节勋章MIUI3亿用户纪念勋章感恩节勋章万圣节勋章米兔月饼勋章国庆勋章MIUI七夕鹊桥勋章MIUI七周年MIUI 9纪念勋章小米7周年勋章“澎湃S1 ”芯片纪念勋章初音勋章2017年小金鸡勋章APP 1000万小火箭勋章MIUI 300周为奥运加油勋章MIUI 8纪念勋章小米六周年MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI 7小米商城购买纪念勋章流量王MIUI五周年小米平板首发纪念勋章MIUI三周年关注微信极客勋章关注腾讯微博关注新浪微博发烧友俱乐部MIUI六周年

2013-3-7 18:43 | 通过手机发布
|
支持

已有 1 人评分 经验 理由  

hanyuo_o + 5 MIUI 因你更精彩!

经验 +5  查看全部评分

快速回复 返回顶部 返回列表