UI设计作为一个相对新兴的专业设计门类，目前既没有归于平面设计也没有官宣独立门派，甚至还没有进到设计史里。

序言

UI设计作为一个相对新兴的专业设计门类，目前既没有归于平面设计也没有官宣独立门派，甚至还没有进到设计史里。我们学设计学艺术有『近代设计史』『世界美术史』『中国美术史』等，既然UI设计已经成为了一个设计门类我觉得了解它的历史是很有必要的，了解来龙去脉也可以很好的帮助我们理解设计去做更好的作品。

互联网在2010年左右开始爆发，精确的说是移动互联网的爆发。上网从坐着在电脑前到随时随地手机上网，改变的不仅是我们上网的方式，改变更多的是生活方式、商业模式，还带来一个行业的兴起-UI设计师。

UI设计其实早就有这个行业的存在。1969年互联网诞生，到1973施乐公司设计了首次使用桌面比拟的个人电脑『奥托』的问世。1983年苹果计算机公司推出Apple Lisa个人计算机，是全球第一款搭载图形用户界面（GUI）的个人计算机（施乐的奥托和苹果的Lisa究竟哪个是真正意义上第一台搭载GUI的电脑有待进一步考证），到现在UI设计其实一直都存在。2000年以前国内的UI设计刚开始萌芽，但当时做UI等于做平面设计。

施乐公司奥托

在我大三的时候第一次接触到了UI设计，然后就从平面渐渐转到了UI设计，并且毕业进入了百度从事了UI设计的工作。由于近些年UI设计的爆火和人员需求的持续，越来越多的人想从事这个行业，也就催生了很多院校开设相应的专业，和越来越多的培训机构。

最近两年，尤其是2018年，好多公司历经了市场的筛选和资本的洗礼很多互联网公司退出了舞台，一部分小企业走对了方向异军突起。市场格局发生了变化，从而对UI设计师的供需也发生了改变。首先是现在各个大厂纷纷在缩进招人名额，缩减员工人数，逐渐进入人员饱和状态。同时随着市场的完善，和VR、AI等技术的成熟对设计师的质量越来越高，复合性设计人才逐渐成为了趋势（关于复合型设计师可以关注之前的文章《要做一个什么样的UI设计师，才能更好的发展？》）同时涌入的设计师越来越多，所以这个行业编的越来越严峻。

言归正传继续聊UI设计的历史。UI（User Interface）泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等的可视、非可视的操作区域，目前UI设计主要指界面的样式，美观程度。

这篇文章我将以时间为顺序，以设备界面和网页设计语言为两个线索穿插叙述。

一、萌芽时代

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

1985年微软退出的Windows1.0操作系统，1985年6月由俄罗斯人阿列克思·帕基特诺夫发明的俄罗斯方块。这些都是早期的UI设计，那时的UI设计不像现在这样百花齐放千奇百怪，基本都是在系统默认页面上加以设计，更多的是在操作体验上进行更多的改革，比如苹果创造的文件夹拖动、微软床创造的『开始按钮』等。不过当时苹果在UI上还是做了很多超前的设计，比如系统嵌套初默认字体以外的字体，一改单一颜色的屏幕加入了色彩等。为后来UI的发展奠定了基础。

Windows 1.0 （1985）

1983 apple Lisa

1985 俄罗斯方块

由于当时互联网还不是很发达，所以这些界面基本全是电脑原生自带的页面，所以当时UI设计并不是一个独立的行业，UI设计的工作基本都是电脑工程师顺带做出来。

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

二、拟物化时代

1990年微软的windows3.0已经开始有了『浮雕、阴影』的页面元素，拟物化的萌芽已经出现。

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

1995年在网页代码中诞生了JavaScript

JavaScript 的出现补足了尚且原始的HTML。不过它处于整个网页布局的顶层并且需要单独加载。很多时候它仅仅被懒惰的开发者用作一个简单的补丁，但如果使用得当，JS可以非常强大。JavaScript 可以解决HTML一些局限性，比如，需要一个弹提示，这时就需要JS来实现了。那时背景图像、GIF动画、闪字、计数器等工具迅速成为网页必须的噱头。给UI在网页中带来了更多的可能性

1996年Flash的出现

作为一门新技术，Flash为网页开发者/设计师带来了前所未有的自由，它打破了之前网页设计所固有的限制。设计师在设计形状、布局、互动以及一些很棒很弦的动画都可以在这一个工具上执行，完成后只是一个单独的文件输出，并能显示在浏览器中。用户浏览它时需要安装插件并等待FLASH加载完成后方可浏览。

不幸的是，这种设计并不开放，也不利于搜索，还需要消耗计算机大量的运算能力。2007年，当苹果发布他们的第一台iPhone的时候，就决定彻底放弃Flash，也正是在这个时候，Flash开始走下坡路——至少在网页设计领域。

1998年CSS的出现

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

