用户界面设计中“状态”和“动作”的表达

标签: 界面设计 产品设计 | 发表时间:2011-12-29 14:18 | 作者:P迪
出处:http://www.alibuybuy.com

一、问题引发思考

前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题。想想这个问题多年前已经开始讨论了,所以在此整理一下思路,与大家共享。

taobao1
具体案例是这样的:如上图所示,在“启用”和“停用”搜索定制功能时,这个按钮到底是表示“状态”还是表示“动作”呢?简单的说,上图中 1表示当前是停用状态,还是表示点击后为停用操作呢?答案显然是不清晰的。

怎样能够清晰的表达两者的差异,减少用户的误解呢?我们首先要从“动作”、“状态”的定义和两者的关系入手。

 

二、什么是动作,什么是状态

动作是指具有一定动机和目的并指向一定对象的运动。
状态指人或事物表现出来的形态。
结合来讲,动作是促使人或事物改变某一状态的运动,而状态是动作造成的结果表现。因此两者经常是紧密关联的,有时甚至是互为条件的。

比如“操作收音机”这件事,我需要扭动旋钮或按键等“打开”的动作来打开收音机,当动作完成后收音机的状态是“打开的”。而“关闭”收音机这个动作的前提,是一个“打开的”状态的收音机。
”听起来好复杂阿!“很多人都会这么认为。为什么我们在生活中天天面对类似的事却很少有这样的感觉呢?

 

下面来看看生活中的例子我们或许就能理解了。

三、生活中的例子

1、电灯开关

 

kaiguan1

「图2」

单控开关,我们最常见的开关之一,设计极其简单,按下一边是开,另一边是关。至于到底那边是开那边是关,没有几个人会特别关心。因为我尝试两次总会作对操作,几乎没有什么成本。人们不会感觉什么不爽。

当然,现在还有更好的设计。

 

kaiguan2

「图2」

 

2、Ipod HOLD

 

hold

「图3」

苹果的Ipod播放器的按键锁定功能“HOLD”。当开关拨动到“HOLD”字样一边时,左侧便会露出红色。而拨动到另一边是没有颜色的。巧妙的运用了色彩对人们心里特征的影响区分出了hold的状态。

 

 

3、显示器

 

kaiguan3

「图4」

显示器电源开关,又一个“动作”和“状态”结合的应用。使用按钮突出的形态,和开关的图形表现来表示可执行的动作(这里按下去是用来开关的),使用背景灯的暗与亮来表示开关状态(灯亮表示现在是开的状态)。

类似的应用非常多,我们可以看到其中具有的特点是:1、可以触摸、按动(拨动)的按钮 2、色彩的区分 3、有的还有明显的位置差异以及标识。

 

四、软件以及网站中的例子

软件或网站界面显然不具备可触摸的特点,不过我们的设计师也尽量会模拟出类似现实中物品的可以操作的形状和质感。

 

play1

「图5」

播放器常用的UI。点击中间的“播放”与“暂停”键即可切换操作。可以看出,这里忽略了状态的表现,我无法直观的看到现在是播放还是暂停的状态。原因很简单,就像开关电灯一样,影片的打开与关闭是可以直接感知到的,不需要专门的状态提示。

 

taobao2

「图6」

再来看列表的视图切换。图上箭头所示“切换到大图”功能也是此类应用,忽略了状态的表现。因为“切换到大图”动作执行后,界面的状态会明显的改变(大图模式),不需要专门的状态来标识。

 

再看另一种情况

 

play

「图7」

音乐播放器中的随机播放。因为“随机”与“按顺序”播放并不容易直观察觉,因此状态需要明确标识。而动作本身由于并不是核心功能被弱化了,仅仅依赖界面功能区块划分来表示此处的可操作性。

 

 

play3

「图8」

还是音乐播放器,这次不同的是线性的状态表示。音量的大小并不只是“开、关”两个状态那么简单,而是由小到大线性变化的。上面那个UI通过左右两个喇叭的形状很好的表达了音量大小的两端,中间的圆钮既是动作的操纵杆又是音量大小的刻度标识。因为它和左侧很好的连接在一起形成水槽效果,填满部分的长短再一次反映了音量的大小,非常巧妙。而下面那个UI只在左侧放了音量大小标识,虽然不同因量大小时左侧图标也会相应改变,但相比之下初次使用会难理解很多。

 

 

list

「图9」

上面是某帐户管理的UI,将状态和操作(动作)明显的分两列标识,虽然显得有些啰唆,但也清楚的表达出了应有的含义。

 

最后我们来看一个手机界面的应用。

 

iphone

「图10」

仿照物理拨动开关的质感与色彩表达,很好的”动作“与”状态“结合的例子。这样的设计你还会犯错么?

 

 

五、小结

前面作了很多应用的举例,那么到底怎样才能做好”动作“与”状态“结合的设计呢?

1、分离状态与动作的表示(如图9)。最直接,产生歧义的可能最小,但可能会占用大量空间,以及造成信息冗余。
2、忽略状态,突出动作(如图6)。当状态无需标识也能直观识别时适用。
3、忽略动作,突出状态(如图7)。当动作操作已经被划分指定区域,可以预期其可操作性时适用。
4、具象与仿生(如图10)。当与现实物品建立感官联系时,人们的学习成本会大大降低。此类运用不好定义其适用范围,留给大家探讨吧。

来源: http://www.aliued.cn/2010/11/07/expression-of-state-and-action-in-ui-design.html


© 推荐 for 互联网的那点事, 2011. | Permalink | No comment | Add to del.icio.us
Post tags:

