7个关于设计的作弊技巧

无论喜欢与否,每个web开发人员都不可避免地会遇到需要对视觉设计做出决策的情况。也许你工作的公司没有全职设计师,你需要自己为新功能实现UI。或者,你正在做一个兼职的项目,希望它看起来比另外用模版的站点更好。

2019年6月25日

-用策略而不是天赋来改进你的设计

无论喜欢与否,每个web开发人员都不可避免地会遇到需要对视觉设计做出决策的情况。

也许你工作的公司没有全职设计师,你需要自己为新功能实现UI。或者,你正在做一个兼职的项目,希望它看起来比另外用模版的站点更好。

你也许想说,“我永远也没本事把这个弄得好看,因为我不是艺术家!”但事实证明,你可以使用很多技巧来提高你的工作水平,而不需要做平面设计的经验。

这里有七个简单的主意,你可以用来改进你现在的设计。

1.尝试用字体的颜色和粗细来创建层次结构,而不是大小

样式化UI文本时,一个常见的错误是过分依赖字体大小来控制层次结构。

“这段文本是重要的吗?让我们把它放大。”

“这段文本是次要的吗?让我们把它变小。”

不要把所有主次区分都用字体大小来表示,尝试使用字体颜色或字体粗细来完成相同的工作。

“这段文本是重要的吗?让字体更粗一点。”

“这段文本是次要的吗?让字体更浅一点。”

试着坚持使用两种或三种颜色:

  • 主要内容(如文章标题)使用深色(但不是黑色)
  • 次要内容(如文章发表日期)使用灰色
  • 辅助内容(如页脚中的版权声明)使用浅色

同样,对于UI工作,通常两种字体粗细就足够了:

  • 对于大多数文本,一个正常的字体粗细(400或500取决于字体)
  • 对于你想要强调的文本,一个较重的字体粗细(600或700)

UI工作中要避免字体粗细低于400;它们可以用于大标题,但在较小的尺寸下很难阅读。如果你正在考虑使用一个、比较细的字体来减少某些文字的重要性,你可以用较浅的颜色或较小的字体大小来代替。

2.不要在彩色背景上使用灰色文本

将文本设置成浅灰色是在白色背景上弱化文本效果的好方法,但在彩色背景上效果就不那么好了。

实际上是因为我们看到的灰色对白色背景的效果是对比度降低了。如果想创建文本的层次结构,应该让文本更接近背景颜色,而不是让文本变成浅灰色。

在处理彩色背景时,有两种方法可以减少对比度:

1.减少白色文本的不透明度

使用白色文本,增加透明度。这样可以让背景颜色渗透一点,在不与背景冲突的情况下弱化文本。

2.手动选择一个基于背景颜色的颜色

当你的背景是图片或图案时,或者当降低不透明度会使文本感觉太单调或像被洗去时,手动选择一个颜色比降低不透明度效果更好。

首先选择一种与背景色调相同的颜色,然后调整饱和度和亮度,直到你觉得合适为止。

3.阴影偏移量

使用阴影时,要添加垂直偏移量,而不是使用大的模糊和扩展值使框阴影更明显。

它看起来更自然,因为它模拟了一个光源从上面照下来,就像我们在现实世界中看到的那样。

这同样适用于表单的阴影效果:

如果你有兴趣学习更多关于阴影设计的知识,《Material Design Guidelines》是一个极好的入门读物。

4.使用更少的描边

当您需要在两个元素之间创建分隔时,请不要只想到描边工具。

虽然描边是区分两个元素的好方法,但它们并不是唯一的方法,使用过多的描边会让你的设计感觉繁忙和杂乱。

当你又要使用描边时,请尝试以下其中一个想法:

1.使用框阴影

元素的阴影可以很好地勾勒出像描边一样的效果,但可以更精细并可以有大致相同的效果而不会分散注意力。

2.使用两种不同的背景颜色

如果你需要区分相邻的元素,只需要为它们设置稍微不同的背景颜色。 如果你的背景颜色和边框颜色不一样,请尝试删除边框;因为你可能不需要它。

3.增加额外的间距

要将两个元素分开,还有什么方法比简单地增加元素之间的距离更好呢?将元素间隔得更远是在不引入任何新UI的情况下来区分元素的好方法。

4.不要放大那些本应该小的图标

如果你在设计一些可以使用大图标的东西,你可能会本能地用像Font Awesome或Zondicons这样的免费图标集,然后放大图标尺寸直到满足你的需求。

虽然矢量图像在增加尺寸时不会降低质量,但是当你将它们放大到原尺寸的3倍或4倍时,以16-24px绘制的图标看起来会非常不专业。它们缺乏细节,总是有不成比例的“矮胖”的感觉。

如果你已经有了小图标,请尝试将它们包含在另一个形状中并加上背景颜色:

这样可以使图标更接近原始大小,同时又能填充更大的空间。如果您有预算,你还可以使用专为较大尺寸而设计的高级图标集,例如Heroicons或Iconic。

5.使用强调边框为平淡无奇的设计增添色彩

如果你不是一个平面设计师,你如何在你的UI中添加那些其他设计,从美丽的摄影或彩色插图中获得的视觉天赋?

一个很有用的简单技巧:在界面的某些部分添加色彩鲜艳的边框。

例如,在警报消息的旁边:

…或突出显示活动导航项:

……甚至在整个布局的顶部:

它不需要任何图形设计的天赋,它可以很大程度的使你的网站更“设计”。

挑选颜色很难? 尝试从像Dribbble颜色搜索这样的约束调色板中进行选择,以避免被传统颜色选择器的无限可能性所迷惑。

6.并非每个按钮都需要背景颜色

当用户可以在页面上执行多个操作时,很容易陷入纯粹基于语义设计的陷阱。

像Bootstrap这样的框架提供一个语义样式菜单,无论何时添加新按钮,都可以选择:

“这是一个好的行为吗? 将按钮设为绿色。”

“这会删除数据吗? 将按钮设为红色。”

在设计这些操作时,在层次结构中传达它们的位置非常重要。

  • 主要行动应该是显而易见的。 坚实,高对比度的背景色在这里工作得很好。
  • 次要行动应明确但不突出。 轮廓样式或较低对比度的背景颜色是很好的选择。
  • 三级行动应该是可发现的,但不引人注目。 将这些操作样式化为链接通常是最好的方法。

“破坏性的按钮(例如:删除数据)不应该总是红的吗?”

不必要! 如果破坏性操作不是页面上的主要操作,则最好为其提供二级或三级按钮处理。

保存大的、红色的和粗体的样式,以便当负面操作是界面中的主要操作时,就像在确认对话框中一样。


作者:Adam Wathan & Steve Schoger

原文链接:https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

翻译:张琳卿  孙延旭

责编:姜晓宇

发表评论

电子邮件地址不会被公开。 必填项已用*标注