这7个实用的设计技巧，能让你的UI高级感更强烈

对于每网页设师言，设过程中总会碰到需作出设决策的时候。也许的公司并全职设师，需求则求设出全新的UI；又或者制作一自己的人项目，希望它比 Bootstrap 的默认效果强一些。这时候很多人会退缩:“我并不一家，我法作出好的效果！”但事实证明，设出优秀的效果，合理运用技巧其实重，且可以出效果的。

今天文章，我们结了7个简单观改善网页视觉效能提升高级感小技巧。很实，也很实用，希望你们能喜欢。

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

对UI 文本行样式控制的时候，常见的错误莫过于过度依赖字体小差异营造对比。

“这段文字重吗？那么让它一些吧。”
“段文字是比次要吗？么让它变小一点吧。”

单纯使用字大小对比，所营造的对比并不够，尝试结合彩和字重来营造更的对比效果。

“段文字重要吗？我们让它彩更加大胆一吧。”
“这段文是比较要吗？我们让它色更浅些吧。”

如可以话，你甚至可以采用两到三颜色：

• 主内采用深色（诸如标题，但不用纯黑）
• 要内容采用灰色（比如文章发表日期）
• 辅助性内容采用浅灰色（比如页脚中的版权声）

类似的，UI设的时候，通常两种不同的字重足以营造出优秀的层次感：

• 大多数的本采正的字重（400到500，具体取决于字体）
• 对于需强调的文字采用较重的字重（600到700，具体取决于字体）

应当尽量不要让正文部分字重低400，因为一部分字身尺寸已经小，低400使得读不佳。果你依需要降低字重，么不妨让字彩更浅一点，或者替换成其他识别度强、字重相对小的字。

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

在色背景下，将黑色的文本改成灰色，是不错的淡化其视觉效果的做法，但是在彩色背景下这做，则是另外一回事。

际上，让白背下文由黑变灰际上是达到降低对比度的效果。

但是在彩色背景，想要降低对是应该本逐步接背景色，而是改为灰色。

想要降低和背景色之间的对，通有两种方法：

1、降低白色本的透明

降低透明，够背景的颜色透过来一些，一种冲突的方式降低前景字和背景之间的对。

2、基背手工挑选文的颜

当背是图像或者图案的时，半透明的文影响读，个时最是基背主来挑选相应的文。

3、阴影设计

相比于采用大范围扩散模糊阴影，使用微妙垂偏移阴影效更明显，更自然，它模拟了最常见特征，线从上往下照下来所造阴影效。

如果你对此有兴趣，Material Design Guideline 非常清晰地给你讲了这的阴的制作细节。

4、尽量少使用 Borders

盒子模型网页端常用到的具。当需两元素之间创建分隔的时候，尽避免使用两者的界直接接触。

虽然 Border 是分隔两个元素好办法，是它不是唯法，使用过多会让个布局设计感降低，甚至会造成混乱。

所以你可以尝下面的法来规避：

1、使用 box shadow

box shadow 同可以营造出边界，而且更加妙，并不会显得突兀，不会散用户的注力。

2、使用不背景色来区分

常，相邻元素背景需要有微妙能够让他们进区分。所以，你所需要做是在不区块采用不背景色，并尝试删除边框，为你根本不需要它。

3、增加额外的留白

创建元素之间的分离效果，并不一通过线框表，只增加留白，让它们分隔就行了。通过留白间距实元素分组UI设中的常用手法。

5、不要让小图标无端地放大

当你在设计着陆页的时，能突出产品的功能，个时你需要一大图标来为视锚点，个时你能去 Font Awesome 或者 Zondicons 样的网站找几个免费的矢量图标，放大到符合你需求的尺寸。

它们都是矢量图标，照说是可无损放大的。但是一个通只有16×16 的图标放大倍，它固然无损，但是在视觉上就显得颇为专了：缺乏细节，总感觉过于矮胖。

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

这样的设计仅够图标达到预期的视觉体积，而且看起来要单纯放大，看起来细节会更多一些。当然，如果你手头是那么紧的话，最好还是几个大尺寸的素质图标，如 Heroicons 或 Iconic。

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

当，你能并不是一个对平面设计有着够经验的设计师，但是依以让你设计的界面有够的视吸引力。

最简单的方法，就是在界面的边框中的一边添上单色甚至渐变的边框，这平淡无奇的界面一子变得起来。

比如警告弹出框的侧面：

或者导航栏的底部，以示触发：

或者整页面的顶部：

这并不需什么平面设的验，但会明显强化设感。

退步讲，你不知选取什么颜色，简单，上Dribbble 色搜索随便找几个看着漂亮颜色，其实也够用了。

7、并非每个按钮都需要颜色

很多时候，按钮本身所处的语境按钮的文本内会让人感到迷惑。BootStrap 这样的框架就让设师按照语境语义行选择：

“这是一个积极的操作？这个按钮是绿色的。”
“这是否是要删除数据？那将按钮置为红色的吧。”

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

网页上每个操其位整个互金字塔的某个位置。绝大数的页面其只有一个主要操，搭一不太重要的次要操，以及为数不的几个三级操。

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

• • 要操作应该很明显。采实色、对的按钮是很有必要的。
  • 次操作应该明显，但不突出，采用幽灵按钮或者背景对比度较低的色彩比较合理的。
  • 三级操作应该是可被发现，是不明显，他们最好被设计为链接。

“破坏性的交互所涉及的按钮难道不应该色的么？”

没必要！如破坏性交互所涉及到按钮不是主要操作话，让它按照要操作甚至三级操作按钮来设计好了。

如这样操作是主要操作话，可以让它是大号、红色带有加粗文本按钮：