• Skip Navigation
• 注册

西贝的交互设计

搜索：

• Home
• About
• Qzone

Archive for the ‘用户体验’ Category

服装搭配看点（1）

案例一

网址：http://www.payeasy.com.tw/

亮点：
 名词概念挺有意思“陪你shopping”“美女衣学馆”。
 对新品的包装很注重，能够使用一些比较吸引眼球的东西。并且把价格和用户关注的信息放到第一排，而把名称紧接其次。

案例告诉我们：
名词的运用需要更加的准确，更加接近生活。建议采用一些通俗的、有趣的词汇。
尽量只提供阅读者所需要的信息，依照阅读者需要的顺序来排序，这样更加的吻合受众群体的阅读习惯。建议用户不是第一感知就需要的文字，例如物品名称，优先级就可以放低。

(全文 …)

我读《胜于言传》——网站内容制胜宝典

书名：《胜于言传》——网站内容制胜宝典
            （英）Janice（Ginny）Redish 著

在序中看到一句我喜欢的话：
“书是死的，人是活的。还是那句话，它永远都是过时的，你阅读它理解它并在实践中得到运用，书就被更新了。“——方刚

第一章
喜欢第一章的名字“内容！内容！内容！”它让我觉得很有力量。

那么就开始解读第一章：
人们是冲着“内容”而访问网站的
    • 能够解答他们的问题或帮助他们完成任务的信息。
    • 易于查找、易于理解的信息。
    • 准确的、最新的、可信的信息。
信息=内容。想到臭鱼提到的“设计师的工作就是更好的传达信息”，这是很对的，内容和信息等价，那我们的工作无疑是服务于内容。
 
Janice和Nielsen有个一样的观点：
         多数人会在网站中进行粗略的浏览。他们快速扫视所有导航，希望进入他们想要进入的页面。
         即使在最终（目标、信息）页面中，大部分用户在逐字阅读之前还是会大致浏览一番。
还有2个比较认可的研究观点：
    • 66%的[专业人士]用户一旦在网站中有了不好的体验，就很少会再次访问该网站。
    • 网民决定放弃一个网站只需要平均不到两分钟的时间。

什么是有效的网站内容
    • 优秀的网站内容像在与人对话（有问又答，直截了当，不用太多的搜索、筛选等组合）
    • 优秀的网站内容可以解答人们的疑问（设计的比常见问题解答（FAQ）还要简单）
    • 优秀的网站内容可以让人们从网站中汲取信息，并不断前行（获得我需要的东西）
    • 按照不同用户、不用主题、不同问题和不同需求进行分组（结构化跟易于理解）
       （）括号内容是西贝的解读哦~

哇，第一章，还没有开始就结束了，好快哦~

明星派的初体验

 Stardoll (www.stardoll.com)是全球最大的在线虚拟时尚娱乐网站。它借助独一无二的「社交游戏」环境充分展现用户的创造力，将孩子般的童真游戏和社交网络紧密结合，提供围绕时尚、明星和服装的妙趣横生娱乐方式。Stardoll的核心用户主要是9至17岁的女孩子，网站提供数以千计的定制服饰和配件，让孩子们可以随心所欲地创造属于自己的明星娃娃。Stardoll每周都会推出新的娃娃以及手绘的时尚用品和配饰，以满足每个月将近800万访问者的热烈需求。每天都会有25,000名新增用户加入到现有的200多个国家2000多万注册用户群体当中。

首页告诉我，这里很关注人和互动~不错，有我自己的页面，还可以去shopping。

(全文 …)

购物网站中的“小意思”（掌握用户心理，提高用户黏度）

了解购物人群的资料不是很多，从几个大点的购物网站上可以看出几个有意思的设计，和大家分享一下

 

网站：http://www.thisnext.com/

描述：首页堆积了各类“小东西”的图例，摆放大小不一，形式不拘一格；鼠标移动上去就可以看到出现气泡窗口，点击后还可以查看更多的详细信息。

