如何使你的用户界面更精致?

发布时间:2020-06-30 11:53:00

毕竟,不管产品和交互问题如何,我们都能感觉到,精致美观的界面离不开“比较”的应用,而“比较”也是整个产品设计中最重要的视觉问题。没有比较设计,似乎就没有什么可展示的,也没有吸引力。

毕竟,不管产品和交互问题如何,我们都能感觉到,精致美观的界面离不开“比较”的应用,而“比较”也是整个产品设计中最重要的视觉问题。没有比较设计,似乎就没有什么可展示的,也没有吸引力。

表格是什么?它是在相同的功能和元素下,组件的组合和可视化表示的方式。形式的比较是为了看一个页面中不同组成部分的呈现是否能形成差异,使页面看起来更加多样化。

如果你仔细看,你会发现,作为一个飞机草案,这是不够的,使用花哨的图片和颜色。如果构件缺乏差异,设计感就根本无法体现。如果你不明白,让我们看看下面的例子。在形式上不存在强迫重复的尴尬,这更合理吗

颜色对比度是关键的对比度。颜色决定作品的_印象。那你怎么比较颜色呢?它只不过是明暗对比的浅色、暗对比的浅色、暖对比的冷色。不一定要运用色彩搭配的理论,而是要用更直观的感觉来判断。

这里我们要注意的是,从“作品”的角度来看,绘画也是整个界面元素的一部分,包括它所使用的颜色。如果一个接口中有很多地方需要映射,那么不同模块使用的映射的样式和颜色也应该有一定的对比度,而不是一个风格到底。例如,这个错误的案例:

文本对比是最容易被忽略的细节。很多设计师认为,只要文字看得清楚,风格变化越少越好。这是一个非常错误的想法。

文本样式的数量主要取决于文本字段的类型和需要突出显示的内容的数量,而不是无缘无故地减少到最小。例如,如果我们看一本排版成熟的期刊或论文,其中的标题、副标题、正文、引文、注释和其他文本段有不同的功能,它们会有不同的样式来帮助我们区分它们。如果从头到尾出现的所有文本都采用相同的格式,那么就没有可读性。

字符的比较主要由以下属性表示:

也就是说,一个角色越重要,它的尺寸越大,重量越大,颜色越深,重量越轻。

通过对文本的正确提炼比较,才能真正使页面细腻,具有丰富的细节。当然,文本权重的编排和思考会根据不同的创意和产品需求得到不同的风格效果,但这一过程不容忽视。

_是层次比较。实际上,它是元素在Z轴上的高度,即元素的投影应用程序:

投影的使用不仅是一种视觉样式,也是一种创造景深的技术。只要将投影添加到平面界面中的任何元素,界面的上下部分之间就会有空间关系,上面的元素就会高亮显示。

因为这是一种空间关系,所以前面和后面一定有对比。我们需要为最重要的元素添加投影,而不是将它们作为统一的设计样式添加。所有的元素都有投影,不会有反差,能见度会大大降低。

根据葛梅儿的性格,在这里介绍她是不可能的!

葛梅儿接下来想说的是,我们经常忽略,但却极其重要

做一个好的设计,不能依赖数学的精确实现。在许多情况下,我们仍然需要相信自己的眼睛,并以心理感知为判断标准,以协助优化设计。最终的结果可能是对用户_的。

安东·洛夫奇科夫在“_调整成分”中为我们做了以下分析:

我给你看两张照片。顶部图片未调整。底图调整了七个位置。试着比较调整前后的视觉感受。如果很难直接比较,那也没关系。这里是GIF帮助您进行比较。

现实世界中的任何物体都会受到重力的影响。这意味着一旦没有支撑,它就会倒下。我们的大脑会自动地将现实世界的期望值应用到界面的各个元素上,并假设屏幕上的任何东西都“试图”掉下来。即使物体完全静止,我们的大脑仍然认为它会向下移动(物体上方的空间会增加,下方的空间会减少),并进行视觉调整。一个完全垂直居中的物体在实际中看起来很低。为了保持视觉上的一致性,我们必须对重力的“期望”进行补偿,并将物体稍微向上移动。下图:

物体越大,就越重,因此它“下落”得越快。所以我们需要对更大的物体做更多的补偿,而对更小的物体做更少的补偿。粉红色显示较小按钮的容器:

把圆形按钮挪开一点也是个好主意。

否则,按钮将被视为轻微错位和视觉上的“凹陷”。同时,如果按钮圆角很小,它在边缘看起来仍然像一条直线,因此不需要视觉补偿。

同样的原则也适用于标题,尤其是较大的标题。随着字体大小的增加,每个字母周围的空白区域变大,并破坏了左边框的视觉效果。为了改变这一点,我做了一个小的负左边距:

当然,要将它应用到设计中的每个标题上需要付出很大的努力,因为它需要手动调整过程,但对于更突出的标题(例如,在登录页面上)来说,这是值得的。

使用左对齐文本时,文本块的右边缘将变为“不规则”,文本内容将出现偏移。类似于圆形按钮的情况,我将把整个文本块稍微向右移动,使其在视觉上居中:

这样,右边缘更接近右侧隐含的垂直对齐规则。如果不这样调整,就会出现明显的知觉差异:

根据填充面积的不同,对颜色的感知也不同。应用于白色背景的文本颜色将比放置在相同颜色的同一大块上的文本更亮。相反,如果我们把彩色文本放在深色背景上,颜色看起来会更暗。背景“吸收”文本颜色,总是在视觉上变成背景颜色。为了适应这个事实,当我在浅色背景上使用文本时,我会把颜色调低一点,在深色背景上,我会把颜色调高一点。

字体大小和重量越小,需要的补偿就越多:

这是调色的特例。我没有直接设置颜色值,而是尝试使用100%黑色并更改其不透明度以创建灰色文本:

这样,当你把背景调暗时,你的灰色就不会“看不见”:

半透明的黑色有助于获得可读的结果,而不必创建许多不同的风格。对于较深的背景,半透明白色也是一个选项:

我使用不同的阴影浓度取决于产生阴影的对象的颜色。对于较暗的对象,阴影应更强,对于较亮的对象,阴影应更亮:

如果不使用此技术,假设两个阴影具有相同的不透明度,则较亮对象的阴影在较暗对象的阴影旁边看起来较暗:

不是每个项目都需要额外的视觉调整时间,但是如果你正在开发一个需要特别关注和突出的界面,使用上述所有技术将导致更和谐的结果。