网页中按钮的设计 第1篇
在扁平设计时代，类似Material Design，会将“扁平”按钮，多样应用于工具栏、动作组、还有文本串联。在默认状态下，这跟超链接只有轻微的区别甚至是没有区别。然而，从archor tags开始，按钮的状态和行为都会带来一系列需要区别的考量。
如果你的系统提供了扁平设计，要确保它设计上和代码上的惯常用法，都是可以跟超链接区分出来的。此外，确保方案涵盖交互的复杂性，例如聚焦&按压状态，留白，对齐等。
网页中按钮的设计 第2篇
按钮可以成组。一个按钮组通常由一个主选项和一个或者多个次要选项配对成套出现。切换开关可以显示为开启或关闭状态(比如粗体)，或显示一组选项中被选中的那个(比如文本的对齐选项，有左对齐、右对齐、中间对齐、以及两端对齐)。最复杂的情况下，工具栏把各类按钮都包含了：主按钮，次要按钮，切换开关，菜单，以及其他。（2017年春季流行什么颜色）
扩大按钮的多样性时，探索并压缩测试按钮在紧凑格局下的多种组合布局方式。系统设计师不是预言家，能预言各种各样的情况。但是探索合理范围内的多元应用场景能帮助你避免被讨厌或之后被讨厌。
网页中按钮的设计 第3篇
将按钮和icon结合使用，能强化意义并加快用户认知，当你加入一个元素之后，即使只是一个简单的icon，按钮的布局也不应该被破坏分解。使用一些很少预见的元素，会引起一些诸如内部留白和对齐方式的烦人问题。你会想把这些问题都一一化解，特别是当按钮可能包含了标签，icon还有其他的一些什么鬼。
把按钮做得灵活一点，不论是用代码还是设计工具，使其具有一定可以容纳其他元素的弹性。当用户可能想往上加东西——标签、icon或者无论什么其他元素——就不用担心加上后的内部留白或对齐方式等后续影响。
网页中按钮的设计 第4篇
交互可以发生在密集区域，比如在卡片或侧边栏模块。其他时候，你可能需要一个大型按钮，用在占据了整个视窗的最大化的图片上。
提供工具来根据需要调大或调小按钮，这个工具要让人感觉简单，就像另一个css的类或设计工具类型。另外，考虑一些好记的名字——比如：特大(puffy)，特小(micro)——而不仅仅只是平淡的大(large)或者小(small)，同样的，调大调小，按钮视觉表现力最强，次要稍弱，可以修改这些样式：颜色、阴影、大小、留白、装饰手段等等。因此在设计的时候，要学会使用以上方法。
网页中按钮的设计 第5篇
按钮把颜色、字体和图像这三个属性紧密地结合起来，形成了一个不可分割的集体。按钮也同时引起了关于留白的讨论：内部填充(特别是，标签的左右)和外部边距(毗邻其他元素)。最终，按钮可以体现更多只有内行才懂的属性，例如圆角边框(通过调整border-radius)或上升(通过调整图层阴影效果属性box-shadow)，重要的按钮需要做出强调，可以利用颜色，可以利用边框，可以利用不一样的显示方式。
漂亮的按钮固然能赏心悦目，但是设计的与网站其它内容差异太大，就不是那么美观了。所以设计按钮的时候，要考虑该位置按钮的上下文内容，不能显得太唐突。按钮首先看功能，如果是跳转可以放在知识普及，一般需要填资料的放在介绍完之后，显示按钮，这样会让用户知道这样的按钮是什么用途。
要把按钮当作系统风格的主导代表元素。加分做法是，把按钮的定义和一整套快速发展的标记变量统一，这些标记变量规定了颜色，尺寸，空白和其他细节。按钮看起来很简单，其实包含了各式各样的属性
网页中按钮的设计 第6篇
对于同级别按钮，我们需要遵循以下原则去确定顺序：
除了以上案例分析的组合样式，B 端页面中按钮组合多样，以下罗列了一些常见场景供大家参考：
最后根据以上内容我们来总结下，按钮在设计应当遵循的原则及注意事项
按钮样式符合用户心智模型
按钮类型、层级分明，规则统一
按钮状态清晰，操作反馈明确
根据业务场景使用合适的按钮
网页中按钮的设计 第7篇
通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。
首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：
命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高
选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低
接下来我们详细看一下这两大类按钮的具体细分和使用场景
网页中按钮的设计 第8篇
首先，我们看一下页面中按钮的阅读顺序：
左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式
右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则
然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：
上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。
网页中按钮的设计 第9篇
按钮能唤起页面操作，我们通常用主按钮，来吸引用户对页面最优先功能的注意。除非，页面上分布着一堆主按钮，这时候我们没办法排出优先级，那“用主按钮来吸引用户注意”这一招也就不管用了。
某些情况下，使用一个主按钮是正确做法。比如你需要从一组平行对象中(例如搜索出来一堆结果)，或是，从设置页面上展示的不同类别选项中，来做选择。
你应该定义在何时允许页面中有多个主按钮，否则要知道如何避免页面上有多个主按钮。