秒懂MIUI 6是如何一步步扁平化的

20140821163751371

MIUI被很多人看作是小米的最大优势,历经4年时间更新演变,从MIUI的变化我们可以看到主流图标的设计趋势正在从质感到扁平,从灰暗到明亮,观一点而知天下,让我们一起来体会下这些年,我们身边图标的变化。

四年,MIUI陪你走过了201周的更新;而在每一次更新的背后,都是MIUI开发者和发烧友们共同的努力。就在今天,MIUI 6的发布,又一次带给我们新的动力,因为我们一直相信:MIUI会越来越好。

如果你从2010年8月开始使用第一版本的MIUI,那么你一定不会忘记当年的那些MIUI系统自带应用的图标吧?下面,不妨跟着Oska一起来回顾一下,MIUI每个大版本更新中,关于图标变化的那些事儿。

2010.08 MIUI V1

20140821163733634

第一版的MIUI图标现在看来略显青涩,形状也不是目前使用的常规圆角矩形,而是介于圆形和正方形之间的一种形态。图标的绘制,引入了无印良品(MUJI)的理念,力求生活化、自然化。当然,一些图标上出现了绿色小机器人,也说明了当时的MIUI对原生Android的致敬。

2011 MIUI V2

20140821163720382

经过了一定时间的积累沉淀,MIUI的图标随着系统的不断更新,也发生了一些变化。图标外框换成了目前一直在使用的圆角矩形;而在图标绘制上则注重细节,阴影的使用进行了重新的修订,让图标看起来更加细腻。

2011.03 MIUI V3

20140821163705846

V3可以说是MIUI发展历程上的一个重要里程碑。在这个大版本中,图标进行了重新的绘制,大部分都迎合了当时设计的主流风格--拟物。不仅如此,简洁明快、精致的设计风格,也逐渐催生了MIUI设计方面的DNA。

2011.11 MIUI V4

20140821163652424

当MIUI V4的icon出现在大众眼前时,你一定会发现它更好看了、更简洁了、更具现代感了。电话、通讯录、浏览器、短信,这四大常驻Dock栏应用的图标光线变得更加柔和,内容更为简洁、直观、明了;而像文件夹音乐播放器相机这样的系统自带应用图标,则在延续了MIUI设计DNA的基础之上,更具现代构成感,不再那么臃肿,变得清爽干脆。

2013.04 MIUI V5

20140821163640920

在“米粉节”发布的MIUI V5,绝对是对米粉们最好的献礼。风格一致的图标,让人看第一眼就会觉得赏心悦目。精心绘制的系统自带应用图标,辅以不同的配色,在保证图标原本拟物化的基础上,进一步对它抽象化,让图标更为简约耐看。除此之外,V5版本下启动的“完美图标”计划,官方第一批重新绘制了200多个第三方应用的图标,目的就是要让MIUI V5的图标视觉,达到空前的统一。

2014.08.16 MIUI 6

20140821163631370

这一次,图标在MIUI 6上,更好看了。简约的线条、多彩的颜色,你能在这里看到像主题商店、地图一类延续传统却有所创新的图标设计;你也可以发现时钟、指南针、录音机一类完全颠覆传统。MIUI 6的图标,完全可以契合“极简美学”的主旨。图标拍扁了、极简了,反而识别度更高了。当你一看到这个图标,你就会知道你打开的是什么应用。

来源:MIUI 极客秀

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/995/

(0)
iouedioued
上一篇 2014-10-20
下一篇 2014-10-24

