探索外包开发的极限：一个精品App诞生的全过程(6)

三、概念图/交互设计：直接开始设计App的门面

确定好产品大致框架之后，我依然没有开始做原型，而是直接着手设计App的首页——既然我选择了Paper 51做视觉参照，我就必须先眼见为实，确定这样真的能做出一个视觉效果达到并超过Paper 51的App。首页的视觉也会反过来影响到原型的设计，在线框图里看上去很有条理的首页原型，做成最终的效果并不一定能达到我要求的美感，这就会导致我设计的某些流程将连锁地报废，所以最保险的方案就是先把首页的视觉确定到9成。

首先是美术风格的确立。由于已经放弃了3D，或是用2D分层动画来实现伪3D，那我只剩3个选项：扁平、矢量风格和拟物。首先排除扁平风格，因为我们的设计元素都要围绕着“纸”，而扁平化最不擅长表现的就是实体感。Paper 51用的是简洁的矢量风格，但它有我们所不具备的拖拽交互方式，这种交互方式给人带来很强烈的物理感，弥补了矢量风格的不足。所以，为了超越Paper 51的视觉，我唯有选择拟物。

我第一眼就爱上的背景图

确定了拟物风格之后，我就开始找背景图，我花了十多个小时去图库里找素材，但当我看到负责测试的颖爷手上的锤子手机壁纸时（上图左），我立马就认为非它莫属了。老罗是个尊重艺术家的人，锤子系统的每一张壁纸都标注了作者，于是我顺利地在Depositphotos搜到了这张原图（「the App」所有设计素材都是正版购买的）。原图是大白天的光环境，而「the App」的风格应该是安静和隐私的，我希望给用户营造一种无人打扰的地下车库的感觉，在这里，他可以向这面墙壁倾诉任何内心深处的事，所以我把这张图处理成了黑夜的光环境（上图右）。

首页摆放的肯定是入口级的东西，那么显然就要先设计“纸堆”。Paper 51的纸堆是用算法自动地把它所包含的纸张堆叠起来，比如说，如果这个纸堆含有3张纸，那么就显示3张纸堆叠而成的样子。但是在制作效果图的时候我发现，「the App」的纸张是拟物的，如果只有一个“纸”的素材，仅靠随机角度来堆叠，就会失去真实感，必须设计几张不同的纸来随机显示；另外，纸张的阴影并不能像矢量图那样直接运算生成，必须手绘才显得真实，而手绘阴影带来的问题就是，这个阴影的投射将不受控制：纸张A在纸张B的上面，它的阴影只应该投射在纸张B上，不应该投射在墙壁和纸张C上，这就要求纸张A在投影时必须以纸张B的轮廓作为遮罩区，因此实现起来会耗费大量Manday。

设计“纸堆”，初步形成首页

（编辑：ASP站长网）