大头贴改版设计总结

八月 8th, 2007 26 Comments »

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

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

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

默认首页(照片合成页):
1.gif

点击中间左排的“高级图像处理”按钮(“照片”图标按钮),界面变为:
2.gif
在主界面上点击中间右列的“文字设定”按钮(A图标按钮),界面变为:
3.gif
“摄像头拍照”页签:
4.gif

其中存在的缺陷就不详述了,相信您也都能看到了。

(前面说到了,大头贴是让用户将照片加上外框的一个图像编辑工具,这里的截图只是整个界面左侧部分,界面右侧是大头贴外框的物品列表。这次改版的设计主要在于左侧部分,所以,这篇总结没有提及右侧列表部分。)

改版面临的问题二:合成单张VS合成多张;摄像头拍摄VS上传现有照片,两个维度的交叉

这是一个由新功能引发的问题。旧版只允许插入单张的照片合成大头贴,新版则提供给用户合成动画大头贴的功能,允许用户上传多张照片合成逐帧动画的大头贴。要合成动画,需要一个“时间轴”,用来顺序排列多张照片,编辑动画。界面大致是这样的:
5.gif

对于旧版中合成单张大头贴的功能,通过用户反馈,决定加入多张对比的功能。即,用户可以相中了某一个外框,然后尝试着搭配多张照片,反复对比,最终选择一个满意的搭配。这就需要一个备选照片列表,让用户随时点击对比。界面大致是这样的:
6.gif

合成单张与合成动画是两个不同的任务,各自有各自的界面。听上去很合理。

无论是合成动画还是合成单张,都有两种插入照片的方法:用摄像头拍摄和上传现有照片。这样一来就出现了两个维度:合成单张VS合成动画;摄像头拍摄VS上传现有照片。
7.gif

如果直接将上面这个维度关系转化成界面,是这样的:
8.gif

这样设计有很多缺陷:

用户看到了“用摄像头拍照”功能,但是只能拍摄单张,要想拍摄多张,合成动画,就得先选择页签“合成多张动画”,再点击“用摄像头拍摄”。“为什么现在不可以用摄像头拍摄多张?”“我怎么知道要进到合成多张动画页签里才能拍摄多张?”

原本要合成单张大头贴的用户如果发现可以合成动画大头贴也很可能想尝试一下。而用户面对现在界面很可能发现不了“用摄像头拍摄多张照片”的功能。

原本合成动画的用户拍摄了多张照片之后改变主意了,本以为删除其他的照片,只留一张就是合成单张了,但是却不行(按这样的设计,需要用户去点击合成单张的那个页签)。

重新设计大头贴面临的主要问题大致就是这样的了。下面我们需要通过设计解决这些问题。这样的设计工作,我们称之为“交互设计”。

在开始设计之前,我们先来明确几条相关的原理:
1.相似的操作放在一起。这样可以保证较好的内容逻辑,让界面更容易理解,更容易使用。
2.不要让一个按钮在不同的情况下有不同的功能,一个按钮一个功能。
3.更少的界面更好。
4.为“新手”用户服务需要产品设计的简单、清楚; “中间用户”、“专家”则需要高效率。
5.为一类用户用户提供一个界面,而不是多类用户共用同一个界面。

这几条原则,在《about face 2.0》中都能找到。当然,交互设计的原理有很多,这里列出来的这几条,只是和当前这个大头贴设计有关的。在下面的设计过程中,您将看到,我们是如何运用这些原理指导具体的设计的。

开始设计!让我们滚动!(let’s roll!—摘自盗版《兄弟连》DVD中的字幕)

交互设计工作往往可以分为两步:
1.搭建信息构架
2.细节设计

大头贴的信息构架就是关于“单张VS多张”、“摄像头拍摄VS上传现有照片”这两个维度的表现。第4条设计原理是关于“新手用户”“中间用户”“专家”的。这个产品面对的是“新手”用户(没谁会天天都来合成大头贴),更需要产品表现的简单、清楚,或者说表现的直白一些、傻瓜一些。之前根据内容逻辑关系画出的界面显然难度太高了。
8.gif
通过第4条设计原理,我们可以判定,这样的设计还不够好,而不要给自己找接口“用户应该能看到合成多张的那个页签的。”

