腾讯干货！深度分析2020 UI设计盛行趋势

此前在一些设计网站看到一些设计趋势相关的内容，但大多是属于全品类的趋势。因此，我想通过我自己的相识和一些收集，重新整理一些属于移动UI设计偏向的设计趋势，而且举行一些设计相关的分析。这样或许对于许多移动UI设计师来说会越发的实用一些，而非只是纯粹的停留在相识趋势而已。同时希望这些内容可以起到抛砖引玉的作用，接待大家一起来探索及讨论。

暗夜风（深色模式）深色模式作为2020的主流设计趋势之一，早已上升到系统级此外设计了（ iOS、material design），另外另有一些主流的APP也追随系统举行了深色模式的设计。1. iOS & Material design作为主流的手机系统，对于一些手机APP的设计很是具有指导意义，他们在其官网有有一些相关的指引，建议大家可以去对应的网站详细检察。

一些海内的安卓系统的也深色模式的设计，如OPPO、魅族、华为等。2. 一些主流APP的深色模式海内外的APP都有用使用到深色模式，部门追随系统的设定而变化，例如Instagram、知乎、微信、优酷；而部门则是以主题化的方式举行出现，例如YouTube、QQ音乐。3. 深色模式的设计建议深色模式的设计不能简朴粗暴的举行反色处置惩罚或变暗处置惩罚，处置惩罚不妥可能还会发生反效果。因此需要整体思量深色调的使用规则和逻辑，这里参考Material Design的规范总结了几个较为关键的点。

4. 使用基础色举行延展在设计之初你可以先设定一个最基础的深色，而且使用这个色调去贯串整体深色模式的设计。只管使用深灰色而非纯玄色，因为在深灰色上使用浅色文本的对比相对来说较弱些，可以减轻眼睛阅读的疲劳度。从以下案例来看，「000000」（纯玄色）会显得颜色过深浅色文字过亮；「111111」和「222222」则适中；「333333」相对来说相对较亮，虽然文字阅读并无问题，但需要思量往上叠加后整体设计是否偏灰。

5. 通过层级叠加的颜色变化为你的界面层级设计一个合理的透明度叠加变化规则，例如以底层为基准，往上每一层都叠加2%的透明度变化。如下：底层叠加0%，导航层叠加3%，内容层叠加6%，弹出类浮层叠加9%，操作反馈层叠加12%。

以上是一个举例，实际则需要凭据你的设计需要举行设定。6. 优化深色下的亮色对比水平深色的配景下，文本或图标的饱和度或亮渡过高会发生强对比，容易造成视觉疲劳，因此从白色切换到深色模式下的设计需要举行适当的调整，通过降低饱和度或明度来到达视觉和谐的水平。7. 小结深色模式在各大手机系统及主流APP的推进下，相信会越来越多的APP会追随设计。但其实我们还需要思考，深色模式的设计解决了什么问题？是否都需要深色模式的设计？我们可以一起来探讨下。

新鲜多彩的颜色年轻人一直是移动互联网的主力军，年轻化的UI设计气势派头一直是UI设计师所追求的偏向之一。年轻、活力、生机是年轻化的体现特征，而设计师通过新鲜、多彩、斗胆的颜色来表达这些特征是更容易发生设计共识。如下面的案例，就是通过多颜色搭配、渐变色、对比色等设计方式来表达年轻化的设计。

1. 多颜色搭配从小我私家的履历中总结，如果只使用一种颜色来设计往往容易使界面变得单调，且具有应用的局限性。而多颜色搭配的设计更能让整体的UI界面变得富厚有条理，而且越发贴合年轻化的趋势。这里建议一个主色搭配多个次级颜色，整体上让使用者感知到整体的品牌色调，但却不会以为单调。如以下的一些APP的设计，也是使用主的品牌色再联合一些辅助色举行设计，来到达年轻化和颜色富厚感。

2. 斗胆使用渐变色渐变相比纯色的表达可以更好的拓展颜色的使用，提升颜色的跨度体现，富厚设计质感。渐变跨度的巨细决议颜色的冲突感，小渐变体现柔和的轻质感，大渐变提升色调的对比碰撞可以让界面表达越发鲜明、活力。

