读者的进步速度远大于博客的进步速度。
2010年09月3日未分类

没有评论
17 views

JavaScript—计算图片加载的张数。

通过JavaScript 来计算当前图片加载的张数。

原理:

先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同。

最后需要一个进度条与之结合即可。

这个脚本在做游戏的地方用得比较多。

演示:

http://cssrain.cn/demo/plantsvs/loadImg.html

2010年08月16日新闻

13条评论
900 views

jQuery Mobile来了!jQuery发布移动设备版开发项目。

为了让移动设备也能用上jQuery,jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project(http://jquerymobile.com)。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。

对于大名鼎鼎的jQuery开发团队来说,当然要让jQuery Mobile支持全球主流的移动平台,而不仅仅是北美流行的移动平台。想要知道jQuery Mobile项目将要做些什么吗?请看jQuery移动平台策略;想要知道jQuery Mobile项目将会支持哪些浏览器吗?请看Mobile Graded Browser Support

jQuery Mobile开发团队正在紧张工作,准备那些要支持的移动设备并针对这些设备进行测试。他们争取在今年晚些时候发布jQuery Mobile。如果你想为jQuery Mobile提供帮助,请加入jQuery Mobile社区的讨论组

刚刚启动的jQuery Mobile测试实验室

jQuery Mobile项目已经得到了Palm, Mozilla等移动浏览器厂商的赞助。

jQuery Mobile开发团队说:“能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。”

编者:移动互联网,挡不住的趋势…

英文原文:Announcing the jQuery Mobile Project

转载博客园编译

2010年08月12日招聘

1条评论
354 views

亚信科技(上海)诚聘前端开发工程师。


  • 职位: 前端开发工程师
  • 人数: 1
  • 薪金: 面议
  • 有效期至: 2010-10-30
  • 工作地点: 上海普陀区江宁路1207号(近长寿路)国脉大厦14楼 亚信科技
  • 学历: 大专以上
  • 是否应届:非应届

关于亚信联创科技:

  1. 亚信公司是中国领先的通信软件和服务提供商,为中国电信运营商提供IT解决方案和服务,以使电信运营商迅速响应市场变化,降低运营成本,提升盈利能力。
  2. 亚信是在美国纳斯达克成功上市的第一家中国高科技企业(NASDAQ交易代码:ASIA)。总部设在北京,在成都、广州、上海、杭州、南京、福州、沈阳等地设有分支机构和研发中心,年收入逾10亿人民币。
  3. 亚信上海主要为上海移动通信提供服务,包括业务支撑系统以及其他增值服务。
  4. 亚信联创是亚信公司合并联创公司后的新公司名。
  5. 详细请点击:http://www.asiainfo-linkage.com.cn/

职位描述:
1、将切片好的设计稿转换成Web界面,HTML代码要求结构清晰,符合语意。
2、精通CSS,并且能够保证Web界面做到浏览器兼容(IE6,7,Firefox)。
3、JavaScript基础知识扎实,能完成Web项目中常用的脚本,并且能结合CSS实现基本的页面动态效果。
4、有JavaScript框架应用和项目开发经验,熟练使用jQuery或Ext框架。
5、根据用户的需求,分析并给出最优的前台技术解决方案。

任职要求:

1、有 1-2 年以上的Web项目开发和前端开发经验;
2、精通HTML、CSS、JavaScript等前台相关技术,熟悉W3C网页标准,了解后台开发语言(JAVA);
3、熟练运用常见JavaScript框架,如jQuery或 Extjs等;
4、有解决问题、钻研新技术的兴趣和能力,善于交流和表达,有良好的团队合作精神;
5、对业内新技术及趋势有较强的敏感度;
6、抗压能力强,可应对较大的工作压力。

如果你有这些本事,请投送你的简历吧: cssrain#gmail.com (#换成@)

2010年07月27日TeamWork

25条评论
548 views

IE中createElement需要注意的一个小问题.

最近有读者求助,说在iframe中,创建一个元素,然后添加到父页面中在ie6,ie7中行不通,而firefox和IE8可以。

代码如下:
var $alertPanel = $( document.createElement(“div”)  );

$alertPanel.css(“width”,”120px”).css(“height”,”50px”).text(“Hello CssRain!”);

$(‘body’,parent.document).append($alertPanel);

顺着他的意思,我也写了个Demo,发现确实是这样。

翻了翻资料,也没看到类似的问题。

然后使用原生的DOM方法写了一次,发现也不行,一样。

var div = document.createElement(“div”);
div.style.width = “120px”;
div.style.height = “50px”;
div.style.border = “solid 1px #000000″;
div.innerHTML = “Hello CssRain!”;
parent.document.body.appendChild(div);

于是想到既然appendChild要parent.document,那么创建的时候是否也要parent.document.createElement呢?

于是把代码改成:
var div = parent.document.createElement(“div”);
div.style.width = “120px”;
div.style.height = “50px”;
div.style.border = “solid 1px #000000″;
div.innerHTML = “Hello CssRain!”;
parent.document.body.appendChild(div);

这样就成功了, IE6和IE7能用。

看例子:

http://www.cssrain.cn/demo/IEcreateElement/page1.html

总结:

如果你想在IE6,IE7中创建一个父页面元素,那么你必须使创建元素属于父页面。
var dummy = parent.document.createElement(“div”);
var t = parent.document.createElement(“table”);

在Firefox,IE8中,它允许在一个文档中创建要追加到另一个文档的元素。
所以在Firefox,IE8中,可以使用parent.document也可以使用document。

另外google浏览器非常怪异,很乱。如果要兼容google浏览器,那么建议换种思路吧,比如直接用 parent.函数名() 调父页面的方法。

2010年06月12日TeamWork

1条评论
355 views

IE6下appendChild的一个小问题。

项目中遇到一个小问题,但严重影响了用户体验。

我们先看一个例子:

http://www.cssrain.cn/demo/dialog_jQuery_ui/modal_looseState.html

这是我们项目中采用的jquery ui dialog 做的页面,我把他提取出来,简化一下。

例子中,点击add按钮弹出遮罩层,层中有2个文本框和2个多选框。

现在我们开始测试这个问题:

首先,我们在文本框上输入文本,把多选框也选中。然后点击窗口关闭。

接下来,我们再点击add按钮,重新打开层。

在ie7下,发现刚才所填写的,所选中的一切正常。

在ie6下,文本框的内容还存在,但多选框的选中已经丢失。

 

接下来为了找出原因,我看了下jquery的源码,然后发现jquery使用了appendChild这个方法,

于是我写了个简单的例子来验证是不是它引起的:

http://www.cssrain.cn/demo/dialog_jQuery_ui/b.html

经验证,果真如此,ie6下多选框选中状态在点击appendChild后,丢失了。

暂时解决办法是:

在多选框上添加:onclick="this.defaultChecked=(!this.defaultChecked)"

修改后的例子:

http://www.cssrain.cn/demo/dialog_jQuery_ui/modal.html

 

 

2010年05月7日用户体验

没有评论
251 views

交互设计原则–待续

       我们认为目标导向设计方法由4个P组成,即process、pattern、principles、practices(过程、模式、原则、实践),下面我将和大家一起讨论前3个P。
       交互设计总的来说是一件困难杂乱的工作,交互设计师常常被要求在紧迫的工期中想象和定义一个可能要运用最新科技,并且是谁都没见过的东西,我们必须深刻地了解产品所属的复杂的领域,必须平衡好竞争的优先次序,必须理解所用科技的约束和机会,还要对整个项目的商业环境有清楚的认识。这些让人眩晕的困难和挑战迫使我们必须要采用非常系统的方法,通过需求、场景剧本、人物角色,以及研究工作,我们知道我们将会获得正确的消息,从而可以在正确的时刻回答正确的问题,我们也将获得一种预知的能力,以及设计决策可以遵循的审计路线,还有模式和原则,它们也很有用,可以让我们不必在已经熟知的内容上浪费时间和精力。
       但是这些过程、模式、原则必须能够产生创造的火花,具备对新情况的想象力,还要运用经验和判断力来评价设计的优劣。创造力和优秀的设计判断力并没有现成的处方,需要花费相当多的艰苦工作、勤奋和技能来实现它。
       关于协同工作,需要特别指出的是有三类人群比较重要,交互设计者应该与之合作。第一类是商业决策人,他们要对产品最终是否成功及是否赢利负责,通常也是他们来决定是否为这项工作投资,因此从项目开始的产品概念、定义用户研究重点、以及需求定义和框架定义阶段就要和这些人一起紧密工作,商业决策人在设计细化阶段的介入也非常重要,因为不同方案之间的折中考虑可能会牵扯到开发预算和时间进度的决策。第二类,交互设计师也要和项目团队中的其他成员协同工作,包括架构师,用户和市场研究员,工业设计师,视觉设计师,使用手册的编写者,文案等,这种合作的目的是保证用户体验的方方面面都相互协调一致。第三类是程序员和其他技术专家,合作的目的是确保设计方案可以完美实现,设计可以适合技术和成本的约束,可以利用好技术带来的机会并且要能够和程序员进行有效沟通。
        学习交互设计遵守交互设计原则,做更好的交互设计是每个交互设计师的使命。

 

交互设计原则:交互设计不是凭空猜想

我的用户是哪些人? 

我的用户在试图实现什么?

我的用户如何看待我们要实现的产品?

我的用户会发现哪些体验是吸引人并且是有收获的?

我的产品应当如何工作?

我的产品应当采用何种形式?

用户如何同产品交互?

我的产品功能如何能最有效地组织在一起?

我的产品以何种方式面向首次使用的用户?

我的产品如何体现在技术上易于理解,让人喜欢,并易于控制?

我的产品如何处理用户遇到的问题?

我的产品如何帮助偶尔使用的用户或者生手用户变得更熟练?

我的产品如何为专家级用户提供足够的深度和力度?

交互设计原则:用户界面应该基于用户的心理模型,而不能基于实现模型
如果产品的表现模型非常符合用户的心理模型,通过提供能使用用户很容易理解其目标和需要如何得到满足的认知框架,便可以消除用户界面中一些不必要复杂性。

交互设计原则:目标导向的交互反映了用户的心理模型
用户的心理模型并不一定要真实或者准确,但它应该能够让用户更有效地工作,例如大多数非技术类的用户想象计算机的屏幕是其心脏,这很自然因为计算机屏幕是他们一直盯着的,CPU不同于视频显示器的事实并不能帮助他们思考与计算机交互的方式,即使这在技术上是更准确的概念。

交互设计原则:用户不理解布尔逻辑
虽然布尔逻辑是科学的理性的,但任何使用布尔逻辑来与用户交互的应用注定会遇到严重的用户界面问题,既然能熟练地使用自然语言,为什么一定还要他们用另一种不能熟悉的语言来表达呢?并且让人痛恨的是为什么还要重新定义一些关键词呢?

交互设计原则:不要全盘复制机械时代产品的用户界面,而一定要按照信息时代的客观情况进行改良

交互设计原则:没有人愿意停留在新手级别

 

交互设计原则:为中间用户优化
我们的目标既不是吸引新手,也不是将中间用户推向专家层,我们的目标有3个方面,即首先让新手快速和无痛苦地成为中间用户;其次避免为那些想成为专家的用户设置障碍;最后最为重要的让永久的中间用户感到愉快,因为他们的技能将稳定地处于中间层。

交互设计原则:将用户想象成非常聪明但非常忙的人
如果界面的表现模型紧密地符合用户的心理模型,则其可以在不强迫用户了解实现模型的情况下为用户提供所需要的理解。让新手转变成中间用户需要程序提供特别的帮助,而一旦成为中间用户,这种帮助反过来会妨碍用户。这意味着无论你提供什么样的帮助,它都不应该在界面中固定下来,当不再需要这种服务时这种帮助应该消失。
专家也是非常重要的人群,因为他们对缺少经验的用户有着导乎寻常的影响。当一个用户思考产品时,他会更加信赖专家,而不是中间用户的看法,听从专家的建议,即使这些建议并不适用,专家用户持续而积极地学习更多的内容,以更多了解其自身行动和程序的行为,以及表达之间的关系。专家欣赏更新的且更强大的功能,对程序的精通使他们不会受到复杂性增加的干扰。
永久的中间用户知道如何使用参考,只要不是必须一次解决所有问题,他们就有深入学习和研究的动机,这意味着在线帮助是永久中间用户的极工具,他们通过索引使用帮助,因此索引部分必须非常全面。
永久的中间用户会确定其经常使用和很少使用的功能,用户可能会遇到一些模糊的特性,但会很快地识别出自己经常使用的功能,中间用户通常要求这些常用功能中的工具放在用户界面的前端和中心位置,容易寻找和记忆。
永久和中间用户通常知道高级功能的存在,即使他们可能不需要,也不知道如何使用这些功能,但是产品具有这些高级特性的事实让永久的中间用户放心,让他们确信,投资购买使用这个程序是正确的选择。
同时我们的产品必须同时解决业余爱好者和专家可能会遇到的各种情况,但是不要让这样的技术需求,影响你们的设计理念,你必须为专家用户提供那些功能,也必须为新手提供支持,但必须半大部分的才智,时间,和资源为大部分代表用户—永久的中间用户而设计,为期提供最好的交互。
交互设计原则:交互设计“什么”,在设计产品的“如何”行为之前,要先定义产品做“什么”
在需求定义阶段确定的是设计什么,即我们的用户角色需要什么样的信息和能力来完成他们的目标,那么产品看起来是什么样?是什么为?怎样操作?感觉如何等。在需求没有经过明确定义和对问题是什么缺乏统一认识的情况下,我们无法对提出的方案评估设计的合理之处,所以我们一定要明确交互设计“什么”。

交互设计原则:需求定义阶段的五个步骤
1.创建问题和前景综述
2.头脑风暴
3.人物角色的期望
4.构建情境场景剧本

    情境场景剧本解决以下问题,1,产品使用时的设置是什么?2,它是否会被使用很长一段时间?3,人物角色是否经常被打断?4,单个工作站或者设备上是否有多个用户?5,和其一起使用的其他产品是什么?6,人物角色需要做哪些基本的行动来实现目标?7,使用产品预期的结果是什么?8,基于人物角色的技巧和使用的频繁程度,可允许多大的复杂性?
5.确定需要
    数据需求,功能需求,其它土需求,比如
        1业务需求可能包括开发时间,规则,价格结构,以及商业模型
        2品牌玫体验需要反映你希望用户或顾客将你的产品,公司或组织联系直心不烦的体验的特征。
        3技术需求可能包括重量,大小,形式要素,显示,能力局限性和软件平台选择
        4顾客和合作伙伴需求可能包括易于使用,维护和配置,承受成本和许可协议

交互设计原则:定性研究更快帮助识别用户和潜在用户的行为模式,帮助我们理解
产品潜在用户的行为,态度与能力(aptitude)
将要设计产品中所含的技术,业务和情境—问题域(domain)
问题域中的词汇和其他社会方面
已有的产品及其使用方式
交互设计原则:定性研究也通过以下方式帮助解决设计项目的进展问题
为设计团队提供可信性和权威性方面的依据,因为设计决定可能追溯到研究结果,
统一团队对问题域和用户所关心问题的理解,
使管理者能够在产品设计问题上做出更综合的决定,否则这种决定只能基于猜测和个人偏好。
产品如何融入用户生活的大背景之中?
用户使用该用产品时的基本目标是什么?
哪些基本任务能帮助人们达成这些目标?
哪些经历容易引起人们注意?这些经历同将要设计的产品有什么关系?
用户采用当前的方法完成产品预计完成的功能时会遇到一些什么样的问题?
交互设计原则:定性研究的类型
访谈利益关系人
    产品最初的想象,预算和进度,技术机会和制约,业务驱动,利益关系人对用户的看法,
访谈主题专家.
    通常是专家用户,知识渊博,但不是设计师,在复杂或高度专业化的领域必不可少,需要与主题专家
    在整个设计过程中保持联系.
访谈顾客
    他们购买产品的目的,他们在当前解决方案下碰到的问题,他们在购买你所设计的这类产品时的决策
    过程,他们在安装,维护和管理产品中的角色,与领域相关的问题和词汇.
访谈用户
     从用户那里了解的信息包括如下
     产品(如果目前产品还不存在,指类似系统)如何适应用户生活和工作环境:什么时候,为什么,以
     及如何使用产品。
     用户角度的领域知识:包括现有产品需要完成和不能完成的。
     当前任务与活动:包括现有产品需要完成和不能完成的。
     使用产品的动机与期望。
     心理模型:用户对工作,活动的看法,以及对产品的期望。
     现有产品的使用问题和挫折(如果目前产品还不存在,指类似系统)。
用户观察、人种学现场研究
文献调研
产品/原形和竞争审查

交互设计原则:用户访谈和用户观察
情境调查的改进
   
缩短访谈过程,缩减设计团队规模,首先识别目标,超越商业情境
人物角色假设
   
基于可能的行为模式以及区分模式的因素,人物角色假设试图在较高的层次上解决以下问题
    哪些不同类别的人可能会使用这些产品?
    他们的需求和行为可能会怎么变化?
    需要研究哪些行为范围和环境类型?
业务和消费领域的角色
    不同用户种类所需要的信息和通用任务集合,提供了重要的初始组织原则。
行为和人口统计变量
   
在同一业务角色定义中的人可能有不同的存在动机和对将来打算的不同渴望,行为变量可以捕捉必须先收集用户数据。比如电子商务网站,我们可能会找到如下与购买相关的行为范围
    购物频率,经常或不经常
    购物的爱好程度,喜欢购物或厌恶购物
    购物动机,买便宜的或只买需要的
环境因素
    尤其在商业产品中是用户所在组织之间的文化差导
组织计划
   
在创建人物角色假设后连同潜在角色,行为,人口统计学和环境变量,必须制定一个访谈计划来与负现提供用户接触的人进行沟通

交互设计原则:访谈者遵守以下规则,会收获大量有用的定性数据
1在交互发生的地方进行访谈
2避免一组固定的问题
     准备一些访谈中必须涉及的标准化的问题,尽管问题清单会随着访谈进程而有所改变,仍有助于确保每次获得足够的信息,以发现显著的行为模为。从而方便交互设计。
    面向目标的问题
       目标:什么事会使你一天过得很愉快?或是很糟糕
       机会:当前有什么活动在浪费你的时间?
       优先级:哪些是最重要的?
       信息:什么帮助你做决定?
    面向系统的问题
       功能:你使用产品做得最多的是什么事?
       频率:产品的哪个部分你用得最多?
       偏好:你最喜欢产品的哪些方面,什么是你的最爱?
       失败:你如何解决遇到的问题?
       经验:你使用什么样的快捷键?
    面向工作流的问题
       过程:你今天一早过来,做的第1件事是什么?之后呢?
       发生的事情和循环:这件事你多久做一次?什么事是每月或每周要做的,但不是每天都做的
       特殊情况:典型的一天是如何度过的,什么会是不寻常的事件?
    面向态度的问题
       期望:怎么看待你自己5年后的前景?
       避免:你不愿意做什么?哪些事你在拖延?
       动机:关于你的工作或者你的生活方式,你最满意的是什么?哪些问题是你常常会首先解决的?
3首先关注目标,任务其次
    要理解用户行为的原因—是什么激发了不同的角色个体的行为,发及他们希望最终如何达到目标,而不是他们执行的任务是哪些。最终交互设计跟踪这些资料来配合用户的目标。
4避免让用户成为设计师
5避免讨论技术
6鼓励讲故事
7请求演示和讲解
8避免诱导性的问题
交互设计原则:通过问卷调查或者开放式访谈详细了解人们完成特定任务的现状,任务分析应当关注如下方面
1用户执行任务的原因,即任务背后的目标
2任务的频繁与重要性
3提示,是什么促使任务开始执行?
4依从关系—哪些事是任务执行的条件,哪些事以任务完成为前提?
5有关人员,他们的角色与职责
6执行的具体动作
7做出的决策
8支持决策的信息
9有哪些问题—失误与意外情况
10如何纪正这些失误与意外
问卷调查完毕或者访谈结束以后,任务被分解为流程图或类似的形式,以表现动作之间的关系,也常常表现人与流程的关系。尽管任务分析是理解用户当前行为,识别困难所在并发现改进机会的重要途径,但是我们在这里优先关注用户的目标,用户的目前行为常常只是与陈旧的系统及组织交互的产物,通常与其喜欢的做法,或者最有效的行为方式极为不同。
交互设计原则:基于定性数据研究支持的模型,一旦有了稳定的设计想法,要判断你所做出设计选择是否有效,可用性测试是个有效的工具,而定性研究能帮助你们在设计中这一艰难的过程中有一个好的开始。

交互设计原则:通过构造人物角色获得以下信息
1.发现并确定行为的变量

   活动:用户做什么,做的频率和工作量
  态度:用户如何看待产品,所在领域和技术
  能力:用户所受教育和培训程度,用户的学习能力
  动机:用户为何会从事该产品领域范围的工作
  技能:用户在产品领域和技术范围内的技能
2.将访问对象和行为变量对应试起来
3.发现并确定那些显著的行为模式
4.综合各种特征和相关目标
5.检查是否有重复并且是否齐全
6.较为详细地描述属性和行为
7.指定人物角色类型(首人,次要,补充,顾客,接受服务的,负面人物)
交互设计原则:工作流或者序列模型对于捕捉企业组织内的信息流和决策过程非常有用,并且通常被表达为捕捉多种现象的流程表。这种工作方法要推行。
1.某个过程预期的目标或者结果
2.该过程的频度和重要程度,以及每个动作
3.是什么引发或者促进了该过程,以及每个动作
4.信赖关系,即在某个阶段必须执行的过程以及每个动作,哪个过程是依赖于该过程的完成及每个动作
5.牵扯到的人及其角色和责任
6.具体执行的动作
7.做出的决定
8.用来支持决定的信息
9.出了哪些错误—错误和特例情况
10.错误和特例情况如何被更正

交互设计原则:定义交互框架
1)定义产品外形因素,你要设计的是什么产品?研究用户将投入多大的注意力和产品互动,产品的行为将会对用户投入的注意力做出如何的反应;

