关于网页UI设计趋势-细节剖析_网站设计_建站学院

此前在一些设计网站看到一些设计趋势有关的内容，但大多是是全品类的趋势。因此，我想通过我一个人的认知和一些采集，重新整理一些是移动UI设计方向的设计趋势，并且进行一些设计有关的剖析。如此可能对于很多移动UI设计师来讲会愈加的实用一些，而非只不过纯粹的停留在知道趋势而已。同时期望这类内容可以起到抛砖引玉有哪些用途，欢迎大伙一块儿探索及讨论。

1、暗夜风（深色模式）

深色模式作为2020的主流设计趋势之一，早已上升到系统级别的设计了（ iOS、material design），另外还有一些主流的APP也跟随系统进行了深色模式的设计。

IOS & Material design

作为主流的手机系统，对于一些手机软件的设计很具备指导意义，他们在其官方网站有有一些有关的引导，建议大伙可以去对应的网站详察。

一些国内的Android系统的也深色模式的设计，如OPPO、魅族、华为等。

一些主流APP的深色模式

国内外的APP都有用用到深色模式，部分跟随系统的设定而变化，比如Instagram、知乎、微信、优酷；而部分则是以主题化的方法进行呈现，比如YouTube、QQ音乐。

深色模式的设计建议

深色模式的设计不可以简单暴力的进行反色处置或变暗处置，处置不当可能还会产生反成效。因此需要整体考虑深色调的用法规则和逻辑，这里参考Material Design的规范概要了几个较为重要的点。

用基础色进行延展

在设计之初你可以先设定一个最基础的深色，并且用这个色调去贯穿整体深色模式的设计。尽可能用深灰色而非纯黑色，由于在深灰色上用浅色文本的对比相对来讲较弱些，可以减轻双眼阅读的疲劳度。

从以下案例来看，“000000”（纯黑色）会看上去颜色过深浅色文字过亮；“111111”和“222222”则适中；“333333”相对来讲相对较亮，虽然文字阅读并无问题，但需要考虑往上叠加后整体设计是不是偏灰。

通过层级叠加的颜色变化

为你的界面层级设计一个适当的透明度叠加变化规则，比如以底层为基准，往上每一层都叠加2%的透明度变化。如下关于网页UI设计趋势-细节剖析

内容模块

在模块的设计中用不一样的色调来区别内容并来打造多彩的环境设计表达，让整体的模块设计防止过于单调，提升视觉冲击力。

空白页插图

空白页的设计不再是简单的图像，而是用颜色较为多彩的插画形式，在情感表达上愈加丰富和具象。

多彩背景

多彩的背景结合简单的反白文字，在环境上更具备调性和视觉冲击力，同时兼顾内容的表达。

彩色投影

在多彩的元素下用带颜色的投影而非用简单的黑色投影，更能烘托多彩的内容元素，整体的感受是一种近似环境色影响的变化，而非简单的遮挡投影变化。结合多彩的设计，叫你的设计愈加精彩夺目，容易见到于一些彩色的内容卡片或彩色的按钮中。

彩色投影源自元素本身，通过对颜色对透明度调整来达到成效。

小结

多彩的设计固然比简洁的设计来得愈加吸引眼球，但更多时候需要把控整体界面的平衡，而非天花乱坠。建议可以参考上面列举的一些内容去尝试，是不是达到你想要的多彩环境。

3、新拟物风格

2019年底就在dribbble上就开始有人预言拟物化的风格，这是一种新拟物化设计风格，与以往的拟物化设计不完全一样，是一种介于扁平化和拟物化的新风格尝试。主如果通过光影的变化来突出内容的地区或模块设计，整体感觉相比扁平化的设计来讲会愈加具备环境性和视觉冲击感。

此类风格适不适合所有种类的APP场景还有待探讨，可能在一些工具类的APP可以考虑进行尝试，比如关于网页UI设计趋势-细节剖析基层-亮投影-暗投影；凹陷成效成效用内投影来达成，叠加层级依次为关于网页UI设计趋势-细节剖析

小结

新拟物化的设计虽然新颖，但否合适所有些设计？这个是值得考虑的问题。面对一个新的趋势，建议可以多去研究和知道这方面更深层的内容，如此在实质应用才能愈加无往不利。

