互联网产品的交互设计方法（UPA2008讲稿）

目前交互设计在互联网产品中的应用状况
“交互设计可以提高产品可用性。”在国内的互联网行业中，建立在这个认识基础上，交互设计得到了普遍的接受。“产品设计开始的时候应该先交互啊~~”“你这个项目没交互过啊~~”这类的说法越来越多当然是好的信息，但是，交互设计工作到底应该怎么做才能提高产品可用性？通常的互联网产品研发中，交互设计工作是处于没有方法的状况。

理解交互设计
交互设计是一个设计工作。
交互设计是一门技术。
交互设计在目前阶段的主要使命是提高产品可用性。
通过对界面和操作行为的设计提高产品可用性。

互联网产品的特点
1.变化快。
2.质量低。
3.功能操作与信息传达并重。
4.高速创新从而带来的无标准。

那么，互联网产品的交互设计应该怎么做？

互联网产品的交互设计方法分享
经过长期的摸索、体会腾讯互联网产品，我们总结出了几个较为有效的设计方法：
方法一. 自然语言法。设计交互细节的方法。
方法二. 结构图法。设计产品信息构架的方法。
方法三. 任务走查法。对现有产品进行优化的方法，全面普查产品，包括对交互细节和信息构架。
阅读全文 »

浏览量：32,787 | 30 条评论 »

Facebook的特别之处是什么？

为什么在facebook交友会更容易？facebook与传统的BSP（Blog Service Provider）到底有什么不同？是因为它有横竖两个导航吗？是因为它有个主人信息的聚合页面吗？ Facebook为什么成功？又有哪些不足？Facebook商业上的成功使得它混乱的设计成了皇帝的新装，即使觉得看不懂也不敢去说。让我们拨开网页上那些纷繁的视觉表现，来看看藏在网页背后骨架—信息构架（IA Information Architecture），我们将获得一个全新视角，这种种疑问将迎刃而解。

传统的博客服务提供商（Blog Service Provider，简称BSP），比如：Qzone、新浪博客、网易博客…他们提供的博客服务，不仅仅是为每一位注册用户提供了一个属于自己的blog空间，还有用于bloger间彼此交流的平台。也就是说，信息构架是：个人空间+社区平台。

“个人空间+社区平台”是什么样子的？
一个个的blog彼此独立存在，再由一个社区平台将这些blog聚合一起，通过内容聚合在一起。

阅读全文 »

浏览量：37,182 | 22 条评论 »

我是我产品的用户

在交互设计中有这样一个观念：“产品设计者不是用户”。作为产品的设计者，虽然会试图为用户着想，但产品的设计者不是用户，设计者和用户的立场是不同的，更准确的说，“目标”是不同的。

这个的观念可以用下面的例子来解释：

一个软件公司要设计一款专门供财务人员使用的软件，产品的设计者会有很多想法，想象着用户会要XXX功能，如何如何的功能归类会很方便用户使用… 但是通过实际调查发现，真正的用户—财务人员，想要的原来根本不是这些，他们更需要的是快速的完成任务，让自己显得不那么笨（能顺利的操作此款软件）…

要想单纯的通过主观判断就能做出真正的财务人员满意的软件，需要设计者能按照财务人员的方式来使用这个软件。如果你真能按照一位财务人员那样来使用这个软件，那…那你基本上就得改行了，显然，同时作为一位合格的财务人员和一位交互设计师是不太现实的。

这个例子说明，产品的研发者不是产品的用户，要设计出好的产品，需要进行科学严谨的用户研究，于是才出现了“人物角色”、“情景描述”等等方法用于避免出现类似上面的错误。
阅读全文 »

浏览量：20,666 | 16 条评论 »

相对不易用

想象一下，早上起来，厨房里摆放着一盘子吐司面包（方形的面包片），旁边是吐司机(烤热面包片的机器)，你是否会觉得太麻烦而不去吃呢？再想象一下，午后，你面前摆放着一个咖啡壶，下面有电磁炉以保证里面的咖啡不会变凉，旁边放着一个杯子，里面是牛奶，还有一个小盘子，里面放着袋装的砂糖。空的咖啡杯就摆在旁边。你会因为嫌麻烦而不去喝吗？

面对这两个情况，恐怕大多数人都不会嫌麻烦，反而应该觉得服务的太周到了。能得到这样的服务，想必是有位贤惠的老婆吧。

然而，就是这样的服务，在另外的条件下，却有着出人意料的结果。
阅读全文 »

浏览量：28,146 | 37 条评论 »

链接，怎么办？

表示文字链接最清楚的方式是“蓝色文字+下划线”，这是在浏览器发展过程中形成的。这个问题大家都说过很多次了，我也曾经说过。然而，这样的规范却总是难以实行。视觉设计师会把文字颜色作为一个表现视觉风格的元素，完全出于视觉表现的需要来配色，而不顾及这个规范。在埋怨视觉设计师的同事，我也在考虑，规范之不行，问题恐怕并不全在执行者。这如同交通规则不允许骑自行车带人，但是交警也不能见到骑车带人的都拦住罚款。

显然，这个规范对视觉设计的局限是比较大的，所以视觉设计师才不愿意去遵守。在网页的开发流程中，留给视觉设计的时间是很有限的，并且往往要求有比较绚丽的视觉表现。这样的条件下，再要视觉设计师顾及这个规范确实也比较难。

