7个提升Web开发者的设计感的实用技巧

7个提升Web开发者的设计感的实用技巧

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 偏移边框阴影：

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

如果你想了解更多关于阴影设计，这里有一篇不错的文章， Material Design Guidelines (.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 ) 会给你一些语义化风格的按钮让你选择。

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

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

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

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

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

• 主要行为必须是明显的

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

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

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

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

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

原文： 

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

转载于: