网页设计理按钮 第1篇
将按钮和icon结合使用，能强化意义并加快用户认知，当你加入一个元素之后，即使只是一个简单的icon，按钮的布局也不应该被破坏分解。使用一些很少预见的元素，会引起一些诸如内部留白和对齐方式的烦人问题。你会想把这些问题都一一化解，特别是当按钮可能包含了标签，icon还有其他的一些什么鬼。
把按钮做得灵活一点，不论是用代码还是设计工具，使其具有一定可以容纳其他元素的弹性。当用户可能想往上加东西——标签、icon或者无论什么其他元素——就不用担心加上后的内部留白或对齐方式等后续影响。
网页设计理按钮 第2篇
按钮是最简单原始的交互，交互伴随着改变。仅仅呈现给开发者页面加载时按钮的样式来表示“按钮长这样!”是不够的。不是开发者而是设计者，来决定状态切换的按钮是如何呈现的，包括：默认状态，鼠标悬停，焦点获取(“光晕状态”)，被按住/激活，甚至旋转等待以及其他花式秀进度的动画。
提供不同状态下的按钮样式合集，无需用户交互(页面中嵌入按钮就好)。文档并不是搞寻宝游戏，加分的做法是像material design那样做视频演示。
网页设计理按钮 第3篇
虚拟按钮，外观上仅仅依赖同色的标签和边线构成，缺少中间的填充色。标签后面是什么这可就不确定了。嗯，最简单的情况是白色背景。但其他时候，渐变色或者视觉元素丰富的照片会让标签很难识别。
虚拟按钮吸引着设计师把按钮玩得复杂高深，而不像敦实的高对比的主按钮。所以，才被称为幽灵(Ghosts)。我在可用性测试后观察到，虚拟按钮在可用性测试时披上了一层隐形斗篷。被试者看不到按钮或是无法识别它们。这可能会削弱或破坏按钮的价值，无法通过交互提供那些我们意图展现的操作。
在系统中放入虚拟按钮后果自负哦。就我观察得到的教训表明，虚拟按钮比起它的填充版同行来说表现力更弱。加之，你可以避免花费几小时来听意见不合的设计师为它争论不休。
虚拟按钮——即使是在简单的情况下，它的表现也是要打问号的，如果是在无法预料的背景上呢?忘了它吧。
用不了很久，系统用户会向你要求其他“那样”的按钮。一个大的或小的按钮。一个带有菜单或工具栏的可以在不同状态间切换的按钮。这就要求你的设计系统足够完整。
网页设计理按钮 第4篇
在纯白背景下大多数样式的按钮还行得通，但如果你把按钮搁在照片背景上呢?或者是一个更深的不同颜色的背景?更伤脑筋的是，你的按钮也可以放在浅色中性色的背景上吗?按钮可以用在(包括但不限于上面所提到的)任何情况下吗?主按钮的颜色可以随意改变吗?
把主按钮放在不同的背景上进行演示，然后制定一个相反的替代方案——白色?不同颜色?或者半透明?——当背景变深时应用上述方案。做文档时，把亮色和暗色等方案展示在一系列常见背景上，这样可以把问题讲清楚，把按钮展示在一系列常见背景上，效果好坏都展示。（物流网页设计欣赏）
网页设计理按钮 第5篇
按钮把颜色、字体和图像这三个属性紧密地结合起来，形成了一个不可分割的集体。按钮也同时引起了关于留白的讨论：内部填充(特别是，标签的左右)和外部边距(毗邻其他元素)。最终，按钮可以体现更多只有内行才懂的属性，例如圆角边框(通过调整border-radius)或上升(通过调整图层阴影效果属性box-shadow)，重要的按钮需要做出强调，可以利用颜色，可以利用边框，可以利用不一样的显示方式。
漂亮的按钮固然能赏心悦目，但是设计的与网站其它内容差异太大，就不是那么美观了。所以设计按钮的时候，要考虑该位置按钮的上下文内容，不能显得太唐突。按钮首先看功能，如果是跳转可以放在知识普及，一般需要填资料的放在介绍完之后，显示按钮，这样会让用户知道这样的按钮是什么用途。
要把按钮当作系统风格的主导代表元素。加分做法是，把按钮的定义和一整套快速发展的标记变量统一，这些标记变量规定了颜色，尺寸，空白和其他细节。按钮看起来很简单，其实包含了各式各样的属性
网页设计理按钮 第6篇
图标按钮通常是指由一个图标来代表入口，它能够直观的表达功能状态。但是没有了文字的解释，就要注意图标的设计要通用、常见、易于理解，降低用户的认知成本。最好在悬浮状态能够显示图标释义的文字。
由于按钮的种类与场景都比较多，在使用的时候要注意保持各个层级的区别，并且同一层级使用相同类型的图标，避免出现混乱。
按钮状态，可以让用户知道这个按钮当前是在进行哪一种操作，方便帮助用户进行判断。
由于按钮的场景与类型众多，因此在界面中要区分好按钮层级，相同功能等级的按钮前后要保持统一，避免出现多个页面不一致的情况。