没有评论交互设计指南系列(9)—一次点击

2010年2月8日 2 views

有一次去超市换货,本能的找到服务中心,服务中心说这个业务在超市旁边一个房间里,由于忘记带小票,那个小房间的人让我去另外一个小房间调电脑里的记录,调出来我拿着记录单去了卖货的地方才换货。其实超市退换的需求也不少,整个过程服务态度很好,但是很麻烦。

其实我们日常生活中很多事情,办起来过程很罗嗦,办事的工作人员说这是应该的,都这样做,可应该不应该,谁是评判标准呢?

交互设计一个很重要的目地就是让用户方便快捷的执行任务和完成工作。在互联网产品的交互设计中,尽可能的消除每一个附加工作,做到尽可能一次操作而完成任务。一次操作是个概念,并不是完成任务只能点击一次,而是减少用户操作次数。使之提高工作效率。

交互产品经常包括一些不必要的具有繁重工作量的交互,对于用户而言,这些就是附加工作,附加工作不直接实现目标,但对于实现目标是有用因素。附加工 作的问题是它们在消耗我们的精力,而不是直接实现我们的目标,如果能够消除附加任务,我们就能让用户更加又效率,更有生产率。并且能够改善软件的可用性。 作为一个交互设计者,你应该对附加工作的存在非常敏感,用户界面中附加工作的存在是造成用户不满的首要原因,因此每一个设计者都值得关注各种形式的交互附 加工作。(About face 3,第11章:消除附加工作)

那么,如何减少用户的附加工作,保证用户工作效率呢?
阅读全文…

分类: 交互设计 标签: , ,

没有评论交互设计实用指南(8)—深广度平衡

2010年2月4日 15 views

相信大家对街边林林总总的房产中介并不陌生,那么我们先看看下面这张图片。

图1 

从右侧这家店的橱窗里,我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类,并且在视觉上做了一些划分,让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题:深广度平衡
阅读全文…

5 条评论第四期 WEB标准化交流会 参会总结

2010年1月31日 159 views

昨天参加了第四期 WEB标准化交流会 将收获总结下
讨论会地点是在Sina的一号会议室 感谢sina的友情赞助 到场的嘉宾还有 豆瓣:张克军 百度:月影 新浪:赵立元 和火狐中国的同学
这是我第一次参加这个会议 貌似目前前端的会议也不是很多 昨天对于W3CTech会议还有一个重要的意义 就是北京 上海 广州 三个地方同时在开 也象征着 前端工程师的规模 和地位 越发的重要了,也更期待着下次的会议 与大家一起交流~共同进步

说说具体的吧:昨天的话题分为2个阶段 1.javascript 2.html5+CSS3

总结一下:
第一个阶段 由几位嘉宾先讲了一下 我听得有些糊涂 可能昨天的话题范围太广了 不过收益颇深
我比较统一kejun的观点 无论自己写的js库,第三方的库,主要都是从那几方面入手
1.DOM标准 提供一些标准的DOM操作功能[event,选择器,等等……]
2.ajax支持,FX(一些效果)支持
3.通用的一些widgets
那么现在我们所缺乏的 也就是JS的组织 与管理 ;月影讲的百度有啊在写的js库 也是更多的像这方面靠拢
[YUI3 已经有一些依赖机制 等方便我们管理自己的JS]

第二个阶段:可能HTML5+CSS3离我们真的很近 但是离用户却有些远的原因吧 话题交集在浏览器上面了

目前IE系列浏览器没有对HTML5和CSS3的支持 而在目前的情况 IE的市场占有率确实>50%的
所以话题最终结论可想而知
1.针对自己所处的行业与用户群来适当的进行一些尝试
2.可以用渐进增强的方式 为高级浏览器用户 提供更好的体验
3.作为专业的前端工程师 我们必须去学习与研究新的技术

再上几句会议上经典的:
你该换家公司为中国互联网做贡献了!
前端工程师的价值不在于切页面,也不在于极快地切页面
你用IE6!你全家都用IE6!
用IE收手续费 用其他浏览器优惠!
前端不可以挣钱 但可以省钱!

1 条评论Zen Coding初体验 确实爽

2010年1月28日 49 views

一直听说Zen Coding 最近一直在研究前端最合适的IDE 所以也索性尝试了一下

ZenCoding项目地址:http://code.google.com/p/zen-coding/

先说环境 我是在MyEclipse > aptana 下面安装的Zen Coding

安装方法不难 建立一个项目 新建一个文件夹叫 script 然后把Zen Coding拷贝进去就可以了

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的,所以,Zen Coding也是支持Eclipse的,只是需要一个EclipseMonkey插件的支持,Aptana已经封装了这个插件,所以如果你使用 Aptana,下面的第一步可以跳过。

  1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如 果你使用Aptana,可跳过这一步)
  2. 在你的当前工作去创建一个顶级的项目,给它命名,比如,就叫zencoding
  3. 在新创建的项目中创建scripts文件夹
  4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
  5. 安装之后,Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项:

  • Aptana版的官方插件是基于MAC机的,如果你用的是Windows,需要手动更改快捷键(在每个文件头部的注释片段中更改)
  • 官方的文件编码有点儿乱,修改官方js的时候,请注意编码问题,修改不当会造成相关功能的丢失

试用了一下发现确实很爽

具体的看下面介绍

阅读全文…

没有评论懂得交互的视觉设计师更具有竞争力

2010年1月26日 60 views

