澎湃-美数课:看见盲人眼中的世界
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要8分钟
案例:看见盲人眼中的世界
品牌:澎湃-美数课
技术实现: html5
亮点:
- 创意定位
澎湃-美数课制作的普及盲人生活现状的H5作品,以及纠正大家对盲人生活理解上的一些误区,以此号召大家关爱盲人,关注澎湃“国际盲人节”。
- 策划逻辑
作品以文字为主,后半段还有读屏选择,下滑屏幕浏览作品,主要有以下几个方面
①loading
加载界面是许多简笔卡通轮廓图轮流闪现,下方是视力下降百分之多少,用这种方式显示加载比例,加载完毕后,作品标题《看见盲人眼中的世界》是由极度模糊慢慢变清晰的,下滑屏幕开始浏览正文。
②我国的盲人数量统计和视力划分等级表述,此界面随着一直下滑,屏幕会伴随提示显示正常人,低视力人,二级盲人和小视角盲人看到此页面的效果。
③字幕搭配大脑图,解释为什么盲人听觉敏锐,然后是文字讲述盲人也能用自己的方法使用各种APP,盲人听声较快,用户可点击触点感受盲人读屏语速。
④从此段开始,屏幕右上角就有个小喇叭图标,点击后可开启或关闭读屏模式,开启读屏模式的话,每一页的文字都会有一个男声阅读出来,此页文字是对专为盲人开发的APP和帮助盲人的志愿者的介绍,有一个圆形比例图解析盲人会问哪些问题,以及有些盲人拍的照片志愿者也不能帮助告知内容的原因,及照片展示。
⑤盲人也爱上网,盲人最关心的话题总结及不同领域的问题数量,用户可点击领域标题查看问题详情,然后是对盲人就业的表述和论坛里盲人阅读和讨论数最多的帖子。
⑥数据来源,作品说明,制作单位,制作人员,特别鸣谢一览,和澎湃“国际盲人节”专题二维码。
- 设计上
白底黑字的作品,科普性质强一些,讲述的内容较多,也很全面。
- 体验上
不同部分设置了不同的互动方式,读屏,不同视力情况下的文字效果显示,让用户亲身体验盲人眼中的世界,感受盲人特别敏锐的听力,增加参与感,也能更真诚的投入文章的阅读和了解。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号