中后台应用中的按钮设计之道

1、先来说一下什么是B端产品？

个人简单理解就是企业内部的应用系统，例如财务、人力系统等。

2、B端产品有什么特点？

对比C来说，微信的用户多吧，那也就意味着用户各式各样，但B端用户一般是企业内部人员（我所实践的领域），那么也就决定了这部分人有这么几个特点：1、接受相对业务专业性系统使用培训，2、系统优先满足业务功能实现而未必是用户体验，3、系统不好用也得用，没有替代品；那么随着业务不断累加，系统会变得越来越复杂，这里充分考验了架构师的能力，所以，设计上要注意这么几个特点：高效、扩展、统一。

所谓高效，在设计而言就是设计元素是不是视觉信息传达效率最高，能让业务操作人员不费吹灰之力就能迅速明白业务含义，这才是优秀的设计，对比华而不实的炫酷按钮，我个人觉得这要高一个档次，其次才是结合潮流的设计，比如渐变、投影色等。

所谓扩展，我个人比较提倡卡片式设计，卡片分类本就该是设计师需要熟练掌握并应用的一门技艺，因为卡片设计过程中是符合高效原则，对信息分类归纳，模块化设计的有效手段，至于形式当然可以各异，另外卡片式扩展到移动端也方便，毕竟业务上移动互联是趋势。

所谓统一，更多的指的是交互，因为企业人员流动是有的，当一个新员工到来时，师傅教他用系统，怎么样快速教会呢？这里涉及到一个系列产品的问题，设计师经常用Adobe的产品，但当你学会了PS，哦也就是Photoshop时，哈哈，你在学AI、AE就会有一些共通的内容，也就是所谓的有底子，学得快；从企业管理者角度，我花越少的成本培养出成熟的员工那我就是赚了；所以增删改查基本的操作，不管跨几个系统，企业内的操作都改是一样的交互，步骤基本相似，举个例子，企业里有几十个内部应用，上传附件有的是借助文本按钮弹框上传，有的是拖拽到指定区域上传，这就会造成一定成本。

3、以下是我在实践中总结的一些B端产品在设计时注意的设计理念，今天就根据这些理念讲讲按钮该如何设计更好。

在设计规范里我是这么写的：提倡按钮使用顺序是1纯文本按钮2图标文字搭配按钮3纯图标按钮4其他按钮形式。

还是从我们的设计理念出发，就视觉信息传达效率而言，纯文本肯定是最快的，所以建议多用，图标，各位不要想简单了，比如编辑删除等，大家已经习以为常的图标，单独用都没问题的，像这种如果用了，大家不得不考虑这样一个问题，那就是随着业务不断发展，他有一些特殊名称的按钮，企业特色的，比如财务类里边二次投保、重新授信等，一个图标就不够，那么如果是图文搭配，图标也就是基本只有装饰性的意义，传达就弱了，就好像标志设计一样，光漂亮而不宜传播的图形。

再就是考虑扩展问题和统一问题，一般设计师在一个项目里一段时间就要去其他项目了，那后面再来新业务，基本就是开发自己找个图标放上去，可能就真的是随便找的啊，但这个问题如果被提出来，背锅侠只能是设计师，我们设计师经常抱怨改稿，其实我想问问你有没有考虑你的设计是怎么来的，为什么这么设计？我发现很多年轻设计师颜色都是乱用，毫无根据，只凭感觉，这样的话是很容易被挑战的，应该好好学学怎么做色彩定义，好了这里还是说按钮设计吧。

最后两种呢，通常对外产品，可以多尝试，因为毕竟是加了一些效果，开发不一定能实现出来，而且，如果是切图，也可能遇到加载慢的问题，哈哈，不是开玩笑，一些传统企业，用的还是XP系统，IE浏览器，你问为什么，原因很简单啊，无商不奸吗？省钱啊。

第二大点说的是对比、层次问题，我在规范里是这么写的：层级由高到低依次是填充按钮、描边按钮、文字按钮或图标按钮。

做设计就是在作对比，有这种说法，原因很简单，有对比才会有层次感，才会有深度，一个页面并不是所有文字都是#000000的黑，它要有层次我看一些人定的是333/666/999，哈哈哈，就好像人的五官有高有低，棱角分明才好看。

填充按钮一般是常用，重要按钮，如果摆在一起，可能业务操作人员一天点100次按钮，点填充按钮就要80次吧，低频的比如删除等，特别是批量删除做的越不显眼越好。

还有一个层次的体现是说，我们设计还在学画画的时候，老师就教我们一个技巧，要离开画板、或眯起眼来看看大局，在凑近了看看细节。当你一眯眼时这个蓝色块就是重点，那么是不是我可以意淫下这种场景，弱视用户、累了一天加班用户，头昏眼花的她要点击的那个按钮就是你有意设计要突出的这个啊，对吗？如果你不做这种层次对比，可能一下点错了，几个亿可能都真的有可能是这种级别的损失啊。怎么作对比，举个我刚看到的例子吧

第三大点，我想说一下交互的问题，因为按钮是一个交互组件，他会有状态变化，同时这也是一个心理层面的问题，就好比两个人谈恋爱，我说话你得给我反馈啊，对不对。我都把鼠标移过来了你不反应，这并不是好的人机交互

通常来说，颜色变化就会给人心理暗示，比如鼓起来可以按下去的效果，鼠标悬停亮起来，有种沉睡被唤醒的感觉，灰色的不能用，有的有加载过程，危险按钮用红色等，这些是设计，更是设计结果交互中的沟通，心理沟通的问题解决能力，只不过是设计语言呈现而已。

最后一点，我想说一个色彩定义问题，一般我们初期会做一些根据品牌色定义的按钮使用什么色等等的色彩体系，好像叫Guideline，英文不太好，具体记不清了，总之就是色彩定义的过程，比如这个色怎么来的，什么含义，你得讲出个道道来，不然就会受到挑战。举个例子，看看分析过程是什么样的吧，这是一位老师分享的携程颜色改版时是怎么定义色彩的

还有之前广泛讨论的几个蓝到底有啥区别问题，哈哈，看似闲的蛋疼，不过你要是琢磨琢磨，兴许还有那么一点意思

所以我遇到的问题是一个系统，不成体系的定义色彩，而且你根本问不出为什么，就是开发小爷高兴，哈哈，且看图

所以我给他们讲那些色彩理论，没用的，好，真是，社会社会啊，有的道理是该讲给懂的人听，我就给他们说，来看看好的设计是怎么做的，其中就有站酷

好了，以上就是我在做企业内部应用遇到的问题，以及我是如何解决的，顺便扯了扯按钮该怎么设计，说白了，其实我们首先要弄明白的是为谁设计，产品属性是什么，各位看官，本领有限，能耐一般，不足之处欢迎批评指正，反正我也不会回你的，如有侵权，纯属巧合。哈哈哈。