QQ空间大头贴改版设计总结

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

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

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

　　默认首页（照片合成页）：

　　点击中间左排的“高级图像处理”按钮（“照片”图标按钮），界面变为：

　　在主界面上点击中间右列的“文字设定”按钮（A图标按钮），界面变为：

　　“摄像头拍照”页签：

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

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

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

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

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

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

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

　　如果直接将上面这个维度关系转化成界面，是这样的：

　　这样设计有很多缺陷：

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

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

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

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

　　在开始设计之前，我们先来明确几条相关的原理：

　　相似的操作放在一起。这样可以保证较好的内容逻辑，让界面更容易理解，更容易使用。

　　不要让一个按钮在不同的情况下有不同的功能，一个按钮一个功能。

　　更少的界面更好。

　　为“新手”用户服务需要产品设计的简单、清楚； “中间用户”、“专家”则需要高效率。

　　为一类用户用户提供一个界面，而不是多类用户共用同一个界面。

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

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

　　交互设计工作往往可以分为两步：

　　搭建信息构架

　　细节设计

　　大头贴的信息构架就是关于“单张VS多张”、“摄像头拍摄VS上传现有照片”这两个维度的表现。第4条设计原理是关于“新手用户”“中间用户”“专家”的。这个产品面对的是“新手”用户（没谁会天天都来合成大头贴），更需要产品表现的简单、清楚，或者说表现的直白一些、傻瓜一些。之前根据内容逻辑关系画出的界面显然难度太高了。

　　通过第4条设计原理，我们可以判定，这样的设计还不够好，而不要给自己找接口“用户应该能看到合成多张的那个页签的。”

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

　　要设计出一个界面来，关键问题在于如何统一“合成单张”和“合成多张”这两个界面。

　　将它们统一成一个界面，这里需要一些思想的火花。在一次和产品经理的讨论中，我们画出了下面这个界面：

　　缩略图的列表里可以存放多张照片，既可以当作时间轴，又可当作备选照片库。点击“合成单张”按钮，把当前帧输出，合成单张的。点击“合成动画”按钮，则把全部照片一起输出，合成动画。

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

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

　　设计原则1说：相似的操作放在一起，可以使内容之间的逻辑关系更清晰。

　　“现有照片”和“摄像头”这两个按钮都是添加照片的功能，放在一起。大头贴有很多编辑照片的功能（比如，放大、缩小照片），也应该放在一起。现在又有了动画合成功能，相应的一个操作也应该归在一起。这样界面上就应该有三组功能按钮了：

　　编辑照片的功能中有“高级图像设置”和“文字设定”这两个功能操作起来比较复杂，需要较大的界面来展示。在旧版中，点击这些按钮，界面替换：

　　点击中间左排的“高级图像处理”按钮（“照片”图标按钮），界面变为：

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

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

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

　　至此，大头贴的主要设计完成了。最终的设计效果：

　　新版的大头贴已于7月27日正式发布了。访问方式：

　　访问qzone.qq.com，

　　登录，

　　点击“进入空间”（如果您之前没有开通过qq空间，则需要先“开通”），

　　在您个人的qq空间中点击右上角的“装扮空间”进入qq空间商城，

　　在商城导航中选择“大头贴”。

　　有点复杂哈，显然，设计上要做的事情还很多。

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