渐变对比差别的渐变效果会获得差别的视觉感受，更会影响整体的设计气势派头。而详细使用哪一种渐变则需要依赖于设计师对整体设计气势派头的定和谐对产物调性对掌握。运用撞色通过对比色或相近色的使用让渐变换加富有多样性，提升用色的条理感。

更多渐变的方式通过差别的叠加方式，可以迸发出越发差别的渐变效果。（以下的内容只作为案例展示，不限制有更多的体现形式）3. UI中多彩的体现UI设计的多彩化主要体现在一些控件或组件中，例如我们可以通过图标、按钮、内容模块、插图、配景、投影等内容的设计来富厚整体界面的颜色应用。

图标我们可以通过渐变叠加、对比色使用，又或者2色叠加、3色叠加等多种多样的方式来营造图标的多彩感。按钮通过使用渐变色提升按钮的质感，让原本简朴的按钮变得越发精致并增强按钮的可点击性。固然是否使用渐变需要凭据整体APP的视觉气势派头而定，以下有几点渐变按钮的建议：内容模块在模块的设计中使用差别的色调来区分内容并来营造多彩的气氛设计表达，让整体的模块设计制止过于单调，提高视觉打击力。空缺页插图空缺页的设计不再是简朴的图像，而是使用颜色较为多彩的插画形式，在情感表达上越发富厚和具象。

多彩配景多彩的配景联合简朴的反白文字，在气氛上更具有调性和视觉打击力，同时兼顾内容的表达。彩色投影在多彩的元素下使用带颜色的投影而非使用简朴的玄色投影，更能陪衬多彩的内容元素，整体的感受是一种近似情况色影响的变化，而非简朴的遮挡投影变化。联合多彩的设计，让你的设计越发精彩醒目，常见于一些彩色的内容卡片或彩色的按钮中。

彩色投影泉源于元素自己，通过对颜色对透明度调整来到达效果。4. 小结多彩的设计虽然比简练的设计来得越发吸引眼球，但更多时候需要把控整体界面的平衡，而非天花乱坠。建议可以参考上面枚举的一些内容去实验，是否到达你想要的多彩气氛。

新拟物气势派头2019年底就在dribbble上就开始有人预言拟物化的气势派头，这是一种新拟物化设计气势派头，与以往的拟物化设计不完全一样，是一种介于扁平化和拟物化的新气势派头实验。主要是通过光影的变化来突出内容的区域或模块设计，整体感受相比扁平化的设计来说会越发具有气氛性和视觉打击感。此类气势派头是否适合所有类型的APP场景另有待探讨，或许在一些工具类的APP可以思量举行实验，例如：音乐播放器、盘算器、签到类、操作工具类APP，在UI设计上可以思量在部门按钮、卡片式设计、表单类的内容上举行实验。1. 基本原理最基础的新拟物化效果划分有「凸起效果」和「凹陷效果」，两者差异化在于对光影的处置惩罚方式差别。

凸起效果使用外投影来实现，叠加层级依次为：下层-亮投影-暗投影；凹陷效果效果使用内投影来实现，叠加层级依次为：亮投影-暗投影-下层。亮、暗投影的数值建议偏移值形成正负并保持一致，透明度依据实际情况举行调整。2. 联合颜色以深色、单色、渐变三组颜色举行了实验，整体上来的处置惩罚方式都是以下层的颜色为基础对HSB举行调整，深色与单色的处置惩罚方式较为一致，渐变色的投影或阴影则需要凭据差别的颜色举行调整，来到达合适的效果。

我们可以通过HSB的颜色模式来举行微调，到达明暗投影的效果3. 设计方式拓展常态的体现往往并不难满足我们所有的设计，因此我们可以基于常态的设计样式再联合其他的设计方式，让整体的感受越发富厚。例如下面的一些例子：4. 小结新拟物化的设计虽然新颖，可是否适合所有的设计？这个是值得思考的问题。面临一个新的趋势，建议可以多去研究和相识这方面更深层的内容，这样在实际应用才气越发驾轻就熟。

