本文约5200字,预计阅读时间15分钟
前排提醒,体量较为庞大,如果你没有信心一次性阅读完的话,强烈建议马克收藏后再阅读~对了,提前祝你,新年快乐!图标类的第二篇文章,这一篇吭哧吭哧写了5000多字 _(:3 」∠)_内容超级巨量,涵盖了ios、Android、vista、win7等等的历史,已经尽可能缩减文字了,奈何xp之后的互联网大佬们就各种搞事情,考虑到各位的阅读体验,我将这片历史长河纵分为移动端和pc端两个方向。
改变世界2007年1月,有一匹黑马,带着“老子要一拳打十个”的狂妄之语,吊锤了世界上的所有手机,并以一己之力首创了移动互联网时代。
没错,它就是iPhone1。iPhone的出现颠覆了所有人的世界观。当人们惊喜得发现,他们只需用手指在屏幕上轻松得点击滑动,就可以实现以往靠笨重的外置键盘、手写笔才能实现的功能时,这种感觉宛如亲身体验了另一个位面的文明。
回到视觉,ios作为iPhone的系统,所有图标均裁剪为同等尺寸的圆角矩形来呈现秩序之美。图标继续沿用了mac os中的拟物化设计(skeuomorphic design),大多数图标以一抹弧形高光来继承了aqua中曼妙的水晶质感。

在当时,苹果的拟物潮流颇受用户们的喜爱,直至今日,很多设计师都难以割舍,为此国内的某知名胖子还借此情怀猛捞了一笔。
后起之秀
Android在ios2发布后的2个月横空出世,完全免费的开源系统也直接使得一大批的国内手机厂商如雨后春笋般涌现。下图就是世界上第一个安卓机——HTC Dream,虽然硬件上依旧带有塞班和WM的影子,但是类似iphone可自由上网、看视频的客户端让它成为仅次于iPhone的宠儿。
真正的转变是在2010年1月所发布的Android2.1,当时一同闪亮登场的还有谷歌的亲儿子Nexus One。
2.1版本算是Android史上最具代表性的版本之一了,从这一代开始,原生应用的图标全部改为正视的异性图标,并且引入了经典的安卓绿,与蓝色及中性色一起组成Android图标的配色方案,对了,还得撒上一抹浓浓的阴影~从这代开始,安卓逐步形成了自己独有的扁平style。

2013年6月的WWDC,当苹果首席设计师Jonathan Ive弃用了传承12年的拟物,大刀阔斧得将ios7所有图标全部改造为扁平风时,舆论哗然,一大波人都觉得向来制定标准引领潮流的苹果变了——
不过严格来说,撇开拟物狂魔Scott Forstall的离职原因外,苹果只是在适当的时机做了适当的转型而已。居然屈服于主流审美!追随了谷歌和微软的扁平潮流!你不是我认识的那个苹果了!拟物不死!!

因此,万物扁平化自然有它的道理,为了让用户在信息过载的屏幕中更高效、不受干扰得完成工作,轻量化和简洁化是必然趋势。记住,是“简洁”,而非metro的“简陋”。(微软对不起)
ios7的图标没有像metro那样简单粗暴得拍扁,仔细观察,其实裹上了一层淡淡的渐变,以提升视觉层次,避免过度扁平后的呆板无趣,这种风格俗称“微渐变”风格,并被沿用至今。


咸鱼翻身的Android
如果把手机系统比喻成土地,那么ios早已在自己所规划的土地上建好了规整的建筑,而以工程师们为主导的Android则是一片无人管理的荒野,任何人都可以在上面建造想要的东西。混乱和无序是Android在GUI中的代名词。Google为了突破这个困境,召集了所有设计师进行每个产品的Redesign寻找共同的语言。直到2014年的Google I/O大会所发布的Material Design,成功实现了Google的首次设计革命。Material Design的核心理念就是——把现实世界带入到手机屏幕中,不论是材质的隐喻还是真实的动效。并且它还列出了所有的组件规范,对于交互、前端和视觉来说,它绝对是值得一看的指导手册!

值得注意的是,三个虚拟按键以三大基本形(三角形、圆形和矩形)代替了原本臃肿复杂的线性图标,不仅视觉上更简洁,也象征着Material Design的逻辑之美。

美洲豹OS X10.5-Leopard(美洲豹)花了两年才在2007年10月正式公布(大部分人手都去搞iPhone了),但是惊艳的GUI让人们意识到等待都是值得的。
Leopard依然继承了经典的Aqua风格,图标部分也和同年发布的iPhone1一样,加入了更多的高光细节。并且dock栏加入了经典的倒影设计,看上去犹如一张精致的玻璃展台。
生不逢时的Vista
2001年的xp虽备受好评,但是它的GUI在同时代的苹果面前就是个渣渣,微软也深知这一点,在xp发布后花了几乎6年时间自闭,不,是痛定思痛厚积薄发,直到17年1月,微软放出了大招——Vista。Vista引入了全新的Aero设计语言——首字母分别代表了Authentic(真实)、Energetic(动感)、Reflective(反射)及Open(开阔)。
GUI首次运用了大量的磨砂玻璃、实时动画、实时缩略图。光图标分辨率就从xp的48*48猛增到256*256,足足五倍的像素!图标中恰到好吃的高光、阴影和反光让界面变得美轮美奂。论界面的视觉,足以媲美同年苹果发布的Leopard。

