UI设计教程——视觉层面的三维解析

版权申明：本文出自“菜心设计铺”原创，感谢“菜心设计铺”的原创文章分享！

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

在我看来，界面设计的视觉层面主要可以分为三个维度来解析：信息传递、视觉美化、创意创新。

信息传递是让用户看的明白，快速清晰的获取信息；

视觉美化是让用户看的舒服，让界面足够美观；

创新创意是让用户看的惊喜，看到一些不一样的创意点。

如下图:

三个维度的目标如何实现呢？我提取了以下三个关键词：

清晰、和谐、独特是我们要达成的目标，达成目标一定会有一些原理所在，而有了原理就会有具体的执行方法，所以后面的每一个知识点，我都会按照"设计目标-执行原理-执行方法"的逻辑给大家讲解，大纲如下：

1 清晰

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大

2 和谐

2.1 和谐-呼应-颜色呼应

2.2 和谐-节奏-变化对比

2.3 和谐-饱满-负形缩减

3 独特

3.1 独特-品牌延展-IP形象结合

3.2 独特-事物本意-事物图形化

1.清晰

1.1清晰-降噪-容器整合

设计目标：清晰

执行原理：信息降噪

执行方法：容器整合

当界面信息过于分散时，会对用户造成不必要的干扰，导致用户产生疑惑甚至直接离开界面。

作为设计师，要做的就是对信息进行整合，我们可以称之为信息减噪，目的就是让页面更加清晰，减少干扰。

这里我经常使用"容器整合法"来让内容更加清晰、聚焦。

当分散的内容装进一个"容器后"，就可以使内容聚焦在容器当中，让信息更加规整。而卡片就是一个很好的"容器"。

实际案例：

在改版腾讯动漫个人中心的时候，头部就存在信息分散不聚焦的问题，四个视觉触点（绿色圈处）分散在四个角落，形成极大干扰。

这里我就采用了"卡片容器"的方法，将信息装进容器中，减少分散信息的干扰，使界面更加清晰、工整，效果如下：

现在很多产品都在使用卡片化的布局，尤其是在信息数量、层级较多的时候，更加需要有容器将其规整起来，这样才会让界面保持不乱！