按钮有两个属性：
1、说明。当前的属性状态文本，可预见的点击处理后果。
2、动作。处理点击用户交互。
思维模型：
比如：我们常见的“提交注册” 、 “点击删除”、“保存草稿”。“提交注册”明确的告诉用户：点击后，程序会提交注册表单的内容进行注册；“点击删除”点击后，将对所显示的内容进行删除——这个是大家共同的思维模型。
反面案例：
欠妥当的设计包括两类：
1.状态说明和动作行为混淆；
2.状态说明或者可预见的行为后果和用户思维模型不一致；
看图有真相
例一、说明属性和操作行为混淆。
如右图. 这是一个国际知名杀毒软件的开关切换按钮，“打开”是个按钮。
你说他现在是开启还是关闭？你点击“打开”按钮会有什么后果？是点击打开，还是当前已经打开？
处理：一个按钮的说明属性和操作处理行为需要完整的具备，不能既是状态又是操作行为。两者需要有不可替代性。比如这里修改为：已关闭，点击打开 或者 已开启，点击关闭（状态，操作说明）就非常明了了。
……………………………………………………………………….
例二、说明属性和用户心智模型的不一致。
这个图大家可能都见习惯了，但是每次使用的时候都还是需要思考一下，到底下面的商品列表是已经按照升序还是降序排列了。是不是已经是预见的处理结果。
出现这个问题根本在于：价格的低到高排列、向上箭头、显示屏物理界面低到高存在混淆。我们把按钮箭头的从低到高和信用从低到高，显示屏商品列表从低到高三者没法统一起来。
处理：直接使用文字，或者用横向的图示说明。如”信用 
” 、 ”
“。另外直接使用文字需要避免上面第一个案例的问题。
价值
用正确的说明属性可以降低用户思考成本和避免误操作带来的后果，以及直接经济成本（比如淘宝淘宝的商品排序页面如果改为横向图示，可以大量减少页面排序刷新操作给服务器带来的负载）。
(原创文章，转载请注明出处。)
| 黑ICP备09001343号
哥，好久没联络了
哥们专注起来不得了!
同Joby所写的这篇文章一样，好的按钮同样需要图文并茂。这里所说的“图”指按钮上的“图标”，一般置于按钮左边（或右边），起到用图形化表示按钮作用的意义，即让人一眼就可以看出这个按钮干嘛用的或者是比较直观的想像。给按钮配上合适的图标，再加上按钮上的说明性文字释义到位，两者相映生辉才算构成一个完整的按钮。
不过这时候的按钮效果还是静态的，所谓静态的就是一眼看上去就是那么一个样子，没有什么交互。要让这个按钮变活，应该根据用户操作上的几种状态加上一些表现样式。比如鼠标移上去边框显示阴影或者按钮内的文字高亮或变粗等等，就是将按钮表现为一种可激活状态，可以预示点击该按钮后会出现的情景，这个时候的按钮就变成活的了。
光激活还不够，因为激活只是一个过渡，即鼠标悬停效果而已，此种效果可以预示用户能够进行怎样的操作以及操作后大概会是什么样子。倘若用户点了该按钮，比如点了那个按价格排序的按钮，为了区分是按价格排序，可以考虑将其图标点亮以示区分，即显示按钮已激活过后的当前状态，比如箭头可以呈绿色显示而不是灰色。其旁边的“按信用排序”按钮则不变，起到陪衬效果，从侧面表明用户当前查看的列表确实是按价格高低排序的。
总结3个要点：首先按钮图标和文字并茂并相映生辉，其次要注意按钮的三种状态（原始状态，悬停效果，激活过后的状态）以及按钮样式色彩搭配。
其实从网页设计排版上来讲，一个按钮该是什么样的样式，该怎么放，放哪儿，在加上交互体验上的东西，要说的也蛮多，不过暂且还不在此篇文章讨论的范畴之内。
有空可以写个专题——“按钮的交互体验设计”。
晕，你的评论怎么还没审核就自动进入垃圾列了～幸好我也看一眼才清空……
——
恩，这里主要是针对网页或者程序设计里的Command做简单分析，如果表示状态和表示交互不搞清楚会让使用者很痛苦。
有人看了这个文章和我说，他的手机里闹钟的开关就是显示“开”“关”，然后有个键做切换……这个闹钟基本上废掉了