Libx

译:7 Practical Tips for Cheating at Design

字数统计: 2,431阅读时长: 8 min
2019/04/19 Share

在刷Medium上关于设计的文章的时候看到了这篇由Refactoring UI团队写的文章,感觉非常赞,是非常有用的技巧,正好也在准备六级就来翻译一下。 原文链接:7 Practical Tips for Cheating at Design

本文并非完全按照原文翻译,中间夹杂了一些个人的体会。

无论喜欢与否,每个web开发人员都不可避免地会遇到需要做出设计决策的情况。(OS:对于开发者开发个人项目也是这样,因为其实一直去找设计师朋友去帮忙做很多决策是一件很麻烦的事情)

也许你的公司并没有一个全职设计师,但你需要设计出全新的UI;又或者你正在写你自己的side-project,而你希望它能够比 Bootstrap 的效果要强一点。

这个时候很多人会退缩:“这谁顶得住,我又不是一个艺术家” 但是事实证明,设计是有很多技巧的,我们完全可以运用这些技巧到工作中,并且并不需要有平面设计的背景。

今天的文章,我们总结了7个简单直观的改善网页视觉效果且能提升高级感的小技巧。很实际,也很实用,希望你们能喜欢。

使用色彩和字重来创造层次结构,而不是单纯的大小对比

(其实这也是我经常做的错误的事:想要创造层级就去放大缩小字体)

在对UI文本进行样式控制的时候,最常见的错误就是过度依赖字体大小差异来营造对比。

“这段文字重要吗?那就让它更大一点。”
“这段文字是比较次要吗?那么让它小一点。”

单纯使用字体大小对比,所营造的对比并不够,你需要尝试结合色彩和字重来营造更好的对比效果。

“这段文字重要吗?我们让它色彩更加大胆一些吧。”
“这段文字是比较次要吗?我们让它的色彩更浅一些吧。”

你甚至可以采用两到三种颜色:

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

类似的,在UI设计的时候,两种不同的font-weight就足以营造出优秀的层次感:

大多数的文本采用正常的font-weight(400到500,具体取决于字体)
对于需要强调的文字采用较重的字重(600到700,具体取决于字体)

不要让正文部分字重小于400,尽管这可以让标题显得更大,但是低于400会使得可读性很差。如果你依然需要降低字重,不妨使用更浅的字体颜色,或者替换成其他识别度较强、字重相对较小的字体。

不要在有色背景上使用灰色的文本

在白色背景下,将黑色的文本改成灰色,是不错的淡化文本视觉效果的做法。但在彩色背景下这么做效果并不好。

这是因为,我们看到的效果其实是因为降低了对比度。

在彩色背景下,想要降低对比度时应该让文本逐步接近背景色,而不是改为灰色。

想降低和背景色之间的对比,通常有两种方法:

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

使用白色的字体,并降低透明度,让背景色稍微透过来一点,以不与背景冲突的方式淡化文本。

2. 根据背景色挑选文本的颜色

这种情况下简单的降低透明度效果并不是很好,半透明的文本会影响可读性,这个时候最好是基于背景主色调来挑选相应的文本色。

阴影设计

相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果会更明显。

这样看起来会更自然,因为模拟了最常见的光源特征,也就是光线从上往下照下来所营造的阴影效果,这是比较符合基本直觉的。

如果你对此有兴趣,可以去看下 Material Design Guideline

尽量少使用 Borders

盒子模型是前端最常用到的工具。当需要在两个元素之间创建分隔的时候,应当尽量避免使两者直接接触。

Border是分隔两个元素的好办法,但它不是唯一的方法,过多的使用会让整个布局的设计感降低甚至造成混乱。

下次当你发现自己要处理这种情况时,可以尝试下面的办法:

1. 使用 box shadow

box shadow 和border一样可以营造出边界感,而且更加微妙,并不会显得突兀,不会分散用户的注意力。

2. 使用不同的背景色区分