2)定义功能和数据元素;

3)决定功能组和层次,从属关系;
   元素分组的目的在于更好的在任务中和任间来帮助促进人物角色的操作流程,这时要思考以下问题:
   哪些元素需要大片的区域,哪些不需要?
   哪些元素是其他元素的容器(比如屏幕,框架或网格)?
   容器如何组织才能优化工作流?
   一组关联的元素被使用时,其顺序如何?
   采用哪些交互模式和原则?
   人物角色的心理模型对元素的组织有何影响?

4)绘制出大致的交互框架,线框图,交互原型;

5)构建关键线路场景流程,通过线框设计充分描述所提供设计如何帮助用户来完成他们的目标,描述用户频繁使用界面的主要路径,流程,用户与组成线框图的不同功能和数据元素的交互,通过设计描述用户动作和产品响应的更为具体的细节。

6)通过验证性的情景测试来检查你的设计,比如清空数据库,配置,以及其他特别的请求等交互设计。
交互设计原则:作用于不同层面的设计原则分别是,设计价值,概念原则,行为原则,界面原则,多数交互设计与视觉设计的原则跨平台适用,同时运用行为与界面层面的设计原则使工作负荷降至最低
应当遵守以下设计原则:
设计价值(设计原则指导行为,其核心基于一系列价值理念);
    正直,无伤害,(无人际关系伤害,心理伤害,生理伤害,环境伤害,社交、社会伤害)的改善人类处 
          境(增进个人、社会及文化的理解;提高个人与团体的效优选法或效力;促进个人与团体之间
          的沟通;降低个人与团体之间的社会文化张力;促进经济,社会,法律等的平等;平衡文化多
          样性与社会凝聚力);
    目标明确,帮助用户实现目标,得偿所愿,适应使用情境和用户能力;
    有实效,现实且可行,帮助企业实现目标,适应商业需要和技术条件;
    优雅(形式上的优美和婉约,科学上的精确和简洁,高效、巧妙且富有情感,表现最简洁的完整解法,                                                 
         优秀的设计师而言,少就是多,形式的简约,完美不在于无以复加,而在于无可删减,万事莫不
         如此;同时拥有内在的和谐,优秀的设计让人感觉是一个整体,各部分平衡和谐,目标导向的设
         计开发流程把产品概念作为核心,通过迭代精确细节为创造内在和谐提供了理想的环境;适当地
         顺应并调动认知与情感)。
