用户界面设计中“状态”和“动作”的表达
作者:Tony Lee 来源:aliued 发布时间:2011-01-06 12:36:00
一、问题引发思考
前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题。想想这个问题多年前已经开始讨论了,所以在此整理一下思路,与大家共享。
「图1」
具体案例是这样的:如上图所示,在“启用”和“停用”搜索定制功能时,这个按钮到底是表示“状态”还是表示“动作”呢?简单的说,上图中 1表示当前是停用状态,还是表示点击后为停用操作呢?答案显然是不清晰的。
怎样能够清晰的表达两者的差异,减少用户的误解呢?我们首先要从“动作”、“状态”的定义和两者的关系入手。
二、什么是动作,什么是状态
动作是指具有一定动机和目的并指向一定对象的运动。
状态指人或事物表现出来的形态。
结合来讲,动作是促使人或事物改变某一状态的运动,而状态是动作造成的结果表现。因此两者经常是紧密关联的,有时甚至是互为条件的。
比如“操作收音机”这件事,我需要扭动旋钮或按键等“打开”的动作来打开收音机,当动作完成后收音机的状态是“打开的”。而“关闭”收音机这个动作的前提,是一个“打开的”状态的收音机。
”听起来好复杂阿!“很多人都会这么认为。为什么我们在生活中天天面对类似的事却很少有这样的感觉呢?
下面来看看生活中的例子我们或许就能理解了。
三、生活中的例子
1、电灯开关
「图2」
单控开关,我们最常见的开关之一,设计极其简单,按下一边是开,另一边是关。至于到底那边是开那边是关,没有几个人会特别关心。因为我尝试两次总会作对操作,几乎没有什么成本。人们不会感觉什么不爽。
当然,现在还有更好的设计。
「图2」
2、Ipod HOLD
「图3」
苹果的Ipod播放器的按键锁定功能“HOLD”。当开关拨动到“HOLD”字样一边时,左侧便会露出红色。而拨动到另一边是没有颜色的。巧妙的运用了色彩对人们心里特征的影响区分出了hold的状态。
3、显示器
「图4」
显示器电源开关,又一个“动作”和“状态”结合的应用。使用按钮突出的形态,和开关的图形表现来表示可执行的动作(这里按下去是用来开关的),使用背景灯的暗与亮来表示开关状态(灯亮表示现在是开的状态)。
类似的应用非常多,我们可以看到其中具有的特点是:1、可以触摸、按动(拨动)的按钮 2、色彩的区分 3、有的还有明显的位置差异以及标识。
猜你喜欢
- 周六。据闻北服美女甚多,于是应邀去做了一个关于UED的讲座。人不多,讲的很乱,但大家听的很认真,欣慰。讲完之后回答了很多关于社区、搜索、设计
- 本文总结了input的各种使用方法,挺全面的1.取消按钮按下时的虚线框在input里添加属性值 hideFocus 或者 HideFocus
- 在默认情况下,Access 2000/2002数据库是以“共享”的方式打开的,这样可以保证多人能够同时使用同一个数据库。不过,在共享方式打开
- 只有mdf文件的数据库附加失败的修复 附加时报如下错误: 服务器: 消息 1813,级别 16,状态 2,行 1 未能打开新数据库 '
- 大多数做过网页设计的都知道“CSS框架”,而且肯定有很多设计师已经开始在作品中使用CSS框架。就像其他编程语言一样,CSS也可以把一些重复使
- 这是一个非常简单的解决方案,柱状图中每一条柱都是一个 div,数据的大小呈现在 div 的宽或高上。 查看演示 例子下载实现的原理
- 中文字体设计发展到现在,风格越来越多样化,特别是在广告(美术)字体方面,因为字数少 局限小,优秀的作品层出不穷,比较突出的应用在标志设计唱片
- domainname.asp<form method="POST"> &nb
- 或者说有一条命令 hostname [string],当string是不包含2950时,是true,包含2950时是false。使用Exce
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 7 - Set and Get Style Pro
- mysql数据库里,对一个已创建的表进行DDL操作,比如说添加一个字段。在做测试时,发现ddl操作的时间特别的长。
- 1、为图片加入水印功能 Dim Jpeg Set Jpeg = Server.Create
- froglt 的站点:http://www.go2here.net 欢迎转载,请注明出处,未经作者允许,禁止一切商业应用。这是即
- <%@ Language=VBScript %><%Option Explicit %><%Dim strUR
- MySQL Innodb 引擎优化,InnoDB给MySQL提供了具有提交,回滚和崩溃恢复能力的事务安全(ACID兼容)存储引擎。InnoD
- 1、创建存储过程 create or replace procedure test(var_name_1 in type,var_name_
- 请问鼠标移过去就出现二级菜单代码怎么写啊 <head><style type="tex
- 在MySQL中,对于索引的使用并是一直都采用正确的决定。简单表的示例:CREATE TABLE `r2` (ID` int(11) DEFA
- 2.彻底弄懂CSS盒子模式二(导航栏实例) 3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 4.彻底弄懂CSS盒子模式四(绝对定位和
- 异步操作数据的方式有两种常见的方式:XMLHttpRequest 和 iframe. 孰优孰劣在此我们不争论,只是想举一个例子说明在获取网片