当时绝大部分用户的渣机电脑配置依然停留在XP时代,自然带不动如此华美而耗能的操作系统,加上Vista被人诟病的兼容性问题,导致它发布不久便收到了大量的差评,甚至发生大量vista的抵制活动。

Windows7
Vista所出现的种种问题迫使微软在发布后不到3年的时间推出了win7(2009年),性能兼容性的优化以及硬件厂商的被迫升级,让win7成了微软的救命稻草。在传承了Aero大多数优点的同时,任务栏采取了类似Mac dock栏的样式,以程序的图标代替臃肿的圆角矩形按钮。
这个版本其实更像是vista的迭代升级,但是“Bad Vista”已经成功得给用户留下了难以磨灭的心理阴影,为了拉回用户,微软将其包装成了全新的win7,并再次成功抢占了市场。
剑走偏锋的Windows8
最早的扁平化设计其实不是ios7,而是我们的微软。别惊讶,我们只是很少用它,因为——太特么难用了。
它就是微软引以为豪的设计语言——Metro(Modern UI),也就是我们win8里那个深恶痛绝的开始菜单。
Metro首次定义了扁平化的概念,它最大的特点是:将每个程序都设计成如同地铁标志牌一般的磁贴(纯色大方块儿),在全屏的开始菜单中类瀑布流式横向排列,并且可以实时左右滑动。

微软急于摆脱苹果的阴影去“改变世界”,企图用全新的扁平风格抗衡全民拟物时代,只是他又一次迈大了步子。
metro中的所有图标都被一巴掌拍扁,这种极度扁平风格让用户觉得过分简单无趣,同时,为触屏设备设计的初衷导致非触屏设备下的交互体验也大打折扣(pc上开始菜单和传统桌面的切换完全两种风格,严重的割裂感会让你发飙的),这使得win8又一次沦为继vista后被用户们口诛笔伐的对象。
Metro意为地铁,它有个很先进的理念——“galance and go”(瞥一眼就走)——让用户使用时犹如看到地铁指示牌一样,无需思考,看一眼就迅速交互,本质是舍掉多余的形式,强调信息本身(类似包豪斯的形式追随功能),在拟物流行的那个时代算是非常超前的理念了。
OS X 10.10-Yosemite
继ios7发布后,苹果紧接着在2014年6月发布了最新的Yosemite(优胜美地)。可以看到,苹果正在努力得将桌面端和移动端的GUI进行统一,很多精致的拟物图标也被扁平化,图标颜色的饱和度也被整体调高。展台一般的dock也被改为了简单的毛玻璃背景,运行中的应用也由以往的发光的小光标简化为小黑点。

Windows10
2015年7月,微软发布了win10,它算是七代和八代的融合升级版本,不仅回归了win7中的传统开始菜单,同时巧妙得和metro语言相结合。放置于菜单中的磁贴,由于被大幅缩小而显著降低了win8环境下的笨重呆板感,双向满足了触屏用户和非触屏用户的需求。同时,aero中的“毛玻璃”效果也以一种更简单的样式回归。




后记
想当年,微软像个思想超前、活跃,但是再怎么努力却怎么也赶不上苹果学霸的学渣。而后来的转校生——安卓,虽然是个没啥天赋的工科男,但是有强大的谷歌老爸撑腰和调教,也有了不错的成就。
微软不想再被他们按在地上摩擦,他痛定思痛,吭哧吭哧得埋头苦学,终于有一天,他学有所成!甚至还有反超的趋势?!究竟今后微软能否逆风翻盘?一切让我们拭目以待!篇幅较长,感谢你坚持看到现在:)
最后,提前祝你新年快乐!巨人的肩膀
[1]wikipedia
[2]https://historyoficons.com/.
[3]iOS第十个年头,你还记得主屏上那些图标以前的样子吗?MakicLin.
[4]Windows Vista:写在Windows XP退出历史之时,由高博.
[5]Win系统 - 如何评价Vista在PC史上的历史地位?Lux_Sun.
[6]http://zwkufo.blog.163.com/blog/static/2588251201211311143818/?suggestedreading&wumii.
[7]iOS系统发展史:从未停止的“创新”之路,尤静.
[8]Fluent Design System, microsoft.









评论区 (0)
最新评论登录后发布评论并参与互动。
暂无评论,欢迎抢沙发。