网页按钮设计使用分析 第1篇
按钮能唤起页面操作，我们通常用主按钮，来吸引用户对页面最优先功能的注意。除非，页面上分布着一堆主按钮，这时候我们没办法排出优先级，那“用主按钮来吸引用户注意”这一招也就不管用了。
某些情况下，使用一个主按钮是正确做法。比如你需要从一组平行对象中(例如搜索出来一堆结果)，或是，从设置页面上展示的不同类别选项中，来做选择。
你应该定义在何时允许页面中有多个主按钮，否则要知道如何避免页面上有多个主按钮。
网页按钮设计使用分析 第2篇
不要让用户寻找按钮; 放置按钮，用户可以轻松找到它们或期望看到它们。位置和顺序如果您正在设计一个应用程序，则在选择适当的位置和按钮顺序时，应遵循平台GUI指南。 为什么? 因为遵循用户期望的一致设计可以节省人们的时间。
在基于网络的应用程序的情况下，您应该考虑哪个布局真的对您的用户最有效。 确定这一点的正确方法是通过测试。如果您设计移动导航，请注意按钮位置的最佳做法。 文章底部导航设计的黄金规则涵盖了这个主题。
网页按钮设计使用分析 第3篇
图标按钮通常是指由一个图标来代表入口，它能够直观的表达功能状态。但是没有了文字的解释，就要注意图标的设计要通用、常见、易于理解，降低用户的认知成本。最好在悬浮状态能够显示图标释义的文字。
由于按钮的种类与场景都比较多，在使用的时候要注意保持各个层级的区别，并且同一层级使用相同类型的图标，避免出现混乱。
按钮状态，可以让用户知道这个按钮当前是在进行哪一种操作，方便帮助用户进行判断。
由于按钮的场景与类型众多，因此在界面中要区分好按钮层级，相同功能等级的按钮前后要保持统一，避免出现多个页面不一致的情况。
网页按钮设计使用分析 第4篇
拟物化按钮，追根溯源，是由乔布斯发扬光大的，拟物化是一个设计原则，设计灵感来自于现实世界，乔布斯钟爱于拟物化设计，他认为拟物化的设计能让人立刻就知道这个软件是做什么的，让用户将他们在现实世界中的经验带到虚拟世界中，从而降低用户的学习成本。
从 1997 年乔布斯重回苹果一直到 2012 年的 iOS 6，苹果都在坚持和推进拟物化设计，现在打开 dribbble 搜一搜 2012 年左右的作品，那时候的设计师都会把拟物化做到极致，超写实的光影和纹理，如果用 Ps 做不出来的话就用三维软件来做。
第一个拟物化的设计现在追溯起来应该是苹果的 Quicktime 4，当时苹果团队设计了很多方案乔布斯都不满意，他要求软件的外观要和真实的立体声播放机一致，拥有金属的外观。最后他把自己的百年灵手表扔给设计师，说你们就照着这个纹理画吧，这样拥有金属拉丝外观的 Quicktime 4 就诞生了。
2012 年流行的拟物化界面，将按钮的质感做到极致
网页按钮设计使用分析 第5篇
微信的”取消”按钮背景色选择的是灰色，而淘宝直接让”取消”成了一个光秃秃的文字按钮。这样的对比设置可以让用户很快找到“确认登陆”按钮，进而完成登录操作，提升了操作效率。
其实可以让用户进行判断操作的组件还有开关。开关，又称switch，也是我们很常见的一个组件，表示两种相互对立的状态间的切换，多用于表示功能的开启和关闭。而一项功能的开启可能会带来相应的后续操作，例如你在iOS设置里开启了微信的“通知”功能，那么你就需要对通知形式进行进一步的设置。而按钮组不会出现这些后续操作，更像是一锤子买卖，这也是按钮组和开关的一个主要的区别。
如果选项在一屏的宽度中可以展示完全，那么组合在一起和分开的区别并不是很大，但是一旦选项过多需要用户滑动和换行才能浏览完的时候，分开的样式更加适合。
网页按钮设计使用分析 第6篇
按钮的大小和视觉反馈，在帮助用户与他们交互方面发挥关键作用。尺寸和填充色您应该考虑一个按钮与页面上其他元素的关系有多大。 同时，您需要确保您设计的按钮足够大，以便人们进行互动。
当点按作为您的应用程序或站点的主要输入方法时，您可以依靠MIT Touch Lab研究来选择适当的按钮大小。 这项研究发现，手指垫的平均尺寸在10-14mm之间，指尖为8-10mm，使得10mm×10mm具有良好的最小触摸目标尺寸。 当鼠标和键盘是主要的输入方法时，可以稍微减小按钮测量以适应密集的UI。
提供视觉反馈这个要求不是关于按钮最初对用户的看法; 这是关于与UI元素的交互经验。 通常，按钮不是单状态对象。 它具有多状态，并向用户提供视觉反馈，以指示当前状态应该是首要任务。
网页按钮设计使用分析 第7篇
当然，您可以更具创意，并使用其他形状(圆形，三角形或甚至自定义形状)，但请记住，独特的想法可能被证明有点冒险。 您需要确保人们可以轻松识别每个不同形状的按钮。
无论您选择何种形状，请确保在整个界面控件中保持一致性，以便用户能够识别所有UI元素作为按钮。为什么一致性如此重要? 因为用户会有意识无意识的记住细节。 例如，用户将特定元素的形状与“按钮”相关联。因此，一致性不仅有助于创造出美观的设计，而且还为用户提供了更加熟悉的体验。下图显示了这一点。 在应用程序的一部分(例如系统工具栏)中使用三种不同的形状不仅使用户感到困惑，这是不正确的设计实践。
如果一个按钮投射一个微妙的阴影，用户往往会明白元素是交互式的。
网页按钮设计使用分析 第8篇
在如今的后扁平化时代，按钮的设计已经不局限于扁平化和拟物化了，经常把他们结合起来，用一些不容易察觉到的渐变来表现光影的变化，用阴影表现交互的层级，大家设计的思路也越来越开阔，根据自己的需要来设计各式各样的按钮。
Material design 中用阴影表示层级，里面的按钮也需要遵循这样的设计原则
有时候用有颜色的阴影显得画面更干净，本来是好的想法，但是被滥用了
-2-
扁平化按钮跟非扁平化按钮在作用上是一致的，区别不大，但扁平化的极简设计对设计师提出了更高要求：
网页按钮设计使用分析 第9篇
同样的规则适用于网站。 如果您看看下面的Behance示例，首先要注意的是“注册”号召性用语按钮。 在这种情况下，颜色和位置比文本更重要。
主要和次要按钮的视觉分析您可以通过弹窗和对话框中的按钮找到另一个抓住用户注意力的示例。 在主要和次要行动之间进行选择时，视觉区别是帮助人们做出坚实选择的有用方法：与按钮相关联的主要积极动作需要承载更强的视觉重量。 它应该是视觉上主导的按钮。次要动作(例如“取消”或“返回”等选项)应具有最弱的视觉重量，因为减少次要动作的视觉突出性可将潜在错误的风险降至最低，并进一步引导人们取得成功。
网页按钮设计使用分析 第10篇
假如没有考虑进去，即便按钮做得再精致和拟物化，一样是失败的，让用户想放弃的按钮。
非扁平vs扁平【iOS 7 的键盘按钮也是有阴影】
扁平vs非扁平
iOS 7 绝大多数情况都具有良好的上下文，当然也专注于让用户一次只做一个任务。在有上下文关联的情况下，就算是简单的「文字链接」也会很容易被识别。当然左图的「Agree」按钮也使用了加粗的对比效果。
-3-
按钮设计都有哪些技巧
网页按钮设计使用分析 第11篇
在扁平设计时代，类似Material Design，会将“扁平”按钮，多样应用于工具栏、动作组、还有文本串联。在默认状态下，这跟超链接只有轻微的区别甚至是没有区别。然而，从archor tags开始，按钮的状态和行为都会带来一系列需要区别的考量。
如果你的系统提供了扁平设计，要确保它设计上和代码上的惯常用法，都是可以跟超链接区分出来的。此外，确保方案涵盖交互的复杂性，例如聚焦&按压状态，留白，对齐等。