♝点击上方“交互设计学堂”关注我们,送电子书
一.主按钮和次按钮
很多按钮是成对出现的，比如“确定”和“取消”。一般情况下，按钮会有主次之分，一个按钮是我们期望用户去做的，另一个按钮是在特殊情况下才去做的。
主次按钮要有所区分，最简单的做法就给它们用上不同的颜色——主按钮用显眼一点的颜色，而次按钮用淡一点的颜色。
在按钮的标签上，应该尽可能地用清晰不易混淆的字眼，而不是简单地 “OK”，“YES”，“好”，“不”。
如果主按钮执行的是一种积极的行为，比如保存。这很简单，给主按钮一个更显眼的颜色即可。
但如果主按钮执行的是一个消极的行为，比如用户要删除一个文件，需要对这个删除进行确认。你可能会想将按钮的颜色反过来就好了，比如下面这样：
但有一个更好的做法，我们只提供一个主要按钮（另一个以另一种形式表示，比如一个可点击的链接，而不是同等的按钮），但这个按钮的标签写上提示信息。
这样用户到这一步的时候，注意力会集中在这仅有的一个按钮上，并能够注意到这里的提示信息（如果你想提示警告信息写在弹框内容里，用户极有可能没看就点击了按钮）。
二.底部导航按钮
APP的导航是很重要的部分，用户需要能够知道自己现在在哪里，有什么地方可以去。
PC端一般会将导航放在头部或者侧边，而根据移动端的操作行为，将导航放在底部对移动端是一个更好的做法。
关于移动端的底部导航设计，有几个原则可以参考借鉴。
1.只使用3~5个最重要的导航按钮。
1,2个就太少了，如果只有1,2块主要内容，那根本不用导航栏，直接切换即可。而如果导航按钮有6,7个之多，则会让导航太密集而不易操作。5个是导航按钮的极限。
2.要让用户知道自己现在在哪里：
每个导航按钮都要有状态切换——被点击进入时显示高亮（或者颜色改变）的状态，而点击了其他的导航按钮后，切换回原本未被点中时的状态。
需要注意的是，导航按钮应该只使用2种颜色——即未选中和已选中。不要使用多种颜色，否则用户也无法区分当前的位置。如下图，左边是错误的做法。
3.标签问题
导航按钮需要有标签，而但凡是标签，规则都只有一个——短而清晰。不要太长，不要长到换行，更不要为了不换行而省略。
下面这些都是应该避免的。
4.红点提示
如果你想要给用户提供额外的信息，比如提示用户某个栏目里面有新消息，你可以在导航按钮上面加上红点。
三.Tabs
Tabs 是一种用来切换相关内容的组件。
tabs和导航按钮有点相似，都是切换内容。但不同的地方是，导航按钮切换的是不同类别的内容；而tabs是在相同类别的内容之间切换。
所以当你需要对内容进行分组的时候，你就可以使用tabs：
tabs的另一种形式是scope bar ，它一般用于分类筛选。比如apple store就使用了scope bar来对应用进行免费和收费的筛选。
四.按钮设计
按钮是最重要的交互控件，在设计按钮的时候以下的建议可以作为参考。
1.让按钮看上去像一个按钮。
用户要够第一眼就发现，并知道这是一个可以点击的按钮，尤其是在那些需要用户完成输入之后确认的地方。
在移动端，有一个需要特别注意的是按钮的大小。移动端用户的操作是用手指来进行的，移动设备屏幕的限制，按钮不可能做得很大（也不美观），但也不能太小，否则手指很难操作。大小的设计需要参考手指的触摸点大小。
一个比较糟糕的体验来自腾讯的应用宝。
腾讯的应用宝在更新应用的时候，可以直接点击“更新”按钮来下载并安装更新，如果你点击“更新”外面的整张卡片，就会进入该应用的详细介绍。但这个按钮非常难点，一不小心手指的触摸面积大了，就点到了卡片，进入了应用的详情页面。
必须小心翼翼地触摸，才能保证点击到“更新”按钮来下载APP。
所以，一定要注意按钮的大小！
2.按钮的标签
按钮的标签内容应该清晰地让用户知道点击按钮后会发生的事情。
3.重要按钮
如果一个按钮很重要，那你就必须让它看上去很重要——更突出的颜色，更中心显眼的位置，更强烈的提示，等等。
4.按钮的形状
一般情况下，按钮是一个矩形，或者两边带有圆弧的矩形。这是最让人熟知的按钮的形状。
按钮也可以是圆形，但使用的时候要十分注意。
有些扁平化的按钮形式在Android里也很常见。
如果你真的要使用，你最好先认真了解一下google 的 Material Design的设计规范。
作者：陈小健
原文链接：http://www.jianshu.com/p/b88e0a3705f6
欢迎投稿：anhejiao@126.com
加老D私人微信18605817040，和老D一起学交互，老D会在朋友圈多发干货文章哦。新手小伙伴可以问老D3个专业问题哦。
交互设计学堂已经开设了新的栏目-行知书院，旨在帮助小伙伴们来高效的学习现在市面上优秀的用户体验书籍比如《交互设计精髓》等等，同时结合老D的工作经验来帮助你们从不同的高度和角度来解读书中的内容。每天一课，积少成多。已有134位小伙伴加入。详细了解行知书院
原创文章，作者：Tinadmin，如若转载，请注明出处：https://www.iamue.com/20984/
