18 | 产品案例分析：WWF Together的情怀设计
下载APP
关闭
渠道合作
推荐作者
18 | 产品案例分析：WWF Together的情怀设计
2017-12-30 邱岳 来自北京
《邱岳的产品手记》
课程介绍
00:48 / 14:16
1.0x
WWF Together 是这个基金会的一个推广应用，一般非营利性组织做的应用一般不太有什么特别的想法和创新，可能都是比较古老的设计风格，万年不更新；但是 WWF Together 的交互方式非常丰富，内容设计也花了很多心思，有不少值得分享的点。
1 用动效传递暗示
打开应用，首先看到的是一个折纸的过程，开屏结束以后，通过一个过场动效，给我们展示了完整的内容列表。注意看这个动效，一方面它很好看，另外一方面它明确地给我们暗示，这里的内容是水平布置的，我们想要看更多动物的时候，就会知道要左右滑而不是上下滑。
这个小动作非常有效，我们要暗示用户继续探索的路径的时候，可以用这样的动效，也可以露出一个边，看到一个不完整的边，我们很容易理解这个边是向水平延伸还是垂直延伸的，也就自然知道接下来的操作方向。这里我们用极客时间举个例子，可以看到左边留出一点，就是这样的一个暗示。
动效绝对不是花里胡哨的东西，它在很多时候能传递暗示，再讲一个题外的，就是苹果系统中输错密码的一个摇头的动效，OS 和 iOS 都有类似的东西，也很有意思。
2 望向镜头的眼睛
WWF Together 有一个很小的细节，你可以注意到，这里每个动物的照片都是包括眼睛的局部构图，这些眼镜是望向镜头的。这样的设计其实也是有心理学依据的，眼睛给人的心理暗示非常强烈。曾经有一个心理学实验，说的是在街上画一些眼睛，甚至是眼睛形状的图案，都能提高行人把垃圾丢到垃圾桶里的概率，而不是随地乱扔。
我还看过一篇文章说。如果在你的工作环境中。贴上一些有眼睛的图案或照片。或是放上镜子，让你可以看到自己的眼睛。都能提高你的工作效率。在一些 Landing Page 优化建议中。文章也提到了可以在首页中放置人物的照片，其中有一个要点，就是说这些人应该应该直视镜头，会特别有冲击力。
3 沉浸式交互
其实仔细翻下来，你会发现这款应用的数据量并不大，这跟我们之前提到的一些应用不同，那些应用是要把大量内容条理化简单化，但这个应用却是要把单薄的内容有机丰富地整合在一起。
我们可以看到，它利用了非常丰富的交互方式，来表现形态各异的动物的习性和特点，每一种都不同，很新鲜，吸引人们不断地探索，去了解每种动物。
比如我们打开熊猫，第一个有趣的交互是，当你按住这个折纸的时候。会有熊猫的叫声，上面的文字也会随之扭曲。我们继续往后看。会发现一些更有趣的交互，比如通过旋转一个控件来推进内容的继续加载，或砍掉竹子才能看到后面的文字。
我们再来看两个动物，你会看到具体的交互方式设计与动物的习性是紧密结合的，比如展示老虎的视力，是通过两个亮度不同的滤镜，还可以打开相机去通过这两个孔看自己周围的环境。再比如展示大象的生存环境，有 360 度视角的图片，非常用心，恰到好处。
应用不断地用这些交互形式吸引你的注意力，让你跟它去进行互动。让你的手不要离开屏幕。也让你的视线和精力沉浸在信息和内容中。
4 引人深思的传播与分享
最后还有一个拍照的功能，可以将这个动物的折纸形象和你的生活环境相结合做出一张照片，然后鼓励你把它分享出去，影响更多的人来保护野生动物，关注野生动物。
这个设计有一个特别好的隐喻，就是这些动物跟你身边触手可及的环境是息息相关的，它们就在我们身边，与我们共存。而且我们知道，当我们想要促进某个用户去进行分享和传播的时候，最重要的事情是要保证这个分享和传播的东西是跟他有关的，一张自己身边环境的照片，就是跟它有关的内容，这样的相关性，理论上也会提高分享的意愿。
而且我觉得难能可贵的是，它并不是通过站在道德制高点来胁迫你分享和呼吁对野生动物的关注，而是通过这样有趣的功能，来推动你去做传播和分享，很克制，也很体面。
与此类似的是另一个叫做 Story of Life 的应用，它的内容都是 BBC 关于动物的纪录片，整个 App 是横板和全屏的设计，沉浸感很强，像打游戏或者看电影，里面的内容主体都是视频。这些视频的选择和播放方式挺有趣。
比如我们过去都是横向去拖拉进度条，而这里的纪录片快进式进度条是圆形的，你可以看一下里面的筛选，也是横向滚动和滚轮旋转筛选相结合的，很有趣。总之，给人整体的感觉很有冲击力，不像是一个普通，死板的纪录片架构。
国内有一个也很有名的叫榫卯的应用，它也得过不少设计的奖，它把木艺中的榫卯结构，用图文并茂的方式展现出来，制作非常精美，交互也很棒。
这几个应用或许都不具有什么特别的商业价值，但却让人觉得充满情怀，也很有趣味。尤其是世界野生动物保护协会的那款应用，我个人非常喜欢，让人眼前一亮。
分享给需要的人，Ta购买本课程，你将得18元
生成海报并分享赞 14
提建议
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
上一篇
17 | 产品经理如何获得非权力性的影响力？
下一篇
19 | 产品经理如何与开发打交道（上）：打破思维的边界
精选留言(13)
听天由己2017-12-30首先，祝二爷新年快乐，感谢遇见~ 其次，我说说自己的感受。今天这两款应用简直太美了，作为一个用户，我特别欣赏与崇拜，细节才能看出真诚与用心，这样的交互形式国内产品见得不多，所以才更加经验。 而作为产品经理，我感到很惭愧，相较于这些优秀的产品设计，自己在考虑产品交互与细节上远远不够，很多时候都是为了先完成任务，其他的总说我们下次再迭代，然后就没有然后了。感谢二爷为我们发现了这些有趣好玩的应用，真的学习了很多。 最后，回答今天的问题，我盯着手机找了一遍，那些让我爱不释手的应用有 Quartz、水滴清单、微信读书和忆术家，可能我们真的喜欢创意和沉浸式交互。大家有兴趣可以去试试，有很多细节可供参考。 希望 2018 年与大家共同进步，加油~展开作者回复: 谢谢刘祯，新年快乐，每次都能看到你仔细的留言，很温暖，一起加油
14
罗帅2018-05-16当我们想要促进某个用户去进行分享和传播的时候，最重要的事情是要保证这个分享和传播的东西是跟他有关的5
Susan2018-01-10谢谢二爷的分享，作为一个还没有入行的产品小白，在视频中的结构逻辑和交互细节带给我很多新的思考，谢谢，拜个晚年，新年快乐。作者回复: 同乐同乐
2- 方薇2022-10-19 来自上海课程非常实用
- 方薇2022-10-19 来自上海非常好
刘洋32022-02-21超级棒的课程，推荐
KingSwim
2020-11-25参加训练营前来提前刷下课，当做是预习~~ 极客时间留白的暗示设计很有启发
opama2020-03-22启动画面很惊艳
旺旺2019-04-20简单内容如何丰富化趣味化。 1、折纸动画开场； 2、然后很快变成多个熊猫，动画，音乐节奏感瞬间提升；给人内容威严和震撼感觉； 3、各种动画过程中有对未来交互方式的预示； 4、
孙梦华🙄🙄2018-07-02留边的动效，这个真是有启发啊
Dylan2018-06-26哈哈，记得用过一个白噪音app--小睡眠，用户组合3中白噪音到屏幕是矩阵里，还可以根据自己的喜好调节各种白噪音的饮音量大小。简单的交互让我眼前一亮。 文中wwf的分享设置的确实克制而且合理，我们在工作中也要多结合用户的使用场景为其提供价值。
文2018-02-04这次视频观看完，我觉得很多时候，也许用户可能对某种东西没有概念！比如老虎的视力，虽然很多时候我们用文字表达了某些东西的概念，我们还自认为用户可以理解，但是实际上，不理解的，没接触过的用户根本没有概念作者回复: 嗯，沟通的目标是接收方理解了多少，而不是我们表达了多少
河图2017-12-30还是喜欢二爷的解析，从细节中体现思维路线，学习了作者回复: 谢谢喜欢～