网页按钮的设计分析 第1篇
一个操作区域至多一个主按钮
主次按钮样式统一、与其他控件样式区分处理
按钮样式慎用大圆角
按钮中的文字，字号适中，文案精简、无歧义
合理使用投影样式
根据场景合理使用禁用按钮：需要应引导用户操作时，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动。
1. 「按钮的学问：确定在左，取消在右？」
推荐指数：五颗星
推荐理由：使用不同的理论说明佐证确定和取消按钮的排版方式
2. 「交互细节！确定按钮到底该放在左边还是右边？」
推荐指数：四颗星
推荐理由：用实验论证确定按钮的放置位置，结论是：确定按钮放在右边比较好
3. 「大厂高手出品！中台组件设计指南：按钮篇 」
推荐指数：五颗星
推荐理由：使用完整的规范去写的文章，实打实的案例。
4. 「按钮规范系列！从四个方面详解「按钮位置」的设计方法」
推荐指数：四颗星
推荐理由：用古腾堡原则详解按钮位置的摆放规律，为什么这么放置。主要案例是 APP 端的。
5. 「5000 字干货！写给新人的按钮设计指南」
推荐指数：五颗星
推荐理由：主要讲的是 APP 端的，层级清晰、案例完整。
6. 「从 6 个层面，系统分析按钮设计的知识点」
推荐指数：五颗星
推荐理由：主要讲的是 APP 端的，命令按钮和选择按钮做了区分说明。案例丰富，常见按钮组成拆解和最后的按钮样式小结表都超级棒
7. 「推荐！禁用状态二三事 」
推荐指数：三颗星
推荐理由：讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项
整篇文章内容是基于日常学习与工作经验的总结，部分规范内容，大家可以根据自己的产品业务做适配调整，以上仅供参考。部分案例配图源自网络，仅供交流学习，侵删。
欢迎点赞、分享，期待你的关注小红点～欢迎留言交流～
网页按钮的设计分析 第2篇
通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。
首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：
命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高
选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低
接下来我们详细看一下这两大类按钮的具体细分和使用场景
网页按钮的设计分析 第3篇
按钮能唤起页面操作，我们通常用主按钮，来吸引用户对页面最优先功能的注意。除非，页面上分布着一堆主按钮，这时候我们没办法排出优先级，那“用主按钮来吸引用户注意”这一招也就不管用了。
某些情况下，使用一个主按钮是正确做法。比如你需要从一组平行对象中(例如搜索出来一堆结果)，或是，从设置页面上展示的不同类别选项中，来做选择。
你应该定义在何时允许页面中有多个主按钮，否则要知道如何避免页面上有多个主按钮。
网页按钮的设计分析 第4篇
按钮的大小和视觉反馈，在帮助用户与他们交互方面发挥关键作用。尺寸和填充色您应该考虑一个按钮与页面上其他元素的关系有多大。 同时，您需要确保您设计的按钮足够大，以便人们进行互动。
当点按作为您的应用程序或站点的主要输入方法时，您可以依靠MIT Touch Lab研究来选择适当的按钮大小。 这项研究发现，手指垫的平均尺寸在10-14mm之间，指尖为8-10mm，使得10mm×10mm具有良好的最小触摸目标尺寸。 当鼠标和键盘是主要的输入方法时，可以稍微减小按钮测量以适应密集的UI。
提供视觉反馈这个要求不是关于按钮最初对用户的看法; 这是关于与UI元素的交互经验。 通常，按钮不是单状态对象。 它具有多状态，并向用户提供视觉反馈，以指示当前状态应该是首要任务。
网页按钮的设计分析 第5篇
当然，您可以更具创意，并使用其他形状(圆形，三角形或甚至自定义形状)，但请记住，独特的想法可能被证明有点冒险。 您需要确保人们可以轻松识别每个不同形状的按钮。
无论您选择何种形状，请确保在整个界面控件中保持一致性，以便用户能够识别所有UI元素作为按钮。为什么一致性如此重要? 因为用户会有意识无意识的记住细节。 例如，用户将特定元素的形状与“按钮”相关联。因此，一致性不仅有助于创造出美观的设计，而且还为用户提供了更加熟悉的体验。下图显示了这一点。 在应用程序的一部分(例如系统工具栏)中使用三种不同的形状不仅使用户感到困惑，这是不正确的设计实践。
如果一个按钮投射一个微妙的阴影，用户往往会明白元素是交互式的。
网页按钮的设计分析 第6篇
假如没有考虑进去，即便按钮做得再精致和拟物化，一样是失败的，让用户想放弃的按钮。
非扁平vs扁平【iOS 7 的键盘按钮也是有阴影】
扁平vs非扁平
iOS 7 绝大多数情况都具有良好的上下文，当然也专注于让用户一次只做一个任务。在有上下文关联的情况下，就算是简单的「文字链接」也会很容易被识别。当然左图的「Agree」按钮也使用了加粗的对比效果。
-3-
按钮设计都有哪些技巧