瞬间的设计 I
作者:咏沙 来源:Taobao.com UED Team 发布时间:2009-12-25 18:54:00
瞬间设计是什么?
良好的用户体验,全在于那些完美的瞬间。在第一个瞬间,假设当一位用户从购物搜索结果页面跳转到某个店铺的时候,他此刻可能是想看看这个店铺的风格及其信用;而下一个瞬间可能就开始琢磨如何使用页面中的导航来观看某个宝贝介绍。再然后则可能是询问怎验购买,从哪里注册,者看看商品是否打折,或者尝试联系这个卖家。
若想完成优秀的设计,我们就需要时刻自问:在希望用户做些什么,界面应该如何鼓励他们完成这些任务?每一个瞬间对于完整的用户体验来说,都是不可或缺的一部分,因为他们都有可能加强也可能摧毁用户对某个产品或公司的信心。为什么这么说呢?因为每个人在每时每刻所要完成的任务,对于此时此刻的他而言,那就是重要的任务。
设计师要做什么?
我们的工作不是设计花哨的页面,而是要设计美好的瞬间,确保每时每刻都完美,是设计师的职责和价值所在。在用户进行选择的瞬间,我们要帮助他们做出正确的决定,我们要留意创建怎样的交互行为以及鼓励人们输入,编辑,搜索和共享,激励他们完成所有的他们希望做的事情,我们还应该设计各种手段帮助人们提高工作效率——即使他们天生忘性大,老出错,或者总是三心二意。可以说设计师的工作就是考虑所有这些瞬间——设计一些东西来支持用户达成每一个目标,而不会干扰或者妨碍到他们,同时,把这些完全不同的部分凝成为一个整体。只有这样他们才能相信我们产品,喜欢我们的服务。
从一个例子开始
如何设计美好的瞬间?在开始之前,请大家先回想一下igoogle界面,这个产品大家一定很熟悉,有的设计师几乎每天都用到它。igoogle有很多关于拖拽的操作,而拖拽这个复杂的交互行为需要不同的状态(我们称之为瞬间)来表现其交互事件(Event),yahoo模式库曾对其进行详细的划分,他们分别是:
页面加载(Page Load)
鼠标悬停在拖动目标上(Mouse Hover Over Drag Object)
鼠标按下拖动目标区域(Mouse Down On Drag Region of Drag Object)
拖动发起(Drag Initiate)
拖动原位置(Drag Over Original Location)
拖动离开原位置(Drag Leaves Original Location)
拖动重新进入原位置(Drag Re-enters Original Location)
拖动有效区域(Drag Over Valid Target)
拖动进入有效的区域(Drag Enters Valid Target)
拖动悬停于有效的区域(Drag Hovers Over Valid Target)
拖动推出有效的区域(Drag Exits Valid Target)
拖动非操作区域(Drag Over Invalid Target)
拖动进入无效的区域(Drag Enters Invalid Target)
拖动悬停于无效的区域(Drag Hovers Over Invalid Target)
拖动退出无效区域(Drag Exits Invalid Target)
拖动非具体目标(Drag Over No Specific Target)
接受放置(Drop Accepted)
接受放置起始(Drop Accepted Begins)
接受放置结束(Drop Accepted Ends)
拒绝放置(Drop Rejected)
放置于原位置(Drop On Original Location)
猜你喜欢
- 例如:我们在百度中搜索 词典网,则网址后面的参数就是http://www.baidu.com/s?cl=3&wd=%B4%CA%B5
- 原文:http://www.htmldog.com/guides/htmlintermediate/badtags/十六 有害的标签 Bad
- JS在firefox中的兼容性问题,自己也经常遇到.此文是网上资料,不过时间较久不记得原址了...1. document.form.item
- 动态联接库(DLL)是加快应用程序关键部分的执行速度的重要方法,但有一点恐怕大部分人都不知道,那就是在ASP文件也能通过调用DLL来加快服务
- 一个单步的动作,用了这个脚本,就可以重复执行100遍1000遍。上面就是一个路径描边100遍的效果,吼吼~ 不知道大家明白用处没有?(以前老
- 请问如何从ASP连接到Oracle Server?可用下面的代码进行连接: <%@ Lan
- 当我们建立一个数据库时,并且想将分散在各处的不同类型的数据库分类汇总在这个新建的数据库中时,尤其是在进行数据检验、净化和转换时,将会面临很大
- 如果您还不太了解XML技术,您可以先看看此文:XML的语法、结构以及相关的一些技术 及 XML DOM介绍和例子XML中 CDATA的作用:
- 利用oracle的dbms_random包结合rownum来实现,示例如下,随机取499户:select * from ( select *
- 在本文中,我将说明如何用SQL Server的工具来优化数据库索引的使用,本文还涉及到有关索引的一般性知识。 关于索引的常识 影响到数据
- 今天开始学习 YUI,加强一下对 JavaScript 的理解。1. 命名空间 YAHOO
- canal简介由阿里巴巴开源 github地址:https://github.com/alibaba/canalCanal是阿里巴巴开源的一
- 这段时间在处理SQL server 2000 SP4补丁打不上的问题上花了不少时间,回头想想应该总结一下:系统说明:dell1800服务器,
- SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数; SQL> select ascii('A')
- 最近将Jesse James Garrett的《用户体验的要素》一书读了两遍,做一些简要的摘录并添加一些个人注释。当然,一本好书绝对不是简单
- 在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(sele
- 在ASP的实际操作中,总会发生这样的情况,如在银行,从我的帐户往费文华的帐户划款,我的帐户显示已经划出,但因银行的系统出现故障,导致费文华帐
- 下面我们用HTML来上传3个文件看看,它包含了文本描述字段和多项选择:upload.htm<HTML> <BOD
- 如何让我的网页自动适应客户端的屏幕分辨率?然后用下列办法进行自动推送:<% @language="vbscript
- (一)连接连接通常来自Web服务器,下面列出了一些与连接有关的参数,以及该如何设置它们。1、max_connections这是Web服务器允