UI发展史

1,853

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

17、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插图