网页设计 按钮 图片 第1篇
假如没有考虑进去，即便按钮做得再精致和拟物化，一样是失败的，让用户想放弃的按钮。
非扁平vs扁平【iOS 7 的键盘按钮也是有阴影】
扁平vs非扁平
iOS 7 绝大多数情况都具有良好的上下文，当然也专注于让用户一次只做一个任务。在有上下文关联的情况下，就算是简单的「文字链接」也会很容易被识别。当然左图的「Agree」按钮也使用了加粗的对比效果。
-3-
按钮设计都有哪些技巧
网页设计 按钮 图片 第2篇
拟物化按钮，追根溯源，是由乔布斯发扬光大的，拟物化是一个设计原则，设计灵感来自于现实世界，乔布斯钟爱于拟物化设计，他认为拟物化的设计能让人立刻就知道这个软件是做什么的，让用户将他们在现实世界中的经验带到虚拟世界中，从而降低用户的学习成本。
从 1997 年乔布斯重回苹果一直到 2012 年的 iOS 6，苹果都在坚持和推进拟物化设计，现在打开 dribbble 搜一搜 2012 年左右的作品，那时候的设计师都会把拟物化做到极致，超写实的光影和纹理，如果用 Ps 做不出来的话就用三维软件来做。
第一个拟物化的设计现在追溯起来应该是苹果的 Quicktime 4，当时苹果团队设计了很多方案乔布斯都不满意，他要求软件的外观要和真实的立体声播放机一致，拥有金属的外观。最后他把自己的百年灵手表扔给设计师，说你们就照着这个纹理画吧，这样拥有金属拉丝外观的 Quicktime 4 就诞生了。
2012 年流行的拟物化界面，将按钮的质感做到极致
网页设计 按钮 图片 第3篇
微信的”取消”按钮背景色选择的是灰色，而淘宝直接让”取消”成了一个光秃秃的文字按钮。这样的对比设置可以让用户很快找到“确认登陆”按钮，进而完成登录操作，提升了操作效率。
其实可以让用户进行判断操作的组件还有开关。开关，又称switch，也是我们很常见的一个组件，表示两种相互对立的状态间的切换，多用于表示功能的开启和关闭。而一项功能的开启可能会带来相应的后续操作，例如你在iOS设置里开启了微信的“通知”功能，那么你就需要对通知形式进行进一步的设置。而按钮组不会出现这些后续操作，更像是一锤子买卖，这也是按钮组和开关的一个主要的区别。
如果选项在一屏的宽度中可以展示完全，那么组合在一起和分开的区别并不是很大，但是一旦选项过多需要用户滑动和换行才能浏览完的时候，分开的样式更加适合。
网页设计 按钮 图片 第4篇
在扁平设计时代，类似Material Design，会将“扁平”按钮，多样应用于工具栏、动作组、还有文本串联。在默认状态下，这跟超链接只有轻微的区别甚至是没有区别。然而，从archor tags开始，按钮的状态和行为都会带来一系列需要区别的考量。
如果你的系统提供了扁平设计，要确保它设计上和代码上的惯常用法，都是可以跟超链接区分出来的。此外，确保方案涵盖交互的复杂性，例如聚焦&按压状态，留白，对齐等。