点、线与面——icon设计风格求异中的求同

        文章主要是对于现在button按钮的一种流行设计进行思考，即未按下时为点线风格，按下时转化为色块风格。这样设计是因为用户会在一定时间内在该icon所表示的界面内驻留，为了表示强调所设计。

       那么为什么会产生这样的设计呢？

       现在设计流行的一个趋势是轻量化，图标都越来越精简，对比越来越小。在线性图标发展的早期，曾经用变色来表示按下状态，这样就存在一个问题，一个32px的图标，如果只是线条变色的标识度就不够。举例：

       再后来，又有其它方案，在按下的同时加上阴影动画效果，但是这个只适用于单次点击的图标，并且在很多平台实现不了。驻留类的图标就无法使用这个方案。举例：

      最后呢，没办法直接换风格，直接用色块对比点线，效果拔群emmm，举例：

        设计背景就聊到这里，这种设计本质是求异，使用反差表达效果。但是一组icon设计的核心是求同。

       也就是说我们如何在一个求异的设计中，达到与整套图标设计的设计语言统一，这是十分重要的，实际上目前能做到这个要求的设计师很少很少（ps：当然我也做不到，虽然做不到，但是我就bb）。

        以下就一些关键要素聊一聊，以用户为排序标识（ps：就是说用户能够了解到的顺序，而非设计时的重要性顺序）

很简单也是很纠结的问题，点线图标的色彩该如何选择？

       1、  和主色调一致

       如果选择了和主色调一致，那么色块图标就必然不能和主色调一致，那么问题来了，色块图标选择了对比色，给用户带来的是识别度呢？还是突兀？当然也有小伙伴肯定会说了，那么色块图标也和主色调一致呢？这个我也去尝试了一下，存在两个问题：1、图标切换的时候感觉，一种很不舒服的感觉，不够清爽。具体举个例子就是：像一坨放了很久的面。2、对比不够强烈，很容易忽略这个图标。特别是这个图标如果在底栏中间，emmm，百分之80的人，都会忽略这个图标的意义。

       2、  使用对比色

       这个还ok，但是需要考虑是否合适，用好了比现在主流方案更加好，不过比较挑app。（举例：一些运动app）

       3、  使用辅助色系

       其实是使用同色调的一个变种。不过要把握好这个度，对比过大，显得突兀。对比过小显示效果一般。（举例：淘宝就是使用的辅助色系，不过说实话画的一般，不在颜色，在其它问题）

       4、  使用灰色

      emmm，不得不说黑白灰是好东西。实际上这个也是现在的主流设计。不过说真的，这是真的视觉疲劳了。（低头看微信）

        色彩上我们要对比，结构上还是要对比？当然不是，不然和做两套icon有什么区别（这里吐槽淘宝设计师，真的是做了两套icon的感觉）。点线图标和色块图标最重要的就是结构上的内在联系，实际上大部分app这个方面都做的不好。

       例如微信和QQ都只是简单的将线图标，填充和反色。实际上因为本身图标还比较简单，这样的设计还能够应对。

       到了淘宝，这样的设计，就会因为点线图标有许多细节导致色块图标完全变形。

       这里的话要举例表扬，bilibili的图标设计。。。在结构的统一性上做的很好。

       那么该如何保持在不同设计风格icon设计中的结构统一呢？我们下次再讲。