APP设计盘点:全国哀悼日的氛围设计

1 评论 4298 浏览 19 收藏 14 分钟

本文主要通过哀悼期间页面变化,总结如何营造悼念氛围,以及不同形式的优缺点。

谨以此文深切哀悼新冠疫情中牺牲烈士和逝世同胞。

向英雄致敬,向逝者致哀。

4月4日清明节,全国上下深切哀悼新冠疫情中牺牲的烈士和逝世的同胞。互联网厂商积极行动,通过多种形式营造哀悼氛围,缅怀逝者,展现了互联网平台的社会责任 。

其中设计形式主要包括三个方向:

我们结合案例,一起盘点下各大厂商的设计之道。

一、启动页

启动页一直是产品宣传、活动引导的重要页面。其优势在于可以整屏展现主题,情感表现更加直接,视觉冲击力更强。形式也相对灵活,可以采用静态图,也可以采用动态图。而缺点也较为明显,启动页停留时间较短,普遍只有3s-5s。因此无法承载更多内容。在设计表现上要求也更高,需要在极短的时间内抓住用户的视觉焦点,引起用户的情感共鸣。

1. 今日头条

今日头条启动页采用了两种启动页模式:动态图和静态图。

(左侧动态图,右侧静态图)

两者都采用了黑白主题氛围,营造出庄严肃穆的哀悼气氛。

动态图中“深切哀悼”简短有力的大号字表达出核心主题,很容易就引起用户的共鸣。配合下方的图片——风中摇曳的花朵,引导用户视线自上而下转移,最终定格在“悼念逝者”的链接上,吸引用户去点击查看主题内容。

静态图整体页面布局与动态图相似,通过图文结合的方式呈现主题,但整体上视觉重心更加靠下。为了弥补上方内容的缺失,增大了文案在画面中的比重。图片的核心内容是画面底部的白色花朵,引导用户的视线留意到屏幕底部,从而让用户感知到启动页的两大出品方——“央视新闻”和“今日头条”,强化了今日头条权威的品牌形象。

2. 考拉海购


考拉海购启动页,选取了蜡烛为主元素的背景图片,点点烛光寄托了对逝者的哀思。画面采用上下布局形式。竖排的文字,并且字号没有做大小区分,导致用户感觉文字特别多,而且普通用户不太适应竖排文字的阅读方式,在一定程度上影响了主题信息的传递效率。

3. 苏宁易购


苏宁易购启动页同样以蜡烛为情感元素,采用了彩色背景图片。上方是悼念主题,下方是品牌logo。黑白色块的巨大差异,让用户很清晰的感受到了内容信息分割。在一定程度上影响了哀悼氛围的营造。并且白色的品牌区域,更容易吸引用户的视觉焦点,在一定程度上削弱了背景图片的情感表现。

小结

启动页在设计时,一般需要通过文案和背景图相互配合来表达核心主题。文案需要简洁、易读,让用户能够快速了抓住核心内容。背景图需要准确切中主题,引起用户的情感共鸣。在强烈情感表达的场景下,尽量通过完整的画面内容营造沉浸式体验。

二、内容页

大多数APP主要的设计精力放在了页面设计中,内容页主要包括两种形式:

1. 今日头条

今日头条作为内容分发平台,既有图文信息,也有视频信息,为了更好地配合全国性的哀悼活动,营造活动氛围,需要从背景和内容两个层面上进行产品设计调整。

主要调整点:

1)APP头部背景由品牌色,调整为白色花朵背景图片。与启动页、悼念活动页面的背景图片元素保持一致,营造了统一的氛围;

2)首页框架元素及内容全部改为了灰色模式,例如底部导航,频道Tab标签,内容标题、图片等。其他频道页保留了原有的页面风格;

3)视频内容屏蔽。为了配合悼念活动,今日头条将放映厅中的内容都进行了屏蔽,改为了“深切哀悼”公告,既避免在悼念活动中出现敏感性差错,也明确告知了用户频道内容改变的原因;由于放映厅内容无法播放,导航中的icon单独进行了灰色处理,并未使用点亮状态。

2. 淘宝

对电商平台而言,商品图片是用户购买交易的重要因素 ,为了保证用户的购物体验,商品图片依旧保持彩色模式。因此淘宝和天猫,更多的是在框架层面和首页进行了氛围营造。

淘宝首页主要是对首屏内容进行了去色处理,悼念楼层放在了金刚区下方来增强活动氛围。


