UI 设计中的七个实用技巧（2）

4.无边框设计，使用更少的边框

当我们需要分隔两个元素的时候，尽量不要用边框，上图中左边因为使用了很多边框，使整个画面非常复杂，而右边才用了无边框设计，使界面很清爽透气，有呼吸感。下次我们在分隔元素的时候可以试试以下三种方法：

一.使用阴影

如上图所示，右边的图片没有使用边框，而是用阴影区分卡片和背景，让它们在视觉上分开，相比左边的边框，右边的阴影更加柔和，也不会分散注意力。

二.使用两种不同的颜色

在上图中，为了将正文和下面的按钮分开，左边的图用了一条线，右边直接使用了两种不同的底色，虽然这两种底色只有细微的差别，但是起到了很好的效果。

三.添加额外的间距

添加额外的间距是力力最常用的方法，我们很多时候可以不用分隔线，而用更大的距离把它们分开，因为在设计上，距离越远表示它们的关系越远。让两个元素分开不一定要用东西把它们隔开，让它们离得远其实就够了，这是一种优雅的方法。

5.不要将小图标直接放大

我们现在使用的很多设计软件都是矢量的，按理说在矢量文件中把一个小图标放大是不会失真的，但是如果你这样做了，会显得非常不专业，一个十几到二十像素的 icon，如果直接放大两到三倍，会缺乏很多细节，不精致，而且比例会显得很“矮胖”。

在需要放大小图标的时候，有两种方法是可行的，第一种是不要放大图标，在图标后面加上圆形或者矩形的背景把小图标装进去，就像上图中右边那样，依然是比较精致的。上图中左边的做法是不可取的，它把小图标直接放大显得很粗糙。

另一种方法是根据不同大小的尺寸画不同的图标，手动为大图标增加细节，这样就不会显得不精致了，类似下面这样：

如果图标画的不是很溜的同学也可以下载，力力有个不错的网站推荐：https://feathericons.com都是一些线性的小图标，开源的可以免费下载：

今天的推送就到这里，剩下的最后两个技巧我们下期推送再见 :D