在设计中丨超级实用的7个技巧

目录：

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

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

3.抵消阴影

4.使用较少的边框

5.不要放大那些小图标

6.使用重音边框为平淡的设计添加颜色

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

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

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

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

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

不要仅仅将所有繁重的工作留在字体大小上，而是尝试使用颜色或字体重量来完成同样的工作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.抵消阴影

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

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

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

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

4.使用较少的边框

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

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

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

1.使用框阴影

盒子阴影可以很好地概括像边框那样的元素，但可以更精细并实现相同的目标而不会分散注意力。

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

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

3.增加额外的间距

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

5.不要放大那些小图标

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

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

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

如果你有小图标，请尝试将它们包含在另一个形状中，并为形状提供背景颜色：

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

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

Heroicons 或 lconic

6.使用重音边框为平淡的设计添加颜色

如果你不是一名设计师，你如何在你的用户界面中添加那些其他设计从美丽的摄影或彩色插图中获得的视觉效果？

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

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

或突出显示活动导航项：

甚至在整个布局的顶部：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

不必要！如果破坏性操作不是页面上的主要操作，则最好给它进行二级或三级按钮处理。

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

作者：UIDesigner段奕宏
链接：https://www.jianshu.com/p/6b8b8296ec94

强烈推荐

点击「好看」让更多的人看到

👇👇👇