Tab bar 图标动画Tab bar 作为整个APP的第一触点，给用户通报的理念及信息在整个APP中具有不行替代的重要性。我们的第一感受是粗拙或是精致，都市通过这个简朴的操作切换而获得。因此 tab bar 的设计，往往也磨练着着整个APP设计是否精致的尺度。

Tabbar图标动画的作用主要有：1.提升操作的愉悦感和期待感；2.增强第一视觉焦点的精致度；3.通过动画的设计通报品牌的设计理念。1. 图标动画的多样性tabbar图标动画的设计是多种多样的，包罗有位移、划线、弹性、缩放、透明变化、发抖、填充等等，差别的方式表达出来的设计感受也会有差异。详细可以检察之前写过的一篇文章《Tabbar图标动画设计》举行深入相识：2. 图标动画的工具制作动画的工具有多种多样，作为设计师无需被工具而限制。

而我最常用的有Principle和AE的联合，在设计前期我会使用Principle举行demo设计输出，在确定之后通过AE举行二次绘制并输出动画文件，现在与开发对接的花样或许有APNG、Lottie、PNG序列帧。Principle的优点在于操作轻便，自带的动画下令基本可以满足我们对于图标动画的需求，缺点在于无法生成实现的花样；反之，AE实现动画的方式更多样性，但在使用中并不切合效率性，因此两者联合使用更能满足效率和可实现性。

卡片式的设计卡片式设计对于我们来说并不生疏，从设计类网站上或一些APP中也会看到许多的卡片式设计的案例，卡片式设计也是UI设计中最常用的方式之一。而随着设计趋势的变化，卡片的设计的设计形式也在发生着变化，接下来从几个关键点来分析新的卡片设计趋势。

1. 柔和的圆角从dribbble或IOS的设计上，可以很显着的感受到卡片圆角的变化，大圆角的卡片设计方式变得越来越常见，固然也不是越大越好，设计师需要从实际的设计中去思考和实验。巨细的差异化出现出差别的视觉感受和气势派头差异，我们在设计时更多需要思量我们设计的 产物气势派头或气质是适合大圆角还是小圆角，而非依据一些设计网站上的盛行趋势。

因此基于差别的气势派头或者实际内容场景下举行设定才更为合理。2. 自然的投影新的卡片设计越发趋向自然的投影，削弱投影带来的切割感受，提升界面的平整性。从以下三种效果对比，合理的投影数值可以让卡片的体现越发自然，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过分生硬。

流通的交互反馈流通的动效可以给人线人一新的感受，让使用者感受到动效带来的愉悦性。从设计的角度来看，交互动效并不是锦上添花而是UI设计的必须品，它不应该被强调有或无，而应该被强调好或欠好，好的交互反馈动效可以让整体的设计越发具有品牌调性。1. 相识动画基础原理动画的方式可以有许多差别的方式，而且在许多设计网站都能相识到，下面从以下几个案例来举行分析，并举行优化实验建议。

基于简朴的动效效果，如何通过设计优化让动画变得越发纷歧样且具有差异化。动画的基础原理以AE作为规范来说，动效最基础的原理是由「位移、缩放、旋转、透明度」等方式联合「时间轴和关键帧」而发生的视觉补间效果，一个动效是否流通（快或慢）往往取决于一段时间内所发生的帧数，帧数越少位移距离越大（缩放变化越大、旋转度数越多）则速度越快。相识这些基础知识并举行联合使用，便可以设计出许多纷歧样的动画效果。

动画的基本运动规则以principle作为规范来说，动画的基本运动规则包罗有：默认、缓入、缓出、缓入缓出、弹性、线性、等效果。我们可以直接使用默认的数值，亦可凭据自己的习惯对这些动画效果举行微调设定来到达我们想要等效果。