概念原则(用来界定产品定义,产品如何融入广泛的使用情境);
行为原则(描述产品在一般情境与特殊情境中应有的行为);
界面原则(描述对于特定的活动或过程,不同的人们有不同的心理模型,但人们很少按照计算机如何行动的机制来想象自己的心理模型,每个用户都自然地对软件如何执行任务有一个心理想象,用户通过这种心理想象来寻找原因而后深入了解机器的行为。
(2)少就是多;
     在不断减少界面元素的情况下仍旧保留产品的功能。产品设计的极简主义方法就是努力理解目的,此类产品的用户想要达到的目标是什么?没有了这种目的,交互产品就是混乱的技术功能的集合,例如Google的搜索界面是一个经典的极简界面设计,其中的每一个界面元素都是直观而有意义的;iPod shuffle ,Hog Bay软件的WriteRoom;但是一味要求简单化不值一文—减少是一种平衡活动,需要对用户心理模型的好的理解,前面提到的iPod有点奇怪,即用播放和暂停来关机,用菜单键来开机,一个经典的关系是视觉的简单会引起认知的负担,在这种情况下,这些行为很容易学习,出错的可能非常小,所以对整个产品的成功影响非常小。
(3)让用户直接操作产品,而不是强迫用户与产品讨论;
     不应当把界面想象成与用户的两方对话,用户更愿意与软件进行和汽车一样的交互,这种理想的交互情形不是对话,更像是在使用工具。
(4)工具就放在手边;
     为新手和中间用户提供的工具一般在工具栏或控制面板中,对专家用户来说,工具可以用键盘命令来得到。
(5)提供非模态的反馈;
     当需要为用户提供信息或者反馈时,可以有多种表达方式,常见方式是在屏幕上弹出一个对话框,这种技术就是模态的,它让程序处于一种模式,在返回常态之前也就是在用户能够继续任务这前必须处理。通常通知用户更好的方式是非模态的反馈(无论在什么时候,用户的信息在主要界面中显示,而且不会停止系统的正常任务流和交互那么这种反馈就是非模态的)。例,Word2003中,需要了解文档中字数有多少,必须从工具栏中单击“字数统计”按钮,出现一个对话框,若想返回工作状态,则必须单击这个字数统计对话框中的关闭按钮,这个行为有悖于非模态的反馈,但在Word2007中得到了交互改变。
(6)为可能的设计,为可能做好准备;
     程序员被按照能够创建处理多种可能的软件的能力来评判,然而不大可能的条件充斥在复杂的逻辑系统中,这并不意味着应把罕见的不平常的可能性直接带入到用户界面中,边缘情况突兀的出现是程序员设计软件的糟糕赠品,每天都使用和一年也用不了一次的对话框,控制选项一起出现在界面上。
(7)提供符合情境的信息;
     展示信息的的过程也可能是扰乱用户知觉的过程,数量或者数值就经常被滥用,视觉展示信息的专家说过,数量的展示应该回答一个问题“与谁比较?”信息的含义应该视觉化的显示,数字只是辅助。
(8)提供直接的操作和图形输入;
     软件经常以图形方式显式数值信息时失败,更罕见的是软件完全具有支持图像输入的能力,很多软件都要求用户输入数字,然后命令中将这些数字转换成为图形,很少有产品让用户画图,然后在命令中将图像转为数字向量。当一个清单需要重新排列时,用户也许想按照字母顺序排列,也有可能希望按照和个人的关系排列,所以应该能够把这些项目直接拖放为自己希望的顺序,而没有算法的干涉。
(9)反映对象和程序的状态;
(10)避免不必要的报告;
(11)不要用对话框来报告常态内容;
(12)避免空白的状态;
 PowerPoint每次新建一张幻灯时都要求你选择基础类型,如果能够记住常用和最近用过的类型或模板并且作为新文档的默认设定都能够更好用。
(13)请求原谅,而不是许可;
     当提到交互产品时我们常常说到“思考”,但这并不意味着软件应该有智慧并且试着通过推理论证做出正确的决定;相反,它应该做多数情况下可能是正确的事情,并且为用户提供强大的工具来帮助其进行第一次尝试,而不是仅给用户一个空白的状态,要求其接受,这种方式应用程序不是在请求许可,而是在请求原谅。
(14)要把命令和设置区别开来;
     设置和启动一个功能之间差别巨大,前者也许包含后者,然而后者不应该包含前者,通常,任何一个命令启动10次,可能才设置1次,因此最好使用户在10次中的一次清楚地请求设置,而不是10次中有9次用户拒绝设置界面。
(15)提供选择,而不是提问;
     用户不喜欢被问,不断的提问向用户暗示程序的特点如下,无知,健忘的,功能不强的,不主动的,不能自理的,烦躁的,过分要求的。
(16)隐藏弹射座椅的操纵杆;
(17)优化响应能力,调节延迟时间;
     不同的交互方案会由于响应时间而非常“昂贵”你应该提议尽可能小的响应时间下尽可能丰富的交互设计,同时也要提供可以适应已经选择了而无法重新回退这类情况的设计。当响应时间是不可避免时,与用户交流状况为他们提供取消导致延长任务的方法,或者能够让他们在等待时进行其他工作。
待续 MSN:aleendesign@hotmail.com

免费的用户行为跟踪采集

Userfly

Userfly可以提供免费的网页访客动作记录服务。只需要在网页中添加一段简单的Javascript代码,就可以记录访客从打开该网页到关闭整个过程中的动作。 Userfly能够记录的内容包括鼠标的移动、点击以及键盘输入等动作。下面这个视频很好的讲解了Userfly的使用方法和主要的功能http://userfly.com
免费用户每个小时记录10位用户(10个IP)的动作。Userfly也提供收费服务,除了可以记录更多的用户外,还支持身份验证和网页加密。对于网站拥有者来说,Userfly可以很方便的对用户行为进行检测和分析,通过A/B Testing等方法为网站UI/UE提供非常有价值的信息。但是对于很多网页访问者来说,如果知道他们所浏览的网页有这样的功能,可能就会敬而远之了。

 

Mouseflow
mouseflow是一款在线分析工具,它能对访客的浏览习惯和鼠标操作行为进行跟踪,从而获取人们对页面的关注范围和操作习惯,为你对页面进行优化提供了重要依据。它将汇总分析人们在页面上的鼠标操作动作,并以直观的“热区图”形式反映出来。

  打个比方:大家都见过baidu和google的页面热区图,从图中可以看出用户对于页面最点击最多,也就是最关注的区域。那么,如果你的站出现在红、黄色区域中,将收到的点击次数也将是最多的。
    在自己的站上分析出热区图数据,把访客最关注的内容放到热区范围内,形成对网站内容和布局层面的优化。我们就用mouseflow来完成这项工作。首先需要在你的网站上部署mouseflow跟踪代码。去http://mouseflow.com注册,然后添加需要进行鼠标动作跟踪的网站之后就能得到跟踪代码,把它部署到你网站中。然后mouseflow就可以为你记录鼠标动作了。但给出分析数据需要等几个小时的时间。当然,时间越长,记录的鼠标数据也越多,分析出来的数据也越准确。等待几天后再登陆mouseflow,就可以看到mouseflow详尽的统计数据了。点击View stats,可以查看网站的状态数据。mouseflow可以为免费帐户每月保存并分析100条操作数据。在这个页面里还有:页面浏览量、平均访问深度、平均访问时长、web页面情况、最流行页面、最热页面等统计数据。便于对网站的整体情况有一个大致了解。

  接下来是查看跟踪记录。在这个页面中我们可以查看到访客情况信息。如访客的地理位置,来源链接,进入页面,浏览页面量,停留时间,浏览器等。最酷的是,点击绿色播放按钮,还可以回放某访客在你页面上的每一次鼠标操作动作。看看他在浏览你的页面时做了怎样的操作。比如鼠标在哪里点击了,并且完整地回放是怎样浏览你的页面的。

   然后就是重点中的重点了:热区分析。mouseflow可以分析你的每一个页面数据。比如一个页面的的鼠标点击热区,以及视觉热区,红色为热,蓝色为冷。

 

ClickTale

ClickTale是一家国外的免费网站统计服务网站,但ClickTale并不以流量统计见长,它是对你的网站访客浏览行为进行分析的一个工具,以类似视频的方式将访问者在你的网站上进行的操作全部记录下来,你可以在线观看也可以下载到电脑上。利用ClickTale的访客行为视频记录,可以帮你更好的布局你的网页,给访问者带来更好的用户体验,以使你的网站回头客越来越多!有点类似Free8之前介绍的CrazyEgg,不过ClickTale提供的是访客动态行为记录,CrazyEgg提供的是网页热点分析图像,各有所长,可同时使用,相互参考。

网址:http://www.clicktale.com

上海五分钟诚聘前端开发工程师.

上海五分钟诚聘前端开发工程师

职位名称:前端开发工程师

你有两个方向可供选择:

平台方向
职位描述
1. 负责公司各游戏产品的web页面输出及优化;
2. 能快速处理主流浏览器的兼容性问题(FF/IE6/IE7/IE8/Chrome/Opera);
3. 使用Facebook/人人网/opensocial等Javascript API完成相关功能;
负责公司各管理系统后台界面的输出和Javascript开发;
游戏WAP版方向
职位描述
1.负责游戏wap版的前端开发工作;
2.保证在各种不同的移动设备中有良好的可用性;

职位要求
1. 本科或以上学历,一年以上前端开发相关工作经验,有WAP相关开发经验者优先考虑;
2. 精通各种Web前端技术,包括XHTML/XML/CSS/Javascript等;
3. 能熟练使用一门服务器端语言者优先考虑(如Java/PHP/C#/Ruby);
4. 有良好的沟通能力,善于和各种背景的人合作;
5. 理解Web标准,对可用性、可访问性等相关知识有实际的了解。
6. 关注前端技术发展方向,对HTML5和CSS3有所了解;
注:简历请附上作品链接,若有技术BLOG,请附上BLOG地址。

简历请投递:jobs[at]fminutes.com 或   kai.zhang[at]fminutes.com

加入我们,一起创造快乐!

上海五分钟是世界上成长最快、创造性最强的社交游戏公司之一。在这里,你的每一份努力,都会成为全世界玩家的一份快乐!我们可以给你:

  • 一个开放快乐的环境;
  • 一个有挑战性的岗位;
  • 一把潜力巨大的股票;
  • 一份有竞争力的薪水;
  • 一段共同奋斗的回忆!

2010年05月6日Ajax

3条评论
701 views

jQuery富客户端框架 DWZ.

DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.

DWZ富客户端框架设计目标是简单实用,快速开发。

欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能.

DWZ富客户端框架是开源项目,可以免费获取源码。希望更多的开发人员使用,共同推进国内整体ajax开发水平。

在线演示地址 http://dwz.duqn.com

在线文档 http://dwz.duqn.com/doc/dwz-user-guide.pdf

视频教材 http://dwz.duqn.com/doc/dwz-user-guide.swf

Google Code下载: http://code.google.com/p/dwz/

DWZ QQ群 107983317

2010年04月23日TeamWork

没有评论
473 views

Ext 编辑器正式版发布.

 
ExtJS.com
Ext Designer Release
Ext Designer is a fantastic new desktop application which eases the development of Ext interfaces. With a simple drag and drop interface, Ext Designer allows you to rapidly assemble your application’s visual structure and immediately export your code as Javascript classes or JSON. It can even be used by business managers and non-programmers to create a prototype, which can then be enhanced by developers.
Download Ext Designer Prerelease
Learn More
Ext Designer is available for every major OS, including Windows, Mac, and Linux.

返回顶部