淘宝频道页最大程度上保留了原有设计色彩,只是修改了头部的背景色,保证用户的购物体验。

3. 天猫

天猫和淘宝都是阿里系产品,同样通过悼念楼层的形式来凸显活动氛围。天猫的变化集中在框架页,包括页面头部背景色和底部导航栏。商品图片保持了原有彩色模式。悼念楼层放置在Banner区下方。

4. 京东

京东同样将去色重点放在了框架层,但是色彩调整面积更大,底部导航栏也进行了去色处理。同时京东在标题栏滚动广告位增加了“铭记哀悼”引导信息,并专门设计了落地页。

(京东首页引导及落地页)

相对于首页的深度处理,京东频道页中氛围面积明显缩减(类似于淘宝首页处理方式),更多的是对非商品内容进行了去色处理,保证了用户基本的购物体验。

(京东频道页截图)

5. 拼多多

由于正常状态下,拼多多界面背景色为白色,为了强化活动氛围,拼多多刻意将背景色加重,顶部标题栏和底部导航栏变成了深色背景。金刚区去色后,反而被弱化了。

哀悼信息通过Banner区广告位的形式呈现,既突出了哀悼主题,又避免了常驻楼层给用户带来的心理不适。

(左侧正常状态截图、右侧悼念活动截图)

小结

综合来看,个人认为京东的表现形式更加灵活。通过分层展示的方式更好地达到氛围营造,同时也避免了对用户购物体验的干扰。用户可以根据自我情感需要去查看对应信息。

而淘宝和天猫通过悼念楼层的形式,虽然更加强烈的表达出哀悼之情,但是情感过于沉重,与上下文内容的强烈对比,可能让用户购物心情产生一定的不适。

三、细节设计

部分APP在运用去色方式渲染氛围的同时,还在一些细节处做了设计。

例如爱奇艺和微博,对底部导航栏的关键图标进行了重新设计。爱奇艺将“VIP会员”改为了“全国哀悼”。而微博则将发现频道图标改为了“蜡烛”,同样带给用户鲜明的体验感知,而这种信息传递更加细腻,印象也更为深刻。

(左侧爱奇艺截图、右侧微博截图)

脉脉作为话题类应用,则专门开辟了活动页面,一方面给了用户情绪宣泄的出口,另一方面悼念活动的设计,也会激起用户表达的欲望,从而增加了用户活跃度。

四、产品迭代

对于此类全国性,特定时间(早上10点)的哀悼活动,为了配合整体活动进程,产品或许有对应的迭代策略(个人推测)。以下是支付宝、拼多多、美团,早上7点多和晚上10点多的截图差异,请各位细品。

(支付宝截图)

(拼多多截图)


(美团截图)

从图中可以看出来,3款应用早上时段,都或多或少的增加了一些仪式氛围,但并不强烈。在晚上已经出现了很明显的变化,具体变化发生在什么时间不得而知。

据我个人推测,虽然悼念活动是全国性的,但是由于承载的情感过于强烈,对用户的心理和使用习惯都会造成一定影响。各大厂商为了尽可能的将影响最小化,所以采用了相应的氛围展示。如有知道内情的小伙伴,可以留言告诉大家~,在此谢过。

五、总结

  1. 设计策略必须与产品定位相符。例如微信作为社交工具,个人属性更加明显。因此悼念活动不宜推广展示。而平台型产品可以进行一定的仪式设计,营造活动氛围;
  2. 启动页可以作为氛围渲染的重要方式。一方面可以通过强烈的设计,激发用户情感共鸣,同时也不会对用户的使用APP造成较大影响。但是设计时,文案和背景图需要精炼,才能有效的触及用户的情感体验点;
  3. 内容页中的情绪表达可以采用多种方式营造氛围,但是也要考虑到民众的接受程度。可以根据产品定位,分层表达哀悼情绪,避免对用户造成心理负担;
  4. 通常情况下,首页作为用户触达率最高的页面,是情绪渲染最重的页面,其他的频道页面可以适当弱化氛围设计,保证用户的使用体验;

 

作者:子牧先生,公众号:子牧设计笔谈(HelloDesign)。电商体验设计师,设计经验丰富,从B端产品到C端,横跨信息通信、电力、证券、电商等多个领域。

本文由@子牧先生 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
1人打赏
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 欢迎大家关注“子牧设计笔谈(HelloDesign)”~

    回复