每一个开发者,都会遇到一些于视觉设计相关的问题或者决策,不管他喜欢与否。

也许你工作的公司没有一个全职的设计师,需要你自己去完成一个UI特效,或者你自己认为自己比较厉害想搞得比 Bootstrap 更好看一些。

你也许会经常抱怨:“我永远没办法把这个搞得更好看,我也不是一个艺术家”, 但是有一些技巧让你更好的完成工作,并且也不需要什么设计背景。

1. 用颜色和字体粗细来替代字体大小,如下图:

文本样式常见的错误就是过度依赖用字体大小来体现层次结构, 特别是经常听到领导站在边上说: “ 这个文字比较重要,字体大些,这个文字不重要,字体小些”。

其实可以用颜色和字体粗细可以更好的来展现内容的重要程度,比如一些重要的文字可以字体粗些,一些不重要的文字可以用淡颜色等, 关于字体颜色和粗细,可以尝试如下规则:
颜色使用2到3种:

  • 主要内容使用黑色(但不是纯黑色),比如:文章标题

  • 不重要的内容可以使用灰色,比如:文章的发布时间

  • 一些辅助内容可以使用淡灰色,比如:版权说明

同样,可以使用两种字体粗细能让UI更好看:

  • 大部分普通粗细文字 (根据字体情况 粗细设置在400到500之间)

  • 需要强调的重要文字粗细(根据字体情况 粗细设置在 600到700)

用 如果标题字体粗细设置小于400,这将很难阅读,如想用比较细的字体强调一些文本内容,可以尝试用比较亮的颜色或者调整字体的大小。

2. 设置了背景色的情况下,文字不要使用灰色:

使用淡灰色文本去强调白色 文字,但是在有背景色的情况下,这看起来并不好。因为灰色和白色并没有明显的对比效果。

让文本颜色接近于背景色可以更好的展现层次结构

在有颜色的背景下有两种方式可以减少对比:

(1)减小白色文本的透明度

使用白色文本并降低透明度,这样强调文字和背景色并不冲突

(2) 基于背景色选择字体颜色

选择和背景色相近的颜色,调整饱和度和透明度直到看起来舒服为止。

3. 偏移边框阴影:

Box shadowns 不要使用比较大的模糊值,而是阴影垂直偏移,因为它跟我们现实世界中一样模拟光源向下照射,这样看起来更自然。

如果你想了解更多关于阴影设计,这里有一篇不错的文章, Material Design Guidelines (https://material.io/guidelines/material-design/elevation-shadows.html)

4. 用少量的边框

当你创建两个分开的元素,你很容想到的就是加边框。边框是区分两个元素不错的方式,也不是唯一的方式,用的太多让整个设计看起来很混乱,下次需要边框的时候,可以试试下面的方法:

(1) 使用盒阴影

盒阴影可以微妙的 实现和边框相同的目的,而不被干扰

(2)使用两个不同的背景颜色

通常给两个相邻元素不同的背景色,以表示区别,如果已经使用背景色了,就可以去掉边框了。

(3) 添加适当的水平间距

有什么好的方式可以使两个元素分开而不是添加分隔符?水平间距用来分隔两个元素 是一种非常好的方式,没有添加任何多余的元素。

5. 不要使用大小不一的图标

如果你设计东西的时候需要一些图标(如首页的特性介绍),本能的会去找一些免费的图标, 比如: Font Awesome or Zondicons 并且调整到自己满意为止, 这些都是矢量图,放大后也不会影响图标效果。

虽然这些矢量图不会因为调整而降低品质,但是这些图标是按照16-24px大小话的,当你放大到3到4倍后看起来非常的不专业,缺乏细节非常粗糙

如果都是小图标,可以尝试用一个带背景色的形状包裹起来。

这样能保持图标的预期大小,而且能填充比较大的空间。如果预算充足也可以从 Heroicons or Iconic. 上面买一些付费图标。

6. 使用带颜色的边框线改善平淡的设计

如果你不是一个专业的设计师,你怎样从美丽的摄影和途中提升你的UI视觉天赋呢?

一个简单的技巧就是 添加一个实线带颜色的边框 使你的界面有非常大的不同。如下图,一个警告消息

…. 一个选中的导航条

…. 整个布局的顶部

它不需要任何设计天赋,就能添加一些简单的图形,使你的网站看起来更有设计感。

如果不知道怎么选颜色? 可以从一些调色板选择 如:Dribbble’s color search,比传统的调色板更有优势。

7. 不是所有的按钮都需要背景色

当一个页面有多个行为操作,很容易让人陷入 基于语义化设计的陷阱里。每当你需要添加一个按钮时,一些框架(比如Bootstrap ) 会给你一些语义化风格的按钮让你选择。

如果是正确操作,使用绿色按钮?

如果是删除数据,使用红色按钮?

语义化是按钮设计非常重要的一点,但是还有一点很容易被大家遗忘,那就是主次关系。

页面上每一个行为动作,跟金字塔一样。只需要一个主要动作行为,和一些不太重要的次要行为,以及一些很少使用的三级行为。

在设计这些行为动作的时候,最主要的是传达他们的主次关系。

  • 主要行为必须是明显的

  • 次要行为只要清楚就行,不需要那么突出

  • 其他行为可以看到,单不会引人注意

破坏性的行为必须是红色吗?

当然不是,破坏性的行为只要不是页面上主行为,最好给一个次要或者更低的处理。

大红色,或者是带边框的红色就标识消极么?实际上在界面上它是主要行为,比如下面这个对话框

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

第一次尝试翻译Medium 上的文章,很多不通顺或者错误,望大家指出。也可以扫描一下二维码关注我