幸福报告的诞生


📍 2022-03-24 🏷️ #H5 #新闻奖

3 月 13 日,我在宜章采访时,得知了去年 3 月 20 日上线的 H5 作品《幸福报告》open in new window获奖的消息。

说来也奇怪,我当时在构思这个产品的时,的确是有冲击新闻奖的目标,不过我的预设是融合创新奖项,但不知为何,它申报的奖项却是页(界)面设计。

不得不说,这真是英明决定。就在刚才,我查询了最近一届中国新闻奖页(界)面设计的一等奖作品,发现它的设计竟然和幸福报告有几分神似,这就更加佐证了我现在对这个产品定位的认知。

我大胆地估计,国奖作品某种程度上应该也参考了同一支作品,当然这一类型的祖师爷应该纽约时报的《雪崩》吧。

大概是一年多以前,部门新进了一位设计师,我把《雪崩》等链接分享到群里,并表示也可以试试。之后,我们做了一个给纸片人穿衣的产品,反响尚可。这令我十分欣喜,于是我跟领导说,希望搞一个工作室,专注于生产融媒体产品,这个赛道相对温和,只要能配强团队,得奖应该不是问题。

对标澎湃新闻的团队,一支好作品的背后是产品、记者、编辑、设计、开发十多人的努力。而我们实际情况却糟糕很多,一个基本的配置都没凑齐,摄像要负责所有的照片和视频,设计需要写稿,产品不仅要兼顾开发,也要参与采访和写作。可以说,我们 3 个人完美地诠释了什么是草台班子。

在我看来,精细化的分工,更有利于作品的打磨。正所谓术业有专攻,一人分饰多角,换来的是更多的妥协。

至今我依然记得,去年 3 月 12 日(周五)的早上,我参加完一个暗访督查的采访,我们草台班子一行就直奔沙洲采访了朱细芬、朱利志、张有发等人,效率不高,但也算细致。

我们用了几天的时间,终于在 19 日前把原型、文稿、照片和视频全部搞定,付出的代价是,设计稿进展几乎为零。因为 5 篇文字稿,设计师写了 4 篇。

19 日那晚,我 90% 的时间都在等设计稿和写样式。准确说起来也就是三个页面,其余都是可以复用的。除此之外,再分享一个细节吧。幸福报告的产品设计参考了澎湃新闻的《穿越胡线:临界人生》open in new window,其中有个滑动改变改变封面透明度的交互设计,着实惊艳到我了。

几经研究,我的思路是把封面的 position 设为 fixed,并置于内容层之下;内容层的 padding-top 设为 100vh,即留出一个封面的高度。然后给 window 添加一个监听 Y 方向滚动的事件,封面图的不透明度随 Y 轴偏移量而改变,当 opacity 为 0 时,即以封面的底色作为图文内容的背景。

let coverOpacity = 1; // 初始不透明度

const handleScroll = (e) => {
  //偏移量
  const scrollTop = e.target.scrollingElement.scrollTop;
  //完全透明高度阈值设为屏幕高度的75%
  const threshold = screen.availHeight * 0.75;

  // 因变量 coverOpacity
  coverOpacity = 1 - (scrollTop / threshold) * 1;
  coverOpacity = coverOpacity > 0 ? coverOpacity : 0;
};

window.addEventListener("scroll", handleScroll, true);

这个效果当时我也在手机上试了试,的确丝般顺滑,而且似乎比参考对象来得更流畅一点。我觉得,澎湃新闻《穿越胡线:临界人生》的这个设计堪称灵魂,因为过渡反馈处理得自然、优雅,既有极强的视觉冲击力,又不会感觉到疲劳。

时隔一年,再看这支 H5,必须承认,还有很大的进步空间。现在,能让我觉得不那么拉跨的地方大概只有它的界面和交互了。这归功于我们这个草台班子的审美水平,客观来讲,至少是在线的。

只不过,我们在内容上的短板,也是肉眼可见的。上个月申报的时候,我就发现诸多瑕疵,能做的也只是修改一些字词句和标点符号,而故事本身却无能再作改进,作为完美主义者,这很难受。都说内容为王,形式服务于内容,新闻奖里的设计奖,就好比是台湾金曲奖的最佳专辑装帧设计,越是细品,就越觉得像是气氛组,毕竟谁不想拿最佳国语专辑呢?

好吧,既然得了奖,按照惯例,还是要感谢评审,以及为之付出的所有人。尽管还是个草台班子,让我们来领这个奖,承让了。