最近定了一个目标，看一些公众号里的技巧文章，为了防止忘记，就在这里做下笔记。

UI设计中的七个实用技巧--------UI每日推公众号

技巧一：多使用颜色和字重来表现层次关系，而不是只用大小。

如下图：

            左边的界面之所以没有右边的界面层次分明，是因为左边的界面只用了字体大小来强调层次，而右边的界面在层次关系上不仅使用了字体大小，也改变了字体的颜色，使重要的信息更加突出。一个界面设计的好坏不仅仅在于界面的美观程度，更重要的信息的表达，要让用户一眼看出主要信息和次要信息，信息传达要有层次感。

          颜色：在颜色上我们一般使用三种层次，标题最深，正文第二深，一些不重要的注释最浅。

         字重（字体粗细）：一般分为两个字重，用较重的自重来表现标题，比如600-700（Bold 和 Heavy），用较轻的字重来表现正文，一般是400-500（Regular 或者 light，正文最好不要超过400，否则太粗）。

技巧二：不要在彩色背景上使用灰色文字。

       在白色背景上可以使不重要的文字变成灰色；但是在彩色背景上就不能使用此方法，因为灰色不带有任何色彩倾向，在彩色背景上使用灰色会很难看。

我们通常使用两种方法：使用透明度，在彩色背景上使用白色，然后江都透明度，这样背景的颜色就能透漏出来，使其融合在一起。

       也可以挑选基于背景色的颜色，有时候背景色如果是彩色或者是照片，使用透明度会和后面的图案重叠干扰，这时候就挑选一个同色系较浅的颜色。

技巧三：阴影增加垂直偏移。

      平时生活中，自然光都是从上向下照射的，因此阴影在下方，所以增加阴影的垂直距离可以使阴影向下移动，因而更接近真实。

      左图为了使阴影更明显，使用了 12 像素的阴影大小，而右边的图片只使用了 6 像素的阴影大小，却看起来也很明显，而且效果还比左边的自然，原因就是右图的阴影还有 4 像素的垂直偏移。为什么要加垂直偏移？因为在我们平时的生活中，自然光都是从上向下照射的，因此阴影都是在下方，所以增加阴影的垂直距离可以使阴影向下移动，更加接近真实。

更多阴影的知识可以看下谷歌 Material Design 的设计指南关于阴影的那部分：https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows

技巧四：无边框设计，使用更少的边框。

       当我们需要分割两个元素的时候，靳亮不要使用边框，如果边框使用过多会使整个画面非常复杂。可以使用以下三种方法来解决边框问题。

       1.使用阴影

       可以使用阴影区分卡片和背景，让他们在视觉上分开。

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

       2.使用两种不同的颜色

       可以使用阴影区分卡片和背景，让他们在视觉上分开。

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

     3.添加额外的间距

       在设计上，距离越远表示它们的恶关系越远，所以说让两个元素分开不一定要用东西把它们隔开，让他们离恶远气质就够了。

技巧五：不要使小图标直接放大。

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

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

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

网站推荐：https://feathericons.com 都是一些线性的小图标，开源的可以免费下载

技巧六：使用强调边框为平淡的设计添加色彩。

      对于绘画和手绘能力比较弱的设计使来说，通过添加强调边框，就像下图中右边那样，给不同的卡片上沿添加了不同颜色的边框，使整个界面看起来更丰富，也成功表现出了两张卡片的不同，不至于像左边的卡片一片白，很难找到重点。

       我们用不同颜色的强调边框来表现不同的内容，不仅让界面看起来更丰富，而且也让不同的内容有了区分，更利于用户阅读界面的信息。

配色网站，可供参考：https://yeun.github.io/open-color/

比如：在警告消息的旁边

在选中的导航条的下面

甚至整个布局的顶部

甚至把强调边框变成卡片的一部分

我们用不同颜色的强调边框来表现不同的内容，不仅让界面看起来更丰富，而且也让不同的内容有了区分，更利于用户阅读界面的信息。

配色网站，可供参考：https://yeun.github.io/open-color/

技巧七：并非所有的按钮都需要颜色。

      当一个页面上有多个按钮的时候，用户很容易陷入混乱，不知道该点哪个按钮，该执行哪个操作，人们通常习惯用红色表示警示和消极的操作，习惯用绿色表示成功和积极的操作，但是如果只用颜色来表示各种按钮的意思，很容易让界面变乱，不知道该点哪个，因为按钮太多了，像下面这张图：

其实在界面设计中，这些按钮的意思只是一方面，还有一个点经常被人忽视，就是层次结构。我们可以把一个页面的所有按钮想象成一个金字塔，大多数的页面只有一个主要按钮，一些不太重要的次要按钮，还有很多基本不会被点到的三级按钮。

下图中最左边的一列是主要按钮，中间的一列是次要按钮，最右边的一列是三级按钮：

我们设计主要按钮的时候应该让它是最明显的，一般用实心的按钮和高对比度的背景颜色。

设计次要按钮的时候，应该让它明显但不能抢了主要按钮的地位，一般用描边的按钮或者半透明按钮就行。

设计三级按钮的时候应该让它看起来最不明显，但是需要和正文有区分，一般设计成带颜色的字。

最后还有个小疑问，消极的按钮比如删除按钮需要用红色么？其实看情况，有时候使用三级按钮比用红色按钮更好。除非在一个页面中删除是最重要的操作的时候，我们才把他设计成红色，像下图这样：