Archive for the ‘UCD|交互设计’ Category

交互设计模式(四)-Spatial Memory(空间记忆)

12月 12th, 2009

[版权声明]:版权归作者Alite所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com/


上期回顾:交互设计模式(三)-Tagging(标签)

当人们进入一个全新环境时,他们需要对空间建立认知模型,要有个空间记忆的感觉。同样,当新用户来到全新、陌生的网站时,用户也希望有个类似站点地图的东西。但如果想让用户更加自如的使用网站,让用户毫无顾及的去尝试,不怕迷路,我们必须为用户建立起空间记忆模式。它犹如沙漠中迷途者手中的指南针与行驶在荒原上汽车装的GPS一样,那么在网站上空间记忆模式的应用有哪些表现呢?

来自用户的抱怨

“我敢发誓,这个按钮一分钟以前还在这里。它哪里去了?”

当人们使用东西或文档时,他们经常通过回忆它们在哪里来再次找到它们,而不是它们的名字。很多网站把它们的表单按钮——确定、取消等——放在预定的位置上,部分原因是由于它们的空间记忆依赖性。在复杂的应用系统中,下面这些元素也可以由记忆它们的相对位置找到:工具条上的工具、层级结构中的对象等。因此,你应该小心使用像响应式展开(Responsive Disclosure)这样的模式。把某个东西添加到界面上通常不会引起麻烦,但是把控件重新排列会打乱空间记忆,从而难以找到。这得看具体情况,如果你不确定的话可以做一些用户测试。空间记忆和习惯之间的关系很密切。和习惯一样,空间记忆也是一个在应用中及在应用间保持一致性会带来好处的理由。人们会期望在类似的地方找到类似的功能表现。顺便说一句,网站导航菜单列表的顶部和底部都是很特别的区域,从认知的角度说,与处于菜单中间的项目相比,顶部和底部的项目会获得用户更多的注意力,记忆也更持久。如果他们发生改变,对用户的重新建立空间记忆势必会造成影响,请慎之。

Read more »

交互设计模式(三)-Tagging(标签)

10月 15th, 2009

上期回顾:交互设计模式(二)-Pagination(分页,标记页数)

[版权声明]:版权归作者Alite所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com/

Tagging(标签)

问题摘要

用户往往想通过流行或最详尽的主题来浏览内容。

实例

tag-cloud-lastfm

何时使用

  • 当您的网站用户想要自己添加内容和可能更多的标签时。
  • 当您的网站已超过10-20不同的标签,并且它们彼此都具有不同的重量后计数时。
  • 注:当需要显示具有严格等级结构的类别时不要使用Tagging。
  • Read more »

    有趣的交互设计BLOG集锦

    10月 10th, 2009

    平常很少关注交互设计类的BLOG,只是看些交互设计方面的书籍,分析报告和论文.发现其实身边还是有很多有趣的交互设计BLOG为我们的工作和学习带来无限的乐趣.

    下面是国外有趣的交互设计BLOG集锦:

  • Pulse Laser
  • Dan Saffer
  • Functioning Form
  • History of The Button
  • Small Surfaces
  • Office UI Blog
  • Design Observer
  • Wisdump
  • Bokardo
  • frogblog
  • Creating Passionate Users
  • Valleywag
  • 希望以上资料能够帮助大家更便捷,更多地获取最新最好的研究材料.在后续的研究中我会把在交互设计BLOG中有趣的发现,以BLOG文章的形式与各位交互设计爱好者分享.

    设计原则-控件Balloons(气球状提示)

    08月 14th, 2009

    [版权声明]:版权归作者Alite所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明
    :http://www.alitedesign.com/

    Balloons(气球状提示)

    问题摘要

    气球状提示(Balloon)是一个小型的弹出窗口,用于通知用户出现非关键性问题或控件处于某种特殊情况。

    实例

    图1

    • 注: 气球状提示由图标、标题、正文文本组成,且所有这些部分都是可选的。
    • 注: 当用户试图提交操作的时候,任何未处理的问题都必须由其所有者用户界面来处理。
    • 注: 气球状提示通常与文本框或其他使用文本框来改变值的控件一起使用,如组合框、列表视图、树形视图等等。
    • 注: 保持控件之间的一致性.当发现不一致性出现时,气球状提示不再适用.
    • 注: 如果其他类型的控件已经进行了很好的约束,就不再需要气球状提示来给出额外的反馈。

    Read more »

    交互设计模式(二)-Pagination(分页,标记页数)

    07月 28th, 2009

    上期回顾:交互设计模式(一)-前言

    [版权声明]:版权归作者Alite所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明
    :http://www.alitedesign.com/

    模式库

    在模式库里,我将列出所有电子商务网站需要的模式.以下将罗列出经典常用的模式案例,我也试图让这些模式看起来更有趣味性与实用性。(Yahoo模式库也有对Pattern的一种定义。)

    模式归属类别

    为了方便调用和维护模式库中的各种模式,首先将模式库中的模式分成三大类:用户需求,应用需求,语境下的设计.在用户需求类别中,有一种类型叫基本交互。这里我将从这个纬度把基本交互中所涉及的模式一一罗列讲解。

    Pagination(分页,标记页数)

    问题摘要

    用户需要查看数据的一个子集,却发现所有数据是显示在一页的,这时候查看变得非常不容易。

    实例

    30_0_0_427
    Read more »

    交互设计模式(一)-前言

    07月 10th, 2009

    [版权声明]:版权归作者Alite所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明
    :http://www.alitedesign.com

    交互设计师通常会遇见这样情景:经过一番冥思苦想与挣扎,终于把PD提交的需求快速的完成了.当然,按照流程就是提交到视觉设计师那了.但在视觉设计过程中,发现有些用户行为和操作路径,在DEMO中并没有涉及到,当然就会被视觉设计师打回返工.这样几经周折才算把问题都想清楚设计完整了.

    先不提孰是孰非,如果交互设计师能够充分掌握交互设计原则与交互设计模式会不会把这种情况出现的几率降低到最少呢?答案是肯定的!设计原则可以指导设计师如何设计美好,有效的产品,以及系统与服务,并且如何正直成功地从事设计工作.设计模式可以针对某类特定的设计问题,提供可供效仿的概括性解决方案.但是我们不要把设计原则和设计模式当作尚方宝剑,时刻都要问个为什么在做判断.理论放到实战中只能做参考之用,不要盲目崇拜理论而忘记推陈出新.理论是实践中总结出来的,也有可能被实践中新的理论替代.

    20081224005405

    交互设计模式概念:
    设计模式是一种提取有效的设计方案,将其应用于类似问题的方法.尝试将设计理论形式化,记录最好的实践工作,有助于实现以下目标.
    *节省新项目的时间和精力.
    *提高设计方案的质量.
    *促进设计师与程序员的沟通.
    *帮助设计师成长.

    尽管在设计教育与提高工作效率方面,模式的重要性不言而喻.交互设计的模式发展尤其令人兴奋,因为这些模式代表用户体验与相关活动的优化成果.

    其中有很多优秀的交互设计模式学习网站:
    http://www.welie.com/patterns/index.php
    http://www.slideshare.net/
    http://ui-patterns.com/
    http://patterntap.com/

    Read more »

    Web页面空间利用率的思考

    07月 1st, 2009

    [版权声明]:版权归作者Alite所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com

    很早就听说韩国网站的设计师们很会利用空间,来创造更多的信息承载量.最近浏览了几个韩国SHOPPING网站果不其然,就拿小小的广告轮播来说,非常佩服他们的设计功底.

    Naver shopping

    e8bdaee692ad1

    我们可以看到广告区域总体由两部分组成:左边区域是显示的主体区域,使用过程体会到承载了9件产品的显示任务;右边区域承载了3条信息的自动轮播显示任务.如果用户比较关注细节,用户会发现当鼠标滑过左边区域时候,会有绚光出现.当然这不是最精巧的地方,当用户点播右边区域的展开按钮的时候用户将看到以下的展示.

    Read more »

    电子商务搜索引擎的细节设计

    06月 23rd, 2009

    search

    [版权声明]:版权归作者Alite所有,转载文章请注明作者与文章出处:http://www.alitedesign.com/

    最近在使用Apple.com/Ebay.com/Amazon.com/shopping.yahoo.com的时候,发现一些用户使用细节的小问题.针对这些问题,我体验了前面四个网站的处理方式,觉得还是有可以借鉴的东西.
    Read more »

    交互设计专业推荐书籍整理(一)

    06月 16th, 2009

    [版权声明]:版权归作者Alite所有,转载文章请注明作者与文章出处:http://www.alitedesign.com/

    整理前言:
    什么书籍能帮助交互设计师更好学习交互设计,提升实战能力呢?曾经也读过很多关于交互设计与用户体验的国外书籍,但想针对实战的书籍确实比较少.交互设计是设计学科的一个分支,设计的最高境界为禅意最高境界,通俗点说就是设计的精髓有时候真是只可意会不可言传.”对设计的感觉是经过多年经验积累出来.”-腾讯视觉晋兄如是说.即使这样,我想前人走过的路,总结的经验,总会给后人予以启示吧.因此我以一种科学的态度,去探索交互设计中的奥秘,总结每次经历过的经典案例,享受读书的乐趣.最后发现其实交互设计还是有很多规律可寻的,下面是我整理的交互设计的专业推荐书籍,希望能帮助更多的设计师认识交互设计,理解交互设计,最后很好的掌握它.

    Web导航设计又名: Designing Web Navigation

    作者: James Kalbach
    译者: 李曦琳

    s3378240
    简介 · · · · · ·   
    业务目标的实现,依赖于用户能够找到并使用您提供的服务。本书为您讲述创建有效导航系统的基本设计原则、开发技巧和实用建议,并附有大量的真实案例。本书研究深入,援引广泛,是极佳的参考资料和教学指南,适用于初级和中级网页设计师、产品经理和其他非设计职位,以及寻求全新视角的Web开发老手。

    作者简介 · · · · · ·
    James Kalbach现就职于领先的法律与新闻资讯提供商LexisNexis,任人因工程师,为其基于Web的搜索应用开发界面。他曾任Razorfish德国公司信息架构总监。他拥有Rutgers University的图书情报学学位和音乐理论及作曲硕士学位。
    他是Boxes and Arrows(关于用户体验的著名在线期刊,http://www.boxesandarrows.com)的助理编辑。他还是Information Architecture Institute的顾问委员会委员和European Information Architecture会议(http://www.euroia.org)的筹委会委员。
    工作之余,音乐是他的主要消遣。他与妻子Nathalie和小猫Niles住在德国汉堡,是一支当地小型爵士乐队的贝司手。他还是一个精酿啤酒迷,经常会以pivo的网名在著名的在线啤酒社区Ratebeer.com(http://www.ratebeer.com)上发表评分和文章。
    笔者推荐理由:
    这是本在众多同类WEB导航设计中介绍最全面和详细的书籍,在那里面我了解很多经典的案例,以及很多最新最权威的模式理论.最近对分面浏览十分着迷,研究了很长时间,查询很多资料都没找到它的源头.最后在WEB导航设计中找到了它,原来它是伯克利分校研究员研究出的,其中也给出了很多案例和原型.总体来说,如果你正为WEB导航设计而烦恼,就赶紧翻开它找寻答案吧.
    Read more »

    交互设计师怎样和产品团队合作

    06月 8th, 2009

    [版权声明]:版权归作者Alite所有,转载文章请注明作者与文章出处:http://www.alitedesign.com/

    交互设计师需要怎样和产品团队合作呢?除了要定义行为和与之有关的其他设计学科的交互之外,我们发现,还必须要定义好交互设计在一个企业中的位置。我们相信,要建立好一个严格的产品开发过程,设计必须要平等地与工程、市场,以及业务管理进行协同工作。这种协同工作需要明确每个方面的责任和权利,企业从设计中获得的收益将会有极大的提升。下面我们介绍的这种责任的划分,平衡了每个方面的权利。可以极大地提高设计的成功率,并保证企业在产品开发的整个周期中给予应有的支持,以及其他更多的好处,我们建议的这种责任和权利的平衡关系如下。
    Read more »

    WordPress博客中的SEO应用实战

    06月 1st, 2009

    [版权声明]:版权归作者Alite所有,转载文章请注明作者与文章出处:http://www.alitedesign.com/

    通过修改一些配置选项,并用第三方插件扩展其功能,可以使WordPress更易被发现.要开始的话,请登录WordPress管理员控制面板.
    定义更新服务

    WordPress第一个要修改的就是扩展发布新内容时ping更新服务商的数量.如Technorati和Google博客搜索等服务,跟踪网络上发布的所有博客内容.WordPress发出一个简短的消息(称为ping)到这些服务上,使他们能够更新到最新的内容.当博客ping各大更新服务商上时,用户马上就可以搜索聚合器,搜索引擎和目录来找到你的站点.
    Read more »

    谁为用户买单(2)——无结果页面反馈提示交互设计

    05月 17th, 2009

    [版权声明]:版权归作者Alite所有,转载文章请注明作者与文章出处:http://www.alitedesign.com/

    接着上个话题“谁为用户买单”聊下去。有一种页面大家都很熟悉,就是当用户使用搜索引擎搜索关键词后,如果数据库没有找到匹配的结果,所提供的反馈提示页面——专业上我们称其为“无结果页面”。

    下面举几个常见的无结果页面的例子让大家更了解下这样的交互设计,我们怎样更好地给用户提示。

    GOOGLE的无结果页面

    googlee697a0e7bb93e69e9ce9a1b5
    Read more »

    谁为用户买单(1)——电子商务网站的交互设计

    05月 13th, 2009

    wordbuilder_s

    [版权声明]:版权归作者Alite所有,转载文章请注明作者与文章出处:http://www.alitedesign.com

    嘀咕嘀咕:

    每次写文章往往开头是最难的,总想给UED读者不同的sense。就像我们设计产品总是想迎合我们的用户,最后觉得好似跟在用户后面狂奔的傻子。我们希望通过教育我们的用户来尝试一些新鲜的玩应,用户是否买单就很难说了。从一个极端走向另一个极端,显然是不科学的。用户的需求一定要听,但要有鉴别的听。好的设计用户总愿意为它买单,差的设计用户会让我们为他买单。
    Read more »