当前位置: 网站建设 > 网页设计 > 建站经验 >

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

时间:2013-03-02 04:08来源:未知 作者:admin 点击:

标签:用户界面设计中“状态”和“动作”的表达 最后(9)HOLD(1)Ipod(1)用户(58)动作(1)界面设计(8)表达(2)状态(3)
「图6」 2、Ipod HOLD 「图4」 最后我们来看一个手机界面的运用。 前面作了许多利用的举例,那么到底怎么才干做好动作与状态联合的设计呢? 上面是某帐户治理的UI,将状态和操作(动作)显明的分两列标识,虽然显得有些噜苏,但也明白的抒发出了应有的含意。 比方操作收音机这件事,我需要扭动旋钮或按键等打开的动作来打开收音机,当动作实现后收音机的状态是打开的。而关闭收音机这个动作的条件,是一个打开的状态的收音机。 结合来讲,动作是促使人或事物改变某一状态的活动,而状态是动作造成的成果表现。因而两者常常是严
用户界面设计中“状态”和“动作”的表达》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023444R013.htm

「图6」

2、Ipod HOLD

「图4」

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

前面作了许多利用的举例,那么到底怎么才干做好”动作“与”状态“联合的设计呢?

上面是某帐户治理的UI,将状态和操作(动作)显明的分两列标识,虽然显得有些噜苏,但也明白的抒发出了应有的含意。

比方“操作收音机”这件事,我需要扭动旋钮或按键等“打开”的动作来打开收音机,当动作实现后收音机的状态是“打开的”。而“关闭”收音机这个动作的条件,是一个“打开的”状态的收音机。

结合来讲,动作是促使人或事物改变某一状态的活动,而状态是动作造成的成果表现。因而两者常常是严密关系的,有时甚至是互为前提的。

「图9」

显示器电源开关,又一个“动作”和“状态”结合的应用。使用按钮突出的形态,和开关的图形表现来表示可履行的动作(这里按下去是用来开关的),用户10秒内离开你网站的25种原因,使用背景灯的暗与亮来表示开关状态(灯亮表示现在是开的状态)。

当然,当初还有更好的设计。

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

五、小结

「图10」

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

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

仍是音乐播放器,这次不同的是线性的状态表现。音量的大小并不仅是“开、关”两个状态那么简略,而是由小到大线性变更的。上面那个UI通过左右两个喇叭的外形很好的表白了音量大小的两端,旁边的圆钮既是动作的把持杆又是音量大小的刻度标识。由于它跟左侧很好的衔接在一起构成水槽后果,填满局部的是非再一次反应了音量的大小,十分奇妙。而下面那个UI只在左侧放了音量大小标识,固然不同因量大小时左侧图标也会相应转变,但比拟之下首次应用会难理解良多,用图片代替提交和重置按钮

「图5」

「图2」

--> [网站建设之]用户界面设计中“状态”和“动作”的表达

3、显示器

类似的应用无比多,我们可以看到其中存在的特色是:1、可以触摸、按动(拨动)的按钮 2、色彩的分辨 3、有的还有显著的地位差别以及标识,用于WebKit的CSS技巧

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

「图7」

「图3」

三、生活中的例子

再看另一种情形

动作是指具备必定念头和目标并指向一定对象的运动。

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

1、分别状态与动作的表示(如图9)。最直接,发生歧义的可能最小,但可能会占用大批空间,以及造成信息冗余。

1、电灯开关

前阵子与共事探讨一个小需要时又碰到了按钮表示“动作”和表示“状态”间抵触问题。想想这个问题多年前已经开端探讨了,所以在此收拾一下思路,与大家共享。

2、疏忽状态,凸起动作(如图6)。当状况无需标识也能直观辨认时实用。

「图2」

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

一、问题引发思考

”听起来好庞杂阿!“很多人都会这么以为。为什么我们在生活中每天面对相似的事却很少有这样的感到呢?

「图8」

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

怎样可能清晰的表达两者的差异,减少用户的曲解呢?我们首先要从&ldquo,用”百分比”设置页面的高度;动作”、“状态”的定义和两者的关联入手。

4、具象与仿生(如图10)。当与现什物品树立感官接洽时,人们的学习本钱会大大下降。此类运用不好定义其适用范畴,留给大家探讨吧。

3、忽略动作,突出状态(如图7)。当动作操作已经被划分指定区域,可以预期其可操作性时适用。

下面来看看生涯中的例子咱们或者就能懂得了。

状态指人或事物表示出来的状态。

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

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

音乐播放器中的随机播放。因为“随机&rdquo,用“细分”揪出那些影响宝贝流量的潜伏因素;与“按次序”播放并不轻易直观觉察,因此状态需要明白标识。而动作自身因为并不是中心功能被弱化了,仅仅依附界面功能区块划分来表示此处的可操作性。

Tag:表达   动作   状态   用户     表达   动作   状态   用户    


(责任编辑:网站建设)
用户界面设计中“状态”和“动作”的表达相关文章
上一篇:用户10秒内离开你网站的25种原因 下一篇:用户研究的定义与价值
回到顶部