如何让设计趋势，运用于日常工作中的“普通项目”

_

这是我在站酷写的第一篇文章，我一直都很懒，每天就做做设计图，画画我的古风小图，打打我的游戏。

_

_

现在很多UI设计师都有同样的困扰，我们在站酷看了那么多高端的设计，各种渐变、各种动效、各种时尚高端的页面，但大家实际工作的时候，接触的项目都是很实用的，不会给我们艺术发挥的空间，甚至我们做的各种效果，开发人员还没有能力实现，那么咱们要如何才能在实际工作中，运用现在最新的设计趋势呢？

那首先我们要知道，现在UI设计中的趋势是什么？一般所有的设计趋势都是跟着苹果走的，总结一下就是简洁清晰、卡片式、渐变、纯度等，避免视觉上的混乱。我们是技术团队中的一环，我们的设计不仅要美观实用，也要考虑到团队的技术能力。我是一个前端工程师出身的UI设计师，所以通常我的设计会考虑开发的能力，避免增加团队负担的设计。

站酷APP的设计，就符合清晰简洁、卡片式、渐变、纯度高等特点

现在站酷和UI中国的很多设计作品，也越来越多的趋向于这些特点 ，曾经那些“土里土气”“刻板”的页面渐渐被抛弃。

简介清晰和字体颜色的关系

字体方面通常都是苹方、思源黑体这种常见字体，这里想说的是关于字体颜色。

前几年设计师会喜欢用#333333、#666666、#999999这样的颜色，最黑最黑的就是#333333。但现在其实整体的设计趋势上，字体的颜色是往更黑去发展，很多的成功产品，他们最黑的字体是#000000，也就是纯黑(不是推荐纯黑！不是推荐纯黑！不是推荐纯黑！)。

更黑的字体颜色，会让页面显得更加的稳重，因为背景颜色通常是白色，页面也会显得更加的清晰，这就是趋势中“简洁清晰”的体现。

可以使用纯黑作为最黑的字体颜色。正常情况下，处理办法是使用#333333这样的颜色，然后字体加粗，视觉上显得更黑。<<<

网易云和站酷处理这些字体方法都是一样，找个偏黑的颜色，然后选个粗体的苹方。然后选个#999999这样的灰色，用小字当点缀，马上页面的对比度就拉开了。

这是我之前看到的稿件，这样的页面虽然完整，但是问题就是在层次拉不开，就所有的文字都是在一个层级上，页面很"平"。

实际案例

这是之前接到的一个外包项目，甲方是个做古董拍卖的中年大叔，给了一个参考案例，要求帮忙做个小程序，我拿这个项目举个例子。

图1是最常见的轮播图设计样式，就是一个横铺过来的banner，大部分设计师在做项目的时候，可能都是这么处理头部了。那么把现在比较流行的设计趋势融合进来，就可以使用图二这种样式。轮播图使用“卡片化”的样式，因为是古董行业，我取消了圆角的设计，使之更加的沉稳，底色使用一个深灰去继续加重这种稳重感。开发也没有什么难度，我们的前端大概花了十几分钟就做完了这个样式，甲方也非常满意这个设计。

接下来我们来看一下，头部这个导航入口一般要怎么设计。

上面这几个图标是前几年很常见的样式，就是一个纯色的底，然后加个图标。这种设计已经被抛弃多时了，参考一下现在很多成功的app，大致是这样的：

要稳重老实，就选择第一种的感觉，纯色底，图标要加个阴影，这样显得不那么死板，而且背景这个颜色也要琢磨一下，一般是明度低一点饱和度高一点。

第二种图标来自喜马拉雅听书，渐变色、阴影，图标做多个层次，显得有层次感，喜马拉雅还用了一个郭德纲图标作为个性推荐，这种用户体验真的挺好~

第三种就是用插画当图标，这种需要设计师画插画，如果时间多，是可以尝试这种设计，这种设计方式的最大好处就是增加品牌的辨识度。

第四种也是常见的，定制一套专属的个性图标，这个就不多说了，根据实际情况来。

比较推荐的就是第二种，阴影渐变都是现在比较热的设计方式，而且也很漂亮。

最后我使用的是这样一套图标，里面的具体造型是甲方给的，强制使用这个样式。那么按之前说的方式做，就是底色小小的做个渐变，然后样式上有个阴影，这个图标就OK了，古董项目避免花哨。然后说下里面的这个图标的造型！

里面的造型，使用实心的这种图标，尽量不要用线框图标，线框图标会显得“虚浮”。我在这个项目使用线框图标是甲方强制，希望不会误导读者。

接下来看下具体内容的设计。

之前提到关于字体的使用方法就可以运用进来了，设计上的思路就是把信息进行分层，然后页面给用户的信息是具有“层次化”的。通俗的说，就用户看这一块是什么，它就什么，不要在一个区域塞过度的东西。我们做的“更黑的加粗字体”之类的操作，本质上也是去为了让页面的信息更加的层次化，这就是文章开头说的“简介清晰”，这一点在很多的成功APP中也会有所体现。

站酷也是这种设计思路，“用户看这一块是什么，它就什么”，不要在一个区域塞过度的东西。尤其当一个项目处于初期，功能本身就不多的情况下，这种设计思路不仅可以保证页面美观，同时也可以迎合设计趋势。

像这种小地方的设计也是可以运用这种设计思路，配合上一些小图标作为点缀，就很OK了！

然后整体出来的效果就是这样了：

最后表明一下，我仅仅是在这篇文章中，分享我是如何将流行的一些设计元素运用于日常工作中。每个具体的项目要求是不同的，具体问题具体看。