以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://blog.sina.com.cn/s......0100dnrx.html

从picasa中看到的交互行为三步曲

作者:杰西西  |   发布: (网友)杰西西   |   时间:2009-07-06 16:20:32 文字大小:- +

看了臭鱼的交互行为的三步曲后,体验了一下Picasa相册管理软件,Picasa把这三步曲做得比较到位.

 

第一:操作前,操作可识别,结果可预知.

操作可识别,顾名思义,就是可以操作的元素看起来是可以操作的,例如按扭需做得立体些,链接最常见的是蓝色文字加下划线,可以拖拽的对象必须在视觉上表现出是可以拖拽等等。

 

图1中:1所指示的是禁用的按扭(对比度低,按扭感觉被蒙了一层透明的),2是可点击的按扭(立体的,比禁用的按扭对比度要高)。

图1:按扭的表现

 

 

图2中:红框部分在视觉上的表现,感觉可以拖动,且当鼠标滑过此处,出现横向箭头,表示可以横向拖动。进一步表明可以进行的操作。不足的是此处的拖动只能向右,不能向左,跟常见的操作有点不同(例如Windows资源管理左边的文件夹,可以左右拖动),有点不太符合用户的心理模型,如果能稍微做些调整可能更好。

 

图2:可以拖动的表现

 

结果可预知,在进行操作前,某项操作的结果可以预先知道。

在Picasa中,对某张照片进行操作时,例如裁剪,选中裁剪按扭后,在图片上拖拽鼠标,会形成一个明显的被裁剪的区域,如图3右边的图片区域,裁剪掉的区域与未裁剪掉的区域视觉上的对比,在左边,还有一个预览的功能,可以查看被裁剪后的效果。

图3:裁剪图片

 

第二:操作时:操作有反馈。

图4,在Picasa软件中,当对图片进行缩放的时候,图片在放大的时候,右边还有有缩放大小的提示。

图4:图片缩放的提示

 

图5,在微调选项卡下,对照片进行”阴影“的调整,照片会随着滑动块的变化而变化。

图5:对照片进行阴影的调整

 

 

第三:操作后:操作可撤消。

本次中我使用了”暖化“、”微调“、”裁剪“的操作。在Picasa软件中可以依次支持我对”暖化“”微调“”裁剪“的操作,如图6,图7,图8。当我撤消所有的操作后,还支持反向撤消的操作(即恢复某个被撤消的操作),如9。

图6:撤消暖化的操作

 

图7:撤消微调的操作

 

 

图8:撤消裁剪的操作

 

图8:恢复裁剪的操作

 

 操作可预知,操作可撤消的设计可以使用户能有信心去学习和尝试。很遗憾的是,常见软件的设计都是弹出来一个确认框”你确认要进行此操作吗?“,如此设计,用户是没有学习和尝试的机会的,他们的选择只能是“确定”或“取消”。

更多
打印  |  类别:信息和交互  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买