（差别的demo软件的基本运动规则及应用上差异性基本不会太大，我们只需要选择一款我们习惯的即可。）2. 常见的动效反馈模块我们知道交互动效反馈的重要性，但也需要明确哪些模块可以在设计中举行应用，这里举行了一些梳理其中包罗：页面切换、对话框、上滑浮层、弹出式菜单、触发缩放类（如检察图片）、页面导航、分页转动、小模块滑动、开关类、按钮或模块触发的反馈…等等。3. 案例实验通例的动效方式基本能够满足通例的需要，而设计师在设计的时候更需要追求一些动效的给用户带来的愉悦感和视觉打击力。连动式页面切换许多页面的转场效果是可以被设计为连动的转场方式，主要常见于商品详情页、插图详情页、小说/书籍/专辑等类的详情页。

如下案例，左边为通例的交互方式，我们可以通过差异化的交互设计，让整体的体验越发自然流通。滑出式模块滑出式模块的设计动画设计需要强调怎么泛起怎么收起，通过视觉动线动的引导并见告用户模块的详细泉源，而且展开或收起的时间是否需要一致也值得去思考。

如下案例，通过动画细节的优化，使用弹性的动画效果让滑出浮层越发具有生命力。转动体现滑动操作是很是常见的设计内容，无论是模块的滑动还是整体页面的转动。如下案例，左边是比力常见的整体滑动，但如果每个内容之间赋予一个视觉时间差，那整体的视觉效果和体验感受也会变得越发纷歧样。

触发反馈一些通例的内容，例如按钮、列表、图标按钮、卡片..等的点按可以联合动效的细节变化来增强反馈感受。但我们在实际应用重色是否都需要如此强调，则需要凭据实际的情况而定。4. 小结这里我们可以思考两个问题：1.动效的须要性？2.动效如何举行设计？从小我私家的看法来说，动效是很是具有须要性的，除了可以让整体的感受越发具有差异化，更可以拓展设计师对于每一个设计的思考角度。

另外动效的设计应该是和静态的界面设计一样，都需要举行系统性的思考，应用在每一个细节的效果及动画参数都需要保持高度的一致性。留白增强呼吸感留白的设计可以让我们的界面变得更有呼吸感，相比于紧凑的设计，适当的留白可以让人在阅读时越发具有放松的心理表示。留白是一种对比手法或方式，而非纯粹的淘汰内容来到达留白的目的，在有限的手机屏幕内容我们需要清楚哪些位置或内容可以做到适当留白。1. 顶部留白在界面的顶部淘汰内容的出现或加大内容与界面顶部的间距来到达留白的方式，让使用者从一开始的就降低视觉压迫性。

例如在一些设计APP的游戏详情页、小我私家资料页等较为常见。2. 去线留白通过淘汰线的使用以及间距的调整来到达留白的效果，强调内容的自然视觉分区，淘汰线对内容的信息滋扰。例如在一些列表或具有明确大标题的内容模块下可以实验淘汰线的使用。

3. 借助标题留白模块与模块之间使用较大号的字体，通过大字体的支撑发生越发自然舒适的空间留白。例如iOS的系统界面的顶部大标题设计。4. 增加边距留白适当增加内容与内容之间、内容与屏幕之间的间距来优化界面的空间感，到达留白的效果，增强内容的聚焦。5. 淘汰重色淘汰大面积的重颜色使用，降低视觉条理，让整体界面的设计越发轻量化、扁平化。

例如上下导航的颜色，在无需过渡强调品牌色的情况下，可以思量使用白色或浅色来增强整体界面的呼吸感和留白效果。6. 小结在手机屏幕空间相对有限的情况下，我们的视觉会越发聚焦。过于麋集的设计往往更会造成视觉疲劳，因此更需要多去思考内容设计的空间感，适当的留白可以降低视觉疲劳，提高视觉聚焦和阅读效率。最后总结每年都市有新的设计趋势变化，但实际上应用的设计方法都不会有太大差异。

相识设计趋势可以更好的资助我们去举行设计思考，然后再联合日常磨炼的设计基础能力作出更好的设计。趋势资助我们明确往哪个偏向做，而基础资助我们更好的到达偏向。

本文来源：澳博体育-www.yujia5188.com