看到这篇文章感觉很亲切,为什么呢 因为昨天下午刚刚给公司视觉设计师讲了一下交互设计的重要性,并让他们更多的接触交互设计,理解交互设计的思想 才能更好的通过视觉表现传达给用户最好的体验

  视觉设计师就是把视觉传达给用户、给观众,我们是视觉信息的发送者,把准确的内容发送给我们针对的接受者,也就是把我们的情感,我们的认知,传达给我们的用户,这就是视觉设计师的工作。交互设计师的工作是让产品易用、有效的让人愉快的去使用产品,他们也致力于去了解用户的心里期望,从而设计出用户所需要的产品。其实交互设计师与视觉设计的目的都是一致的,都是让用户来喜欢上我们设计的产品。说回来,我的职业是一位视觉设计师。从一位艺术设计师到一位产品界面设计师。在职位转变的过程中,也慢慢开始接触交互设计这一块,也对交互产生一些理解,我觉得视觉设计师也应该略懂交互设计。

阅读全文…

分类: 交互设计, 视觉设计 标签:

没有评论视觉设计时不应产生新信息

2010年1月25日 41 views

纯粹的对视觉效果的追求是有价值的。

原始人带骨制的项链,为的是看上去很美。在身上弄纹身,显然也不是拿自己的皮肤当记事本用。(现代人中,michael scofield是个例外。)

现代人新修缮的前门大街。这条大街的北段,基本上是依照原有建筑翻新的,可以理解为新古典主义吧。南段则是新建的房子,由于没有明确的参照,设计师可以自由发挥,这给饱学了现代主义理念的设计师提供了机会,设计了很据现代主义的房子—无装饰的,平顶,方方正正的(也许可以节约建筑成本,至少在现代主义兴起的阶段是这样考虑的)。作为一条传统商业街上的建筑,使用了与周围大杂院一致的灰色,门窗上适当使用了一些传统元素。大概应该算是后现代主义吧。

阅读全文…

分类: 视觉设计 标签: , ,

1 条评论交互设计实用指南(7)–避免迷路

2010年1月24日 85 views

任何位置都能明确“我在哪里?这里有什么?从这 里能去哪里?”

小时候,童话故事都告诉我们,迷路可不是一件好事。那会伴随着困惑、沮丧、愤怒和恐惧。为了避免迷失方向,我们发明了各种导航工具,大到卫星定位系 统,小到指南针,人类在这一事情上,极具创意。

在网站上迷失方向,虽然不是什么生死攸关的事,但会带来许多负面影响,如:用户体验下降、任务不能完成,用户流失等。我们可以通过良好的导航系统来 避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置,并帮助他们制定更好的查询策略,增进对内容的理解。
阅读全文…

分类: 交互设计 标签: , , ,

没有评论交互设计实用指南(6)–标签明晰、有效

2010年1月24日 59 views

导航标签彼此互斥、完全穷尽。

导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签,代表的内容通常会包括公司名称、电话、地 址、邮箱等信息。它可以是文字,也可以是图片。在英文里被称作“Label”,并不同于我们常说的“tag”标签云图。

说简单一点,我们就是要为网站的信息做分类,并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情,所以在导航设计流程中,它的重要性 也常常被忽略。在设计产品时,常会听到这样的话:“这个栏目该叫什么名字?恩。。。先别管吧,把更重要的工作做了再说。”

然而,站在用户的角度,导航标签代表的是整个网站的内容、产品的结构,他们必须依靠标签的内容和组织方式来寻找网站中的信息。

标签是访客行为的触发词,好的标签能吸引访客注意力,引导他们准确地找到信息。导航标签是访客预测目标页内容的重要依据,紧跟着它的就是导航中的关 键点,网页的过渡,所以尤为重要,有歧义的标签逼人猜测它的意图,甚至让用户走错路或迷失方向。
阅读全文…

分类: 交互设计 标签: , , ,

没有评论漂亮的图片区域设计

2010年1月24日 59 views

【译者的话】很 多网页都有一个醒目的大横幅区域,但设计上大都千篇一律,如果你访问FACTOR DESIGN网站,你会发现,该区域的变化比你想象中要丰富得多——并不是通过特效,而是通过版面设计,他们对横幅的间隔设计让你在任何平面设计中都能获 得灵感。

由图片构成的区域显得结构清晰、重点突出及信息有效传达,并且具有多种意 想不到的功能。

Factor Design网站令人一见难忘,其版面结合了作品展示及手册设计的特点形成漂亮的效果。白色的 开阔区域,高度简洁及最小化的构成,柔和的颜色搭配,通过一些隐藏的表格整洁清晰地呈现出来。

这个版式结构我们有两点是特别欣赏的:一是它采用了印刷类的平面设计风格,使用衬线字体, 文字颜色对比低调柔和,不同文字栏宽度形成强烈对比。二是上面的水平图片区域设计,使整个版面显得优雅漂亮。这个图片区域只看上一眼,你可能不能一下子认 识它的所有优点,但我们之所以深入讨论这个区域是因为如果从技术上来说,你采用了同样这种方法,就可以得到同样漂亮的相似效果——无论是网站设计还是其它 平面设计。看一下我们能够从这个网站设计中学到什么。
阅读全文…

分类: 视觉设计 标签: ,

2 条评论[译]jQuery 1.4 发布:15个新特性实例精讲

2010年1月17日 166 views

jQuery 1.4 最近发布了。 超乎大家的预期,这次并非简单的修修补补,1.4 包含了很多新特性、功能增强和性能提升!本文即向您介绍这些可能对你十分有用的新特性和优化增强。

你可以立刻下载jQuery 1.4试用: http://code.jquery.com/jquery-1.4.js

下面带你进入Jquery1.4新特性实例精讲

阅读全文…