普通视图

发现新文章,点击刷新页面。
昨天以前首页

假装是个设计师

作者 王隐
2018年8月13日 22:25

每个 Web 开发人员都会遇到要做 UI 的情况,无论他喜欢与否。

也许你公司没有全职 UI 设计,所以你得自己来。也或许你在做一个 side-project,但你想让它比 Bootstrap 好看点。

你可以说「我又不是艺术家,别要求我太多」,但事实表明,你还是有很多技巧来提高自己的设计水平,当然了,这并不需要你有很好的 UI 技术。

以下是七个提升设计感的简单实践。

一、 用颜色和粗细来划分重点,而不是字体大小

文本样式的一个常见错误是过度依赖字体大小来划分重点结构。

「这段文字重要吗,字大点。」

「这段文字不太重要,字小点。」

不要总用字体来控制这些,尝试使用颜色和 font-wight 也可以完成同样的工作。比如:

「这段文字重要,加粗。」

「这段文字不重要,细一点。」

用两种或三种颜色划分你的内容:

  • 重要内容用深色(但不是黑色)(如文章标题)
  • 次重要内容用灰色(如文章发布日期)
  • 不重要内容用浅灰色(如页脚的版权声明)

大多情况,两种 font-weight 就够了:

  • 大部分的文字用普通 weight(400或500)
  • 你强调的文字 weight(600或700)

400 以下的 weight 就别用了;大标题下还可以看清,小字体基本看不清。如果你想用更小的 weight 来弱化你的文字,用更淡的颜色或更小的字体吧。

二、彩色背景别用灰色字体

在白色背景下使用浅灰色字体可以弱化内容,但是在彩色背景下就不好了。

这是因为我们在白色背景下看灰色其实是降低了文字的对比度。

相比于使用灰色字体,让文本接近背景色更能突出文字重点。

彩色背景下,你可以通过两种方法降低对比度。

1.降低白字不透明度(opacity)

白色,低不透明度,再让背景色透过来一点,这样可以弱化文字,又不会在彩色背景下显得很违和。

2.根据背景色自己选一个合适的颜色

当你背景是图片或图案时,这种方法比降低不透明度要好一些。而且降低不透明度显得文字太暗了,就像水洗的一样。

选个和背景色相同的颜色,再慢慢调饱和度和亮度,直到看起来还不错。

3.正确使用阴影

相比于使用大阴影(blur)和暗角来让阴影更明显,不如添加垂直偏移 (vertical offset)。

这样看起来会更自然,因为它模拟了光源从上面照下来的效果,这和我们在现实世界看到的一样。

输入框和表格也可以这么用:

阴影设计是门艺术,感兴趣可以看看 Material Design Guidelines

四、少用 border

当你想划分两个元素的边界时,先别考虑 border。

border 确实在划分边界上做的很不错,但这不是唯一的方法,滥用 border 会让你的设计特别杂乱。

你可以试试下面的方法:

1.box shadow

box shadow 不仅可以像 border那样做到划分边界,而且这种方法更精细,也不会太分散你的注意力。

2.两种背景色

相邻元素用不同的背景色就可以划分它们。

3.加空隙

有没有更好的办法划分不同元素的边界,而不只是简单地增加分割部分?当然有,把元素隔得更远就行了。

五、少用大图标,如果它们本身意义不大的话

如果你在设计一些大图标(比如登录页面的「功能」部分),试试 Font Awesome 或 Zondicons 这样的免费图标集,然后加大尺寸直到满足你的要求。

它们都是矢量图,所以不会在放大的过程中丢失细节。

虽然矢量图不会在拉伸时丢失细节,但本来在 16-24px绘制的图标非要拉伸到三倍四倍之大,真的不会显得很好看,他们会缺乏一些细节,比如不成比例的「矮胖」。

如果小图标可以满足你的要求,可以将它们包在另外一个形状中,并且为形状添加背景色。

这可以让实际图标更加接近预期的大小,同时可以填充更大的空间。

如果有预算,可以用大尺寸的高级矢量图,比如Heroicons or Iconic

六、边框特写,给平淡的设计增加颜色

如果你不是 UI,怎么才能从你的用户界面中和其他那些好看的设计中脱颖而出呢。

简单却有效的一个技巧就是为某些部分添加色彩鲜艳的边框,这样不会感到乏味。

举个例子,在提醒信息的左边做文章。

高亮导航栏

顶端都加上也行。。

它不需要任何专业的 UI 设计人员帮你,但可以让你网站看起来更「大气」。

是不是不好选颜色,Dribbble’s color search 可以帮你。

七、不是每个按钮都需要颜色

当用户可以在一个页面有很多的选择时,很容易陷入语义化设计的陷阱。

比如 Bootstrap,无论何时添加新按钮,都可以选择不同的语义。

「积极动作,绿按钮。」

「删除数据,红按钮。」

语义是按钮设计的一个重要部分,但有一个更常见的重要维度被忽略了:重要性。

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

设计这些动作的时候,更重要的是理清这些按钮谁更重要。

  • 重要动作应该突出,加粗,高对比度。
  • 不太重要的动作应该清楚显示,但别太主导。用轮廓线,低对比度背景色。
  • 三级操作可见即可,但不要引人注意。像链接一样处理吧。

「删除按钮呢,应不应该总是红色?」

没必要,如果它们不是页面中的主要操作,处理成二级或三级按钮即可。

保留大、红,粗样式在那些以负面操作为主的页面上,比如确认对话框。

原文链接:7 Practical Tips for Cheating at Design – Refactoring UI – Medium

作者:Adam Wathan & Steve Schoger

编译:@王隐在录音

❌
❌