那么，我们来设计另外一个规范，让文字链接同样能表现的很清楚，做到“操作可识别”，同时，又让视觉设计比较容易做。
阅读全文 »

浏览量：12,230 | 26 条评论 »

表达的尺度

如果说交互设计师的工作内容是使用界面语言进行表达，那么，好的表达需要注意尺度。

贴在屏幕上的工具栏是过分的。页面上闪动的广告也是过分的。这些设计超越了表达的尺度。

在设计这个页面的时候，设计者考虑的往往是：怎样才能让用户注意到这个功能。偏执的考虑让用户用着顺手（用着顺手本身并不是错误的观念），主观的认为这样做才够方便，用户用起来效率才会高。在这个时候往往不会去考虑用户是否乐于接受。这如同做父母专心于把最好的食物给孩子吃，但却不考虑孩子是否饿。
阅读全文 »

浏览量：4,252 | 11 条评论 »

视觉引导

碘酊，一种棕黄色澄清液体，颜色很深，是由乙醇溶解的碘溶液，用于皮肤感染和消毒。俗称：碘酒。红汞，主要成分：红溴汞。红色溶液。用于外用消毒及表浅创面。俗称：红药水。这两种药水小时候就经常用，哪里长了个小包，就抹点碘酒，能消肿。外伤抹红药水。对这两种药水的气味、颜色我都很熟悉，。红色瓶子的是红药水，棕色瓶子的是碘酒。一向如此。
阅读全文 »

浏览量：7,433 | 21 条评论 »

我们猜您会喜欢

看这个标题，大概你会觉得耳熟，很多网站都会提供类似的推荐内容。是不是可以用这种形式做广告？推荐是不是就是广告？根据item的相关性做的推荐是不是一定是有益于用户的？

不是用户主动找的内容，而是设计者有意推送给用户的内容，假设这些信息都称谓推荐信息，那么，这些推荐应该怎么推？当然，简单的说，推荐的信息应该适度，适时。怎样才算适度？

北京的前门有个历史悠久的自行车商店，大概是我在上高中的时候，有一次去那里买自行车配件，买一个后轮上的挡泥板。这次购买经历，我至今仍记得很清楚。

进了商店，找到了卖配件的柜台，跟售货员描述了我要的配件：26车后轮用的挡泥板。开票儿，付款，拿货，一切正常。举着挡泥板我问售货员：能不能给安装上？“出门，右转，胡同里有个门儿，是我们店的维修门市部，那有人专门管安装。”我推着车，举着刚买的挡泥板，转到小胡同里，维修门市部很好找。“师傅，给我装一下这个挡泥板啊。”“啊，成。哎？你没辐条啊？”（注：辐条是指连接挡泥板与后轴的电镀铁条。）“啊？噢。店里有卖的吧？”于是我跑回店里，再买两根辐条。开票儿，付款，拿货。临走时，我问了售货员一句：“安装的时候，螺丝要自己带嘛？”“你要几个？”我太聪明了！差点儿又多跑一趟。
阅读全文 »

浏览量：20,518 | 21 条评论 »

导航问题种种（介绍薯片会）

导航是个大问题。如果说交互设计的两个主要任务是：信息构架和交互细节设计，那么，几乎所以信息构架的问题最终表现都反应在导航上。一个网站能把导航做好，已经基本做好一大半了。具体操作行为上的设计，页面表现上的设计并不难了。一个链接到底是鼠标经过时就浮动一个层出来，还是点击之后才浮出来？“提交”按钮是应该左对齐，还是右对齐？这些问题不是不重要，也不是太简单，但至少，类似的问题有的可参考，并且可以通过制定一些标准来统一，如果条件允许还可以通过用户测试快速的验证。而导航问题通常比较复杂。
阅读全文 »

浏览量：5,815 | 8 条评论 »

向前一步是设计

这是一个对页面操作权限进行设置的功能。

让我试着解释一下这个设置功能：
区分两类人：所有成员和部分特权成员。操作分为：读操作和写操作两类。可以先给这两类用户分配不同的权限，然后再在下面选定特权成员。
写操作是比读操作更高级，有写操作权限的成员显然是可以读的。即，如果“可发文章、评论”项选中，则对应的“可阅读”变为选中的不可操作状态。
特权成员是成员中更高级的一部分人，权限只会比普通成员高，不会比普通成员低。如果对所有成员都开放写权限，那么特权成员就没什么特权了。第二行特权成员的选项应全部选中并且不可操作。如果普通成员有读权限，那么特权成员自然也应该有读权限。实际上此时特权成员只有读权限就没什么“特”的了，应该同时还有写权限。
把上面这种种规则都表现出来后，这里四个复选框的操作就变得很复杂了。假设现在是四个复选框全未选中的状态，第一个操作如果勾选了左上角的复选框，则四个复选框将全部变为选中，并且不可操作。如果第一个操作是勾选右上角的……
我实在不想说了，太累了。恐怕我有耐心写，你也没耐心看了。
太复杂并且太不容易理解了！每次操作后，结果都会出乎意料，勾选这个，其他的也被勾选了，并且有些人不可操作了。为什么？
阅读全文 »

浏览量：16,053 | 24 条评论 »