您好,欢迎来到行行出状元 登录 免费注册

浅谈用户界面设计中的“状态”和“动作”

来源:http://info.hhczy.com 编辑:Kogee 2013-12-14 | 标签: 界面设计 视觉营销 视觉策划 |
浏览:606

一、问题引发思考

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

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

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

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

动作是指具有一定动机和目的并指向一定对象的运动。

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

结合来讲,动作是促使人或事物改变某一状态的运动,而状态是动作造成的结果表现。因此两者经常是紧密关联的,有时甚至是互为条件的。

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

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

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

三、生活中的例子

1、电灯开关

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

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

2、IpodHOLD

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

3、显示器

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

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

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

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

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

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

再看另一种情况

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

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

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

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

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

五、小结

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

1、分离状态与动作的表示。最直接,产生歧义的可能最小,但可能会占用大量空间,以及造成信息冗余。

2、忽略状态,突出动作。当状态无需标识也能直观识别时适用。

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

4、具象与仿生。当与现实物品建立感官联系时,人们的学习成本会大大降低。



【版权声明】行行出状元平台欢迎各方(自)媒体、机构转载、引用我们原创内容,但要严格注明来源:;同时,我们倡导尊重与保护知识产权,如发现本站内容存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至service@hhczy.com,我们将及时沟通与处理。

热门文章

  • 1688运营解答贴:店铺不够50个宝贝有影响吗?店铺权重怎么查看?
    1688运营解答贴:店铺不够50个宝贝有影响吗?店铺权重怎么查看?

    1688运营解答贴:店铺不够50个宝贝有影响吗?店铺权重怎么查看?

    经常有用户在社群中询问“问产品是优化到七星好,还是主图带营销文案比较好?”、“产品突然被大批量下架是什么原因?”……大泽收集了一些常见问题,希望能给商友一些启发~

  • 1688生意参谋市场洞察在哪里看?如何查找蓝海关键词?
    1688生意参谋市场洞察在哪里看?如何查找蓝海关键词?

    1688生意参谋市场洞察在哪里看?如何查找蓝海关键词?

    1688生意参谋市场洞察在哪里查看?很多1688卖家不知道市场洞察在哪里查看。订购付费版生意参谋后,进入生意参谋后台,如图所示点击“市场竞争”就可以看到市场洞察的各项数据了。

  • 超级物种将关闭除福州外的所有店铺?永辉超市回应了
    超级物种将关闭除福州外的所有店铺?永辉超市回应了

    超级物种将关闭除福州外的所有店铺?永辉超市回应了

    2月26日消息,日前,有消息称,超级物种将关闭全国除福州外的所有店铺,具体关闭时间暂未确定。对此,永辉超市官方否认了这一消息,并回应称,超级物种的部分闭店属于正常的业态调整。

  • 苏宁易购股权即将变更,股票已停牌
    苏宁易购股权即将变更,股票已停牌

    苏宁易购股权即将变更,股票已停牌

    2月26日消息,日前,苏宁易购发布公告称,公司实际控制人、 控股股东张近东以及股东苏宁电器集团有限公司拟筹划转让股份,预计转让比例20%-25%,可能涉及公司控制权变化。苏宁易购股票自2月25日起停牌,预计停牌时间不超过5个交易日。

  • 数字人民币再试点,成都将发放4000万元红包
    数字人民币再试点,成都将发放4000万元红包

    数字人民币再试点,成都将发放4000万元红包

    2月24日消息,日前,成都发布微信公众号消息,成都“数字人民币 红包迎新春”活动将于2021年2月24日正式开启。此次活动向在蓉个人发放总额4000万元的数字人民币消费红包,红包数量约20万个,中签个人可获得178元或238元金额红包。

  • 小米要造车?已拥有多项相关专利
    小米要造车?已拥有多项相关专利

    小米要造车?已拥有多项相关专利

    2月21日消息,近期,有媒体透露,已从多个渠道获悉小米确认要造车,并视其为战略级决策,公司创始人雷军或将亲自带队。

  • 苹果被曝开启6G研发:正在招聘工程师
    苹果被曝开启6G研发:正在招聘工程师

    苹果被曝开启6G研发:正在招聘工程师

    2月21日消息,据彭博社相关消息透露,苹果公司在最近发布了一则招聘广告,旨在为下一代移动网络招募无线系统研发工程师,即6G网络。据悉,此次苹果要招募岗位的工作地点位于硅谷和圣地亚哥。

人物观点

更多 >
  • 卢捷:创新创业要考虑自身造血赚钱
    卢捷:创新创业要考虑自身造血赚钱

    卢捷,厦门创客猫网络科技有限公司创始人,热衷创新创业,是一位名副其实的有为创业青年,主要从事互联网相关行业,自双创热潮出现后,投身于为互联网活动、创新创业活动的主办方做线下活动的图文直播、现场采访、媒体报道等这样的一个现场媒体服务。

  • 林超:平行进口车为汽车市场添活力
    林超:平行进口车为汽车市场添活力

    恒基瑞驰科技创始人,美国天马迅达快递副董事长。2007年赴美留学,进修工商管理硕士。2010年5月创立了美国迅达快递,致力于为海外华人和国内海淘用户提供优质的物流服务。2014年5月份联合创立了美国天马迅达快递。在全美30多个州开设了100多家加盟店,服务于全美华人,电商以及海淘客户。2016年开始投资创立“恒基瑞驰供应链管理平台”,全面服务于平行进口车的各个贸易商与经销商。

人物最强打工人:苹果CEO库克获8亿年终奖!
人物马斯克资产缩水近千亿,不再是全球最富有的人
人物福布斯公布中国杰出商界女性榜:董明珠第五
人物罗永浩回应坚果手机被放弃:嗯,好事
人物马云近3个月来首露面,阿里股价强势反弹!

推荐专题

更多 >

合作协会

  • 福建电子商务协会
  • 德化县电子商务协会