引发：给用户（特别是女性）一种进入百货商场的感觉，类别多样化，轻巧、简洁；用图形充当了导航；鼠标移动的缓冲效果没有时间的阻碍；最重要的是首页的效果有点不同，总有一种温馨的感觉；

 

网站：http://www.kaboodle.com/

描述：下图A图示清晰的排列出3个产品，可以清晰的看到商品的质地；点击“see details”可以看到商品的详细信息。

引发：从上面A图中的“help me choose（帮你选择）”，可以提供给用户更加理智的选择；从网上购物的发展来看，更加需要中间力量的导向，来指导人们购物。当看不到实际商品的时候，也许“帮你选择”或是“专家指导”，甚至“其他用户经验”更能给用户带来购物体验的安心。其实现在仍然有很多用户担心网购的质量和色泽等，如果中间加上一个检验员（当然，需要没有任何商业牵制的人），也许会放心很多。

菜单的表现方式——体验并列和包含的关系

在软件设计中尝试过很多菜单的表现形式，其中含义各不相同，随着表现形式的多样化，整理使用的方式也显得比较重要。

一、 预览样式

 

可以看到操作系统或者操作软件都采用了这种表现方式，这种表现方式的优点在于可以很好的明确包含关系，上下级的显示较为清晰，在专属的行业软件中比较注重操作的上下级关系，使用频率是比较多的，例如软件的一级菜单下包含了多个二级菜单。当然这样的排列方式就多了一个烦恼，不能清晰的定义下级菜单的多少，会给排版带来不好的影响。

 

如上图：当二级菜单在不之情的范围下，使用这样的预览模式，可能对二级菜单的样式控制造成不好的影响。甚至不得已的情况下撑破页面。特别是在商业的领域中，二级的种类更是不可控制的，所以它的使用就比较受限。

 

二、“树”就是我们常用的列表试图

树的应用一般是在数据量大时，嵌套关系比较复杂，在二层关系以上的情况使用较多，它具有很好的扩展性，能够明确的从主干看到树的基本内容或者分类属性。但是一般来说，它会伴随滚动轴的出现，所以网页中很少出现，目前我在看图软件和产品分类较多的情况下看到过。

 

三、 并列筛选

就是说简单的连动，后面的选择是依据前面的选择结果而控制的。最多的情况应该就是出现在上图的方式中。但是也有一些网站是按照这样的方式进行筛选；这种方式限制用户的眼光是从左到右，逐个缩小筛选的范围，就像很多导航一样，先通过分类，再详细选择；它的优点是空间比较省哦，但是当层次比较多时，就难以应付了；从用户使用角度，距离用户最近的就是用户上一步选择的结果，这样就比较容易记忆，鼠标的移动范围也相对的较小，比较快捷。

上图是并列筛选和下拉结合运用比较好的例子，但是使我比较模糊的是，它采用了并列的排版方式，省去了大量的空间，但是选择采用的却不是逐级缩小的关系。当用户点击“marke”时，是针对此类的筛选，似乎和后面的“farbe”等是并列的关系，是无级别关系的。

 

四、 目前使用较好的菜单表现关系（1）

a点击前如上图排列

b点击后如上图排列

这种方式的好处是，一目了然，a让用户知道所有的分类，首页的效果就达到了，告诉用户这个网站给你提供了什么；由于每一项的二级层次种类较多，故使用了b的表现方式，中间用竖线间隔，进行合理的分类。

随想“天冷了，去淘宝买四件衣服？”

深圳的天气，冷风慢慢来了，好像穿T恤有点冷了，一天面对电脑14小时的人，习惯了静坐，还是去搜搜把。。。。。。依然选择网购，没有办法的80年代！

突然觉得自己很好笑，明明可以马上买完的DD，却花费了自己2个多小时，一边体验，一边唠叨，难道是年龄大了，(*^__^*) ……，看看，还把自己想的心事都画出来了

如图，渴望在我不出门的情况下，满足我的诺大心愿，希望未来的网购可以做的让我像玩游戏一样，轻松，不担忧，甚至买了还可以和路友交换噢

可用性经验准则

