不会设计不要紧！看看这七个实用的网页UI设计小技巧！

在微博看到别人转发的这篇文章，里面的每一点都以为很是实用，就决定翻译一下，也算是给本身存个档，加深一下印象。毕竟做为一个前端页面仔，页面UI的美化也是咱们的工做，并且还会常常会被要求在页面上加个这个或者加个那个，没有设计稿直接整页面也是常有的事，了解一些UI设计的基本法则仍是颇有必要滴~
原文连接>>>

---

无论喜不喜欢，每一个网页开发者老是会没法避免的要面对一些视觉设计上的决策。
可能你的公司没有一个全职的设计师，你得本身随机应变一些功能上的UI设计，又或者是你可能在作本身的项目，不想让他看起来太像'另一个Bootstrap网站'。

这时候你可能会干脆摆摆手说:“反正我永远也作很差，我又不是设计师。”但其实有不少小技巧能够提高你的项目的设计感，而且不须要你有图形设计的背景知识。

下面给你们介绍一些可以立马提高你的设计的小技巧：

使用字体的颜色和粗细来区分等级 而不是字体大小

在作UI设计的时候有一个常常会犯的错误就是过分依赖字号大小来对文字进行级别的区分：
“这个文字重要？那就让它大一点”
“这个文字次要？那就让它小一点”
与其让字号大小承担这么多的工做，不如试试用字体粗细和颜色来作一样的事：
“这个文字重要？那就让它粗一点”
“这个文字次要？那就让它颜色浅一点”
尽可能保持在2-3种颜色：

• 用深色（不是黑色）来表示首要的内容，例如文章的标题。
• 用更浅的灰色来表示辅助文本，例如页脚的版权信息等等。

一样的，两种字体粗细对于UI界面来讲足够了。

• 大多数文本使用正常字体粗细（400或500，具体取决于字体）
• 重点强调的文本使用更粗一些的字体（600或者700）

注意，不要使用400如下的字体粗细，由于它只有在较大的字号如标题这种才有效果，在小号字体上表现的很是不明显，若是你想用更细的字来表示更次要的文本，可使用更浅的颜色或者小一号的字体大小。

不要在彩色背景上使用灰色字体

在白色背景下使用较浅一些的灰色来表示次要文本是一种不错的选择，可是在有颜色的背景下就不太好了。这是由于咱们实际看到的灰色在白色背景下的效果是下降对比度。
要想视觉上让文本的呈现次要等级效果，应该要让文字颜色更接近背景色，而不是用灰色，以达到下降对比度的效果。

在彩色背景下，你能够采用一下两种方式来下降对比度：

• 下降白色字的透明度 - 适当下降字的透明度，让背景颜色稍微渗透一些，这样即达到了弱化的效果又不会与背景相互冲突。
  
• 手动选择一个接近背景颜色的字体颜色 - 当你的背景是图形或者图片的时候，这种方式比用透明度要好，由于透明度看起来会更死板像是褪色的感受。选择一个跟背景色的色调相同的颜色，调整饱和度和明度直到你以为合适为止。
  

设置阴影偏移

与其用大块的阴影模糊去强调盒子，不如使用垂直方向上的偏移量。它看起来会更加的天然，由于它模拟的是灯光从上往下照射在物体上的投射，更接近咱们在现实中看到的场景。
这个小技巧一样也适用于input。

若是你想了解更多关于阴影设计的东西，能够看看 Material Design Guidelines。

少用点边框

当你想要在两个区块之间作分隔的时候，不要第一时间就想着用边框。固然，边框确实是很好的用来分割的方式，可是它不是惟一的方式啊，过多的使用边框会让你的设计看起来杂乱。
下次当你想用边框的时候，不妨试试下面这几个：

• 使用盒子阴影 - 盒子阴影实现的效果和边框基本相同，可是它呈现的效果会更微妙一些，没有边框那么让人分心。
  
• 用两种不一样的背景色 - 只要给元素稍微加一点背景颜色的不一样，就能呈现分割的效果了，你能够尝试去掉两个不一样背景色之间的边框，其实根本不须要呢。
  
• 增长额外空间 - 还有什么比给元素之间增长空间更能体现分隔效果的呢？制造一点空间让元素互相远离，就能很好的达到分隔效果，也不须要引入其余的UI元素。
  

不要把小图标放大

当你在某个地方须要用到大的图标的时候（好比登陆页的功能部分），你可能立马就去用免费的字体图标库如 Font Awesome 之类的，而后调整字号大小，达到你须要的效果。
可是，它们毕竟是矢量图像啊，当你放大了以后，质量不会降低吗。
固然，矢量图像即使是被放大也不会影响图像质量，可是 实际大小为16–24px的图标被放大3-4px以后，看上去会很是的不专业，缺少细节，看上去十分笨重。

若是你只有小号的图标，能够把它包裹在一个有背景色的大色块里面，这样既不影响图标的显示效果，又能占据更大的空间。

若是你有足够的预算，也可使用一些额外收费的图标，好比 Heroicons 或者 Iconic。

使用鲜明的边框为平淡的设计增添色彩

若是你不是专业的设计师，你的界面也没有也很平淡，没有优美的插图或者照片来装饰，如何为页面增添一点风味呢？
有一个效果很显著的小技巧就是为简单的页面添加粗重的边框，这样能够减小页面的乏味感。
举个栗子，好比下面这个警告条：

再举个栗子，高亮导航栏元素：

再再再举个栗子，为整个页面都加一个边框：

这种方式不须要你有什么设计就能改善页面UI，让页面看起来更有设计感。
若是你不知道如何选择颜色，网上也有不少色系搭配方案可供选择，或者试试 Dripple的颜色选择，让你从传统颜色选择器无穷无尽的可能中解脱出来。

不是全部的按钮都须要背景色

当一个页面上有不少须要用户操做的按钮时，很容易就陷入一种错误，就是彻底根据语义来设计这些操做按钮的颜色。
Bootsrap框架从某种程度上鼓励了这种行为，当你引入一个button的时候，有一排不一样语义的不一样颜色的按钮供你选择。

“这是一个积极的操做？用绿色按钮。”
“这个操做是删除数据？用红色按钮。”
诚然，语义也是按钮设计中必不可少的一个因素，但还有另一个维度却被忽略了，那就是层级。
在一个页面的里面，操做按钮的层级就像金字塔同样分布，有一个最高级别的操做，和一些次要操做，以及一些不怎么使用的三次操做。操做的层级在设计按钮的时候必须明显的体现出来：

• 首要操做必须明显 - 高对比度的背景颜色适用于这里。
• 次要操做应该表现清晰但不用太突出- 边框样式或者低对比度的背景色适用于这里。
• 三级次要操做应该是可被发现但不引人注目的 - 把这些操做当成 link连接的样式来处理会比较好。

“那若是是销毁操做呢？难道不该该用红色吗？”
不必定噢！若是不是首要操做，就不须要用红色背景，用次要操做的样式便可。

只有当销毁操做是当前首要操做的时候采用高对比度的红色背景样式，好比弹出对话框的确认取消按钮。

---

怎么样，是否是看完了以后和我同样以为颇有收获捏？~(￣▽￣)~*