手机网站移动网页ui设计2020趋势

Author: Chris Song

素马克里斯在分享频道发布过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


当然,三百六十五行,行行出状元。只要你是该行业的状元,总是有你发达的时候。我们钻研于一个行业及一个细分的工种时,不一定是只看着钱来做的。更多的是为了自己的存在感,能在这一个行业领域里有所建树。希望大家能坚定自己的人生和职业方向,坚持下来,每天进步,相信终有一天你会变成参天大树

相关阅读