导航问题种种(介绍薯片会)

十一月 29th, 2007

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

浏览量:116,102 views 9 条评论 »

向前一步是设计

十月 21st, 2007


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

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

浏览量:124,852 views 25 条评论 »

设计原则VS实际情况

十月 4th, 2007


这是一个网络相册。是不是该有“上传照片”这个按钮?我当时的意见是:不要有。理由是:只有在某个相册中才可以上传照片,在“根目录”(XXX的照片集)下,并不能上传照片,既然不能上传,所以不要有这个“上传照片”按钮,即使提供这个按钮,点了之后同样是要引导用户去选择相册或新建相册。
现在看来这个结论显然是不对的。问题出在哪儿?当时也确实有其他的同事反对,但并没有给出足以说服我的理由(也许是我太固执)。记得当时反对的意见大概是:“你这个想法可能从专业、学术的角度上是对的,但是实际情况…”如果仅仅是根据所谓的实际情况来判定一个设计,显然是靠不住的。因为那时说的实际情况也只是那位同事那个时候对实际使用情况的猜测。
上面描述的这个错误到底是怎么产生的?作为交互设计师怎样才能避免运用所谓专业的观点做出错误的设计?
阅读全文 »

浏览量:129,663 views 64 条评论 »

交互行为三部曲

九月 23rd, 2007

之所以会出现“交互设计”这个词儿,很大程度上是alan cooper想区别于以往的界面视觉效果设计,重新定义一下基于电脑的软件设计工作。既然是区别于原先的界面设计,我想,可以简单的不准确的概况一下这个概念:交互设计=界面设计+行为设计。界面的设计无须多说,行为的设计就有很多话题了。

之前的很多小文里也经常会提到有关行为设计的问题,几天前如厕时偶然意识到关于行为设计的一些问题联系起来考虑会更有助于设计。

啥是网页上的行为?看到一个链接,左键点了一下,打开一个新页面。
当然行为也有更复杂的,填写、提交一份注册资料;删除我日志中的垃圾评论;打开一个视频,调整音量,全屏观看…

关于这些行为,我们可以分为三个步骤,并对每个步骤提出相应的准则:
第一步.操作前,操作可识别;结果可预知。
第二步.操作时,操作有反馈。
第三步.操作后,操作可撤销。
(文字排列的还挺整齐的,怪像诗的哦。好吧,借以沉痛悼念即将远去的诗人:白龙。)

如果你深谙设计之道,恐怕已经知道我说的这几点是什么了。那么本文看到这里对你来说已经足够了。将这些设计问题联系起来考虑,在设计一个行为的过程中能有意识的考虑这一系列问题,应该会有助于你的设计。
阅读全文 »

浏览量:124,547 views 28 条评论 »

取舍问题

八月 26th, 2007

“有用户需要这个功能啊…”这个说法永远成立。每次听到这句话通常就意味着产品中又要多加一项功能了。在满足一部分用户更多需求的同时,使得另外一部分用户使用又更困难了一些。因为功能太多了,这个产品就更复杂了,只需要简单功能完成简单任务的人当然希望少些干扰。

添加更多的功能会使一部分人更爽而另外一部分人更不爽。通常在讨论的时候,会说,这是个trade off(在两者之间取舍)的问题。被这样定性之后,基本上就剩下掷硬币拿主意了。这是个取舍问题,但有些取舍问题只能靠掷硬币,而有些则不是,嗯…还可以扔鞋的…

鉴于在会议室中扔鞋或者硬币都有失斯文,我们不得不找些更体面的办法。要决定这个取舍问题只要解决一个问题就可以了:上面提到的“一部分人”和“另一部分人”都是谁?之后,我们就可以很从容的判断了,我们的产品是要讨好“一部分人”呢,还是要讨好“另一部分人”?

Alan.cooper的书里把用户分为三类:新手,中间用户、专家。我在这里只想说互联网产品,对用户的分类似乎可以更简单一点,只分为新手和老手即可。初来乍到的是新手,如果他们持续的使用这个产品则可能会转变成老手。这是套搬Alan.cooper三类用户的原理。
阅读全文 »

浏览量:117,086 views 22 条评论 »

大头贴改版设计总结

八月 8th, 2007

大头贴是QQ空间里的一个照片合成的小工具。让用户将自己给自己的照片加个画框合成一个形象照。07年6-7月,大头贴进行了重新设计,改善了之前的一些设计并添加了一些新功能。在此,将这个重新设计的过程总结下来,通过这个实例来阐述愚下对交互设计的一些理解。

改版面临的问题一:旧版设计的缺陷