近来生活有点平淡，工作也够空闲，重温了《可用性工程》，为了鼓励自己认真学习，不要昏昏欲睡式啃书，故边看边写，但是写完才发现，这些都是说了很多的DD，估计大家都了解了。但是为了表彰我的努力，呵呵，贴出来秀一下：

一、 简洁而自然的对话

1、 用户界面应该尽可能的简洁

理想情况当然是仅提供用户当前所需要的信息，并把它放在所需的地方（Jakob Nielsen）。简单的说，让用户可以在他需要的地方看到想要的东西。一起使用的信息应该在屏幕上彼此靠近，例如Qzone的音乐盒，我个人觉得有点不合理，“播放列表”和“音乐收藏”其实在操作上是紧挨的，在界面排版上理应彼此靠近，这样信息对象的操作顺序也符合了用户高效的工作原则。

当然，如果可以让用户根据自己的喜好来调节顺序就更好了。当然要给一个默认的数值了。例如：物业管理系统，首先的操作是“录入用户的资料”，然后让用户“入住”，其次再“进行装修”，等一段时间后，用户的活动可能只是“投诉，维修”之类的操作。在系统设计的时候，设计者当然要给用户一个默认的顺序，可以按照事件的发展进行；但是，最好还是给用户可以自己调节操作顺序的操作，因为当某一个操作开始的时候，可能会经历很长时间。

2、 图形设计和颜色

 

如图，按照了Nielsen的说法，区分了封闭性、接进性、相似性的图形形态。合理的区分相似的内容，用边框进行区分，把相关的操作尽量的靠近。

颜色的运用对界面的设计也是很重要的，有的设计者把界面设计的五颜六色，美其名曰给用户视觉冲击，但是我觉得要是不想把自己的网站，做另类版的，就慎用色彩。Jakob Nielsen提到“不要过度的使用颜色”；颜色的选择在5~7种较好，用户浏览的时候，设计者也要考虑用户的眼球，尽量使其简单记忆，不用太累的去区分颜色。据说Durrent and Trezona 做过测试，经过专业训练的用户也只能对付大约11种颜色。（其实对于色彩，我还是了解甚少，希望大家指点）

Word是一个大众的工具，使用的群体很多、很杂乱，所以可以看到他使用的颜色，包括图标，都是可以在不使用颜色的情况下辨别如何操作。Jakob Nielsen提醒“要记住，有很多人是色盲！”

3、“少即是多”，说起来惭愧，记得第一次看英文稿件的时候，还以为是“过犹不及”。

   甚至到现在还不甚了解这其中的道理，以及它具体如何运用到设计中去。

 

   例图所示，在用户使用的界面上尽量显示用户最关心的问题，和最直接的操作，而相关的“其他信息”“销售记录”等，不要在页面中显示。在界面上添加太多的信息和数据会给用户带来多余的审视，甚至是困扰。让用户把他最关注的东西用最快捷的方式展现出来，而且是一目了然的。

 

二、 使用用户的语言

一定不能使用系统语言，假如用户遇到“某某参数尚未定义”就惨了，摸不清头脑，对软件形象也大打折扣。使用用户的语言法则来书写系统的提示或相关警告，也是从交互的方式考虑呀。我遇到最好的语言就是金山打字软件的提示，当我想关闭时，系统会提示“今天累了，就到这里把”，很舒服哦。

那么如何更好的使用用户的语言呢？据说最好的方式是通过用户的投票，把所有可能出现的语句列出清单，供用户打分，然后汇总意见。有统计数据显示，使用技术语言来表达导致用户犯错的平均值是23.6个错误，但是，使用投票汇总的平均值是5.8个错误。

三、 将用户的记忆负担减到最小

这个自然不用说，最好让我什么都不用记忆，早上上班一来，点击一个按钮，所有的工作都是系统自动产生，还要记忆下哪些是我想要的东西。（难度有点大了）

从设计中也有很多这样的例子，例如用户的搜索条件，用户的输入习惯，用户的id，用户经常关注的信息提示等。

