7个设计作弊的实用技巧

用战术而不是人才来改善你的设计。

来源：Medium网站

作者：Adam Wathan和Steve Schoger

翻译：奥创

阅读时长：16min

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

也许您所在的公司没有全职设计师，您需要自己实现新功能的UI。或者也许你正在攻击一个侧面项目，你希望它看起来比另一个 - Bootstrap网站更好。

你很容易举起手来说：“我永远都不能让这个看起来很好，我不是艺术家！”但事实证明你可以用很多技巧来提升你的工作水平不需要图形设计背景。

以下是您可以用来改善设计的七个简单想法。

1.使用颜色和粗细来创建层次结构而不是大小

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

“这个文字很重要吗？让它变得更大。“

“这个文字是次要的吗？让它变小。“

不要单独将所有繁重的工作留在字体大小上，而是尝试使用颜色或字体粗细来完成相同的工作。

“这个文字很重要吗？让我们更大胆。”

“这个文字是次要的吗？让我们使用更浅的颜色。”

尝试并坚持两种或三种颜色：

• 主要内容的深色（但不是黑色）（如文章标题）

• 二级内容的灰色（如文章发布日期）

• 辅助内容的浅灰色（可能是页脚中的版权声明）

同样，两个字体权重通常足以用于UI工作：

• 大多数文本的正常字体粗细（400或500，具体取决于字体）

• 要强调的文本较重的字体粗细（600或700）

用户界面工作远离400以下的字体权重 ; 它们可以用于大标题，但是在较小的尺寸下难以阅读。如果您正在考虑使用较轻的重量来减弱某些文本，请使用较浅的颜色或较小的字体。

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

使文本变为浅灰色是在白色背景上去强调它的好方法，但它在彩色背景上看起来并不那么好。

那是因为我们实际上在白色上看到灰色的效果是对比度降低。

使文本更接近背景颜色实际上有助于创建层次结构，而不是使其变为浅灰色。

使用彩色背景时，有两种方法可以降低对比度：

1.降低白色文本的不透明度

使用白色文本并降低不透明度。这样可以使背景颜色稍微渗透，以不与背景冲突的方式去强调文本。

2.手工挑选基于背景颜色的颜色

当背景是图像或图案时，或者当降低不透明度使文本感觉太钝或褪色时，这比减少不透明度更好。

选择与背景色调相同的颜色，调整饱和度和亮度，直到它看起来正确。

3.抵消阴影

不使用较大的模糊和展开值来使框阴影更加明显，而是添加垂直偏移。

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

这适用于您可能在井或表格输入上使用的插入阴影：

如果您有兴趣了解有关阴影设计的更多信息，那么“ 材料设计指南”是一本非常棒的入门读物。

4.使用较少的边框

当你需要在两个元素之间创建分离时，尝试抵抗立即到达边界。

虽然边框是区分两个元素的好方法，但它们并不是唯一的方法，使用太多边框可能会让您的设计感到忙碌和混乱。

当您下次找到自己的边界时，请尝试以下其中一个想法：

1.使用框阴影

箱形阴影可以很好地勾勒出像边框一样的元素，但可以更精细并实现相同的目标而不会分散注意力。

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

为相邻元素提供稍微不同的背景颜色通常只需要在它们之间进行区分。如果您已经使用了除边框之外的其他背景颜色，请尝试删除边框; 你可能不需要它。

3.增加额外的间距

有什么更好的方法来创建元素之间的分离而不是简单地增加分离？将事物间隔得更远是在不引入任何新UI的情况下创建元素组之间区别的好方法。

5.不要炸掉那些意味着小的图标

因此，既然我们知道用户如何扫描信息，我们就可以在设计中使用这些知识，并在前两段中放置最重要的信息。如果用户首先成为头条新闻，请确保您的页面布局使标题，重要单词和短语以粗体显示。

如果你正在设计一些可以使用一些大图标的东西（比如登陆页面的“功能”部分），你可能会本能地抓住像Font Awesome或Zondicons这样的免费图标集，然后提升尺寸直到满足你的需求。

毕竟它们是矢量图像，所以如果增加尺寸，质量不会受到影响吗？

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

如果您已经获得了小图标，请尝试将它们包含在另一个形状中并为该形状提供背景颜色：

这使您可以使实际图标更接近其预期大小，同时仍然填充更大的空间。

如果您有预算，您还可以使用设计用于较大尺寸的高级图标集，例如Heroicons或Iconic。

6.使用重点边框为平淡的设计增添色彩

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

一个可以产生重大影响的简单技巧是在界面的某些部分添加色彩鲜艳的边框，否则会感觉有点乏味。

例如，在警报消息的旁边：

...或突出显示活动导航项：

......甚至在整个布局的顶部：

它不需要任何图形设计人才来为您的UI添加彩色矩形，它可以大大有助于使您的网站更“设计”。

挑选颜色很难？尝试从Dribbble的颜色搜索等受限制的调色板中进行选择，以避免被传统颜色选择器的无限可能性所淹没。

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

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

像Bootstrap这样的框架通过为您提供一个语义样式菜单来鼓励这一点，无论何时添加新按钮，都可以选择：

“这是一个积极的行动吗？将按钮设为绿色。“

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

语义是按钮设计的一个重要部分，但是有一个更常见的重要维度：层次结构。

页面上的每个操作都位于重要金字塔的某个位置。大多数页面只有一个真正的主要动作，一些不太重要的次要动作，以及一些很少使用的三级动作。

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

• 主要行动应该是明显的。坚固，高对比度的背景色在这里工作得很好。

• 次要行动应该清楚但不突出。轮廓样式或较低对比度的背景颜色是很好的选择。

• 三级行动应该是可发现的，但不引人注目。像链接一样设置这些操作通常是最好的方法

“破坏性的行动怎么样，他们不应该总是变红吗？”

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

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