第5条设计原理说:为一类用户设计一个页面。合成单张大头贴的用户和合成多张的用户是不是两类用户呢?不是。前面提到了,在合成大头贴的过程中,合成单张与合成多张的操作很可能会互相切换。那么,无论是“单张”还是“多张”都是一类用户,想要合成大头贴的用户。因此,我们应该设计出一个界面来,而不是两个。更少的界面更好(原理3)。

要设计出一个界面来,关键问题在于如何统一“合成单张”和“合成多张”这两个界面。
6.gif
5.gif
将它们统一成一个界面,这里需要一些思想的火花。在一次和产品经理的讨论中,我们画出了下面这个界面:
9.gif
缩略图的列表里可以存放多张照片,既可以当作时间轴,又可当作备选照片库。点击“合成单张”按钮,把当前帧输出,合成单张的。点击“合成动画”按钮,则把全部照片一起输出,合成动画。

把“单张”和“多张”整到了一个界面里之后,只剩下“插入现有照片”和“用摄像头拍摄”这一个维度了。在界面中同时提供这两种添加照片的功能按钮就可以了。
10.gif

信息构架的问题解决了,再来设计细节。

设计原则1说:相似的操作放在一起,可以使内容之间的逻辑关系更清晰。
“现有照片”和“摄像头”这两个按钮都是添加照片的功能,放在一起。大头贴有很多编辑照片的功能(比如,放大、缩小照片),也应该放在一起。现在又有了动画合成功能,相应的一个操作也应该归在一起。这样界面上就应该有三组功能按钮了:
11.gif

编辑照片的功能中有“高级图像设置”和“文字设定”这两个功能操作起来比较复杂,需要较大的界面来展示。在旧版中,点击这些按钮,界面替换:
1.gif
点击中间左排的“高级图像处理”按钮(“照片”图标按钮),界面变为:
2.gif

之前的“选择本地照片”按钮变成了“返回”按钮。虽然充分利用了空间,但是不好用。用户刚刚形成了一些隐约的印象:下面中间那里是个“选择本地…”的功能。想要“返回”就不会上那儿去找了。

设计原则2中说:一个按钮一个功能。把这个原理引申可以理解为:某个位置上的按钮应该是固定的。

无论是设计理论还是对实际的分析,都说明在统一位置上变换按钮不是件好事。那么,“高级图像设置”和“文字设定”的具体功能怎么显示?给它们另外一个单独浮起的界面就行了。“插入现有照片”和“用摄像头拍摄”两相功能也是类似的。

至此,大头贴的主要设计完成了。最终的设计效果:
12.gif
13.gif

新版的大头贴已于7月27日正式发布了。访问方式:
访问qzone.qq.com,
登录,
点击“进入空间”(如果您之前没有开通过qq空间,则需要先“开通”),
在您个人的qq空间中点击右上角的“装扮空间”进入qq空间商城,
在商城导航中选择“大头贴”。
(有点复杂哈,显然,设计上要做的事情还很多。)

愚下希望能借此总结反应出一些设计原理在实际中的应用,或许其中只言片语与您有益。