四、 一致性

    同样的系统，同样的信息在所有的屏幕和对话框中显示的位置和形式应该一样，这样当用户经常使用时，就是自然遵循这个法则去操作，同时也是减少用户记忆的一个方面。当然，表单或对话框等表现形式的统一，也要依据系统自身的功能结构了，所以每个项目开始的时候，定项目的表现形式也是一大工程呀，不仅要考虑系统的扩张性，还要考虑表现形式的一致性。（如果在加上开发人员的不理解或者坚持，那……）

五、 反馈

用户在哪里？要怎么做？那个按钮是做什么的……？一连串的问题，都会使你已有的用户偷偷的溜走喔！所以及时的用户反馈是很必要的，所以我建议我们的项目中增加用户路径和操作步骤的示意图，这样用户知道下一步做什么。同时，在按钮上添加了“alt”提示；但是当用户犯错前，我如何提示用户是不可操作的，或不建议操作的，一直都没有好的解决方法###

还有，系统或页面的相应时间也是反馈的一部分，例如apple叫我等10分钟，再不给我剩余时间的提示，我早就跑了！

六、 清晰的标识退出

    不言而喻，但是undo的使用还是慎重，请查看http://bbs.blueidea.com/thread-2798867-1-1.html，有相关的讨论。

七、 还有一些其他的准则，理解起来还是比较轻松的，如快捷方式、好的出错信息、避免出错、帮助和文档和经验性评估。

有关门的设计

深圳的下班，永远都是拥挤不堪的。公交车上，我被挤到了公交车的下车门，突然觉得这样也不错，有空去想门的设计，在拥挤的小车上也偷闲佩服了一把公交车设计者。不由得，想起了如何设计只能推不能拉或是只能拉不能推的门？

     记得，在翻译HCI那本书的时候，看到大师也不断的分析有关门的设计，Dr. Keith Andrews在书中提到了有关门的交互设计方法，我们可以先来看一下他的理论；

关于门柄的可用性插图：

上图:一个不清晰的设计。左图，圆形在生活中使人联想到了翻转，但是它能给人提示是推动或者拉动吗?显然它的指示是不明确的。右图，一个单杠使人可以方便的推动,但是这个推动的动作似乎没有给人指明了动作的驶向。

上图: Dr. Keith Andrews先生认为它是关于门的，合理的可用性设计。左图，一个镶片提供了推的指示，同时镶片的宽度暗示推动的方向。右图，一个垂直直立的手柄意味着抓和拉动的提示。

同时还给出了实例来证明这一说法是正确的：

上图: 一个含糊不清的有关门设计的例子；一个垂直的把手安装在门两侧，这样提供抓和拉动。不幸的是，从门的另一面，这个门不得不被推动！可以看到记录的标记在门的把手上。

上图:一个好的可用性改造（使用在同一个旅馆中），我们可以观察他的区别。首先肯定这是一个好的设计。在这里，左图，一个垂直的把手正确的建议拉动，同时可以看到背面有一个横杠，给用户一个“挡住”的意识；右图，一个合理的门闩设计表示推动。

 

看了这样的实例和大师的总结，我体会到几点：

1、 人们在物质上的感知，会影响到人的想法和行动。在我看来，已经看到对面的情景是挡住的，心理上就自然反应出拉过来的想法；对坚硬的东西，和对柔软的东西，处理的方面从心理上就已经用第一影响加以区分。

2、 物体的摆放结构，同时影响了人们的判断。从图中，可以体会到“竖向”给人一种自然的拉动，而“横向”自然的拦截，给人一种推的感觉。

3、 人体结构有时会影响到设计。手的形状和弯曲，使用“握住”方便拉动；握的动作，从物体配合方面来说，自然是竖着较为清晰；同样“推”一般都是用身体的力气或是双手的动作，这样横向面积大，方面推动。

 

      上面，是我理解到的，但是我还有一个运用不当的问题，就是如何把这些设计运用到界面交互设计中去呢？亲爱的Dr. Keith Andrews，为什么，你只给出了图例，却要我们自己去猜测你提出的本意呢，甚至还要我绞尽脑汁的想他到底如何运用到设计？