UI界面设计: 视觉层面的深入解析

界面设计是一个很庞大的机制，具有这些方法，比如轻量、容错、清晰等等，其中涵盖了交互层面并且视觉层面等，今天我想单独把视觉剥离出去，来讲一讲我对界面设计“视觉层面”的理解与认知。

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

信息传递是让用户看的知道，快速清晰的获得信息；

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

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

如下图

三个维度的目标如何推动呢？我提取了下列三个关键词：

清晰、和谐、独特是我们要达成的目标，达成目标必定会有一些原理所在，而有了原理经常有详细的执行方式，所以前面的每一个知识点，我就会根据“设计目标-执行原理-执行方式”的逻辑给你们讲解，大纲如下：

1清晰

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大

2和谐

2.1和谐-呼应-色彩呼应

2.2和谐-节奏-变化对比

2.3和谐-饱满-负形缩减

3独特

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

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

1.清晰

1.1清晰-降噪-容器整合

设计目标：清晰

执行原理：信息降噪

执行方式：容器整合

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

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

此处我一直使用“容器整合法”来让内容非常清晰、聚焦。

当分散的内容装进一个“容器后”，就可以使内容聚焦在容器当中，让信息非常规整。而卡片就是一个很高的“容器”。

实际案例：

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

此处我就采用了”卡片容器“的方式，将信息装进容器中，减少分散信息的干扰，使界面非常清晰、工整，效果如下：

目前这些产品都在使用卡片化的发力，尤其是在信息总量、层级较多的之后，更加应该有容器将其规整出来，这样才能让界面保持不乱！

1.2清晰-聚焦-局部放大

设计目标：清晰

执行原理：聚焦

执行原则：局部放大

我们在以前做需求的之后，经常会遭遇信息非常多，特别乱的时侯，如果这时我们选择哪个都想突出，最后的结果必定适得其反，什么都突出部不了，这之后就必须我们选取一些内容来进行局部放大，反而可以让整体信息非常聚焦、清晰。

这些方式一直用在有数字展示的页面当中，比如以下这些页面：

再例如，下面这个模块信息，如果”3“没有放大，整体的信息会乱到你眼花缭乱，我们看下对比：

然而，大家在遭遇有数字，且信息杂乱的之后，就可以运用局部放大的方法来使整体变得聚焦、清晰。

2.和谐

2.1和谐-呼应-色彩互用

设计目标：和谐

执行原理：呼应

执行方式：以颜色呼应为例

这些之后我们会认为自己做的东西很不和谐，其中一个很重要的缘由就是由于页面中没有贯穿的元素，也就是没有呼应，很常用的一个呼应的方式就是色彩呼应。

比如这个场景总看上去不够和谐，你会认为红色很突兀，就是由于形状上没有呼应：

而如果你想方法，让绿色“事出有因”，比如取自眼镜的颜色：

那么，突兀的难题解决了，和谐的目标也就推动了。

而今天那些人中心的界面：

我们会看到，图标的色调也是取自背景色，所以整体看上去就会这么和谐。

比如色彩呼应，还有众多呼应的方法，比如图形、图标样式等等，这里就不再举例了。

2.2和谐-节奏感-对比变化

设计目标：和谐

执行原理：节奏感

执行方式：对比变化

对于音乐，节奏感是十分重要的，如果一段音乐仍然是一个频率，那也许也算不上音乐了。

界面也有一样的，节奏感是让页面变得“和谐”很重要的原因之一，如何做到呢？

我们在展现文字列表的之后，你认为以下两种哪个更舒服些呢？

我猜你会认为第二个舒服一些，因为它有差异，有节奏感，所以它和谐、舒适。

我们会看到这些产品首页带有封面图的列表都有众多种排法，例如1带多，1×2，2×2，2×3等等：

看上去会特别乏味。

2.3和谐-饱满-负形缩减

设计目标：和谐

执行原理：饱满

执行方式：负形减少

正文就属于不能拆分的单一原子，大家或许会问，这种信息不就是方方正正的一个信息块吗，怎么会不饱满呢，比如行间距过大：

表情一旦发生，就会导致长期空隙（负形过大），导致整体不够饱满、和谐。

我们可以看下其它产品，表情和文字几乎都是一样的大小，他们就会尽量缩小负形空间（也就是空隙小大）：

以上是关于和谐的几点方法。

3.独特

如果你的界面做到了清晰、和谐，在视觉层面就早已算是及格了，如果能够加上一点小创意，就可以让人眼前一亮。

如何才能做到独特？可以从两方面出发，1是品牌，2是内容原本意义。

3.1独特-品牌延展-吉祥物结合

设计目标：独特

执行原理：品牌延展

执行方式：IP形象结合

然而选择控件有两种状况，为了变得生动，就让给形象正面应对你的之后成为选择状况，而转过身成为非选择状况，大概效果如下:

此创意已在腾讯动漫电影落地实现。

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

设计目标：独特

执行原理：事物本意延展

执行方式：事物图形化

比如品牌，还可以按照事物本身的含义来延展图形，比如日间晚上模式的切换按钮，男女性别的切换按钮，都可以运用事物本身的涵义来延展图形设计:

此创意已在腾讯动漫个人中心模块落地。

再例如，弹幕的展现形式，就可以联想到电视机，再把电视机图形化，如下图:

此创意已经在腾讯动漫电影频道页实现。

此处应该留意下，有之后即使图形更加普通，可以配合动效来提高独特性，但必定要切记开发成本。

总结

界面设计是一个特别复杂的系统，今天单独拿出视觉层面和你们分享了一些带有普适性的原则和技巧，全当抛砖引玉，希望还能启发出你的更多灵感，加油！