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

所以，最终我“偷懒”地给“纸堆”直接设计了一个整体的切图（上图左），而由于背景墙的顶部有个吊灯，所以这些纸堆只能放在屏幕中间，列表的滑动方式也只能是横向滑动，加上肯定要放在底部才能用起来顺手的“新增”按钮，首页的布局基本就确定下来了（上图右）。

实现真实的光照效果

最让我兴奋的是我发现了如何让整个首页突破静态PNG切图拟物的局限，达到真实光照效果的办法。我用通道+笔刷做了一个半透明的阴影覆盖层（上图中间），放在场景图层的最顶部。这样，滑动到屏幕两端的纸堆就会逐渐被阴影所吞噬，而中间不受阴影层所影响的部分，在对比之下看起来就像是被吊灯照亮了（上图右）。

用“开关灯”进一步强化光影

最后，我想着，既然强调了光影的变化，不如再做极致一些吧。于是我花了一两天的时间，给首页设计了开/关灯的交互效果。「the App」在未来很多用户的手上是个很隐私的东西，没人愿意在「the App」里写上“我很懦弱，从今天开始我要采用××办法改变这个现状”然后被其他人随意翻阅。所以，关灯的状态刚好可以做成锁定界面，如果用户设置了密码，那么这个界面就会显示密码盘，解锁之后才能开灯。

开/关灯对适配来讲是一个比较繁琐的过程，我的办法是，首先在PS设计稿里把所有图层重新整理一遍，变成最精简的结构。然后从这个图层结构中去思考：我们在App需要把图层分成几个大组，才能最方便地实现开关灯的效果，而且能有最高的扩展性，随时能加进去新的按钮或内容。

提炼出首页的4个UI大组

于是，如上图，我整理出了从下到上的：背景、内容、压盖、悬浮，这四个大组。开关灯能通过这些大组的UI响应来实现，后续要加进去什么内容或按钮，也能根据它的特点来加到“内容”或“悬浮”这两个组里，因为从情境上来说，所有真实拟物的按钮或入口，都应该加在“内容”这个组里，这个组在“光影”组的下层，所以会受到光影的影响，看起来就能跟整个场景融为一体；而所有附加功能的按钮或入口，都应该放在“悬浮”这个组里，这个组的内容会漂浮在整个空间之上，不受光影的影响，以强调它们是超越这个空间的，独立的存在。

最后，用表格的方式来标注它们的排列顺序，以及显示/隐藏的细则（实际上，从开发来讲，这就是规范了每个UI组对于开/关灯“广播”所响应的“态”），然后再标准化所有切图文件的命名，这样，在整理首页交互思路之余，开关灯效果的文档也就顺便做好了。

（编辑：ASP站长网）