通常相邻的元素背景只需要有微妙的差别就足够能让用户进行区分。所以,你所需要做的就是在不同的div采用不同的背景色,并且尝试删除边框,你可能并不需要它。

3. 增加额外的留白

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

不要让小图标无端地放大

当在设计一些落地页的时候,可能会需要突出产品的功能,这个时候就需要一些大图标来作为视觉锚点。你可能会去 Font Awesome 或者 Zondicons 这样的网站找几个免费的矢量图标,然后放大到符合你需求的尺寸。

它们都是矢量图标,照说是可以无损放大的。但是一个通常只有16×16 的图标放大三四倍,它固然无损,但是在视觉上就显得颇为不专业了:缺乏细节,给人感觉过于矮胖。

可是,如果这些小图标是你唯一能够搞得到的素材的话,那不妨试着将它置于另外一个带有颜色的图形当中:

这样设计不仅能够让图标达到预期的视觉体积,而且看起来要比单纯的放大图标细节更加丰富。当然,如果你手头不是那么紧的话,最好还是买几个大尺寸的高素质图标,比如 Heroicons 或 Iconic。

增加带有颜色的单边边框提升个性

如果你不是一个平面设计师,你如何在你的UI中添加更好视觉效果呢?

最简单的方法:在界面的边框中的一边添加上单色甚至渐变的边框,这能让平淡无奇的界面一下子变得鲜活起来。

比如在警告弹出框的侧面:

或者在导航栏的底部,以示触发:

或者在整个页面的顶部:

这并不需要什么平面设计的经验,但会明显强化页面的设计感。

你不知道选取什么颜色?简单,上Dribbble的色彩搜索中随便找几个看着漂亮的颜色,其实也就够用了。

并非每个按钮都需要颜色

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

Bootstrap之类的框架提供了一个语义样式菜单,当你添加一个新按钮时,你可以从中选择:

“这是一个积极的操作?那这个按钮是绿色的。”
“要删除数据?那把按钮设置为红色的。”

的确,语义和按钮本身的设计息息相关,但是还有更重要的维度被忽略了,那就是层次结构。

网页上每个操作其实都位于整个交互金字塔的某个位置。绝大多数的页面其实只有一个主要操作,搭配一些不太重要的次要操作,以及为数不多的几个三级操作。

在设计这些交互的时候,通过层次结构来呈现交互的重要性是很重要的设计环节。

  • 主要操作应该明显。实色、高对比度的按钮是很有必要的。
  • 次要操作应该明显,但是不突出,应该采用ghost button或者和背景对比度较低的色彩是比较合理的。
  • 三级操作应该是可被发现,但是不明显的,这样的可以被设计为链接形式。

“破坏性的交互所涉及的按钮不应该是红色的么?”

没必要!如果破坏性的交互所涉及到的按钮不是主要操作的话,让它按照次要操作甚至三级操作的按钮来设计就好了。

如果这样的操作是主要操作的话,可以让它是大号的、红色的带有加粗文本的按钮:

接下来是广告时间

Enjoy this post? We just released a book!
Refactoring UI takes everything we know about design and bundles it into one comprehensive package, including a book, screencasts, a component gallery, custom designed assets, and more.

Over 6000 people have picked it up so far, and the feedback has been amazing.

If you’re interested, head over to RefactoringUI.com/book to learn more and download a sample.

CATALOG
  1. 1. 使用色彩和字重来创造层次结构,而不是单纯的大小对比
  2. 2. 不要在有色背景上使用灰色的文本
    1. 2.1. 1. 降低白色文本的不透明度
    2. 2.2. 2. 根据背景色挑选文本的颜色
  3. 3. 阴影设计
  4. 4. 尽量少使用 Borders
    1. 4.1. 1. 使用 box shadow
    2. 4.2. 2. 使用不同的背景色区分
    3. 4.3. 3. 增加额外的留白
  5. 5. 不要让小图标无端地放大
  6. 6. 增加带有颜色的单边边框提升个性
  7. 7. 并非每个按钮都需要颜色
    1. 7.1. 接下来是广告时间