CSS的第一个版本很不灵活，但最大问题是浏览器的兼容性，不同浏览器对CSS支持不一样，这个花了好几年时间才得到改进。需要明确的是CSS不是一个程序言语(coding language)，是一个声明性的语言。

苹果在2000年之前界面风格和微软如出一辙，一致在微软的阴影下基本没有亮点。

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

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

2001年微软发布windowsXP

紧随苹果的Aqua微软发布了跨时新世纪影响了电脑页面设计足足15年的XP系统，操作系统中最长寿的长者。Windows XP那著名的桌面——位于美国加州纳帕的一座绿色山丘——可以说是这个系统最具个性的特色之一。这个全新的用户界面可以给人一种友好的感觉，让第一次进入系统的用户感到格外清新。界面相比之前的界面更加清新、绚丽、柔和。色彩方便更加协调丰富，页面元素效果更加柔和，一改之前生硬的浮雕样式，并且在操作和体验上更加顺畅。Windows XP加入与界面整合的主题机制后，自定义主题一下子就火了起来。XP强化了主题的概念，你可以在网络上寻找无数的系统主题，这种专为自己打造的个性感让Windows XP变得更加流行。对后续的win7甚至win10都产生了影响。

2008年IphoneOS/安卓发布

2008年苹果发布了自己的手机系统IphoneOS（后改名iOS），和此前与配有触笔的 Newton 不同，iPhone 是围绕着一面高分辨率的大触摸屏设计的。iPhone OS（后来更名为 iOS）拥有全新的基于 OS X 的用户界面，按键设计与 Aqua 的相同，列表滚动与 iPod 的相似。这个界面风格决定后来5年移动互联网的UI设计方向。

同年另一个在以后的市场中和iOS评分天下的手机系统发布，那就是Google的安卓系统。

安卓系统在诞生初期和iOS的风格非常相似，所以在Material Design发布之前就不单独提安卓了。

2007年苹果发布OS X 10.5 Leopard豹

2007年10月发布，用户界面上改进幅度比较大的一个版本，虽然基本的界面仍为Aqua和其糖果滚动条，但新加入了一些铂灰色和蓝色，另外重新设计的3D Dock和更多的动画交互使得新界面看上去3D效果更强，此外还改进了Finder、半透明菜单条并新增了最初只用于iTunes的Cover Flow界面。

整体来说这一版本的界面相比之前有了翻天覆地的变化。

2007年MOBILE——栅格和框架

移动端网页本身就是一个挑战，除了各种不同设备对应不同尺寸的布局，它的内容应该和小屏幕上的相同或是单独剥离出来？是否添加广告到小屏幕上？访问速度也是问题，因为内容太大，访客浏览网页慢、流量增加，从而成本也增加。

第一个重大的改进是栅格系统的出现。经过摸索，960栅格系统最终胜出，经典的12栏栅格被设计师们广泛的接纳，甚至成为许多设计师最常用的设计工具。接下来，各种常见的设计元素诸如表格、导航、按钮被标准化，打包成为可复用的套件，这基本上就构成了视觉元素库，其中还纳入了常见的代码。其中最典型的代表就是 Bootstrap 和 Foundation ，它们也使得网站和APP之间界限逐渐模糊。

2009年Windows7

2009年也是微软发布Windows7

微软发布了Windows7，也是革命性的一个系统。相比XP Win7界面更加清爽、清晰。并且加强了透明的样式设计，为Win10亚格力得设计语言奠定了设计语言基础。

此后苹果先后发布了『狮子』『美洲狮』『 Mavericks』等系统，在UI历史上都有很大的价值，只不过都是在Aqua基础上进行的优化

2010年响应式网页设计

惊才绝艳的设计师Ethan Marcotte决定挑战传统的网页设计，它让网页在内容不变的前提下，布局随着窗口和屏幕的变化而变化，并且将这种设计命名为响应式网页设计（Responsive Web Design）。网页设计师依然只需要HTML和CSS就可以实现这种功能，不得不承认这种设计理念非常超前。不过大家对于响应式设计依然有些许误解。对于设计师而言，响应式设计意味着为设计许多不同的布局。对于用户而言，响应式设计就意味着这个网页可以在手机上完美浏览。对于开发者而言，响应式设计意味着如何控制好网站图片应付移动端和桌面端，在不同情形和语义下，拥有良好的下载速度和呈现效果，等等。简而言之，就是一个网站能在任何情况下良好展现。至少在这一点上，所有人能达成共识。

三、扁平化时代

2010年微软 推出他的第一代智能手机 Windows Phone 7，这可以说是扁平化设计第一次在资讯产品上向世人展现其样貌，使用简单的方格状色块与无衬线字体的界面，图标也不再以拟物化呈现，而是去除了细节与阴影。

