关于设计的那些事控件和规范

按钮这个磨人的小妖精

2019-01-21  本文已影响0人  抠脚大叔007

前言

看了很多规范里对于按钮的定义,大多大同小异,无非在描述上或多或少多一些细节。抠脚大叔向来喜欢说话简单明了,所以综合了Ant Design和Material design的描述得出按钮的定义:

(其他参考可见:Ant DesignSAPSalesforce Material Design

按钮定义:按钮可以单击触发操作。

如何规范按钮?

清查了一下目前公司用的所有按钮,样式五花八门,使用场景千奇百怪。导致的结果就是:按钮层级不清楚,设计逻辑全靠感性领悟。之前在我另外一篇文章关于《设计体系》这本书里就举过一个关于按钮的例子。

取自《设计体系》

他们将按钮定义为三种:行为召唤、行为召唤-链接、链接。然后在此基础上做形式区分。这是一个很好的思路,他认为真正的区别存在于链接与行为召唤之间,而非链接与”按钮"之间。一个重要的功能行为可以通过"按钮"的形式来体现。

SO,样式之前是他们内在的区分,在抠脚大叔看来,公司客户端的按钮定义不需要强调链接和行为召唤之间的区别,可以以重要度来区分。

按钮层级定义

因地制宜,所以大叔的划分方式如下,按照层级分为了:至尊按钮、平民按钮、糖豆按钮、文字按钮。

按钮层级

至尊按钮:朕出场,尔等都得看我!

平民按钮:你看或不看,我就在这里。

糖豆按钮:小小的我,哪里需要我,我就在哪里~

文字按钮:看不见我...看不见我,啊?看见了?那就点一下吧…

(不好意思,最近大叔电视剧看的有点多,戏精上身。)


正儿八经的方案:

至尊按钮:页面级按钮,一页只出现一次,可以与平民按钮、文字按钮组合出现。

平民按钮:最常用的按钮,不局限于页面或模块,独立使用或与至尊按钮组合出现都可以。

糖豆按钮:糖豆按钮只能用模块里,不作为页面级按钮使用。

文字按钮:当操作不需要太突出,减少用户干扰时使用文字按钮。

按钮状态&样式给按钮设计

状态可以统一,大家都有默认、点击、加载和失效。

接下来就可以进行UI设计了,视觉设计遵循等级划分。

设计完成后,要验证是否符合现有的业务场景,如果定义不能完全的满足设计需要,可以再做调整。

总结

按钮的设计逻辑就是基于现在的设计情况,清查、收集、总结、得出结论、验证结论、再总结这样一个循环过程。尽管按钮的样式会有各种各样,但按钮的等级不宜过多,并且他们的应用场景有明确且严格的划分。以上便是客户端按钮的内容,欢迎给予反馈意见。

上一篇下一篇

猜你喜欢

热点阅读