相关推荐

  • 如何减少哑铃图中的颜色,提高用户体验?

    有奖互动话题,文末等你概述作者在 #MakeoverMonday 2018 的第 2 周的课题上,制作了一张哑铃图来比较男性与女性在寻找伴侣时所注重的特征排名。他目标是展示不同国家的男性或女性在寻找伴侣时是否都会将某一特征看作重要因素。这样让作者立即想到了哑铃图,但是他的第一份草稿存在一定的问题。Viz 中的颜色太多了,我们很难从中发现趋势。之前作者也曾遇到过这个问题,但是他觉得真正的解决办法应该是,在不减少 Viz 中数据数量的情况下...

    2018-04-19
  • 用Axure水平菜单做导航菜单原型

    哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:其实...

    2018-03-16
  • H5时代的多行文本框

    说起输入框,大家都耳熟能详了,今天跟大家谈一谈H5时代的多行输入框!首先一起回顾下输入框在PC端的应用:

    2017-06-04
  • 阿里设计师实战案例解读内容化设计

      前言 如果说好的产品是运营出来的,那么内容作为用户体验中的重要部分不容忽视。然而我们在设计中经常缺乏内容体验的意识。借着第十三届用户体验大会User Friendly 2016的分享,手淘的设计师和业内的同学们一起做…

    交互专题 2017-08-07
  • Google 内部资料:提升用户体验的三大设计原则

    想提升用户体验?在你运用自己的创意和设计思路时,请考虑这些由 Android 用户体验团队秉承用户体验至上的理念而制定的 Android 设计原则。一、让人着迷1. 以意想不到的方式让人眼前一亮漂亮的界面、精心布置的动画,或恰到好处的声效,都会带来快乐的体验。精细的效果能产生一种轻松的氛围,让人感觉自己拥有强大的力量。2. 实际对象要比按钮和菜单更有趣让用户可以直接触摸和操作你应用中的对象,这样,可以让执行任务更轻松,让用户更满意。3....

    2018-02-06
  • Axure网页Banner大集合、Banner模板、京东Banner...完整版rp源文件下载

    网页Banner大集合,banner模板、天猫banner、拉勾banner、严选banner...已发布在产品大牛http://www.pmdaniu.com/rp/detail/54529只需完成以下2个任务,即可免费拿到完整版RP源文件:1、打开上方链接地址:在该页面中点赞、下载、转存、好评;2、长按下方二维码,并关注“亮亮原型”微信公众号;最后:将完成的任务截图,发送至QQ邮箱:653390398@qq.com邮件标题请使用“网...

    2018-04-02
  • mBack交互方式分析

    本文作者将对魅族最新研发的交互方式—mBack进行分析,从谈论手机操作系统方式与电脑的操作系统方式有着两个较为明显的差异,到分析mBack的缺点,值得一看。乔布斯说:伟大的产品都是只有一个按键的。在已经将交互优化到已经不能再删减时,如何有效的组织和隐藏就显得尤为重要。随意性用户可能使用过类似的产品或服务,有兴趣使用更为复杂的产品,但是不愿意接触全新的产品,除非新功能足够简单。主流用户是最大地群体。他们使用产品的目的是完成任务,他们永远也不会产生学会所有功能的想法。

    2017-05-01
  • 成也排版败也排版:一个选择的过程

    作为设计师有一个重要的技能:如何选择文字。这是因为文字是设计师和客户沟通的主要方式之一。那么排版就是决定你设计好坏的重要因素。GoldenRatio (1:1.618)
    1.000x 1.618 = 1.618
    1.618x 1.618 = 2.618
    2.618x 1.618 = 4.236
    4.236x 1.618 = 6.854
    6.854x 1.618 = 11.089GoldenRatio (1:1.618)

    11.089x 1.618 = 17.942
    17.942x 1.618 = 29.03
    29.030x 1.618 = 46.971
    46.971x 1.618 = 75.999
    75.999x 1.618 = 122.966MinorSecond 15:16
    MajorSecond 8:9
    MinorThird 5:6
    Major Third 4:5
    …PerfectFourth (3:4)

    9.969x 1.333 = 13.288
    13.288x 1.333 = 17.713
    17.713x 1.333 = 23.612
    23.612x 1.333 = 31.475
    31.475x 1.333 = 41.956
    41.956x 1.333 = 55.927FontSizes
    Header1: 55px
    Header2: 42px
    Header3: 31px
    Header4: 24px
    Header5: 14px
    Body:17px
    Caption:14px

    2017-05-01
  • 交互设计 ▏如何在作品集中展现自己的设计风格和思考过程?

    交互设计是对于用户产品使用行为的优化设计。它关注的是“用户场景”和“用户心理”,设计的对象是“用户行为”,达成的目标是“能用、易用、想用”。作品集其实是一个人设计风格和思考过程的折射,一个好的交互设计作品集需要在作品中展示你解决了什么问题,如何解决的,以及最终成果。今天小编给大家带来了一位学姐的交互设计研究生作品集,希望可以给大家带来一些启发啦!!!学姐的作品集中一共有3个项目,分别是项目1:Wish项目2:RT: BAGS项目3:FI...

    2018-04-22
  • 扁平化2.0:扁平化设计以前从未有的6个设计风格

    时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格。扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0。

    2017-05-24