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

63天前发布

原创文章 / UI / 教程
叶子学堂 原创,如需商业用途或转载请与叶子学堂联系,谢谢配合。

不可不知的“界面排版”小秘诀!

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


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

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

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

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

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

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

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

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


 

一  图版率在界面中的运用


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


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

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

图2-1

图2-2

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

图3-1

图3-2

注意:

图版率可不是指单个图片的占比哟,
而是指,所有图片加起来的占比。

1.图版率越大,表现力&亲和力就越强。
2.图版率越小,格调感&枯燥感就越强。

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

图版率较低

图版率高,图片占比大

图版率增加了,
沉浸感更强烈了,
表现力自然就更强了。


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

那么问题就来了:

图版率很低,怎么搞才能不枯燥呢?

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

undefined


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


二  格式塔原理


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

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

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


1.1 接近与信息关联性


何为接近原则?即我们视觉会把彼此接近的元素看成一个整体。所以在排版的时候我们可以将相关联的元素彼此接近,不相关的元素彼此远离,以此来区分不同的信息集。
建立不同组合的方式有很多种,但是以接近性原则最为基础和重要。即便每个元素的颜色形状不同,但只要彼此接近,也能够在视觉上形成一组。
那么接近原则在版面中是如何运用的呢?其实就是将相关联的信息彼此靠近,不相关的信息彼此远离的过程。

undefined

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


1.2 相似与面板统一性


接近性原则强调的是位置对我们视觉的影响,而相似性原则强调视觉元素的内容对视觉的影响,如颜色、形状、大小、方向等等。如果其他因素一样,只有这些内容不同,那么我们的视觉会把相似的内容看成一个整体。
在同一组图形中,颜色或者形状相似的元素会形成一个视觉单元。
同样的原理,在一组图形中大小或方向相似的元素也会形成一个视觉单元。
那么相似性原理在界面上是如何去运用的?
具体看看界面:

undefined


1.3 连续性原则与视觉逻辑



我们的视觉更容易感知到连续的事物,使之成为一个整体。
以上图而言,虽然全部是虚线的点,但我们依然可以辨认出他们的几何形状。


就算是分割开的图片,我们依然能够识别其内容,所以我们的视觉是连续性的。
为解决这个问题,我们可以加入其它元素,建立连续性。
通过线条的穿插表现,我们的视觉得到了很好的引导,解决了不知按什么顺序阅读的问题。另外线条使四个点连成了一个整体,点与点之间具备了连续性,散乱的问题也得到了很好的解决。

接下来继续观察界面:



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


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


从这里,我们发现了留白的好处!




三  留白的运用




先看两张界面:


从以上两张界面来看:

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



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



 

四  跳跃率的灵活使用



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

 

4.1 文字跳跃率


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


继续看图:


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


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


4.2 图片跳跃率


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

图片跳跃率越高,界面视觉冲击力越强;图片跳跃率越低,界面更精致、更稳定!



五  总结



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



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


风格本身是木有好坏,

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

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

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



所以鸭所以,

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


64
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息