加载中…
个人资料
ShawnRen
ShawnRen
  • 博客等级:
  • 博客积分:0
  • 博客访问:17
  • 关注人气:78
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

按钮的状态和功能

(2011-02-11 17:00:49)
标签:

用户体验

交互设计

视觉传达

gui

ue

前几天偶尔看了一款触屏产品的GUI设计,发现了一个问题。下图是某个应用的开关,你能看明白吗?

on”表示的是当前状态是“开”,还是表示当前状态是关,点击后打开呢?

off”表示的是当前状态是“关”,还是表示当前状态是开,点击后关闭呢?

http://s5/middle/61e545fdg9bfdf9becda4&690图一

    下面是iphoneGUI中的开关,展现的很清楚。

    on”表示的是状态,即当前为“开”,点击后会关闭

    off”表示的是状态,即当前为“关”,点击后会打开

http://s16/middle/61e545fdg9bfdf49a23af&690图二

出现这种问题在于设计者没有考虑到视觉传达(开和关都是蓝色,用户无法进行判断),只是照着葫芦画瓢,仿制iponeGUI。因为没有把握到本质问题,反而出现了严重的可用性问题。

要说清楚这个问题,关键不在于视觉传达,而在于交互设计中,对按钮类型的定义。所有的按钮都可以分为以下两个大类:

表示当前状态:即当前的按钮表示的是当前的状态,点击后会切换到另一个状态。下图的单选按钮和复选框就是典型的表示状态的按钮。

http://s6/middle/61e545fdg9bfdfe2f8e35&690图三


表示功能:即当前的按钮表示的是某一种功能,点就后就会激活这个功能。下图的播放、暂停和停止就是典型的表示功能的按钮。

http://s7/middle/61e545fdg9bfe05771e86&690图四

出于使用习惯,在设计时会将两个(或多个)相反的功能设计成为一个按钮,例如“播放和暂停”、“选中和未选中”、“打开和关闭”等。在设计时就要充分考虑到如何进行恰当的视觉传达,使用户很容易的区分出当前按钮到底是表达功能,还是表达状态。

在图二中,苹果的开关设计,很巧妙。它使用颜色的习惯用法(与彩色搭配时,一般灰色表示未选中、取消、关闭等意思)来表达出按钮上的文字“on”和“off”是状态,而不是功能。

    在设计按钮时,一定要明确的传达出按钮到底是表示功能还是状态。图五是最常见的设计方法。

http://s11/middle/61e545fdg9bfe08e74a8a&690图五

0

阅读 收藏 喜欢 打印举报/Report
后一篇:孤立的设计
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有