臭鱼：QQ空间大头贴改版设计总结(3)_网页设计教程

推荐：产品需要合适自己的设计
上图左侧是电梯里的飘柔广告。把洗发水的广告做成一面镜子的创意着实很棒。设计者清楚的知道：”在镜子上做广告更适合自己的品牌性质”。不过，从上图中不难

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

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

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

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

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

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

1. 搭建信息构架
2. 细节设计

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

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

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

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

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

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

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

分享：几点闪光
出错，也能莞尔一笑～碰到出错页面经常是让人讨厌的事，不过撞见些可爱的页面，有时反而成了种乐趣。个人最喜欢的404页面，是淘宝UED团队blog的那个。“四零