Microsoft 把这种界面称为「Metro UI」（后来因为和德国零售业龙头 Metro AG 有冲突而改名叫 Modern UI），之后便开始整合到公司旗下的产品，如 Xbox 360 和 Office 系列软件，2012年更是使用在 Windows 8 的动态砖上。

2011同时安卓3.0（专属用于平板电脑的系统）和4.0系统也开始有了扁平化的趋势

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

由乔纳森伊夫主持设计的iOS7一发布就引起设计界和科技界的震荡，摒弃了之前所有的拟物化设计，去掉了投影、去掉了机理，出现了全新的扁平化设计，加入了毛玻璃的理念和设计。同时产生了及其，甚至前所未有对设计的影响，后期出现Material Design和Win10亚格力无不和iOS7有关。

2014年Mac电脑的变革

iOS7历经了一年的发布，苹果发布了又一次震惊世界的OS X 10.10 Yosemite优胜美地。届时苹果所有产品的UI界面全部蜕变成了扁平化设计。

从而提升了移动互联网性能和体验，再一次促进了移动互联网的飞速发展。同时扁平化设计的对内存损耗大大降低，设计成本和效率大大提升，也让更多的APP和网页设计纷纷效仿，从而将互联网设计彻底颠覆。

2014年出现了足以抗衡苹果设计语言的Google Material Design

2014年的夏天，Google正式发布了Android5.0与全新的设计语言——Material Design。基于扁平化设计，加入半拟物化3D空间，着重强调了光影的仿物理化的设计语言。同时强调了模拟真是物理运曲线的动画效果，进而引发了一种动画设计语言的大火-Motion动画。又一次影响大众得设计语言。随后大众的设计语言慢慢融合了iOS和Material Design得设计语言。

网页编写技术的进一步升级，为UI设计带来更多的空间和可能性。新诞生的概念正在推动网页设计。CSS中新诞生的属性，诸如vh和vw（viewport height 与 width），就使得网页元素的位置控制更加灵活自由，一次性解决了设计师纠结多年的顽疾。作为CSS一部分的Flexbox则是另一个新事物，它可以快速创建布局，轻松修改属性而无需编写过多代码。

2015将是前端框架相互借鉴相互融合的一年，随着webcomponent的落地，大家都在向标准靠近。实际上所谓的MVVM框架的关键技术就一个：数据与视图的绑定。在Angular/polymer/knockout/vue/avalon 中，这项技术的实现又可以拆分成两个关键点：模板分析和数据监测。而 React 本质上只是View（视图层），它是Facebook所开发的JavaScript框架，它的唯一目标就是构建高性能的用户接口。开发React就是为了解决其他JavaScript框架都未能解决的一个问题-高效地渲染大型数据集。它采用了虚拟文档对象模型(DOM)和拼接机制，这样，每一次对网页做了更改后，React就只更新与更改相关的部分，而不需要重新对整个站点进行渲染。

四、百花齐放

2010年小米的米UI

2012年魅族flyme

2014年锤子SmartisanOS

2017年Airbnb Desgin

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

SmartisanOS

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

暂且不说锤子推出的拟物化设计是否好看，是否顺应趋势，至少我们看到了不一样的设计价值观，没有出现完全趋炎附势的设计。期间老罗还推出了各式各样有意思的体验升级的交互模式，18年推出了全面屏的交互UI模式，这种探索的精神是我们设计师真正要学习的地方。设计是依附在产品和商业上才能体现其价值，但是我们设计师在专业角度上也不能仅靠商业的成功评价一个设计的好坏和成功与否。

Airbnb Desgin

17、18年爆火的『傻、大、黑』大多数人都觉得出自iOS11，其实这种设计语言是2017年Airbnb Design发布的，并且在Airbnb APP上加以运用。同时Airbnb也发布了一款造福软件业的应用程式动画工具 Lottie ，提供 iOS 、 Android 和 React Native 框架的动画文件库，帮助开发者更容易在原生应用程式中加上动画。有了 Lottie ，设计师在 After Effects 设计完动画后，只需透过After Effects的扩充套件 Bodymovin 将动画转成 JSON 档，再使用 Lottie 渲染JSON档，不用重写程式、便可以直接将动画套用於应用程式中。我们在日常设计中现在就用Lottie只做动效，真的非常好用。

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

百家争鸣的时期对每个设计师都很有机会，也具有很大的挑战性。作为设计师的我们一定要把握当下的趋势，并且具有前瞻性。这篇UI设计历史的文章只是对UI设计行业一个粗略的总结，目的是让大家回过头看一看历史的发展，俗话是以史为鉴，是为了更好的为以后发展做出前瞻性的探索。

更多设计相关内容请关注其他自媒体

微博：二四_二七

微信公众号：二四二七

今日头条：二四二七设计

参考文档：

简书《UI的发展史和UI设计师的界面》

设计之家《微软WINDOWS界面演化史》

极客《Material Design》

Sik《网页简史》