前言
看了很多规范里对于按钮的定义，大多大同小异，无非在描述上或多或少多一些细节。抠脚大叔向来喜欢说话简单明了，所以综合了Ant Design和Material design的描述得出按钮的定义：
（其他参考可见：Ant Design、SAP、Salesforce 、Material Design）
按钮定义：按钮可以单击触发操作。
如何规范按钮？
清查了一下目前公司用的所有按钮，样式五花八门，使用场景千奇百怪。导致的结果就是：按钮层级不清楚，设计逻辑全靠感性领悟。之前在我另外一篇文章关于《设计体系》这本书里就举过一个关于按钮的例子。
取自《设计体系》
他们将按钮定义为三种：行为召唤、行为召唤-链接、链接。然后在此基础上做形式区分。这是一个很好的思路，他认为真正的区别存在于链接与行为召唤之间，而非链接与”按钮"之间。一个重要的功能行为可以通过"按钮"的形式来体现。
SO，样式之前是他们内在的区分，在抠脚大叔看来，公司客户端的按钮定义不需要强调链接和行为召唤之间的区别，可以以重要度来区分。
按钮层级定义
因地制宜，所以大叔的划分方式如下，按照层级分为了：至尊按钮、平民按钮、糖豆按钮、文字按钮。
按钮层级
至尊按钮：朕出场，尔等都得看我！
平民按钮：你看或不看，我就在这里。
糖豆按钮：小小的我，哪里需要我，我就在哪里～
文字按钮：看不见我...看不见我，啊？看见了？那就点一下吧…
（不好意思，最近大叔电视剧看的有点多，戏精上身。）
正儿八经的方案：
至尊按钮：页面级按钮，一页只出现一次，可以与平民按钮、文字按钮组合出现。
平民按钮：最常用的按钮，不局限于页面或模块，独立使用或与至尊按钮组合出现都可以。
糖豆按钮：糖豆按钮只能用模块里，不作为页面级按钮使用。
文字按钮：当操作不需要太突出，减少用户干扰时使用文字按钮。
按钮状态&样式给按钮设计
状态可以统一，大家都有默认、点击、加载和失效。
接下来就可以进行UI设计了，视觉设计遵循等级划分。
设计完成后，要验证是否符合现有的业务场景，如果定义不能完全的满足设计需要，可以再做调整。
总结
按钮的设计逻辑就是基于现在的设计情况，清查、收集、总结、得出结论、验证结论、再总结这样一个循环过程。尽管按钮的样式会有各种各样，但按钮的等级不宜过多，并且他们的应用场景有明确且严格的划分。以上便是客户端按钮的内容，欢迎给予反馈意见。
网友评论