涨姿势！你应该知道的 UI 动态设计规则

APP导航设计类型：

列表式菜单 矩阵、网格式菜单 底部菜单 顶部菜单 扩展菜单

这篇文章中，我主要阐述了UI动效设计中需要注意的问题以及原因，而不是教授制作UI动效额技巧。随着大家对于这一领域的关注（很大程度上是源自iOS的UI设计），我们发现UI动效设计同其他的UI设计分支一样，同样具备完整性和明确的目的性。伴随拟物化设计风潮（Skeuomorphism，也就是苹果所提出的拟物化设计风格，强调的是模拟现实生活中物品的纹理，是广泛意义上拟物化的子集。值得注意的是，“苹果式扁平化设计”并非广泛意义上的设计范式，而是带有限定的特定风格，仅为广泛意义上扁平化设计的一个分支）的告一段落，UI设计更加自由随心，仿如打破空间和物理规则一样的交互设计不再尴尬荒谬，反而令界面更加灵动奇幻。现如今，UI动效设计已具备丰富的特性，炫酷灵活的特效已是UI动效设计中不可分割的一部分了。

个性

这是UI动效设计中最基本的原则，甚至可以说是动效设计的最高原则。UI动效设计就是要摆脱APP“开袋即食”的粗犷设定，设计独特的动效，创造引人入胜的效果。在确保UI风格的一致性的前提下，表达出APP的鲜明个性，这就是UI动效设计“个性化”要做的事情。同时，还应令动效的细节符合那些约定俗成的交互规则，这样动效就具备了“可预期性”，用户不会有“出戏”的感觉，如此一来，UI动效设计便有助于强化用户的交互经验，保持APP黏度。

Paper Makes 使用了摆动特效（scale overshoot）表现APP的鲜明个性。

Dots 将这种轻松愉悦的惯性动效贯穿在UI设计的每个角落，让它从同类APP中脱颖而出。（惯性也属于广泛意义上拟物化的一种，别被风格束缚了思想）

导向

动效应当通过使用体验安抚用户，令他们轻松愉悦。设计师需要将屏幕视作一个物理空间，将UI元素看作物理实体，它们能在这个物理空间中打开、关闭，任意移动、完全展开或者聚焦为一点。动效应当随动作移动而自然变化，为用户做出应有的引导，不论是在动作发生前、过程中还是动作完成以后。UI动效就应该如同导游一样，为用户指引方向，防止用户感到无聊，减少额外的图形化说明。

共鸣

动效应该具有直觉性和共鸣性。UI动效的目的是与用户互动，并产生共鸣，而非令他们困惑甚至感到意外。UI动效和用户操作之间的关系应该是互补的，两者共同促成交互完成。

情感

好的UI动效是能够唤起积极的情绪反应的，平滑流畅的滚动能带来舒适感，而有效的动作执行往往能带来令人兴奋的愉悦和快感。

克制

滥用特效会让用户分心，把握好这个微妙的平衡。动效是用来保持用户的关注点、引导用户操作的，不要为了动效而动效。过度表现和过多的转场动画会令用户烦躁，甚至沮丧。还好，目前没有太多的反面案例。但是记住这一点，没有错。

UI学习直播群，每天晚上7点8点都有UI设计是讲解知识。大家可以进群学习学习，行情，前景，操作，流程，交互，网页，ps教程等等，进群验证：lh7

APP导航设计类型：

列表式菜单 矩阵、网格式菜单 底部菜单 顶部菜单 扩展菜单

一、列表式菜单

列表式菜单设计这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。另外我们可以通过漂亮的配色、图标组合来设计，使得菜单更多加美观

GIF Aimation

Elevatr

HabitClock App

Instagrab for iOS

二、矩阵、网格式菜单设计

网格式菜单就类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高效率。但设计时切记不分青红皂白的去使用色彩哦，这可能会让用户不知所措和产生疲倦感。

Vectra

Arrivo Mobile App

Abracadabra App

TRAVERSE

三、底部菜单

底部菜单主要是列出应用程序重要的功能。

Badoo concept

Animated sliding tab bar

Horner

Discovery Channel

Air flow calculation app

Shario App

五、扩展菜单

扩展式菜单设计现在连网站也很常用，当我们觉得菜单比较点用位置的时候，可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显示的位置。

MuSeek

Univit UI

/UI中国

关键字：UI设计, 设计师, 设计文章, 设计

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！