MIUI论坛 下载APP

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

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

[复制链接]
39021 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



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

收藏44 分享  

已有 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  查看全部评分

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

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

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

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

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

 楼主| 2013-3-7 18:45 | 来自PC
|
回复 yangshuaioo 的帖子

这个问题已经反馈给开发组^_^

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

 楼主| 2013-3-7 19:23 | 来自PC
|
回复 yangshuaioo 的帖子

这个我就不知道了。。。

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

 楼主| 2013-3-7 21:43 | 来自PC
|
回复 yangshuaioo 的帖子

还好吧。。图标风格在统一的大前提下保持一定的自由度与多元化是有好处的~风格太一致第三方图标就会格格不入。。

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

 楼主| 2013-3-8 17:37 | 来自PC
|
回复 米派瑞 的帖子

谢谢派瑞夸奖~~

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

 楼主| 2013-3-9 11:28 | 来自PC
|
求支持~

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

 楼主| 2013-3-9 22:08 | 来自PC
|
求支持!!!

荣誉元老

Rank: 6Rank: 6

积分
35243
机型
未知设备
签到次数
149
MIUI版本
V10.2.11.0.PFACNXM
私信

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

 楼主| 2013-3-18 21:42 | 来自PC
|
自己顶一个^_^
快速回复 返回顶部 返回列表