有26 条对“大头贴改版设计总结”的评论

  1. widget 说:

    好久没看到你发文章了
    哈哈,经典
    顺便抢个sf~~

  2. zhengys 说:

    理论的逻辑性与严密性结合的确实很精彩。
    差距啊,也希望自己以后仍有机会

  3. 奇遇 说:

    恭喜改版成功!

  4. evan 说:

    一不小心连板凳都坐不到了。

  5. yellow 说:

    还是来迟了

  6. sume 说:

    少了一个“选择相册已有照片”的功能啊~

  7. sume 说:

    可能也许是“上传已有照片”这个问题提示不清:)
    公司不能用,回去试用一下哈。

  8. kingokiko 说:

    猜一个 黄色的保存动画按钮是不是会让用户付更多的Q币呢?

  9. 臭鱼 说:

    To kingokiko:黄色按钮不是让用户花更多的钱。花费只和选择的外框有关。添加了动画功能后,这个产品的主要功能是让用户合成动画,所以也需要在表现上这样引导。

  10. dnawo 说:

    good!

  11. elvis 说:

    挺精彩的,我觉得这个设计过程一开始按照线的过程窜起来是否更好,界面从上到下依次为:输入照片区,照片展示区,输出大头贴区。

  12. 小密 说:

    继续期待下一次大作~呵呵~~

  13. 臭鱼 说:

    To elvis:
    step by step的方式也是类似产品的另外一种设计选择。
    关于这两种方式的选择,也许不久之后可以专门说说吧。我希望能结合我们的另外一个产品一起来说。等那个产品上线之后吧。

  14. 西贝 说:

    看了几遍,还是觉得专业,赞一个

  15. 九翼青鸟 说:

    改版后功能的主次关系很清晰。
    赞一个!

  16. just 路过 说:

    看了你的文章,特意登录很久很久不去的Qzone,问题如下:
    1、在你的文字指导下,花了大约5分钟才找到大头照,好隐蔽的位置啊。也可能是因为我很久不用了,对界面有点陌生。不过我想即使是琳琅满目的沃尔玛,也得有个之路牌吧,告诉用户想找的东西在哪,你说呢;
    2、照片上传后,压缩得好像比较厉害哈,很不清楚了。虽然有很多很多原因支持照片服务压缩用户上传照片,但对于用户来说,从视觉和心理上还是不太能接受啊;
    3、保存后,显示“保存成功”但看不到我上传的图,不知道什么原因(我用TT浏览器),还说用了我1.2个Q币,感觉还不舒服;
    4、我没用过原来的大头照,但是从界面上来看,我喜欢前一个,颜色饱和,很“像QQ”的东西
    OVER~

  17. zebra 说:

    to “just 路过”

    我想负责该产品(大头贴)的产品经理可能不怎么看楼主的博客,
    我就带她回答吧;我想大致的意思上不会有偏差,从产品的角度。
    看臭鱼有什么补充没。他每天的工作确实也很忙。

    1、每一个互联网产品,诸如QQ空间都有其重点。推广或者引导用户的位置也是有限的,如果所有功能都有明确引导,用户肯定会疯了;

    这个问题其实该归结到取舍上,所谓张弛有道;针对不同级别的用户的产品,其推广的策略,和引导的偏重自然会有所不同。

    就象沃尔玛的路牌能告诉我们饮料在哪,但不会告诉我们雪碧在哪,因为他们只能默认用户知道雪碧属于饮料。

    2、关于压缩,只能说拥有众多用户,长期提供优质相册服务的网易,也于不久前开始压缩图片。如果实在需要上传保存照片,我个人推荐使用google的相册服务,毕竟巨头的资本是无法比拟的。

    3、这个我不没用过,不发表评论;因为要是收我钱,我也会不爽。

    4、前一版的大头贴制作工具的界面,恰恰是因为颜色过度饱和,抢了不少视觉的注意力,容易产生视觉疲劳,焦点不集中等感觉;第一眼看上去,会使用户产生不知所错的感觉。

    同时,颜色鲜艳也是优点,但如果因此丢掉大部分用户,我们还是只能放弃;毕竟众口难调,只能选择趋势性的。

  18. 不只是路过 说:

    嘿嘿,只是好奇,就看看,然后有了点想法,就写出来了,没大家那么专业啦。我觉得zebra说的也挺有道理的,QZONE的目标用户是谁,俺是24岁的女孩,自认为比较接近它的目标用户,你嘞^_^

  19. zebra 说:

    to 楼上女孩


    目标用户是谁?疯鸟,疯鸟…
    寻找目标用户,按功能和用户诉求来划分已经是极致。
    再牛的定量调查也只能作为参考,目标用户是谁我也不知道啊~

    还是那个观点:只能选择趋势性方向。方向是什么,who knows…
    我能做好自己的工作,其他不知道的决定不了的,其他的望尘莫及。

    我不是目标用户,我是老妖怪用户。
    当你足够了解并看清一些东西的时候,很多事情无关紧要了。

    楼上的女孩真可爱啊。有想法真好啊,不象我,其实我回帖的最后一句话否定了前面所有的话。至此有没有想法已经不重要了,一切都是矛盾的。。。
    who knows. i just want to find my lost love….

  20. lu-H-ul 说:

    本来是决定要进腾讯的,奈何过早恋爱让我欲去不能啊 T T

  21. lu-H-ul 说:

    曾经做过两个即时聊天软件的一些研究.挺希望可以和大家讨论的.

  22. 疯狂小西 说:

    原来QQ的这个大头贴功能是你做的呀!!!

  23. 邵爷 说:

    朋友 多多 一块玩

  24. 落叶 说:

    受教!~!@!#¥@%¥#……¥%

  25. 路过 说:

    相册选择照片时能提供多选会更好。

  26. xue 说:

    交互设计之路确实需要学习和提高呢,看着你的文章有很多提高。哈哈

发表评论

您的大名: