Author Archive

交互设计禅意花园全面升级:Alitedesign.com

06月 8th, 2010

http://alite.aliued.cn已经升级为http://www.alitedesign.com 请各位好友进行连接更新。
If you enjoyed this article please consider staying updated via RSS. Links to your own social media pages could be added here.

This entry was posted on 星期六, 四月 3th, 2010 at 01:32 and is filed under 交互设计. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

Alite交互设计禅意花园全面升级为COM,CN不再使用

04月 3rd, 2010

http://alite.aliued.cn即将升级为http://www.alitedesign.com 请各位好友进行连接更新。
If you enjoyed this article please consider staying updated via RSS. Links to your own social media pages could be added here.

This entry was posted on 星期六, 四月 3th, 2010 at 01:32 and is filed under 交互设计. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

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

12月 12th, 2009

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


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

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

来自用户的抱怨

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

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

Read more »

亚马逊购物用户体验分析 (三)

10月 25th, 2009

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

上期回顾:亚马逊购物用户体验分析 (二)


方便的导航元素

任何网上商店的成功,至关重要的一点,就是用户可以简单轻松地使用导航条基本店铺分类,用户页面,购物车页面,采购页面等,像这样的任何购物体验点都可以轻松方便地被访问。

在这方面亚马逊做了很好的工作,例如下方截图所示编号的部分。

Navigational Elements

“商店所有分类”按钮悬停(#1)触发一个下拉菜单,显示了所有主要产品类别,让消费者轻松访问其他产品。导航元素的位置,恰恰是用户期望它被放在屏幕左上角LOGO下面的位置。

在LOGO的旁边(#2)有少数几个同样重要的链接,如登出的,个性化的推荐和用户的亚马逊个人页面。这一部分并不是非常突出,但出现的地方却是在顶部或上面与LOGO视觉平行的位置。

下一个元素(#3)部分有“购物车”“愿望清单”。购物车功能的位置几乎没有什么变化,总是位于电子商务网站布局的右上角。

每当用户浏览产品页面时,邀请他们加入自己的产品购物车或希望清单(#4)。恰好这个位置是在亚马逊产品及产品细节的右边,用户可以很自然地找到此功能

最后,亚马逊邀请用户在亚马逊市场查看同一产品的”二手和新品”版本(#5)在其集市上销售的产品显然在短期内不能增加亚马逊的收入,但它可能获得长期的回报,因为仅知道此选项,可让许多购物者选择亚马逊作为其主要目标,甚至二手商品也是如此。

亚马逊这样做是因为它很清楚的认识到:把用户的利益放在首位这对长远大有裨益。

您还会注意到的这样的一个元素是其他五个中最为突出的一个,它具有艳丽的色彩,梯度和微妙的三维效果。

这当然不是巧合:亚马逊希望在重要的地方引起用户的注意。

任何网站的成功关键点是导航元素的位置就这一点而言,亚马逊竖立了很好的榜样,做到像用户期望的那样:确保在任何时间需要时,最重要的内容均可找到。


Read more »

亚马逊购物用户体验分析 (二)

10月 23rd, 2009

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

上期回顾:亚马逊购物用户体验分析 (一)

“查找内部”功能

书是在亚马逊最常被购买的产品之一,所以毋庸置疑亚马逊的开发小组已经建立了一个关于“查找内部”内容的功能。

“查找内部”的功能可以让购物者观看到书籍的某些部分:通常的封面,目录,第一页,索引和封底。

这可能会非常有用,因为消费者能够一目了然,通过一个内容表或目录就知道一本书是否适合他们。

Look Inside Feature

如出现在屏幕上面的图像和一些进一步的行动,“查找内部”的功能(这可找到不计其数的书籍)从任何网页(例如从拥有书籍封面缩略图的页面或从个别书籍的产品页面)访问。

当鼠标Hover在书籍缩略图上时,产品页面将打开关于该书的可选章节菜单浮动框。


Read more »

亚马逊购物用户体验分析 (一)

10月 22nd, 2009

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

现在电子商务网站的设计,正面临着一系列的挑战,其中最主要的挑战是:我们尝试建立一种用户体验,来提高用户在线购物的可能性

为了对抗网上激烈的竞争,消除网上多疑购物者的顾虑,设计人员可以采取一些措施来改善他们网上商城的可用性。

自1995年以来, 亚马逊已经成为在电子商务B2C领域里,公认世界领导者。它的成功并非偶然,也不仅仅是在一个正确的地方与一个正确的时间的结果。

亚马逊的成功是一个强大用户购物体验的直接结果。

在本文中,我们将讨论大量有特色的亚马逊购物体验 ,今天无论在原则上和实践上,都为许多的电子商务开发者,提供了值得仿效的模式。

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月 20th, 2009

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

    1
    Read more »

    《UI Designer》专栏作家

    07月 15th, 2009

    很开心能参加《UI Designer》第二期文章撰写,成为专家栏目的签约作者!呵呵希望能在这个新的平台认识更多的UED朋友,和大家一同进步一起交流!

    《UI Designer》是由UIRSS.com创办,UIRSS.com、ChinaUI.com、UItimes.com三家UI设计媒体联合主办的UI行业权威电子杂志。这一期伴随视觉同盟(联合主办)和iconfans(联合发行)的加盟,声势更加浩大。

    《UI Designer》第二期的正式发行,要感谢各位UI界同行的关怀,要感谢各位设计师、作者的支持,更要感谢所有热爱和喜欢这本杂志的读者朋友们的信赖。因此,从下一期起(预计2010年4月发行),《UI Designer》杂志将会定期发行(发行周期暂定为每半年一次)。

    注:下文加粗体是我写的文章.
    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 »