4、Tab bar 图标动画

Tab bar 作为整个APP的第一触点，给用户传递的理念及信息在整个APP中具备不可替代的重要程度。大家的第一感受是粗糙或是精致，都会通过这个简单的操作切换而得到。因此 tab bar 的设计，总是也检验着着整个APP设计是不是精致的规范。

Tabbar图标动画有哪些用途主要有关于网页UI设计趋势-细节剖析

https://mp.weixin.qq.com/s/XiYtkn21-4Pene_A2eveAw 图标动画的工具制作动画的工具备多种多样，作为设计师不需要被工具而限制。而我最常见的有Principle和AE的结合，在设计前期我会用Principle进行demo设计输出，在确定之后通过AE进行二次绘制并输出动画文件，现在与开发对接的格式大概有APNG、Lottie、PNG序列帧。

Principle的优点在于操作方便，自带的动画命令基本可以满足大家对于图标动画的需要，缺点在于没办法生成达成的格式；反之，AE达成动画的方法更多样性，但在用中并不符合效率性，因此两者结合用更能满足效率和可达成性。5、卡片式的设计卡片式设计对于大家来讲并很熟悉，从设计类网站上或一些APP中也会看到不少的卡片式设计的案例，卡片式设计也是UI设计中最常见的方法之一。

而伴随设计趋势的变化，卡片的设计的设计形式也在发生着变化，下面从几个重点来剖析新的卡片设计趋势。柔和的圆角从dribbble或IOS的设计上，可以非常明显的感觉到卡片圆角的变化，大圆角的卡片设计方法变得愈加容易见到，当然更不是越大越好，设计师需要从实质的设计中去考虑和尝试。

大小的差异化呈现出不一样的视觉感受和风格差异，大家在设计时更多需要考虑大家设计的商品风格或风韵是合适大圆角还是小圆角，而非依据一些设计网站上的时尚趋势。因此基于不一样的风格或者实质内容场景下进行设定才更为合理。

自然的投影新的卡片设计愈加趋向自然的投影，减弱投影带来的切割感觉，提高界面的平整性。从以下三种成效对比，适当的投影数值可以让卡片的表现愈加自然，太深太大的投影会看上去整体卡片过于厚重，太浅太小的投影则看上去过度生硬。

更多卡片式有关的考虑内容，可以关注我之前的文字《浅析卡片式设计》

6、流畅的交互反馈流畅的动效可以给人耳目一新的感受，让用户感觉到动效带来的愉悦性。从设计的角度来看，交互动效并非锦上添花而是UI设计的必需品，它不应该被强调有或无，而应该被强调好或不好，好的交互反馈动效可以让整体的设计愈加具备品牌调性。

知道动画基础原理动画的方法可以有不少不一样的方法，并且在不少设计网站都能获悉，下面从以下几个案例来进行剖析，并进行优化尝试建议。基于简单的动效成效，怎么样通过设计优化让动画变得愈加不同且具备差异化。动画的基础原理以AE作为范例来讲，动效最基础的原理是由“位移、缩放、旋转、透明度”等方法结合“时间轴和重要帧”而产生的视觉补间成效，一个动效是不是流畅（快或慢）总是取决于一段时间内所发生的帧数，帧数越少位移距离越大（缩放变化越大、旋转度数越多）则速度越快。知道这类入门知识并进行结合用，便可以设计出不少不同的动画成效。

动画的基本运动规则以principle作为范例来讲，动画的基本运动规则包含有关于网页UI设计趋势-细节剖析页面切换、对话框、上滑浮层、弹出式菜单、触发缩放类（如查询图片）、页面导航、分页滚动、小模块滑动、开关类、按钮或模块触发的反馈...等等。

案例尝试常规的动效方法基本可以满足常规的需要，而设计师在设计的时候更需要追求一些动效的给用户带来的愉悦感和视觉冲击力。连动式页面切换不少页面的转场成效是可以被设计为连动的转场方法，主要容易见到于产品详情介绍页、插图详情介绍页、小说/书本/专辑等类的详情介绍页。如下案例，左侧为常规的交互方法，大家可以通过差异化的交互设计，让整体的体验愈加自然流畅。