研究主题：提升动效可用性
研究对象：12条UX动效应用法则
“作为UX/UI设计师，我该如何适当在UX设计中加入动效？”，我总结了一些经验法则，可以很好地回答这个问题。在过去5年里，我的UI动画工作室发表的教程，非常幸运可以在40多个国家/地区，以及数百个顶级品牌设计咨询公司中指导UX/UI设计师们。
研究UX/UI动效超过15年后，我得出了一个结论——其实有12个规律方法来帮助提升UX动效设计。我将这些机会称为“ 12条UX动效应用法则”，它们可以通过多种创新方式进行叠加和组合使用。
我将宣言分成5部分：
-强调动效的主题；
-实时与非实时交互；
-提升动效可用性的4种方法；
-原理，技术，特性和价值；
-12条UX动效应用法则。
设计人员通常将用户界面中的运动主题理解为“ UI动画”（实际上不是），所以我觉得在开始说12条原则前，有必要为大家普及下基础。
设计人员通常将“ UI动画”视为是让用户体验更愉悦的东西，实际上并没有增加太多价值。因此，UI动画通常被视为UX的后儿子。另外，用户界面动效，它被认为属于迪士尼的12条动画原理范畴，我在自己的《UI Animation Principles — Disney is Dead》一文中进行了反驳。
在我的宣言中，我将证明UI动画原则与“ 12 UX in Motion Principles”的关系，就像是建筑构造和建筑风格一样，是各自独立的。或者这样理解，一个建筑结构被物理建造后才会实际存在（施工后），但是原则理论却能指导物理建造。
动画就是工具，而原则是用来指导工具使用的，因此，原则理论对设计师的影响力更大。实际上，多数设计师经常在UX设计中，将“ UI动画”视为一种更高级的设计形式。
区分“状态”和“作用”很重要，UX中的大多元素是静态的，例如设计组件。用户体验中的行为基本上是暂时的，是基于动作的。一个元素是被隐藏的，或正在被隐藏。如果是后者，动效的引入就可以很好地提升可用性。
另外，可以将交互的时间都视为实时或非实时发生。实时是指用户直接与用户界面中的对象进行交互。非实时意味着对象行为是事后交互的：它在用户操作之后发生，并且是过渡的。
这是一个重要的区别。实时交互也可以被认为是“直接操纵”，因为用户正在直接和界面对象进行交互。用户使用界面时，界面行为正在发生。非实时交互仅在来自用户的输入之后发生，并且具有将用户短暂锁定在用户体验之外的作用，直到转换完成。认知这些差异性，会在我们学习12项原则时发挥帮助作用。
这4点代表判断用户体验可用性时的依据：
-预期值
分两个方面——设计为用户带来的感受，以及实际呈现效果。换句话说，作为设计师，我们希望最大程度地减少用户期望与他们体验之间的差距。
-连续性
既代表用户流程，也代表用户体验的“一致性”。可以从“内部连续性”（场景内的连续性）和“内部连续性”（构成整个用户体验的一系列场景内的连续性）的角度来考虑。
-叙述性
是用户体验中事件的线性进展，一系列微妙的变化和动作串联在一起是，就构成了用户体验流程。
-关联性
指导用户理解和决策界面中组件之间的关系。
泰勒·韦恩（Tyler Waye）写道：“原理……是产生各种技术的基本前提和功能规则。无论发生什么，这些要素都保持一致。”我们可以设想一个层次结构，其中“原则”在顶部，“技术”在第二，接下来是“内容”，“量值”在最底部。可以将技术视为把原则实际执行的一种呈现手法，类似于我们常说的“设计风格”。
“属性”是特定对象的参数，这些参数会被动画化以创建该技术。这些包括（但不限于）位置，不透明度，比例，旋转，锚点，颜色，笔划宽度，形状等。“量值”是实际的数字属性值，它们会随时间变化以创建所谓的“动画”。
比如，设计一个飞机降落的动效，我们可以使用“模糊原理”，模糊和不透明度调至25px和70％。现在我们有了一些可以使用的工具。更重要的是，这些语言工具与任何特定的原型工具无关。
缓动，偏移和延迟与定时有关；处理与对象关系有关；变换，数值变化，遮罩，叠加和复制都与对象连续性有关；视差与时间层次有关。模糊度，维度和滑动变焦都与空间连续性有关。
发生即时事件时，对象行为符合用户期望。
所有（实时或非实时）的动效都非常缓和。这种设计轻松搭建了一种自然舒适的氛围，也有一种连续感。顺便提一句，迪士尼将其称为“慢进慢出”。
左侧示例的线性运动，看起来很好像糟糕。第一个示例没有很强的动效，但呈现出来的也很流畅。以上三个示例都有确切的帧数，并且演示的时间相同，唯一的区别是动效的缓和程度。
作为关注可用性的设计师，除了美学之外，我们还需要多提出质疑，哪个示例更能提升可用性？我在这里介绍的情况是缓动固有的特点。在适当缓动情况下，用户会感觉动作本身是无缝的并且在很大程度上是不可见的，这是一件好事，因为它不会分散注意力。线性运动明显可见，并且感觉不完整且分散注意力。
我们再来看右边的示例，它也不并不是天衣无缝的。实际上，它具有明显的“设计”感，我们会注意到物体是如何着陆的，但与左侧线性运动示例相比，它仍然感觉“更正确”。
我想向您开放的是一个轻松的运动世界。作为设计师，您实际上可以在项目中创建和实现无限的“缓动”。所有这些放松都有自己的期望响应，它们会在用户中触发。
引入新元素和场景时，定义对象关系和层次结构。
“偏移与延迟”受迪斯尼动画原理影响，本例中为“跟随并重叠动作”。
但是，重要的是要注意，方法虽然类似，但目的和结果却不同。迪斯尼的《原理》可产生“更具吸引力的动画”，而《UI动画》的原理则可产生更多可用的体验。
这一原则的效用在于，它通过“告诉”用户界面中对象的性质，预先为用户设置成功的条件。上面参考中的叙述是顶部的两个对象是一组，而底部则是分开的。顶部的两个对象可以是非交互的图像和文本，而底部的对象可以是按钮。
甚至在用户注册这些对象是什么之前，设计人员就已经通过运动告知这些对象是“分离的”。
Credit: InVision
在上图示例中，悬浮按钮（FAB）转换成了包含三个按钮的标题导航元素。由于按钮在时间上彼此“偏移”，因此最终通过“分离”来提升可用性。换句话说，设计人员是在利用时间本身来说（甚至在用户注册对象之前）对象是分开的。这可以让用户完全独立于视觉设计，了解界面中对象的特性。
以下是一个示例：
Credit: Jordi Verdu
在上面的例子中，静态视觉设计告诉我们在背景上有图标。假设这些图标都是彼此独立的，并且做着不同的事情。
图标被分组为行，并且表现得像单个对象。它们的标题同样被分组为行，并且表现得像单个对象。动效告诉用户这些界面元素不是她的眼睛所看到的。在这种情况下，我们可以说界面中对象的时间行为并没有提升可用性。
与多个对象进行交互时，创建空间和时间层次关系。
这是一项强大的原理，可“关联”用户界面中的对象。在上面的示例中，顶部或“子级”对象的“ scale”和“ position”属性作为底部或“父级”对象的“ position”属性的父级。
处理对象属性与其他对象属性的链接，创建对象关系和层次结构。
还可以使设计人员更好地协调用户界面中的时间，同时与用户交流对象关系的本质。回想一下，对象的“属性”包括以下内容：“比例”，“不透明度”，“位置”，“旋转”，“形状”，“颜色”，“值”等。这些属性中的任何一个都可以链接到其他任何属性，以在用户体验中创造协同作用。
Credit: Andrew J Lee, Frank Rapacciuolo
在左侧示例中，“表情”元素的“ y轴”是圆形指示器，也是“ x轴”的父级。当圆形指示器元素沿水平轴移动时，其“子级”元素沿水平和垂直方向移动（同时被遮罩）。此功能最好可以“实时”互动，当用户直接操作界面对象时，设计人员通过动效与用户沟通，将其联系起来。
创建关联有3种形式：“直接关联”（请参见上面的两个“延迟”示例，“反向”示例，请参见下文）。
延迟和反向
对象实用程序更改时，创建连续的叙述流状态。
关于运动原理“转换”中的UX的文章已经很多。在某些方面，它是动画原理中最明显和最深刻的部分。
转换是最容易识别的，主要是因为它效果很突出。我们注意到，“提交”按钮将形状更改为径向进度条，最后再次将形状更改为确认复选标记。它完整的展示了一个功能，并引起了用户注意。
Credit: Colin Garven
变换所做的是无缝地将用户转换为不同的UX状态或“是”（如这是一个按钮，这是一个放射状的进度条，这是一个复选标记），引导成所需的结果。通过这些功能空间将用户吸引到了最终目的地。
转换的作用是将用户体验中的关键时刻从认知上“分块”为一系列无缝且连续的事件。这种无缝性可以提高用户的感知度，留存率和任务成功率。
当量值主体发生变化时，创建动态且连续的叙事关系。
基于文本的界面对象（即数字和文本）可以更改其值。这是那些“难以捉摸的明显”概念之一。
文本和数字更改非常常见，以至于它们绕过我们，而我们却没有给他们带来区别和严谨性，以评估它们在提升可用性方面的作用。
那么，当值改变时用户会经历什么？在用户体验中，运动中的12个用户体验原则是提升可用性的机会。这里的三个机会是将用户与数据背后的现实，代理的概念以及价值本身的动态性质联系起来。
让我们看一下用户仪表板的示例。
当数字值未进行加载时，用户看到的数字对象是静态的。它们就像涂漆的标志，显示时速限制为55英里/小时。
数字和值表示现实中正在发生的事情。现实可能是时间，收入，游戏得分，业务指标，健身跟踪等。我们通过运动来区分的是“量值主体”是动态的，而这些量值反映的是该动态价值集中的某些东西。
这种关系不仅会被视觉上包含价值的静态对象所迷失，而且还会失去另一个更深层次的机会。
Credit: Barthelemy Chalvet, Gal Shir, Unknown
当通过显示或隐藏对象或组的哪一部分确定实用程序时，在接口对象或对象组中创建连续性。
遮盖对象的行为可以被认为是遮盖对象形状与效果之间的关系。
因为设计师们熟悉静态设计中的遮盖，我们有必要同UX运动原理“屏蔽”做区分，因为它是以一个行为动作发生，而不是作为一个状态。
通过暂时使用对象的显示和隐藏区域，效用以连续和无缝的方式转换。这也具有保留叙述流的效果。
Credit: Anish Chandran
在示例中，页眉变成相册时会更改边界形状和位置，但不会更改内容。既改变了图像的效果，同时将内容保留在蒙版中——这是个相当巧妙的技巧。这是非实时发生的，是一种过渡，在用户执行某个操作后即被激活。
请记住，UI动画原理是暂时出现的，并通过连续性、叙述、关系和期望来提升可用性。在上述参考中，对象本身不变，但也具有边界和位置，这两个因素最决定设计的样子。
当分层对象依赖于位置时，在视觉平地中创建与空间的关系。
叠加层通过允许用户利用平地排序属性，来克服非空间层次结构的缺乏，从而提升可用性。为了使飞机稍微降落，Overlay允许设计人员使用运动来传达与位置有关的对象，这些对象存在于非3D空间中其他对象的后面或前面。
Credit: Bady, Javi Pérez
在左侧的示例中，前景对象向右滑动以显示其他背景对象的位置。在右侧的示例中，整个场景向下滑动以显示其他内容和选项（同时使用“偏移与延迟原理”传达对象的个性）。在一定程度上，作为设计师，“层次”的概念是如此明显以至于不言而喻。
当新对象出现和分开时，创建连续性、关系和叙述。
在当前场景中（以及从当前对象中）创建新对象时，以叙述方式说明它们的外观非常重要。在此宣言中，我强烈主张为对象的起源和离开创建叙事框架的重要性。
简单的不透明褪色往往无法达到此效果。遮罩，克隆和维度是三种基于可用性的方法，可以产生很棒的使用体验。
Credit: Jakub Antalík, Jakub Antalík, Unknown
允许用户在空间上定位自己与对象或场景的关系，而非在视觉层次。
与“蒙版运动原理”中的UX相似，“模糊化”既作为静态现象又作为暂时现象存在。这可能会使没有时间思考经验的设计师（即瞬间之间的瞬间）感到困惑。设计人员通常按屏幕设计或按任务设计。认为遮蔽是被遮盖的行为，而不是被遮盖的状态。静态设计表示被遮盖的状态，引入时间可以使我们了解物体被遮挡的行为。
Credit: Virgil Pana, Apple
从以上两个示例中，我们可以看到，看起来像透明对象或叠加层的遮挡也是一种涉及时间上多个属性的交互。各种常见的技术包括模糊效果和降低整体对象透明度，使用户知道她正在操作的其他非主要内容，即在主要对象层次结构“之后”存在的世界。
用户滚动时，在视觉平面中创建空间层次结构。
作为运动原理中的UX，“视差”描述了以不同速率运动的不同界面对象。
使用视差，用户可以在保持设计完整性的同时专注于主要动作和内容。背景元素会为用户在知觉和认知上“消失”。
Credit: Austin Neill, Michael Sevilla
这对用户的影响是，在使用期间清楚地定义各种对象关系。前景对象或移动“快速”的对象在用户面前显示的“更近”。同样，背景物体或“移动较慢”的物体也被视为“离得更远”。
设计人员可以使用时间本身来创建这些关系，以告诉用户界面中哪些对象具有更高的优先级。因此，将背景或非交互式元素进一步“推后”是有意义的。
当新对象出现和离开时，提供空间叙事框架。
对用户体验至关重要的是连续性现象以及位置感。维度提供了一种强大的逻辑方式来克服用户觉得平庸的体验。人类非常善于使用空间框架在现实世界和数字体验中导航。提供空间维度的出现及消失的参考点，有助于增强用户对于位置的感知。
此外，维度原则克服了视觉平面中的分层悖论，出现在其他对象的“前面”或“后面”。维度以三种方式呈现：折纸维度，浮动维度和对象维度。折纸的维数可以用“折叠”或“铰接”式的三维界面对象来考虑。
折纸维度示例
由于将多个对象组合为“折纸”结构，因此即使看不见隐藏对象，在空间上仍可以说它们“存在”。这有效地将用户体验呈现为连续的空间事件，用户可以在交互模型本身以及界面对象本身完成操作。
浮动维度为接口对象提供了空间的起源和偏离，使交互模型直观且具有很强的叙事性。
浮动维数示例
在上面的示例中，维度是通过使用3D“卡片”来实现的。这提供了支持视觉设计的强大叙事框架。通过“翻转”卡片来扩展叙述，以访问其他内容和交互性。
维度是一种强大的引入新元素的方法，可以最小地降低突发性。维度系数会让交互对象具有更模拟真实感。
对象维数示例
多个2D层在3D空间中排列形成真实尺寸的对象，它们的维度是在实时和非实时过渡时刻显示的。物体维数指使用者在不可见的空间位置上产生对物体效用的敏锐意识。
在导航界面对象和空间时保持连续性和空间叙述。
移动（Dolly）和变焦（Zoom）是电影概念，指的是与相机有关的对象的运动，并且图像本身在帧中的大小从远摄到近摄平滑地变化（反之亦然）。
在某些情况下，无法判断对象是否正在缩放，它是否正在朝3D空间中的相机移动或相机是否朝着3D空间中的对象移动，以下三个示例说明了可能的情况。
图层是在摇动，缩放还是在移动相机？
将“移动”和“缩放”的实例视为独立的，因为它们涉及连续变换，并且满足运动原理中用户体验的要求：它们通过运动来提升可用性。
左边的两个图像是镜头滑动缩放，而右边的图像变焦缩放
多莉（Dolly）是一个电影术语，适用于推进或远离对象的相机运动（它也适用于水平“跟踪”运动，但在可用性方面不那么重要）。
Credit: Apple
在UX中，在空间上，此运动指的是观察者视角的变化，也可能是指在对象更改位置时保持静态的视角。多莉原理通过连续性和叙述性，来无缝过度对象目标。多莉还可以结合“尺寸原则”，从而获得更多空间体验和更多的深度，向用户传达当前视图“前”或“后”的其他区域。
缩放指的是既不是透视也不是物体在空间上的移动，而是物体本身在缩放（或者我们的视野正在缩小，从而导致图像放大）。这向用户传达对象所在“内部”区域的信息。
作为 UI 设计师来说，掌握产品设计中的每个组成要素是非常必要的，所谓精细化的设计就是把控好每一个细节的深入。随着大屏手机的普及，在人机交互的探索上面设计师追求着更多提高用户体验的设计方式，不过万变不离其宗，用户体验沉淀下来的行为习惯依然影响着我们的设计。
就拿导航设计来深入探索，随着产品设计的不断推进，很多新颖的设计呈现带给用户更多的操作体验。本文就以移动端底部标签栏导航为案例分析，和大家一起探索一下底部标签栏导航设计的千奇百态。
分享目录
一、关于底部标签导航
二、UI 设计注意事项
三、UI 表现层类别分析
四、移动端线上案例分析
五、总结
一、关于底部标签导航
移动端导航栏设计相当于自身的骨架，是支撑产品中功能交互和内容传播的血肉。导航系统指引着用户的操作轨迹，引导用户抵达目的地和进行相关的操作，将零散的内容和功能进行组织形成结构化的可视轨迹。导航的存在因此显得格外重要，也是梳理功能结构需要重点确定的内容，以此来形成整个产品的脉络。
移动端导航栏比较常见的有：底部标签栏导航、舵式导航、顶部标签(Tab)导航、宫格式导航、轮播（平铺）式导航、悬浮 icon 导航、列表式导航栏、抽屉式导航、下拉导航/菜单导航等等。我们比较常见的产品中采用底部标签栏导航的居多，便于用户进行频繁的操作，这也是本文接下来重点和大家探索的话题方向。
在移动端产品中底部标签栏导航是最常用的导航模式，常作为一级目录的导航，位于产品界面底部。根据用户对于界面的操作热区来看，底部是用户可以轻松点击的区域，无论用户单手还是双手操作都十分便利。
在底部标签栏导航的基础上进行拓展栏设计也是比较常见的形式，也就是舵式导航。突出中间的功能强化用户的关注度，引导用户使用更多延展功能。底部标签栏导航和底部（舵式）拓展栏都属于底部导航的范围，本文将会重点以此类型为主进行梳理。
二、UI 设计注意事项
底部标签栏导航非常直观的告诉用户当前的位置，也便于用户进行同一层级间的不同模块切换。由于具有很强的包容性，不会与其他功能模块形成干扰，也能与多种导航模式进行组合使用。
底部标签栏导航在模块的选择上面通常是 3-5 个，比较常见的为 5 个，3 个模块相对比较松散，运用案例不是很多，除非业务功能较少。在设计表现形式上面有：icon + 文字、纯 icon、纯文字形式，比较主流的还是 icon + 文字的形式，可以降低用户的理解成本和记忆负担，提高用户的操作体验。
底部（舵式）拓展栏是为了突出中间功能设计，吸引用户关注度，提高更多隐藏功能的使用概率。这种导航模式较为常见，比如转转、抖音、马蜂窝旅游、闲鱼等等均有使用。可以提高导航栏设计的趣味性和特征性，引导用户操作更多功能和贡献更多内容。不过这样的设计由于关注度被吸引，进而影响其它一级模块的关注度，由于隐藏的功能增加了用户的记忆负担和操作负担，利弊权衡需要产品设计师进行评估。
在进行设计的过程中，功能模块的确定需要起到牵引的重要作用，链接起整个产品的功能脉络；设计表现上面需要区分默认和点击状态，可以跳出规范的束缚，但是需要在不影响其它业务模块的前提下进行。
三、UI 表现层类别分析
底部标签栏导航在 UI 表现层方面也是千奇百态，除了常规的置底形式，设计师也发散了更多新颖的表现。突破现有规范的束缚，不被固有化思维所限制，才能不断的进行设计创新。
3.1 最稳定的常规设计形式
底部标签栏导航最常见的设计形式依然是置于底部的常规形式，通常是 3-5 个功能模块为主，其中 5 个功能模块是较为常见的。形成差异化的是在图标设计上面进行发挥，难度较大的设计是结合品牌基因或者特征性元素表达，也有一些是纯文字的设计形式。
除了图标上面进行发挥以外，也有一些会在背景上面进行装饰，体现产品差异化。不过最常见的依然还是单色为主，或者根据模块的需求在切换的过程中选择使用不同的背景体现。虽然是最常规的导航模式，但是设计师依然可以在布局形式、图标风格、配色关系、背景装饰等方面进行发挥。
3.2 动静结合的微动效表现
微动效在产品设计中的运用逐渐变得频繁，相较于静态的表现更能引起用户的关注度，也能带来趣味性和互动性。在底部标签栏导航中的图标设计上面，默认的采用静态展示，而点击状态以动效的形式进行演变过度也是非常常见的设计处理。
在进行动效设计的时候，可以采用整个图标位移形成动效，这是最简单的动效表现，通常是上下弹跳位移。比较复杂的是图标本身的结构动效，这也是图标动效转换比较连贯的形式。
3.3 突出规范框架的束缚表现
虽然大部分产品设计都会优先采用官方的设计规范，但是为了突出设计的差异化，也会进行一些突出规范框架的设计。在保持原有不变的导航设计中，我们可以针对局部功能模块进行突出表现（比如舵式导航），也可以将点击状态进行突出表现。
3.4 悬浮层增强空间感
一些产品为了增强界面结构的空间感，针对底部标签栏导航设计采用悬浮层的设计来进行表现，使得界面的通透性和呼吸感更强。这种设计形式依然保留了原本的结构，只是预留了左右和底部的间距，也有一些产品结合交互动效的形式表达，滑动过程中采用隐藏部分功能，增加浏览过程的内容输出面积。
3.5 底部拓展/隐藏式设计
随着一些工具型产品的使用，功能模块变得复杂而繁多，也有将更多功能隐藏在底部标签栏里面，上拉交互时显示。这种设计形式将底部标签栏进行了深度的开发利用，但是功能隐藏比较深，曝光度受到了一定的影响，不适合较为重要的功能模块设计。
3.6 小结
底部标签栏导航在 UI 表现层方面还有更多可以给予设计师发挥的空间，设计没有固定不变的形式，在于不断的发现、总结和创新。期待大家发现更多设计解决方案和进行更多设计创新，下面将会为大家梳理线上的优秀案例，让我们可以站在巨人的肩膀上不断超越。
四、移动端线上案例分析
移动端底部标签栏导航设计在众多产品中浮现出很多优秀的案例，对于线上案例的分析将有助于我们进行落地性的思考，新颖的设计不再是飞机稿，而是可以实现的创意。创新是建立在不断的发现、总结、分析和改变，希望这些案例可以带给你点滴灵感。
4.1 背景结合特定节日增强氛围
在大部分情况下底部标签栏导航的背景为单色的居多，不干扰信息的传递而保障用户的浏览体验。也有在特定节日结合氛围营造对背景进行简单的装饰，可以在节假日或者特殊时期引起用户的共勉，增强产品的情感化设计。
比如宝宝巴士儿歌 APP 的底部标签栏导航设计，在之前的一些版本迭代过程中，结合特定氛围营造进行背景设计，也是一种非常不错的设计表达形式。由于属于儿童类产品，点击功能模块切换的过程中还伴随着音乐，视听体验的结合使得操作体验备受关注。
4.2 强化消息提示的关注度
系统通知或者消息提示往往都会被用户所忽略，尽管很多产品都会将消息作为单独的功能模块来设计，但是依然摆脱不了被忽略的问题。微信读书将通知和私信等消息提示结合在个人中心的设计中，以气泡弹出的形式展示在图标红点提示上方。以此来吸引用户的关注度，增加消息阅读率。
4.3 特异设计引导功能模块关注度
在底部标签栏导航的多个功能模块中，为了突出或者引导使用某个功能时，会采用特异构成的设计做法，在原本的设计规范上面突出表现个例，以此来引起用户的关注度。比如腾讯动漫在第一次进入 APP 时，圈子的图标设计会特意突出，点击之后恢复原样，以此吸引用户对该栏目的关注，增强功能模块的使用率。
4.4 图标设计的年轻化趋势
随着 95 后成为互联网原住民，产品设计逐渐趋向于“年轻化”的探索和挖掘。优酷 V9.0 升级后设计风格更年轻化，底部标签栏图标设计采用低纯度、高明度的多色渐变，结合微动效使得风格更加青春活泼，符合年轻一代的审美需求。年轻化的设计不仅提高感官体验，也拉近了产品与用户之间的亲和力。
4.5 趣味性的情感化设计融入
情感化的设计能够拉近产品与用户之间的亲和力，这也是设计师在不断探索并延展的设计方向。QQ 作为社交工具而言，如何更加符合年轻化的设计需求，在底部标签栏图标的设计上面也是用尽了心思。消息模块的图标设计成各种搞怪的表情，在拖拽的时候会切换不同的表情，带给用户更加趣味性的体验，让人会心一笑。
4.6 首页图标强化品牌曝光
为了强化产品品牌的曝光度，在进行底部标签栏图标设计的时候，会将首页图标的点击状态切换为品牌 LOGO 的形式，以此来增加品牌的曝光度。设计上面的选择有 LOGO 图形、吉祥物、应用图标、品牌局部图形等，会根据品牌 LOGO 的造型灵活选择。
4.7 舵式导航转一转增强关注度
底部（舵式）拓展栏导航是突出中间功能模块设计来强化关注度，除了静态的表达以外，结合微动效更能起到强化突出的作用。转转结合吉祥物和微动效运用在舵式导航的设计中，不仅提高用户的关注度，情感化的设计还能增强产品的亲和力。
4.8 结合营销内容多层共用
产品中的营销结合是最为常见的，产品设计师也在不断地思考更多可结合的功能模块，舵式导航的区域被充分利用是最为便利的。芒果 TV 将营销内容与会员模块图标进行结合，在保持原有功能操作的基础上强化营销活动的曝光度，鼓励更多用户参与活动。
4.9 微动效结合多层功能运用
微动效运用到底部标签栏导航图标动效中较为常见，可以带给用户趣味性的点击体验。对于一些首页采用瀑布流设计的产品，也会在用户上滑浏览内容到一定量的时候将首页变化为“置顶”的操作，方便用户快速置顶。比如爱奇艺 APP 将品牌色强化在图标的设计中，结合微动效的变化带给用户趣味性和强化品牌记忆，在首页图标和置顶图标切换的过程中也采用了微动效的形式，过度更加自然流畅，也能更加醒目的提示用户。
4.10 微动效结合突出框架的束缚
一些寻求突破的产品，在设计的时候也尝试了突出规范框架的束缚表现，点击状态会突出局部来强化。结合动效的变化形成自然过度，突出的设计更能引起用户的关注度，明确自己当前所处的位置。这样的表现形式不仅可以形成设计差异化，也能让用户操作路径更加明显，比如爱奇艺早期版本、美团外卖等产品。
4.11 悬浮层设计突破底部标签栏常规表现
设计师都在不断的探索设计的差异化，敢于创新才能寻求新的可能性。脉脉在最近的迭代中将底部标签栏的设计采用悬浮层的形式表现，使得界面内容呈现的呼吸感更强，也增加了界面结构的空间感。在保持基本设计规范的前提下进行小小的变化，就能带来设计的差异表现，也能带给用户较为新颖的感官体验。
4.12 悬浮层设计结合交互动效的双向运用
交互动效是 UI 设计师在静态设计稿中要逐步突破的一种技能，交互动效可以让我们的设计表达更加直观，提高产品的互动性和趣味性。马蜂窝旅游在进行底部标签栏突破的过程中，除了采用新颖的悬浮层设计以外，在上滑浏览内容时采用隐藏局部功能的处理方式，让内容的输出面积更大。在下滑或者停顿的过程中恢复默认导航，探知用户行为习惯并给出不同的交互反馈，带给用户更高的操作体验和互动趣味性。
4.13 底部拓展设计承载更多功能模块
对于一些功能模块较多的产品，产品设计师会尽可能的开发每一个常规的功能，拓展出更多可以进行设计延展的模块。钉钉 APP 在进行底部标签栏设计的时候，就将更多功能模块隐藏在上拉展开栏中，方便用户进行快捷操作。充分的对底部标签栏进行了深度挖掘，利用手势的变化实现更多功能模块的切换，提高了用户的操作体验。
关于移动端底部标签栏导航设计还有很多非常不错的线上案例，这里就不一一列举啦！优秀的案例总结能够带给我们更多的灵感参考，基于优秀之上我们才能设计出更新颖的作品，希望以此抛砖引玉，期待大家发现更多好玩的设计。
五、总结
对于 UI 设计师来说，产品体验是一种习惯的养成，结合体验的日记化摘录形成设计思路的总结。总结是为了形成最终可供灵感借鉴的经验，基于优秀的案例分析才能形成更多的设计解决方案。
本文以移动端底部标签栏导航设计的经验分析为大家进行梳理，任何的设计表达都不是不变的规律，掌握的是这种设计分析和总结的思路，以此反推出更多的设计总结。希望本文的思路作为抛砖引玉，带给你更多的思路。
动效在 UI 场景中的运用已经非常普遍，带给用户的体验升级也是很直观的。无论是一个图标动效到界面间的转场动效，还是聊天场景中的表情动效等，都证明了动效已经是无处不在。
最近黑马哥在体验产品的过程中，发现了很多优秀的动效案例，今天选择其中的 10 个和大家一起交流学习，希望能够带给大家一些灵感启发。
01. 动效，让点赞与众不同
动态表情为社交场景带来更活跃的体验，使得交流过程变得更加趣味性。一个动态的表情不仅活跃了氛围，也使得通过简单的一个符号代表了千言万语。
最近在使用钉钉 APP 进行聊天的过程中，发现输入框的大拇指图标在长按的时候结合了动效的变化，对话场景中出现的大拇指表情会随着长按而增大。结合动效和长按手势，为点赞的图标增加了不一样的趣味性，带给用户不一样的社交体验。
02. 动态提醒，增强消息的关注度
各类通知/消息在产品中随处可见，红点提示刚出现的时候还引起了用户强迫症，短时间内也增强了消息的阅读率。随着红点效应逐渐淡化，未读消息的点击率逐渐降低，大家都在尝试更多提高关注度的形式。
支付宝在消息模块的服务提醒中，采用了动态形式提高关注度。当用户点击消息进入界面时，小铃铛图标会左右晃动，以此来吸引用户的目光，达到增加关注度的目的。
03. 图标动效，让你脱颖而出
在金刚区众多的业务模块中，想要突出重点模块的关注度，采用动态图标是比较常用的方式。采用动静结合的形式，会让动态表达得到突出。
比如 Keep App 将活动挑战图标动效化，在不改变配色规则和图标设计规范前提下，依然可以达到突出主题的作用。
04. 博人眼球的动态悬浮广告
在不破坏产品结构的前提下，融入广告的做法中，悬浮层广告是较为明显的形式。通常是静态异形和动态异形较多，而动态的关注度相对更强一些。
比如 Keep App 将活动的折扣信息以悬浮层的形式表达，既不会占用太多空间（随着滑动会隐藏显示），又能吸引用户的关注度。如果用户觉得影响操作，也可以直接关闭，就不会反复提醒而形成干扰。
05. 内容模块结合动效替换突出存在感
在一些内容量比较多的产品中，比如电商产品，很多内容模块都是百花齐放。都想要突出自己模块的存在感，带来更好的流量引入。而动效的结合也是不错的选择，但是需要考虑动效的干扰度。
当当 App 在突出今日抢购栏目时，为了不影响临近板块的干扰度，利用动效转场来替换展示的商品信息。缩放替换商品时的动效既能达到差异化，也不会破坏整体的结构，算是一举两得的设计解决方案。
06. 微弱的动效也能呈现有温度的设计
有时候在进行产品设计的时候，动效带来的关注度并不是需要很强的表现力，一些微弱的动效依然可以提升产品体验，带给用户更有温度的设计。
自如 App 整体的设计都是做得非常不错的，在“我的”板块头部区域，结合背景插画视觉感也是非常不错。插画中部分元素的微动效增强了生活气息和真实感，让用户感受到这是一款有温度的产品，提升用户的好感度。
07. 动态感十足的底部标签栏
图标动效运用到底部标签栏十分普遍，在这个频繁切换的操作中，动态的形式可以带来更强的趣味性和关注度。
优酷 App 底部标签栏采用多种颜色变化转场，结合路径动效带来动感十足的体验。首页图标还结合了刷新的功能，方便用户进行内容的刷新，增强用户体验感。
08. 拓展功能的动态指引设计
针对一些功能体量较大的产品，会经常结合一些隐藏式设计，拓展出更多功能操作。通常默认为展开状态，在滑动浏览内容时隐藏，通过动效吸引点击展开，不会造成主内容的干扰。
比如平安口袋银行底部标签栏上方的拓展功能区，动态形式的展开与隐藏方便用户浏览主页内容。个别内容采用动态设计（点我抽奖），突出其点击欲望。动态设计不仅提高了功能的曝光度，也能引导用户操作，将繁琐的操作变得更便利。
09. 结合动态 IP 的下拉刷新
针对下拉刷新这一常规操作，设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作，被很多产品设计师所采纳。
美团外卖就将品牌 IP 形象结合得恰到好处，下拉刷新时两只耳朵摇摆非常俏皮可爱，松开后 IP 形象露出，还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现，拉近与用户之间的亲和力，带给用户更人性化的使用体验。
10. 图标动效带动局部功能的关注度
对于一些局部功能或者模块占比较小的栏目，为了提高曝光度，获得用户的关注度，动态的形式是比较常用的方法。通常会在图标部分、文字部分、装饰元素部分等进行动效设计，带来的效果也是显而易见。
比如 QQ 音乐在“我的”模块中，将活动中心、会员中心、每日签到的图标采用动态设计形式，虽然几个模块占比较小，但是依然能够获得用户的关注度。
小结
动效表达在产品设计中的应用越发普及，不仅可以强化功能的关注度，也能带给用户感官体验上的升级。优秀案例的积累和分析，有助于我们掌握更多的表现形式，灵活的运用到项目设计中。
作者：黑马青年（vx: heimaux）
本文由 @黑马青年 原创发布。未经许可，禁止转载。
当你为你的项目创建有效的，可访问的，漂亮的ui时，只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中，我收集了一些容易放置的内容。在实践中，这些小技巧可以毫不费力地帮助你改善你的设计，还有用户体验。
希望你喜欢！
用微妙的边界定义。
使用多重阴影或非常微妙的边界（只是一个阴影比你的实际影子）周围的某些元素可以使这些元素出现
更清晰，更清晰，帮助你避免那些看起来泥泞的阴影。
标题给一个更好的光学范围。减少长格式正文的字母间距？这是一个大大的“不”。但对于标题……我要说“是”!
你的标题很可能会比他们的标题更大，更重。相比于正文，字母之间的间距有时会出现视觉上更大，这并不是你想要的。减少字母间距，只是少量，可以使你的标题视觉平衡，更易于阅读，通常更赏心悦目。
为了一致性，确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量，要么填满，要么秒变了。不要混搭。
只使用一种字体就很好。在设计时，使用单一字体是绝对没问题的，这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量，大小和颜色，你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。
留白是UI设计朋友。大胆的使用。适度的留白，即使是少量的白色物质，但要使用得当。能让你的设计透气，而且看起来更光亮。
创建长篇内容？给20 pt试试。对于长形式的内容（即微博文章，项目描述等等），试着这样做20pt(甚至更多一点)为你的文本字号。当然，这取决于所选择的字体，但大多数流行的字体在20pt时效果得很好，并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。
使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义，Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁，H₂等)，或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。
选择一个基本颜色，然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许，简单地使用一个有限的调色板选择一个基地颜色，然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。
改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列，并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整，可以为你的用户提供更好的体验……
记住，拇指仍然是主宰！
你的影子来自其中一个光源对吧？确保你的影子总是来自一个光源。这是一个简单的错误，但它可以让你的设计看起来更抛光且统一。记住，我们不是生活在一个拥有一千个太阳的国度里。
使用更好的字体组合，效率会很很快。当你想要提高你的字体组合技巧的时候，当面对1000个字体选择，只是去寻找对应的自己集合，效率会快很多。
文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置，您可以选择尝试，并测试完整的图像覆盖，或更微妙的(从下到上，或从上到下)渐变叠加，以实现两者之间的简单对比。为了在你的文本之间形成良好的对比，不要太复杂的内容和图片。
太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容，保持文本左对齐。你的用户会感谢你的你。
当选择一个多用途的文字，尽量找一个大量权重。你搜索的字体有很多选择吗？重量、风格？如果你打算在你的一些项目中使用它，请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话，我建议你避开这些。当然也有例外，某些项目会要求“只有一种风格”
更精致的字体，但对于绝大多数项目，你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格，希望你在设计过程的后期需要更多的空间。
想要创造更容易理解的界面，对吧？把你的文字调暗在光亮的背景上。在浅色背景下工作时，不要让你的文本太亮。
当涉及到长形式的内容时，某些常规的粗细字体仍然可以看。但太重了，在屏幕上会很僵硬。你可以很容易地解决这个问题，选择一些像深灰色（即#4F4F4F）的基调，把文字往下写，让眼睛更容易看。
总是通过icon最突出的内容。你认为这是常识，对吗？我并不觉得。通过使用色彩对比度做区分，尺寸和标签，确保尽可能突出。如果可以的话，不要总是只依赖图标。如果可以使用文本标签，那就使用它们，让用户更好地理解。
当你的字体变小时，请增加行高，以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。
使用x-height来测试字体的可读性。基本上，x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高，通常有助于更好地阅读，特别是在使用长形式的正文文本。另一种确定字体可读性，并缩小范围的方法如果你有一些无法选择的字体，可以做这个测试，比较来自特定字体的三个字符：大写字母I，小写的L和数字1。
当设计一个在应用程序内部使用的菜单时，确保提供最多经常使用的动作（例如：上传图像，添加文件等)最突出的屏幕上。
颜色-从你的图像中选择，会给你的产品带来生命。简单地从你的产品图片中选择颜色，然后应用各种色调。你选择的颜色阴影到你的背景，文字，图标或更多，可以添加。你的设计具有丰富的视觉趣味和个性。
基于字体的x坐标，设置您的线高度。不同x高的字体需要不同的行高测量，实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即：18px)它们的x的高度可以有很大的不同，这在选择正确的线的种类起着很大的作用高度来实现。
突出最重要的元素。通过使用字体大小，权重，颜色和布局的组合，可以很轻松的突出UI中最重要的元素。只是很简单，但微妙的调整，让用户体验更好一点。
操作错误的时候，添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式，但很有帮助，当他们填写任何形式的表格时额外的视觉辅助。
尝试在移动端创建慷慨的热区。当为移动设备设计时，尝试创建足够大的可点击区域，是好的。对于只包含文本的按钮和链接来说，这是很有挑战性的，尽可能使用带有标签的图标。
以下是iOS和Android的最小推荐点击区域：
44 x 44pt用于iOS
48x48dp用于Android
在短标题上尽量使用全大写。如果你想在标题上使用全大写，请确保它们在任何时候都很短。有可能，最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样，在标题中添加少量的字母间距。能让他们呼吸顺畅，而且视觉效果更好。
在轻文本和图像之间，保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。
看看这些很棒的字体，用在标题非常好的。发现他们真的很适合标题，设计感很强。（我没有推广费用，请放心用）
看看这些很棒的字体，用于长文本是非常好的，强烈推荐使用。（我仍然没有任何推广费）。
标题和正文。当你想实现一个好的垂直节奏，以及一个强大的视觉之间，需要对文本元素排版、间距作设计。我见过许多设计，最常见的是在文章列表中，它们已经被应用标题的上下空白相等，这样就失去了这种联系在它下面有正文。在这种情况下，我总是会给我的标题更多的顶部边距，而在底部，标题和下面的内容之间的连接是更强，有良好的垂直节奏，视觉层次保留在所有的文章之间。
对于下载指标，试着去做尽可能提供信息。对于用户，尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点，用百分数来显示当前进度，一个简单的图标，让他们可以在任何地方取消下载时间。
如果你能保持标题简短，简洁……“想做就做”。
如果可以，如果合适的话，保持标题简短，时髦，切中要点。而不是“这是你的风格，你的方式”，简单地使用像这样的“你的风格。你的方式。”人们会浏览，保持这些标题简短有力有助于他们更快地消化中的信息。
记住，这种方式可能会让人感觉很突然，你需要考虑一下你所从事的项目类型，以及目标受众来决定方法是合适的，相对于更标准的格式。
正确的设计“声音”。在项目中处理文本时，选择正确的字体将影响就像你说话的声音一样。要大声，要柔和，要友好，要正式，要有趣。每一种字体都有自己独特的声音，关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时，这似乎是一项艰巨的任务，所以不要害怕从类似的项目中获得灵感，并从这些项目中汲取灵感它们有助于影响你的决定，并提高你的理解什么是合适的。
你的正文，并提高可读性处理正文文本，并试图找到合适的行长度可能有点平衡。对于一个单独的列页面，45到75个字符被普遍认为是满意的行长度，而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然，字体大小和行高在决定可读性时也起着重要作用，但是对于行长，保持在45到75个字符之间，就会更好了。
偶尔使用纯装饰的幽灵文字也可以，但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时，希望添加纯出于装饰目的的文本，我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验，那么出于装饰的原因，插入奇怪的元素是可以的。
使用户界面中的元素彼此区分。按钮、通知，ui中两个独立但重要的元素。如果可以的话，总是试着确保你的用户能够快速地将它们区分开来，轻松扫描您的网站或应用程序。按钮，在大多数情况下，将优先，所以确保他们是最突出的。项目在屏幕上，并很容易区分其他元素。
只是一些细微的阴影，你所需要的。我们都喜欢阴影，对吧？它们可以作为微妙又很强大的视觉线索，在您的设计中使用要适度。现实世界中的阴影，在大多数情况下几乎是不可察觉的，而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度，以实现一些的东西更微妙和栩栩如生。
使用全部大写？选择适合的字体，能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重，使用户的光学清晰度。
让面包屑脱颖而出，易于为用户解释。面包屑无处不在，经常用于内容丰富的网站，通过最小的调整，你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度，这一点尤其有用。
使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒，但是当过度使用时，它们会使使用者的眼睛疲劳，主要是在使用的时候的文字内容。尽可能使用时要适度，并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色，以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心，与更柔和的颜色采取较少突出角色，让用户的眼睛休息一下。记住，在选择颜色时，可读性和可访问性应该是最优先的。
在ui中使用已建立的图标，为了避免给用户造成混淆。在你的设计中添加图标时，试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑，成为用户的认知障碍。不要在这些图标上过于叛逆。
在众多经过尝试和测试的设计原则中，这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程，表明彼此之间的关系，这有助于加快用户的认知。
4pt基线网格+ 8pt网格=单一网格。当使用类型时，8点网格旁边使用4点基线
可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4，使用的行高值为4的倍数（16、20、24、28等）
为什么4？我发现在过去使用特定的文本大小时，按8的倍数缩放是不太合适。
减少标题上的行高是很好的。与长形式的主体文本不同，它需要足够的行高，以便折行易读。标题的推荐行高通常约为1至1.3倍。
选颜色有困难计划吗？在颜色上进行类比论。类似的颜色，也被称为相邻或相邻的色调，是其中之一最和谐的配色方案，可以大大帮助你，如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的，颜色方案快速。当你需要快速将颜色调和到混合中时，可以使用类似的方法。
在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声，从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效，不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式说话。语气吗？尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时，使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。
当使用类型时，元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素，避免在过程中产生任何混淆。
养肥了，字体大小为最佳易读性。当设置暗色文字与浅色背景，选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量，特别是对于长表单副本。以最佳的易读性为目标，避免让用户的眼睛疲劳。
试着为你要呈现的内容选择合适的字体。用户是精明的，有一种直观的感觉，当内容与他们交谈当它不是。正确的字体选择是至关重要的，使您的内容讲给他们直率和情感的水平。
你是否使用全大写的短行文本？嗯…这是一个好主意，增加这些字母之间的间距，以达到更好的用户的易读性。这样做使单词更容易阅读和处理，因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。
打开这些错误消息，您的表格有帮助。在使用表单时，请尝试并确保错误消息得到解释。出了什么问题，如何补救。总是让用户了解情况，即使是像常规一样常见的事情的形式。让这些错误消息有用，不要让您的用户蒙昧。
试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循，并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。
告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前，总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为，如删除某些东西。让用户知道将要发生什么，并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。
参考文献《UI & UX Micro Tips - The Ultimate Collection》
在设计的创作重，很多设计师都喜欢追求软件技法带来的炫酷感，而忽略了构图理论知识带来的重要性，这篇文章就是为了解决这个问题
海报设计对于初学者而言，是一个简单入门，又容易出作品集的类目。在刚开始练习时不要天马星空的去想象，最好的练习就是根据一定的构图规范，尝试寻找规律，建立可行的秩序，让版面具有一定的阅读性。
-
只有在版面具有基础的阅读性，才可以根据想法思路进行创意性的表现，而建立持续最简单的方式之一就是运用构图。当下主流的常用构图，我大概总结整理有七种形式，下面我们一起来了解一下，附带案例演示。
第一种：四周压角构图→
四周压角构图指的是将标题或者重要信息放置在版面的四个边角处,可以是图形或者文字，其余信息元素等则放置在画面中间区域，使其整个版面严谨有序,平衡且具有视觉的张力。压住四角一般会结合居中式构图来呈现版面,可以产生视觉聚焦。
①
将信息压在四个角之内
②
将信息超出页面四角一部分
③
将信息沿四周环绕排版
第二种：对称式构图→
对称式构图指的是将版面分成上下或者左右两个部分,上下或左右两部分比重相同,排版相似,对称式构图可以使版面更加有秩序感,适合处理信息较多,层级较为复杂的内容。对称式构图可以很快速的塑造出版面的平衡，视觉上的平衡几乎就等于完成了版面的50%设计目的。是初学者中最为常见的形式之一，对称之间互相呼应，信息处理可以从中快速打破呆板状态，让版面具有灵活性。
①
上下对称式构图
②
左右对称式构图
第三种：居中式构图→
居中式构图也叫中心式构图，是指把主体信息放在版心中间,这样容易产生视觉聚焦,其他信息围绕版面中心来进行排版设计,放在版面中心的可以是文字、图片、图形或者文字等。使用居中式构图，需要多注意画面整体的平衡和元素之间的留白关系，让元素组合之间留有足够的对比与阅读性。
第四种：S型式构图→
S型式构图,将主要元素按照S型排版,版面更加的自由生动,非常具有表现力,是一种很常见的灵活构图手法,主要元素可以是图像、图形、标题文字、slogan等。S型式构图是讲曲线与版面进行结合，可以快速的创造出灵活的版面视觉以及节奏感，可以很好的提高版面的形式感，同时也可以有效的引导观众读者的视线。
第五种：三分式构图→
三分式构图是指将版面分割成相等或不等的三块区域,每个区域放置相应的信息,三分式构图分垂直三分法和水平三分法,三分之后版面更有秩序感,适合处理文案较多,层级较为复杂的内容。难度较高，同时容易让版面连贯性断层，所以在运用当中需要额外留意元素与空间之间的融合表现。
①
水平三分式构图
②
垂直三分式构图
第六种：倾斜式构图→
倾斜式构图,是指将版面整体或者主要元素作倾斜处理,也可做透视处理或对角处理,这种构图使版面更灵活,更加的具有形式感，作倾斜处理的元素可以是主题、图片等元素。倾斜与对角可以提高文字或图片的表现力，能很快速的塑造整体的空间感。
第七种：散点式构图→
散点式构图,是指将元素按照规律或者不按照规律自由的放置在版面的区域,散点放置的内容通常有文字,图片等,通常散点式构图都会结合S型式构图搭配使用,这种构图形式感强,更具有画面表现力.在运用的时候，需要特别注意文字或标题的阅读性，过于抢镜会让版面丢失主题。
光说不练假把戏，实操案例来一个，这一个案例是围绕四周压角构图来分享海报的制作操作技巧。
涉及到的知识点有:
①四周压角构图的技巧;
②文字编排;
③利用文字的局部轮廓化使版面更具有形式感。
我们先来看看最终的海报效果先。
第一步：→
所选的文案是一个摄影展，所以我们找了一张具有故事性的图片作为底图,新建文档,背景填充为黑色，置入图片,确定图片在版面中的位置，因为我们准备做四周压角构图型的海报，所以我们与居中式构图相结合,这样能使版面的视觉聚焦。
第二步：→
根据图片的构图，我们来确定整体版面的构图形式,由于图片是居中偏右的，所以我们用居中式构图加上四周压角构图来进行整体版面的风格呈现。
第三步：→
将主题文案“无限的山峰”以四周压角构图的方式放置在版面的四个角上,我们使用的是压在版面以内的压角构图,并结合居中构图的方式，这样能使版面更加的规整有序,而且具有视觉张力,注意图片和文字的联系。
第四步：→
现在我们来进一步进行处理，由于主题文案相离较远，接下来就是增强主题文字之间的联系，我们尝试用线来处理,线的作用就是连接与分割,我们用线将主题文字连接起来,并加上一些汉语拼音元素,使线条不会那么单调，并且更具有形式感。
第五步：→
先不急着下一步，我们先来观察下版面，现在的版面被我们分割成了四份,我们把剩下的信息分别在指定的区域内进行排版。
第六步：→
我们将剩下的文案分别进行排版，重要的信息我们需要放大处理,不重要的信息可以偏小一些,重要的信息比如:参展艺术家、日期、地址等,这里要注意层级之间的划分,要使版面显得井然有序。
第七步：→
其实版面到这里已经处理的差不多了,但是主标题看起来稍显平凡,跟内文的文字一样，没有什么特征特色，所以我们可以做更多的变化,拆分主题文字的一些笔画,并使其轮廓化,我们还可以倾斜或放大一些笔画，或者局部模糊，打散等等众多效果都可以尝试。
第八步：→
其最后把整体的细节稍微调整下,这样，一张具有形式感的海报就形成了,这张海报用到了四周压角构图，居中式构图,所以可得出结论,七种构图方式之间是可以交叉使用的,只要能使版面更加的好看,更具有形式感就行。
→ 完成！！
随着新的一年缓缓拉开序幕，UI设计领域也迎来了新的变革与挑战。兰亭妙微设计团队，作为行业内的佼佼者，始终站在设计前沿，不断探索与创新。今天，我们将与您一同解锁2025年UI设计的新趋势，特别是色彩与布局方面的秘籍，为您的设计之旅提供灵感与指导。
一、色彩趋势：回归自然，拥抱温暖
在2025年，色彩选择将更加倾向于自然与温暖。这反映了人们对和谐共生、心灵慰藉的渴望。以下是我们预测的几个热门色彩趋势：
1. 大地色系：从沙漠的金色到森林的绿色，大地色系以其沉稳、质朴的特点，成为营造温馨氛围的首选。这些色彩不仅能够激发用户的舒适感，还能与多种设计风格相融合，展现出独特的韵味。
2. 柔和粉色：粉色作为近年来备受追捧的色彩之一，其柔和的色调在2025年将继续占据重要地位。无论是浅粉色还是略带灰调的烟粉色，都能为用户带来温馨、浪漫的感受，非常适合用于女性用户或情感类产品的设计中。
3. 活力橙色：在追求舒适与温暖的同时，活力橙色以其鲜明的个性和积极向上的态度，成为打破沉闷、增添活力的不二之选。在需要强调重点或激发用户行动力时，橙色能够发挥重要作用。
二、布局趋势：简洁明了，注重交互
在布局方面，2025年的UI设计将更加注重简洁性与交互性。以下是我们总结的几点布局趋势：
1. 极简主义：随着信息量的爆炸式增长，用户对于简洁、清晰的设计需求愈发强烈。因此，极简主义在2025年将更加盛行。设计师们将通过精简元素、优化排版、使用留白等手段，打造更加舒适、易用的界面。
2. 卡片式设计：卡片式设计以其直观、易读的特点，成为近年来备受青睐的布局方式。在2025年，卡片式设计将继续发展，不仅限于信息展示，还将更多地应用于交互设计中，如滑动切换、点击展开等。
3. 动态布局：随着响应式设计的普及，动态布局在2025年将更加成熟。设计师们将更加注重界面在不同设备、不同屏幕尺寸下的适应性，确保用户在不同场景下都能获得良好的使用体验。
结语
色彩与布局作为UI设计的两大核心要素，对于提升产品的吸引力与用户体验至关重要。兰亭妙微设计团队将继续关注设计趋势的发展变化，不断探索与创新。我们相信，通过巧妙地运用色彩与布局技巧，我们能够为用户带来更加美好的使用体验。让我们携手共进，共同迎接UI设计的新篇章！
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
作者：彩云Sky
链接：https://www.zcool.com.cn/article/ZMTU5NDg1Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
大体上分为两类：彩蛋流和体验流
搜索的本质是什么？无疑是内容的召回和信息的推荐。
可随着时代的发展和行业公司的内卷，不少公司除了持续优化搜索结果与推荐外，在搜索的体验和彩蛋上也是下了不少功夫，从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些，那有意思的大厂搜索交互。
大体上分为两类：彩蛋流和体验流
注重提升搜索过程中的趣味程度，以增加用户的好感度与产品印象/口碑。行业代表：谷歌浏览器、百度浏览器
可以说是搜索彩蛋的先行者，内置了很多搜索关键词的有趣彩蛋，如娱乐角色：搜索【灭霸】，页面右边会打响指，相关字段会被’毁灭‘掉
搜索【马里奥兄弟】，右边也有游戏里一样的点击彩蛋
还有各种有意思的搜索结果比如搜：is google down（谷歌关闭了吗），搜索结果优先显示：NO
再如搜索《银河系漫游指南》的一句话：the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。
而且在日常的节日、活动、热点运营上，谷歌也从不缺席。都会在搜索框上用【插画、动效】等形式承载各种活动入口、吸引用户参与，可以已经形成一个稳定、具有品牌感的企业文化了。
如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的应该是搜索【黑洞】时，页面上会出现黑洞的吸入特效。
而且和谷歌相同，在其他的搜索关键词上，百度也是埋下了不少彩蛋，比如：搜索【翻转】，页面会左右翻过来
搜索【跳跃】，页面会在上下跳动
搜索【失重】，页面上的字会飘起来
而在【活动运营】上，百度也是很有心地进行着创新设计，力求给用户一种眼前一亮的感觉。比如每年的愚人节，搜索结果页上都有‘调戏’用户的创意设计，各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。
还有在【活动入口】的设计上也是特别有想法：在某年的圣诞节上，百度创新性地将活动入口’嵌套‘在结果页卡片中间，用活动里的ip形象-雪人「抬着」结果页卡片和在上面「滚动」
用这种充满创意+应景的的入口设计与引导方式，最大限度地降低漏斗，吸引让更多用户参与该活动。另外，百度搜索框上面的运营活动入口，也和谷歌有异曲同工之妙。
而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
注重提升搜索过程中的交互体验，以增加用户的操作效率与产品易用性。
代表：苹果产品、夸克浏览器
·iPhone
iPhone的【桌面搜索】除了能查询手机上的各种信息、文件，它还自带了【汇率转换和计算器】。在搜索框输入【数学公式、汇率转换】时会自动计算对应的结果。无需用户额外打开计算器、浏览器，大大减少操作链路。
在iOS的原生键盘里，可以根据输入词检测+搜索对应的手机号码：当你输入 【打+我或通讯录好友+电话】时，键盘上会自动显示自己或好友的电话号码，点击号码就能自动粘贴在输入框中。
用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码，大大提升操作体验与效率
·Mac
在Mac电脑的工具栏上搜索相关帮助时，系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里，并减少寻找的操作路径，免去多余操作
在Mac电脑的‘系统偏好设置’里搜索帮助，在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时，该入口的聚光灯会更清晰些，特别容易找到搜索结果。
夸克浏览器除了传统的「点击搜索框」唤出输入栏外，在屏幕任意位置下滑手势同样可以唤出搜索框。
降低「需要往上手指移动，才能点击搜索框」的操作成本，让用户更快、更精准地触达搜索。
而且在输入网址或英文等字段时，搜索框下方会出现一个滑块区。点击就会变成长条的滑块，拖拽滑块即可改变光标位置。
而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
让用户更方便地将光标快速移动到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克还会前置搜索结果， 比如在搜索框中输入“某城市+天气”的关键词，上方就会以卡片的形式显示该地区最近一周的天气。
用户无需触发搜索、进入结果页才能看到想要查询的信息。
不管是一部电影，还是一张视觉创意，想要消费者或者老板买单，从形、意、色、字、构、质等一系列视觉语言，都需要很好的掌握。
蓝蓝设计的小编 http://www.lanlanwork.com