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

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

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

默认加拿大预测网-在线预测（照片合成页）：

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

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

“摄像头拍照”页签：

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

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

#p#

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

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

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

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

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

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

这样设计有很多缺陷：

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

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

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

#p#

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

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

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

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

3. 更少的界面更好。

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

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

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

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

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

1. 搭建信息构架

2. 细节设计

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

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

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

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

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

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

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

#p#

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

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

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

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

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

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

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

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

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

• 访问qzone.qq.com，

• 登录，

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

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

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

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

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