如何提升UI设计细节和体验？

闪闪的星仔发布于：2022-8-16 11:06 |来自:转载

平面教程 / UI设计教程 6693| 1| 38 | 0| 6

闪闪的星仔

发私信 + 关注

简介: 如果你觉得你的UI设计起来很无聊，想让它看起来更加有趣，其实是有很多相对通用的方法。这些方法大都不算复杂，稍加调整，总会有不俗的效果。如果你想试试，不妨看下我所总结的提升UI设计细节和体验的10个方式。

深色模式和浅色模式在设计上，并没有太多本质上的差异，它无非是修改整个配色方案，只不过在色彩配置上需要根据规范细致调整。我建议让用户自行决定是要用深色模式还是浅色模式，模式之间的切换能够给用户带来良好的体验，并且给用户更强的掌控感。

5、高素质的图片

在APP 当中，图片和其他元素一样非常之重要。你需要非常慎重地选择高素质的图片，这样能让UI设计和体验非常的生动有趣，增强UI界面的总体效果。有很多很棒的地方可以找到高素质的图片，下面是我的最爱：

Unsplash

Pexels

Freepik

Adobe Stock

Pixabay

6、让出错状态不那么令人沮丧

你应当将你的 App 当中每一个事件——哪怕是不那么好的出错状态——都视作为给人留下正面的、深刻印象的契机。

出错状态给人的感知通常是消极的。但是，如果你能够帮助用户解决问题，同时还可以通过个性和乐趣将其转变为积极的体验。

我一直非常青睐 Google Chrome 浏览器在「网络已断开」报错界面下的设计，它几乎提供了所有的必要信息，包括引导你如何修复网络，以及一个好评不断的小恐龙跑酷小游戏！简直是天才的设计！

另外我很喜欢 Dribbble 的 404 页面的设计。它之所以出色，是因为它设计得确实很走心，并且用户会快速回到各种设计作品当中去。

7、加入动效

从动效进入设计流程到如今，它已经成为设计过程中不可缺少的部分了。无论是基于插画的动画效果，还是基于UI元素的微交互，动效无处不在。

在 Dribbble 上，动效百花齐放。但是对于用户而言，他们始终还是期望动效能够尽可能贴近现实世界中的实际体验。期望物体按照通常的物理规则来运动。

比如说缓动。一个球，我们给它施加力量，踢它的时候它会先加速，再减速，这个过程是逼真的。这些物理规则是动效的基础，是真实的基础。

诸如 Pincipled、XD 的动画，Invision Studio、AE、Lottie、Flinto 等工具逐步兴起，让设计师可以更好更快地制作动效。

我更喜欢 XD 内的自动动画功能，它很直观，在我投入大量的时间精力之前，就可以快速验证创意的可行性。

我最近经常使用另外一个很棒的工具，Airbnb 出品的 Lottie。Lottie 让我可以轻松地将任意 AE 转化为对网页更加友好的 SVG 动画。

与插画类似，动画应该具有针对性，应该体验优先，而不是分散用户注意力。如果你想制作系统化的动效，不妨看看 Material Design 所提供的设计规范。

8、通过微交互来帮用户关注细节

和动画类似，微交互能够给用户带来意想不到的微妙体验，可以让你在 APP 当中感知到真实世界的体验，并且微用户交互带来有效的即时反馈。

在 Medium 当中，鼓掌（点赞）这一微交互对于体验的增强是一个非常典型的案例，这和 Youtube 当中的点赞是截然不同的，Youtube 当中，点赞只有简单的颜色变化，从灰色变为蓝色，没有动画效果。这和两个平台本身的内容属性有直接的关联：文本内容需要微交互来强化感知，而在视频平台当中，这样的微交互会喧宾夺主，分散用户注意力，因此需要弱化。

9、加入图案和渐变