你可能也喜欢:

送给开发者的礼物:APP用户体验设计参考 (@tech2ipo)

每日E图:iPad用户行为调查 (@tech2ipo)

用户体验设计的模型

用户体验设计思想:瞬间设计(二)

Google用户体验设计准则
无觅

Feed enhanced by Better Feed from Ozh

相关 [用户界面 设计 状态] 推荐:

用户界面设计中“状态”和“动作”的表达

- - 互联网的那点事...
前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题. 想想这个问题多年前已经开始讨论了,所以在此整理一下思路,与大家共享. 具体案例是这样的:如上图所示,在“启用”和“停用”搜索定制功能时,这个按钮到底是表示“状态”还是表示“动作”呢. 简单的说,上图中 1表示当前是停用状态,还是表示点击后为停用操作呢.

用户界面设计原则

- - 人人都是产品经理
“设计绝不是简单的拼合,排列甚至编辑;设计是通过阐明,简化、明确、修饰,使之庄严,有说服性,甚至带一点趣味性,来赋予其价值及意义. ”——保罗·兰德(Paul Rand). 1.“明确”应该放在设计的首要位置. 对任何界面而言,“明确”是首要的也是最重要的一点. 人们必须能够辨别出它是什么,才能有效地使用你设计出来的界面.

50+PSD用户界面Web设计素材

- DayuLu - 互联网的那点事
对于很多设计初学者来说很多高手的界面设计得让他们惊叹. 其实,对于真正的设计老手来说,他们有能力设计出各种效果,但是即便这样也是需要大量的时间的. 在大多数的中小企业中这样的完全独立设计师很少见的. 老练的设计师都有一套属于自己的设计素材库,里面包罗万象会让各种菜鸟汗颜. 这些就好比日积月累的各种武术套路,当需要那种就自然的打了出来,快、准、狠.

Android 4.0用户界面设计和元素-ICS简介

- - 博客园_新闻
最新的 Android 冰淇淋三明治(Ice Cream Sandwich, ICS)操作系统,不仅仅是用户界面(UI)的简单改变,它几乎是对整个 Android 系统界面的重新定义. 为了让你更好地为 ICS 系统设计和开发应用,这里有一个简单的介绍和指南. 内容和活动导航:选项卡和下拉选项 (Tabs and Dropdowns).

什么才是优秀的用户界面设计

- - 互联网的那点事
今天为大家分享一些 Good UI 在一些项目中获取的设计以及运营策略等方面的经验. 这是本人收藏了很久的干货,最近开始做网站产品,又把它翻出来了. Good UI 是一家研究用户体验的设计机构. 我们知道成功的页面设计不仅有很高的转化率更便于用户使用,既能满足商业目标更能为用户带来良好的体验. 整合相似的功能,去掉零碎的 UI 元素.

转载:免费的用户界面设计工具,工具包和资源

- Betula - Axure教程|手机交互设计|手机产品设计
来源:免费的用户界面设计工具,工具包和资源    发贴会员:图图网-sunqilong. 都是一些UI界面与设计使用的元素,软件,网站等. 内容很丰富,适合网页设计师,用户体验设计师,界面设计师,产品设计师,JS前段开发,手机产品设计,ipad产品设计等使用. Lumzy是一个网站应用和原型界面制作工具.

细节成就卓越——浅析iPhone用户界面设计精粹

- Shengbin - 腾讯CDC
  作为一款革命性产品,iPhone(这里泛指iPhone和iPod touch,当然还有iPad)为我们带来了许多意想不到的创意和惊喜. 过去两个月多的时间里,我们认真地咀嚼《iPhone Human Interface Guidelines》,感悟字里行间透露着的苹果的细致与智慧. 兴奋、激动之余,有太多的惊喜想与大家分享.

50个精美的 PSD 用户界面素材和设计模板资源

- brett80 - 博客园-首页原创精华区
  对于每一个网页设计师来说,有预先设计好的和可编辑的UI元素是组织和优化工作流程的关键. 这些元素可以让你快速制作出风格统一的网页原型. 今天,本文与大家分享50个精美的PSD资源,包含UI元素模板、表单、按钮、菜单、进度条、播放器、提示框等等. 注册和登录表单 PSD 资源. 这个素材包除了按钮之外,还包括菜单、多媒体播放器、导航等等很多资源,赶紧下载吧.

iPad用户体验暨UI设计—如何设计出优秀的用户界面

- Ken - 互联网的那点事
iPad划时代地将我们带入了平板电脑时代,对于传统的移动终端的设计师而言,一个拥有更大的触摸屏幕,更大空间的舞台展现在大家面前,看上去一切都是那么的美好. 然而如何在iPad上设计出优秀的用户界面. 相信对于设计师们的挑战与忧愁远不止屏幕放大那么简单. 大的屏幕、可以触摸的操作、支持多种手势…这一切条件都为让用户能沉浸于你的设计中提供了条件,那么如何将设计与用户生活的环境、习惯更好的结合,获得最佳的体验,就成为了一个挑战.

49款值得收藏的PSD用户界面素材及设计模板资源

- Ken - 互联网的那点事
对于每一个网页设计师来说,有预先设计好的和可编辑的UI元素是组织和优化工作流程的关键. 这些元素可以让你快速制作出风格统一的网页原型. 今天,本文与大家分享50个精美的PSD资源,包含UI元素模板、表单、按钮、菜单、进度条、播放器、提示框等等. 注册和登录表单 PSD 资源. 这个素材包除了按钮之外,还包括菜单、多媒体播放器、导航等等很多资源,赶紧下载吧.