素马克里斯在分享频道发布过2018-2020年的手机网页、移动应用网站ui设计趋势。为了让从事ui设计的同学们能更清楚的认识ui每年的设计新趋势，以及其设计特点、发展现状及就业前景，今天特意摘去2019和2020年ui界面设计趋势，图文讲解，希望你能从中吸取到有用的技巧。
什么是ui
-
为照顾部分即将从事ui设计行业的同学以及刚刚入门的设计师们，我们先从简单的ui概念入手。
UI设计则是指对软件的人机交互，操作逻辑，界面美观的整体设计。好的UI设计不仅让软件变得有个性有品位，还要让软件的操作变得舒适，简单，自由，充分体现软件的定位和特点。
UI主要分为三大块
-
视觉设计、交互设计、用户体验
如果把一款软件产品比作-一个美女的话，视觉就是一个美女的化妆和打扮，交互就是一个美女的五官位置及骨骼体态，用户体验就是美女是否善解人意，功能贴心，易用好用等。
视觉UI设计，又被称为GUI=图形用户界面(Graphical User Interface, 简称GU,又称图形用户接口)。主要解决软件产品风格，例如商务风的，女性化的之类的，对图标及元素进行尺寸及风格上的美化，在产品的功能辨识性及控件统-一性，美观性上进行设计。
交互UI设计，又被称为Ixd=交互设计，(Interction Design 的缩写),是定义、设计人造系统的行为的设计领域。主要解决页面跳转逻辑，操作流程，信息架构，功能页面布局，事件反馈，控件状态等问题。
用户体验设计，又被称为UXD=用户体验设计(英语: User ExperienceDesign)，是贯穿于整个设计流程，以调研挖掘用户真实需求，认识用户真实期望和内在心理及行为逻辑的一套方法。使用数据建模测试等手法来辅助提升软件产品的易用性，用户粘性，用户好感度的- -种综合工作方法。
UI设计师职业发展规划
-
UI设计师分成2种路线,第一种是视觉设计做到底竖向发展的UI设计师，第二种是横向发展的设计师，2种设计师的技能轴模式是不一样的，按每个人的性格及志向，2种设计师在行业中都十分受欢迎。
1.新手UI设计师:熟悉操作基本的Ul绘制软件，如PS，AI, SKETCH，XD等，能按照产品交互提供的线框图绘制UI视觉:能按照功能绘制相对的图标，知道图标的尺寸规范，配色统一性等，能很好的诠释图标的功能寓意:能按照每个平台绘制适合这个平台的UI控件,能准确的切图及标注坐标及字号，能按产品定义绘制，界面风格及元素图标，着重软件及视觉表现，辅助资深设计做一些 简单的界面设计。
2.进阶UI设计师:在新手UI的基础上，有一定的沟通能力及项目经验，知道如何凸显界面上的信息层级，做出来的界面成熟层级清晰有节奏感，赏析悦目。对流行趋势的把握，擅长多种风格表达，有- -定的自我设计认知及设计偏好。开始研究产品定义及用户体验对界面的影响，能保质保量完成部分模块的界面设计，切图交付。开始着手于更多的软件，如交互动效类，交互线框原型类的软件的探索及使用。
3.高级UI设计师:能够独立完成落地一个软件产品的整体设计，设计出符合此产品风格，且兼顾当下UI流行趋势的设计。经历过APP,网页，运营，PC，平面视觉等多种项目，能独立完成产品从0到1的线框原型，熟悉各种UI设计规范，本身除了视觉设计，还有交互动效，3D表现，运营插画，HTMLSCSS3 等各种拿得出手的附加技能。
4.资深UI设计师:除了能很好的完成软件的整体设计外，能很好的与客户及产品，总监，程序沟通，理解产品需求，对软件整体框架，交互操作流程有整体认识，而不仅仅以好看不好看作为一个产品UI设计的评判标准，会按公司能力和项目时间，合理的调配设计时间资源和输出方案。会竞品分析，会多种用户体验调研手法，佐证自己的设计，会加入到自己项目的后续上线测试及迭代中，懂使用数据及调研驱动设计升级，熟悉程序开发框架。
5.首席UI设计师:把握公司产品的整体的设计方向，深入了解公司业务流程，定立设计标准及规范，主要视觉建议UI规范文档，做出公司产品强有力传播价值的设计风格。参加UX,UI方面展会论坛，实现公司设计价值输出。
6. UI设计总监:对接客户及公司高层，协调公司的设计资源，管理项目资源，建没设计团队，积极推动项目进展，及总结报告向高处及客户汇报。
竖向发展的UI设计师技能为:
1. UI视觉设计
2.产品交互架构
3.用户体验方法
4.产品项目管理
5.代码框架设计
6.运营插画设计
7.动效原型表现
8.数据调研分析
多管齐下提升以上8个技能，甚至将来夸专业，直接转型成为产品经理，交互设计，用户体验设计，创业公司合伙人，数据分析师，前端等岗位。
搞清楚什么是ui设计及其设计特点，发展现状和就业前景后，我们回顾一下2018年移动网页、应用App等的ui设计趋势。
2018移动应用及网页UI设计趋势
-
趋势一：扁平化、极简主义设计依然是主流
扁平化相信大家已经很熟悉了，概念的核心意义是：去除冗余、厚重和繁杂的装饰效果，倡导简单、清晰、空间、留白等，突出核心的设计元素。目前很多app都开始去除多余的线条，通过间距来拉开关系；去icon化也是一种趋势，开始流行；这些设计行为目的都是为了让用户使用时更为直观和更有目的性，令人满意的审美趋势也让极简的ui设计拥有良好的用户体验。
趋势二：更大、更粗的字体，留白更多
相信你们很多人已经升级了iPhone新系统，随着ios11的发布，新的设计趋势也随之流行开来。如果你熟悉Material Design（以下简称MD）的话，ios和Android在设计上正慢慢的靠近。在扁平化设计中，文字排版影响着信息层级展示的清晰与否，通过文字的字号、字重、间距、颜色等对比去建立出清晰的信息层级，而不用太多的装饰元素。
同样的，Airbnb也采用了粗标题设计。大标题文本包含一组带有图片和描述的文字，文字之间保持较大的留白，看起来它们互不干扰，又不会令界面看上去显得松散，因而带给用户非常轻松的浏览体验。
对于一些国内的电商App，采用这种设计方式的可能性较小，因为对于这些应用，页面内的位置相对寸土寸金，应该不会用大字体来浪费空间
趋势三：icon图标的变化，由线转面
自ios7开始，苹果规范了2px的线性图标；到了ios10中，线性图标的选中状态变成背景填充样式；而在现在的ios11中，采用了面性图标，未选中和选中状态只有颜色上的区分，并且图标更加圆润，目前这种设计，国外的app用的比较多，国内还相对比较少见，采用ios10的样式较多。
趋势四：给icon图标加上动效，更加有趣味
趋势五：icon的细节刻画越来越重要
目前icon的设计已经不单单只满足于简洁易懂为前提，同时细节的设计也十分重要。在色彩上可以加以渐变，线性图标也可以加以色彩的对比等等，会显得icon是精心设计过的，带给用户的感受也会上一个档次。
趋势六：卡片、投影相结合
ios11中采用了大圆角卡片设计，它不再像过去MD中的小圆角那样呆板，大圆角让设计更加轻快大气。相信大家已经看到了很多卡片都使用了投影这一手法，轻微的、似有似无的投影，不会被用户立即察觉，但是会给设计增加深度，形成层叠的关系，更加醒目，可以更好的抓住用户的注意力。
趋势七：渐变色当然依旧十分流行
渐变色是今年最大的趋势之一，开始于16年，Instagram将自己的logo改变成渐变色，这一趋势便开始流行，国内的app也开始效仿，目前淘宝、QQ等状态栏就是使用自己的品牌色进行渐变。在设计渐变色的时候，要做到色彩的过渡柔和，颜色明快，避免生硬，可以有效的提升用户体验。
趋势八：3D效果正流行
今年C4D大热，相信大家已经感受到了，今年双十一很多商家都使用了3D效果，有的还加上了动效，可以让你全方位、多角度、更加真实的观察商品。目前还不会C4D的设计师们，为了提升你的竞争力，有必要学起来了，毕竟技多不压身。
趋势九：插画风格也是大趋势
插画风格运用的越来越广泛，适用于app当中的启动页、缺省页、banner图、专题头图、弹窗插画、icon等等，运用时要和app的整体风格搭配，有趣味、富有创意的插画会让用户对app的好感大幅提升。
btw，今年比较流行的孟菲斯风格设计，我个人也很喜欢，在地铁站看见各大品牌挂出的海报十分抢眼。该风格色彩比较鲜明、活泼、多采用高饱和色彩，2020年估计还会继续流行一阵。
趋势十：交互动效一直很重要
交互动效越来越多的使用在ui设计中，它对于产品设计的作用包含：传递层级和状态信息，好的动效应该是隐形的，以提高可用性为前提，提升体验为目的。它的几点特性：快速且流畅、恰到好处的反馈、提升操作感受、提供良好的视觉效果。
趋势十一：响应式设计
随着移动端的增长，手机已经超越了pc机作为日常浏览网站的第一选择，Google推出的MD响应式栅格系统，由于人力成本过高，国内大部分网页都没有做，国外采用响应式设计的网站有：Youtube、Spotify、Behance…国内的有京东、腾讯视频等。这种响应式设计确实比较复杂，但是这个趋势会一直继续下去，对于产品、公司而言，还是需要量力而行的进行升级。
趋势十二：VR/AR/VUI是未来的大趋势
众所周知，现在VR（虚拟现实）和AR（增强现实）大火，它俩的核心都是计算机视觉。VR目前在娱乐领域被使用，而AR将会真正影响我们的工作和生活，多用于多媒体、市场营销、教育等方面。
2020年手机网站移动应用网页ui设计的趋势又是什么？
-
数据的统计是最辛苦的。我们需要根据全球各大设计网站发布的作品来对比分析，例如behance设计官网、dribbble官网、awwwards官网、coolars.com及216c.com等。也结合一些企业建站同行出品的，为品牌集团企业认可的一些案例作出综合对比分析。
Dark Mode 黑夜模式
黑夜模式无疑是今年比较热的一个设计方向，为什么这么说？
首先是Google材料设计语言更新了，增加暗夜模式。同时今年Q3季度苹果发布IOS13设计语言系统，里面增加暗夜模式。
不用说后续很多APP应用都会跟随两大厂商更新这个黑夜模式设计方向，无疑2020年这个将会持续。黑夜模式出现为减少用户眼睛疲劳，提升产品使用体验。
Blank design 留白设计
今年下半年观察到Facebook旗下的Messenger应用和前段时间雅虎更新他们家品牌语言的同时，也重新设计他们家所有产品。
我们可以看到如下应用截图，基本去分割线，通过留白区分层级。这样的好处可以减少分割线对内容的干扰，界面呼吸感增强，达到简约设计的目的。
Apple Design 苹果设计风格
苹果风一直盛行至今天，包括大圆角卡片设计、大标题、粗字体。苹果今年刚刚更新的IOS13设计语言同样的是增强了卡片设计。
这种风格将会在2020年继续盛行，因此作为设计师我们更应该提前去对这种趋势熟练掌握。
卡片设计作为承载内容的容器，其实更适用今天移动互联网的大方向，因为卡片可以作为一个容器封装复杂的内容，使得模块层级区分明显，适配性也是更强，更聚焦，来看下具体案例。
Brand 品牌渗透
为什么要说品牌渗透(品牌vi在网页设计中应用中的延伸)？Google 在系统设计语言里面增加图形特征模块，是什么？就是通过连接品牌元素到产品设计中。
素马在灯饰行业雷曼施品牌的官方网站建设中，巧妙运用了brand品牌渗透法。
到今天很多应用已经开始熟练掌握这种设计思路了，比如运用到图标里面或者界面设计中。
苹果虽然没有很明确公开说明，但是我们可以从苹果家族设计语言可以看出，包括线下体验店、手机硬件、包装盒以及各种各种物料设计，都是一种白色语言设计风格。
通过颜色与图形特征做品牌区分，苹果算是目前做的最好的，史无前例。那么这种趋势在2020将会一直保持。
Grid Design 网格化布局
网格化是一切设计系统的基础，Materials Design,Apple Design,IBM Design,Naver Design,等等这几家在设计语言基础上对网格研究与应用算是比较成熟的，Naver方形网格，Google的8px网格，IBM 2PX网格，苹果其实没有很强调他们家网格系数，其实我们可以细看他们的设计规范，已经提到8px Grid。因此网格化布局在2020将是非常重要的一个工具。
一致的网格基因能够沿用到设计体系的任何地方，包括布局、字体行高，图标网格等等
Motion 微动效
5G时代已经到来，加上目前硬件升级，动效的普及已经不再是难题。我们可以慢慢发现目前很多产品设计里面都开始加入动效，来提升产品体验，同时动效也有很强的指导性质。
在某些场景下，使用动效能够很好与用户进行互动交流，因此在2020年动效的使用将会越来越多。
3D Animation 3D动画
随着硬件升级，5G时代开始大面积推广与普及，在应用程序里面使用3D动画来展示产品是一个很不错的选择，3D更加贴近真实物理环境，贴近我们生活。
以上通过图文对比，解析2019、2020年的ui设计趋势的设计特点及不同之处后，我们其实还会更关心，一直研究ui设计工作，将来是否能有出息，成为互联网一有用人才。
UI设计师收入
-
以中国人才热线BAT等网络巨头公司招聘发布的信息为参考
1.1~ 2年初级设计师，基本收入在6~ 8K之间，优秀的可以超过8K
2.2~ 3年中级设计师，基本收入在8~ 12K之间，优秀的可以超过12K
3.3~ 5年资深设计师，基本收入在12~ 15K 之间，优秀的可以超过15K
4.5年以上高级设计师，基本收入在15 ~ 30K之间，优秀的可以超过30K
5.首席设计师及总监管理岗，基本收入在20 ~ 50K之间，优秀的可以超过50K
当然，三百六十五行，行行出状元。只要你是该行业的状元，总是有你发达的时候。我们钻研于一个行业及一个细分的工种时，不一定是只看着钱来做的。更多的是为了自己的存在感，能在这一个行业领域里有所建树。希望大家能坚定自己的人生和职业方向，坚持下来，每天进步，相信终有一天你会变成参天大树！
