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

您所在的位置:网站首页 文字跳跃率高的好处 留着!有用!不可不知的“界面排版”小秘诀!

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

2024-07-16 20:52:07| 来源: 网络整理| 查看: 265

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

这是很多新手设计师容易犯的问题。 从视觉传达的角度来讲, 优秀的界面设计必须准确的传达信息;传达的信息不准确,观众就无法理解我们。 我们做设计必须要有明确的目的,必须要准确的传达信息、帮助玩家在界面中找到策划想突出的内容,这才是设计的意义。 举个例子,如杜尚的《小便池》,好吧其实这个作品名叫《泉》,但这玩意就是个小便池,它出现的意义就是现代派艺术为了追求标新立异,用艺术形式去表达他们的态度;所以这个“小便池”它是个艺术形态; 马塞尔·杜尚的作品《泉》 看到这里小伙伴们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不必~



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