UI发展史

UI设计做为一个相对新兴的专业设计门类，UI（UserInterface）泛指用户的操做界面，包含移动APP，网页，智能穿戴设备等的可视、非可视的操做区域，目前UI设计主要指界面的样式，美观程度。UI设计目前既没有归于平面设计也没有官宣独立门派，甚至尚未进到设计史里。下面咱们将以时间为顺序，以设备界面和网页设计语言为两个线索穿插叙述一下UI发展历程。

一.萌芽时代

1983年苹果的Lisa电脑，1984年苹果的麦金塔我的电脑搭载的SystemSoftware系统（mac系统的前身，至7.5.1正式更名为Mac OS（麦金塔操做系统）。Mac OS至今已经推出了十代。苹果宣布将Mac OS X改名为OSX，“Lisa”的问世能够做为“UI设计”的开端，由于已经有意识的为为用户在用户体验上在屏幕上进行有针对的设计。

apple Lisa（1983 ）

Mac早期操做界面（1984）

1985年微软推出的Windows1.0操做系统，1985年6月由俄罗斯人阿列克思·帕基特诺夫发明的俄罗斯方块。这些都是早期的UI设计，那时的UI设计基本都是在系统默认页面上加以设计，更多的是在操做体验上进行更多的改革，好比苹果创造的文件夹拖动、微软创造的“开始按钮”等。不过当时苹果在UI上仍是作了不少超前的设计，好比系统嵌入了除默认字体之外的字体，一改单一颜色的屏幕加入了色彩等。为后来UI的发展奠基了基础。

Windows1.0（1985）

俄罗斯方块（1985）

因为二十世纪八十年代的互联网还不是很发达，因此那时的界面基本全是电脑原生自带的页面，因此当时UI设计并无一个确切的行业，UI设计的工做基本都是电脑工程师顺带作出来。

当时虽然有了Mac和windows的系统，但是毕竟没有普及。大多数的电脑显示屏仅能显示单色的像素。所以当时的网页设计是“极简风”，没有图像，只有单色像素风格的纯文字，Web Design仅仅意味着符号+制表（Tab键）的排列组合。

二.拟物化时代

1990年微软推出的Windows3.0开始有了“浮雕、阴影”的页面元素，能够视为拟物化的开端

1995年微软推出的windows95应该是咱们认识里最开始电脑界面的模样，95的界面浮雕凸起、凹陷等效果，包括文件夹窗口的凹陷，把模拟真实物理状态和操做下压释放的物理效果作到了极致。不过所谓微软的拟物一致没有在质感和材质上进行深挖，只是在体积、光影上进行了应用。

1995年在网页代码中诞生了JavaScript，JavaScript，能够解决HTML一些局限性，好比，须要一个弹提示，这时就须要JS来实现了。那时背景图像、GIF动画、闪字、计数器等工具迅速成为网页必须的噱头。给UI在网页中带来了更多的可能性。

1996年Flash出现，它使设计师在设计形状、布局、互动以及一些很棒很弦的动画均可以在这一个工具上执行，完成后只是一个单独的文件输出，并能显示在浏览器中。但用户浏览它时须要安装插件并等待FLASH加载完成后方可浏览。因为它须要消耗计算机大量的运算能力，2007年，当苹果发布他们的第一台iPhone的时候，就决定完全放弃Flash，也正是在这个时候，Flash开始走下坡路——至少在网页设计领域。

1998年CSS出现，CSS称为 层叠样式表（Cascading Style Sheets）。差很少是在Flash崛起的同时，一种更好的网页结构化设计工具CSS诞生。CSS的基本概念是将网页内容的样式分离，因此网页的外观和格式等属性将会在CSS中被定义，但内容依然保留在HTML中。

苹果在2000年以前界面风格和微软一模一样，一致在微软的阴影下基本没有亮点。

可是2000年9月苹果发布了由柯戴尔·瑞茨拉夫(Cordell Ratzlaff) 主持设计的全新用户界面Aqua（Aqua是Mac OS X的GUI商标名称）自此拟物化正式登上历史舞台。

随后iphone的ios系统也延用了这种设计语言，而且真正的发扬光大。今后进入了拟物化长达13年的视觉统治，包括WinXP和Win7的问世在设计界也没有撼动拟物化设计地位。直到2013年苹果发布了IOS7才本身打破了本身视觉语言的统治。

三.扁平化时代

2013年颠覆人类视觉的设计iOS7

由乔纳森伊夫主持设计的iOS7一发布就引发设计界和科技界的震荡，摒弃了以前全部的拟物化设计，去掉了投影、去掉了机理，出现了全新的扁平化设计，加入了毛玻璃的设计理念。同时对设计产生了史无前例的影响，后期出现Material Design和Win10亚格力无不和iOS7有关。UI设计自此进入扁平化的新纪元。

2014年Mac电脑的变革

iOS7历经了一年的发布，苹果发布了又一次震惊世界的OS X 10.10 Yosemite优胜美地。届时苹果全部产品的UI界面所有蜕变成了扁平化设计。从而提高了移动互联网性能和体验，再一次促进了移动互联网的飞速发展。同时扁平化设计的对内存损耗大大下降，设计成本和效率大大提高，也让更多的APP和网页设计纷纷效仿，从而将互联网设计完全颠覆。

四.百家争鸣

如今米ui、魅族flyme、锤子SmartisanOS、Airbnb Desgin等世界UI设计风格在微软、Google、苹果三家行业巨头的影响下进入了百花齐放、百家争鸣的环境。值得一提的是SmartisanOS和Airbnb Desgin两家设计语言的出现。

SmartisanOS

锤子科技14年推出了SmartisanOS，发布以后又引发了设计界和科技家的激烈讨论，逆趋势的回头来作拟物化，并且拟物化的很完全，而且从新二次绘制各类软件的icon，可见老罗对拟物化的偏执。

Airbnb Desgin

1七、18年爆火的『傻、大、黑』大多数人都以为出自iOS11，其实这种设计语言是2017年Airbnb Design发布的，而且在Airbnb APP上加以运用。同时Airbnb也发布了一款造福软件业的应用程式动画工具 Lottie ，提供 iOS 、 Android 和 React Native 框架的动画文件库，帮助开发者更容易在原生应用程式中加上动画。

近些年在UI设计中更多的风格蜂拥而至，故障风、孟斐斯风格、C4d 3D、2.5风、简约日本风格等。

五.UI设计的大趋势

1减负设计

少便是多！在设计中作减法一直都能有不错的效果，目前在全部设计领域都看到或多或少这类负空间的使用，而将来几年将更大量的使用于网页设计和应用程序设计中。

2.定制插画

插图一直是近几年中不断增加的主要设计趋势。在2019年从登录i页面到整个网站，定制插图正在逐渐风靡整个ui设计行业。

3.情感化图标

好的图标能够天然的把用户的视线，引到须要重点关注的信息或功能上。同时也能天然地将与服务相关联的信息，透过良好的视觉层次结构展示出来。 同时搭配好使人会心一笑的情感化设计，就更完美了。

4.动效

动效设计早已经是UI设计行业中不可或缺的展示手段，试着在你的移动产品或网页设计里，加入一些顺畅的平滑过渡或漂亮的悬停效果，可让你的设计更加地吸引人。

5.微交互

微交互效果是移动端上，经常使用于建立微妙视觉效果的小动画。用户愈来愈关注这些微观互动。

6.栅格突破与元素重叠

网页设计中栅格突破在2018年底开始盛行，能够预见在2019年能够看到更多结合栅格突破的方式，与元素重叠的网页设计组合，但在使用时，记得始终要牢记移动端的体验！

7.3D插图