18 | 产品案例分析：WWF Together的情怀设计

WWF Together 是这个基金会的一个推广应用，一般非营利性组织做的应用一般不太有什么特别的想法和创新，可能都是比较古老的设计风格，万年不更新；但是 WWF Together 的交互方式非常丰富，内容设计也花了很多心思，有不少值得分享的点。

1 用动效传递暗示

打开应用，首先看到的是一个折纸的过程，开屏结束以后，通过一个过场动效，给我们展示了完整的内容列表。注意看这个动效，一方面它很好看，另外一方面它明确地给我们暗示，这里的内容是水平布置的，我们想要看更多动物的时候，就会知道要左右滑而不是上下滑。

这个小动作非常有效，我们要暗示用户继续探索的路径的时候，可以用这样的动效，也可以露出一个边，看到一个不完整的边，我们很容易理解这个边是向水平延伸还是垂直延伸的，也就自然知道接下来的操作方向。这里我们用极客时间举个例子，可以看到左边留出一点，就是这样的一个暗示。

动效绝对不是花里胡哨的东西，它在很多时候能传递暗示，再讲一个题外的，就是苹果系统中输错密码的一个摇头的动效，OS 和 iOS 都有类似的东西，也很有意思。

2 望向镜头的眼睛

WWF Together 有一个很小的细节，你可以注意到，这里每个动物的照片都是包括眼睛的局部构图，这些眼镜是望向镜头的。这样的设计其实也是有心理学依据的，眼睛给人的心理暗示非常强烈。曾经有一个心理学实验，说的是在街上画一些眼睛，甚至是眼睛形状的图案，都能提高行人把垃圾丢到垃圾桶里的概率，而不是随地乱扔。

我还看过一篇文章说。如果在你的工作环境中。贴上一些有眼睛的图案或照片。或是放上镜子，让你可以看到自己的眼睛。都能提高你的工作效率。在一些 Landing Page 优化建议中。文章也提到了可以在首页中放置人物的照片，其中有一个要点，就是说这些人应该应该直视镜头，会特别有冲击力。

3 沉浸式交互

其实仔细翻下来，你会发现这款应用的数据量并不大，这跟我们之前提到的一些应用不同，那些应用是要把大量内容条理化简单化，但这个应用却是要把单薄的内容有机丰富地整合在一起。

我们可以看到，它利用了非常丰富的交互方式，来表现形态各异的动物的习性和特点，每一种都不同，很新鲜，吸引人们不断地探索，去了解每种动物。

比如我们打开熊猫，第一个有趣的交互是，当你按住这个折纸的时候。会有熊猫的叫声，上面的文字也会随之扭曲。我们继续往后看。会发现一些更有趣的交互，比如通过旋转一个控件来推进内容的继续加载，或砍掉竹子才能看到后面的文字。

我们再来看两个动物，你会看到具体的交互方式设计与动物的习性是紧密结合的，比如展示老虎的视力，是通过两个亮度不同的滤镜，还可以打开相机去通过这两个孔看自己周围的环境。再比如展示大象的生存环境，有 360 度视角的图片，非常用心，恰到好处。

应用不断地用这些交互形式吸引你的注意力，让你跟它去进行互动。让你的手不要离开屏幕。也让你的视线和精力沉浸在信息和内容中。

4 引人深思的传播与分享

最后还有一个拍照的功能，可以将这个动物的折纸形象和你的生活环境相结合做出一张照片，然后鼓励你把它分享出去，影响更多的人来保护野生动物，关注野生动物。

这个设计有一个特别好的隐喻，就是这些动物跟你身边触手可及的环境是息息相关的，它们就在我们身边，与我们共存。而且我们知道，当我们想要促进某个用户去进行分享和传播的时候，最重要的事情是要保证这个分享和传播的东西是跟他有关的，一张自己身边环境的照片，就是跟它有关的内容，这样的相关性，理论上也会提高分享的意愿。

而且我觉得难能可贵的是，它并不是通过站在道德制高点来胁迫你分享和呼吁对野生动物的关注，而是通过这样有趣的功能，来推动你去做传播和分享，很克制，也很体面。

与此类似的是另一个叫做 Story of Life 的应用，它的内容都是 BBC 关于动物的纪录片，整个 App 是横板和全屏的设计，沉浸感很强，像打游戏或者看电影，里面的内容主体都是视频。这些视频的选择和播放方式挺有趣。

比如我们过去都是横向去拖拉进度条，而这里的纪录片快进式进度条是圆形的，你可以看一下里面的筛选，也是横向滚动和滚轮旋转筛选相结合的，很有趣。总之，给人整体的感觉很有冲击力，不像是一个普通，死板的纪录片架构。

国内有一个也很有名的叫榫卯的应用，它也得过不少设计的奖，它把木艺中的榫卯结构，用图文并茂的方式展现出来，制作非常精美，交互也很棒。

这几个应用或许都不具有什么特别的商业价值，但却让人觉得充满情怀，也很有趣味。尤其是世界野生动物保护协会的那款应用，我个人非常喜欢，让人眼前一亮。

!

戳此获取你的专属海报