留着！有用！不可不知的“界面排版”小秘诀！

“只要界面上刚好有空间，就把信息随意“扔”到那里。”

这是很多新手设计师容易犯的问题。

从视觉传达的角度来讲， 优秀的界面设计必须准确的传达信息；传达的信息不准确，观众就无法理解我们。

我们做设计必须要有明确的目的，必须要准确的传达信息、帮助玩家在界面中找到策划想突出的内容，这才是设计的意义。

举个例子，如杜尚的《小便池》，好吧其实这个作品名叫《泉》，但这玩意就是个小便池，它出现的意义就是现代派艺术为了追求标新立异，用艺术形式去表达他们的态度；所以这个“小便池”它是个艺术形态；

马塞尔·杜尚的作品《泉》

看到这里小伙伴们Get到了点没，也就是说设计的意义是满足需求，在满足产品最基本功能的基础上，去做到溢出价值；而不是孤芳自赏，不要有“不要你觉得我要我觉得”的态度，最后我们要达到一定的商业目的，满足一定的用户需求，才是设计的本质；

一张好看的界面构图是合理的安排视觉元素与美感法则来表现的。其中视觉元素包括色彩，信息，空间和光影等。

界面排版需要处理文字与图片的关系。接下来从几个方面，我们通过分析一些二次元和扁平的游戏界面强排版的设计，让我们对于界面排版有更深的认识。

 

一  图版率在界面中的运用

图版率，乍一看好像是高深莫测东西，感觉有点意思，有点不明觉厉哟。

但说白了就是，图片在版面中所占的比例。

再直白点，就是图片大小。

图2-1

图2-2

上面两张图，2-1信息比较多，背景图片也不少；而2-2图片视觉中心比较明显，信息主体一目了然。同样下图也是：

图3-1

图3-2

注意：

图版率可不是指单个图片的占比哟，

而是指，所有图片加起来的占比。

1.图版率越大，表现力&亲和力就越强。

2.图版率越小，格调感&枯燥感就越强。

其实这两条，上面的例子已经能说明啦。

图版率较低

图版率高，图片占比大

图版率增加了，

沉浸感更强烈了，

表现力自然就更强了。

所以这种有格调的，高冷的，咱就可以用低图版率。但图版率越低，版面的枯燥感就会越强，上图这个就有点负面了。

那么问题就来了：

图版率很低，怎么搞才能不枯燥呢？

答案是通过不同文字层级、大小对比，不同字体来营造趣味性。

以上界面，都是在图片较少，以信息为主的功能型界面，但是运用 “ 格式塔原理”来让界面具有秩序和韵律感。

二  格式塔原理

说到这里，有童鞋会不明白何为格式塔原理，“格式塔”源自德语“Gestalt”，意即“整体”、“完形”。简单来讲，就是人类的视觉是一个整体，眼睛所看到的事物都是经过大脑整体化处理，所以我们是以整体形式感知事物而不是个体元素。

而我们通常讲的功能成组，界面层次清晰也是基于格式塔原理的。

格式塔原理有以下几个： 接近性原理、形似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理等。而前三个在界面中运用最广泛也最基础。下面将分开阐述：

1.1 接近与信息关联性

何为接近原则？即我们视觉会把彼此接近的元素看成一个整体。所以在排版的时候我们可以将相关联的元素彼此接近，不相关的元素彼此远离，以此来区分不同的信息集。

建立不同组合的方式有很多种，但是以接近性原则最为基础和重要。即便每个元素的颜色形状不同，但只要彼此接近，也能够在视觉上形成一组。

那么接近原则在版面中是如何运用的呢？其实就是将相关联的信息彼此靠近，不相关的信息彼此远离的过程。

上图信息量比较多，但是做到了功能模块清晰，一目了然，充分运用了接近性原理。

1.2 相似与面板统一性

接近性原则强调的是位置对我们视觉的影响，而相似性原则强调视觉元素的内容对视觉的影响，如颜色、形状、大小、方向等等。如果其他因素一样，只有这些内容不同，那么我们的视觉会把相似的内容看成一个整体。

在同一组图形中，颜色或者形状相似的元素会形成一个视觉单元。

同样的原理，在一组图形中大小或方向相似的元素也会形成一个视觉单元。

那么相似性原理在界面上是如何去运用的？

具体看看界面：

1.3 连续性原则与视觉逻辑

我们的视觉更容易感知到连续的事物，使之成为一个整体。

以上图而言，虽然全部是虚线的点，但我们依然可以辨认出他们的几何形状。

就算是分割开的图片，我们依然能够识别其内容，所以我们的视觉是连续性的。

为解决这个问题，我们可以加入其它元素，建立连续性。

通过线条的穿插表现，我们的视觉得到了很好的引导，解决了不知按什么顺序阅读的问题。另外线条使四个点连成了一个整体，点与点之间具备了连续性，散乱的问题也得到了很好的解决。

接下来继续观察界面：

线条的走向也会对我们的阅读顺序产生重大的影响。视觉上我们一般默认从左往右阅读，线条的指向性让我们的视觉更加集中。

这里最后一张图，除了明显的线条指引，界面里还有大量的空间留白，也同样让我们的界面信息更加集中。

从这里，我们发现了留白的好处！

三  留白的运用

先看两张界面：

从以上两张界面来看：

留白越小，越活泼，越亲和，促销感越强；留白越大，越安静，主体信息越突出。

从上面两张留白较多的界面，我们能看出来适当的留白也是让界面变得更高级的表现技巧~

 

四  跳跃率的灵活使用

跳跃率是平面设计里比较专业的一种名词，具体是指元素之间的大小对比。而界面里的跳跃率具体分为文字跳跃率和图片跳跃率。

 

4.1 文字跳跃率

文字跳跃率就是界面中最大与最小字体的对比。

继续看图：

上面两张图的文字大小差异较大，界面文字较为激烈活泼，给人活力的感觉；第三张界面字体差异不大，更加适合段落文章内容性阅读~

同时，文字的跳跃率低，也给人以精致，有品质的感觉。

4.2 图片跳跃率

同样，图片的跳跃率是指界面里最大图片与最小图片的大小差异对比。

图片跳跃率越高，界面视觉冲击力越强；图片跳跃率越低，界面更精致、更稳定！

五  总结

界面排版不是为美观服务，而是为内容服务。

不要为了美观而忽略了“可读性”的本质问题。

风格本身是木有好坏，

根据项目选择合适的风格，

再根据风格设置相应的图版率、跳跃率、留白等要素，

才是咱这篇文章的奥义所在。

所以鸭所以，

根据主观喜好来争论界面好坏，Duck不必~