征集网锐志网络淘途找素材上91
创意在线首页
平面设计交互设计CG动漫工业设计建筑环境数码影像创意搜
 首页大赛征集资讯教程画廊访谈作品集创企同盟设计招聘人才专区竞赛台专题论吧 找素材看酷站设计网址库
交互设计首页
当前位置:首页 > 交互设计 > 观点 > 正文
浅谈:用户界面设计中的“状态”和“动作”
作者:阿里巴巴用户体验设计部 来源:阿里巴巴用户体验设计部 发表时间:2010-11-15 13:37:04 浏览:

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

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

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

图6

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

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

图7

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

  再看另一种情况

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

图8

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

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

图9

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

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

图10

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

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

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

图11

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


1 2 3 4 5
在线编辑:angel
本文链接:


推荐阅读:
·2019第五届“学院派奖”全国艺术与设计大展 征集公告
·2019第十三届“创意中国”设计大奖征稿
·第十三届《中国大学生美术作品年鉴》征稿开始
·青春唯美插画培训网络远程班正在招生
·20000元 余姚征集文化旅游宣传LOGO与宣传标语
·6000元 征集柯城区“一村万树”LOGO设计
·5000元 征集陕西政务服务形象标识
·3000元 2019中国•大圩马拉松文化节吉祥物征集
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址,且不准打上各自站点的水印!

近期推荐报道 返回首页更多精彩等着你!

平面设计| 43个独具创意的汽车平面广告欣赏行业展会| Prada米兰艺术展 联手艺术家造时尚雕
网页设计| 罗马尼亚ant7精彩网页设计欣赏Photoshop| 利用渐变制作超酷的抽象图案
标志设计| 90个新鲜创意logo欣赏(一)Photoshop| Photoshop快速调出外景图片梦幻的
海报设计| 国外独立乐队演出海报设计平面设计| 48个以字体为元素的创意广告欣赏一
FireWorks| Fireworks实例教程:流光效果详解Illustrator| Illustrator实例教程:绘制精美
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:whaternet
网站地址:http://whaternet.com/
加入时间:2014-8-5 13:59:20
网站名称:mnnaite
网站地址:http://www.mnnaite.com/static/
加入时间:2014-8-5 13:58:07
网站名称:tijuanaflats
网站地址:http://tijuanaflats.com/
加入时间:2014-8-5 13:55:32
网站名称:digital
网站地址:http://production-digital.com/
加入时间:2014-8-5 13:54:45
网站名称:deutschesee
网站地址:http://www.deutschesee.de/
加入时间:2014-8-5 13:51:54
网站名称:kennedy
网站地址:http://www.kennedyandoswald.com/
加入时间:2014-8-5 13:50:57
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