旧版大头贴有一些设计上的缺陷。我们可以通过界面截图了解一二。

默认首页(照片合成页):
1.gif
阅读全文 »

浏览量:118,999 views 26 条评论 »

他想要什么?

六月 19th, 2007

先来看两个实际的问题:

第一个问题:
uploads/200706/19_233353_1.gif
点击标题,不是进入这篇文章,而是进入“图领风骚”栏目,如下图:
uploads/200706/19_233907_2.gif
这篇文章属于这个“图领风骚”栏目,但是在第一屏看不到这篇文章。
尽管还有不少人不认同,我还是觉得:这是一个简单的错误。

第二个问题:
uploads/200706/19_233927_3.gif
uploads/200706/19_233948_4.gif
点击了分类中的“MP3”,进入的页面中,第一屏满满当当的显示了“MP3”分类的下一级分类,第二屏才开始显示所以属于“MP3”分类的商品列表。
阅读全文 »

浏览量:113,104 views 29 条评论 »

五星级的厕所

五月 6th, 2007

uploads/200705/06_031415_.jpg
这张照片拍摄于一家五星级的酒店。照片中的门是男洗手间的门。门的左上角(面对门时)有一个挺大的圆形金属标志,上面画的是个gentleman,表示“男”,很有品味。或许是怕不够清楚,在这个gentleman上面又加了个十分标准的标志—小红人。

这样的指示可谓够全面了,也够有品味了。但是,我在这个楼道里停留的十几分钟内,男男女女的大约有5,6位来找洗手间,几乎没有一位能找到。

问题在于位置不对。gentleman和小红人都没放在门上。

不需要进行目标用户的调研,我们也可以描绘出人物角色和场景:XX岁的XXX,参加好友的婚礼,席间饮啤酒若干瓶,内急,需“洗手”。他来到这个楼道里,XX年的社会生活经验告诉他,洗手间应该是一个房间,并且必定有个门。强烈的自然召唤促使他不顾一切的找到那扇门,而门旁边的装饰画暂时恐怕没心情去欣赏了。

情景大概是这样了。找不到洗手间也是自然的了。

说到这里,我自然的想到了我的这个blog。(看到厕所就想到网页,这似乎不是头一回了。)
阅读全文 »

浏览量:121,070 views 34 条评论 »

web2.0是互联网上的现代主义

四月 21st, 2007

工业革命之前,设计师通过手工制作为少数权贵服务。十九世纪末二十世纪初,随着新技术的兴起,工业化大生产要为更广大的人民大众服务,需要设计出造价低廉、实用、美观的产品。陈旧的设计观念已经不能满足这样的需求了。仅仅是在组装好了的火车头上雕刻一些花纹是远远不够的。

以建筑设计为例,要让大众都能享受到工业革命的成果,需要建筑造价低、易于维修,室内宽敞、明亮。现代主义设计师大量使用了玻璃幕墙、混凝土预制件建造出了大批造型简单明快,实用性强的建筑。由注重实用性引发出的现代主义设计创造出了明显区别与以往的鲜明风格。现代主义设计思想影响深远,直至今天仍旧随处可见。小到ipod shuffle,大到北京的后现代城,都或多或少的带有现代主义风格。
uploads/200704/21_012628_ipodshuffle.jpg
Ipod shuffle

uploads/200704/21_012717_.jpg
北京后现代城

现在主义认为设计是个理性的创造过程,否定了各种古典主义中的繁复的装饰。然而,现代主义设计所造就出的作品却往往是冰冷的,缺乏人情味的。于是出现了“后现代主义”、“反现代主义”等等更人性化的设计理念。
阅读全文 »

浏览量:112,272 views 32 条评论 »

按“右箭头”按钮,往左移

二月 27th, 2007

uploads/200702/27_233541_1.gif
上图中,点击“右箭头”按钮,缩略图列表应该往左移还是往右移?

稍做尝试我们便会发现,点击“右箭头”按钮,列表向左移动是更“习惯”的,也是比较普遍的做法。比如下面几个例子:
uploads/200702/27_233623_2.gif
news.yahoo.com

uploads/200702/27_233639_3.gif
www.6rooms.com

看过了这种滚动的缩略图列表,再来看一下电子地图:
uploads/200702/27_233651_4.gif
map.baidu.com
按“右键头”按钮,地图是向左移动的。

再来看视窗界面:
uploads/200702/27_233701_5.gif
视窗界面中的滚动条,按“右箭头”按钮,界面向左移动。
阅读全文 »

浏览量:115,424 views 14 条评论 »