APP界面按钮设计：寻找最佳的形式和状态.doc

《APP界面按钮设计：寻找最佳的形式和状态.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、APP界面按钮设计：寻找最佳的形式和状态　　文章给出涵盖各个平台上的按钮样式，为不同形式的按钮给出合理的使用建议，并深度讲解了按钮状态的重要性供参考。　　　　按钮是一个普通的设计元素，不过我们基本每天或多或少接触他。除了这个，由于按钮是一个在网页或者app上创造流畅的会话流体验的必不可少的元素，所以它值得我们为按钮这样最基本的元素提供最佳的体验做出努力。为按钮做些最佳实践，让按钮看起来像按钮。　　想想如何达到设计沟通的可供性吧！用户是怎么理解一个按钮的呢？用形状和颜色是界面上的元素看起来像一个按钮。　　　　G

2、roupon的登录页面关注于最主要的动作　　另外，手指点击的尺寸也是要在设计时仔细考虑的事情。按钮的大小在帮助用户分辨这些元素的过程中起到了决定性的作用。不同的平台提供了热区的最小尺寸的不同设计规范。MITTouchLab的研究结果表明手指接触面积平均为10-14mm之间，指尖平均为8-10mm，所以最佳的热区尺寸应设定为10mmX10mm。　　　　位置和命令　　按钮应放置在用户能够直接找到或者他有预期能看到的地方。例如，iOSUI设计规范给明了按钮的合理位置。　　　　按钮要执行的命令和位置的关系。按钮要执行

3、的命令非常重要，特别是在出现成对的选项时（就像”上一个”和”下一个”）。确保设计强调了最主要或者最重要的动作。　　在下面的例子中我们使用了红色的按钮颜色表现一个潜在的具有破坏性的动作。并且，主要动作不但可以通过颜色和对比度去引起注意，还可以看它是否置于对话段落的右边。　　　　删除按钮比取消按钮更加显眼　　标签　　按钮上的标签告诉给人们这个按钮能做什么。清楚的说明点击之后将会发生的事情。　　我们讲上面的图片去掉文字。你能发现什么区别么?　　　　没有文字标签　　唤起行动(Calltoaction)　　让最重要的按

4、钮（特别在你想要用他们唤起行动时）看起来它是最重要的。　　　　CreateResume就是一个很明显唤起行动按钮　　按钮形状　　通常，根据网站或者APP的风格，我们会把按钮设计成矩形或者圆角矩形。一些研究建议圆角能够加强信息的传递并且能够将人的实现集中在元素的中心位置。　　　　圆角矩形按钮　　我们有时也会根据自己的创意使用其他的形状例如圆形，三角形或者自定义形状，但是你要知道这样的尝试其实是有风险的。　　　　FloatingActionBar是一个自定义按钮形状的好的例子　　一定要确保统一性能够把控你的界面设

5、计，以便用户能够识别出你的界面元素。　　按钮样式和行为　　1.突出按钮　　突出的按钮样式特别是突出的长方形按钮。(投影表现出按钮是可以点击的)。突出的按钮样式相较于扁平的设计增加了一维空间。在复杂或宽裕的空间中强调功能。　　　　使用　　成直线的排列(在布局上根据诸多不同的内容使用更显著的引导)。　　行为　　让按钮凸起并在点击是填充颜色。　　　　例子　　突出按钮比扁平按钮更加显眼。例如安卓的应用　　　　2.扁平按钮　　扁平样式的按钮不会突出出来，但是在点击时会改变颜色。主要的优势在于界面的简洁——最不容易被内容

6、打扰。　　　　使用　　在会话中(统一按钮行为和会话内容)　　　　安卓会话当中的扁平按钮　　在工具条上　　　　在工具条上的扁平按钮　　于留白对齐，一遍用户能够轻易找到它们。　　　　扁平按钮　　行为　　　　例子　　安卓应用上的扁平按钮　　　　3.切换按钮　　切换按钮能够允许用户从两种状态中改变设置。　　　　切换按钮　　使用　　多数的切换按钮都是以开或关的形式使用。　　还有就是切换按钮可以在成组相关的选项中使用。但是你的布局应当是将切换按钮作为一组选项中的组成部分。所以切换按钮要求：　　1.一组中有至少3个切换按钮

7、　　2.按钮上使用文字，icon或者两者结合作为标签。　　　　一个被选中的切换按钮　　在切换按钮上使用icon是最好的方法，因为它只接受一个选择，比如添加或者转移一个星星到另一个项目上。最好在APP的bar，toolbar，动作按钮或者切换按钮上使用它们。　　　　Twitter的”LIKE”上的切换按钮　　为一个按钮上选择一个正确的icon是非常重要的。我将会在另外一篇文章上讲解icon扮演着完美用户体验的重要角色。　　例子　　iOS上使用切换按钮作为设置选项。　　　　4.幽灵按钮　　幽灵按钮就是一种透明的或

8、者空按钮的使用基本形状的形式。当内部的内容为简单的文字形式时，通常使用非常细的描边作为幽灵按钮的轮廓。　　　　不同的幽灵按钮　　使用　　使用幽灵按钮做为一个主要的唤起动作其实并不是一个好主意。你能看到下面的例子就是幽灵按钮上DownloadBootstrap的样子看起来和他们产品的logo很相似容易引起用户的困惑。　　　　DownloadBootstrap是一个按钮，你看出来了么?颗颗。。。。　　幽