网页设计里面按钮 第1篇
假如没有考虑进去，即便按钮做得再精致和拟物化，一样是失败的，让用户想放弃的按钮。
非扁平vs扁平【iOS 7 的键盘按钮也是有阴影】
扁平vs非扁平
iOS 7 绝大多数情况都具有良好的上下文，当然也专注于让用户一次只做一个任务。在有上下文关联的情况下，就算是简单的「文字链接」也会很容易被识别。当然左图的「Agree」按钮也使用了加粗的对比效果。
-3-
按钮设计都有哪些技巧
网页设计里面按钮 第2篇
对于同级别按钮，我们需要遵循以下原则去确定顺序：
除了以上案例分析的组合样式，B 端页面中按钮组合多样，以下罗列了一些常见场景供大家参考：
最后根据以上内容我们来总结下，按钮在设计应当遵循的原则及注意事项
按钮样式符合用户心智模型
按钮类型、层级分明，规则统一
按钮状态清晰，操作反馈明确
根据业务场景使用合适的按钮
网页设计里面按钮 第3篇
通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。
首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：
命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高
选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低
接下来我们详细看一下这两大类按钮的具体细分和使用场景
网页设计里面按钮 第4篇
按钮能唤起页面操作，我们通常用主按钮，来吸引用户对页面最优先功能的注意。除非，页面上分布着一堆主按钮，这时候我们没办法排出优先级，那“用主按钮来吸引用户注意”这一招也就不管用了。
某些情况下，使用一个主按钮是正确做法。比如你需要从一组平行对象中(例如搜索出来一堆结果)，或是，从设置页面上展示的不同类别选项中，来做选择。
你应该定义在何时允许页面中有多个主按钮，否则要知道如何避免页面上有多个主按钮。
网页设计里面按钮 第5篇
在如今的后扁平化时代，按钮的设计已经不局限于扁平化和拟物化了，经常把他们结合起来，用一些不容易察觉到的渐变来表现光影的变化，用阴影表现交互的层级，大家设计的思路也越来越开阔，根据自己的需要来设计各式各样的按钮。
Material design 中用阴影表示层级，里面的按钮也需要遵循这样的设计原则
有时候用有颜色的阴影显得画面更干净，本来是好的想法，但是被滥用了
-2-
扁平化按钮跟非扁平化按钮在作用上是一致的，区别不大，但扁平化的极简设计对设计师提出了更高要求：
网页设计里面按钮 第6篇
首先，我们看一下页面中按钮的阅读顺序：
左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式
右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则
然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：
上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。
网页设计里面按钮 第7篇
在扁平设计时代，类似Material Design，会将“扁平”按钮，多样应用于工具栏、动作组、还有文本串联。在默认状态下，这跟超链接只有轻微的区别甚至是没有区别。然而，从archor tags开始，按钮的状态和行为都会带来一系列需要区别的考量。
如果你的系统提供了扁平设计，要确保它设计上和代码上的惯常用法，都是可以跟超链接区分出来的。此外，确保方案涵盖交互的复杂性，例如聚焦&按压状态，留白，对齐等。
网页设计里面按钮 第8篇
拟物化按钮，追根溯源，是由乔布斯发扬光大的，拟物化是一个设计原则，设计灵感来自于现实世界，乔布斯钟爱于拟物化设计，他认为拟物化的设计能让人立刻就知道这个软件是做什么的，让用户将他们在现实世界中的经验带到虚拟世界中，从而降低用户的学习成本。
从 1997 年乔布斯重回苹果一直到 2012 年的 iOS 6，苹果都在坚持和推进拟物化设计，现在打开 dribbble 搜一搜 2012 年左右的作品，那时候的设计师都会把拟物化做到极致，超写实的光影和纹理，如果用 Ps 做不出来的话就用三维软件来做。
第一个拟物化的设计现在追溯起来应该是苹果的 Quicktime 4，当时苹果团队设计了很多方案乔布斯都不满意，他要求软件的外观要和真实的立体声播放机一致，拥有金属的外观。最后他把自己的百年灵手表扔给设计师，说你们就照着这个纹理画吧，这样拥有金属拉丝外观的 Quicktime 4 就诞生了。
2012 年流行的拟物化界面，将按钮的质感做到极致
网页设计里面按钮 第9篇
图标按钮通常是指由一个图标来代表入口，它能够直观的表达功能状态。但是没有了文字的解释，就要注意图标的设计要通用、常见、易于理解，降低用户的认知成本。最好在悬浮状态能够显示图标释义的文字。
由于按钮的种类与场景都比较多，在使用的时候要注意保持各个层级的区别，并且同一层级使用相同类型的图标，避免出现混乱。
按钮状态，可以让用户知道这个按钮当前是在进行哪一种操作，方便帮助用户进行判断。
由于按钮的场景与类型众多，因此在界面中要区分好按钮层级，相同功能等级的按钮前后要保持统一，避免出现多个页面不一致的情况。
网页设计里面按钮 第10篇
一个操作区域至多一个主按钮
主次按钮样式统一、与其他控件样式区分处理
按钮样式慎用大圆角
按钮中的文字，字号适中，文案精简、无歧义
合理使用投影样式
根据场景合理使用禁用按钮：需要应引导用户操作时，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动。
1. 「按钮的学问：确定在左，取消在右？」
推荐指数：五颗星
推荐理由：使用不同的理论说明佐证确定和取消按钮的排版方式
2. 「交互细节！确定按钮到底该放在左边还是右边？」
推荐指数：四颗星
推荐理由：用实验论证确定按钮的放置位置，结论是：确定按钮放在右边比较好
3. 「大厂高手出品！中台组件设计指南：按钮篇 」
推荐指数：五颗星
推荐理由：使用完整的规范去写的文章，实打实的案例。
4. 「按钮规范系列！从四个方面详解「按钮位置」的设计方法」
推荐指数：四颗星
推荐理由：用古腾堡原则详解按钮位置的摆放规律，为什么这么放置。主要案例是 APP 端的。
5. 「5000 字干货！写给新人的按钮设计指南」
推荐指数：五颗星
推荐理由：主要讲的是 APP 端的，层级清晰、案例完整。
6. 「从 6 个层面，系统分析按钮设计的知识点」
推荐指数：五颗星
推荐理由：主要讲的是 APP 端的，命令按钮和选择按钮做了区分说明。案例丰富，常见按钮组成拆解和最后的按钮样式小结表都超级棒
7. 「推荐！禁用状态二三事 」
推荐指数：三颗星
推荐理由：讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项
整篇文章内容是基于日常学习与工作经验的总结，部分规范内容，大家可以根据自己的产品业务做适配调整，以上仅供参考。部分案例配图源自网络，仅供交流学习，侵删。
欢迎点赞、分享，期待你的关注小红点～欢迎留言交流～