开云手机站登录入口-开云online(中国)


  • H5游戏(xì)制作
    H5游(yóu)戏制作(zuò)
    H5游戏制作
    H5案例(lì)
    H5开发
    扫一扫
    h5定(dìng)制
    h5定制

    回到顶部

    从(cóng)实战案例看如何做(zuò)一个简(jiǎn)约风H5

    简约风H5 2023年05月31日

    随着(zhe)H5交互(hù)形式(shì)的(de)增加(jiā),H5活动设计(jì)时可以选择的方向越来越多(duō),也(yě)让许(xǔ)多H5活动出现了参(cān)与门槛高、活动(dòng)规则复(fù)杂等问题,大大影响了用户的参与积极性。特别(bié)是在无奖励的活动中,缺(quē)少(shǎo)了利益驱动后(hòu),这些复杂(zá)活动(dòng)更是让人没有参与的欲望。相反,一些交互简单、信息传(chuán)达直接的简约风”H5却(què)更(gèng)受人们欢迎。下面,开云手机站登录入口和蓝橙互动就(jiù)通过实战案例和大家(jiā)聊聊(liáo),如(rú)何如何(hé)做一个“简约(yuē)风”H5。

     

    一、项目背景

     

    本(běn)次项目是给黑龙江卫视“一起(qǐ)读书(shū)吧”全媒体(tǐ)阅读(dú)节目做的线上宣传(chuán)H5活动,项(xiàng)目(mù)名称为森林书屋,结合世界读书日节日(rì)背景,针对看书的年轻人(年龄阶段(duàn)主要为大(dà)学(xué)生到(dào)青年职场(chǎng)人(rén)),做(zuò)一(yī)次(cì)好书(shū)分享(xiǎng)推荐。

     

    二、创意策划

     

    本次活动的核心目(mù)的(de)是分享出品方精选推荐的(de)几本(běn)好书,H5通过独(dú)特(tè)的视觉效(xiào)果、脑(nǎo)洞大(dà)开的切入点将用户引入到这场读书之旅中。

     

    简约风H5


    故事叙(xù)述则是采(cǎi)用了横(héng)版长图的形式,开(kāi)头以(yǐ)名(míng)人名言引入,中间以排布式现代诗描述各个画面,并(bìng)在(zài)画面中巧妙融入好(hǎo)书推(tuī)荐的(de)视(shì)频(pín),用户可点击(jī)查看视(shì)频中的年度推(tuī)荐书单(dān),最后进行总(zǒng)结,呼(hū)吁大家多读书、读好书。

     


    H5页面(miàn)设计


    三、视觉设计

     

    1、人物风格设定

     

    确(què)定故事流程后,进(jìn)入视觉(jiào)设计阶段。在人物的刻画上,视觉(jiào)是有(yǒu)很多表现形式的,需要根据整体方案的气质去选择合适的视觉呈现。由于这次的活动是针对爱看书的年轻人,年(nián)龄(líng)阶段主要为(wéi)18-30岁,为了使整体效果更自然,让用(yòng)户更有代入感。尽(jìn)管这是(shì)一个童话风的故事(shì),我们海报摒弃了低龄卡通的设计方向,在人物设计上选择了(le)更加成熟的青年向设计(jì)风格,更符合对用户年龄(líng)阶段的刻画。


    2、故(gù)事场景设计(jì)

     

    结合(hé)名称“森林书屋”,故事场景毫无疑问地设计成了一片森林(lín),主人公背着书包行走在森林中,进入一(yī)本书的魔法之(zhī)门,开启了他的读书之旅(lǚ)。

     

    读书日H5

     

    在书的(de)世界(jiè)里(lǐ)好(hǎo)似(sì)进入了小人国,主人公(gōng)放下书(shū)包(bāo)拿出书,在鹿身边(biān)安静(jìng)的看书,岁月静好。

     

    h5页面(miàn)设计


    河(hé)边篝火旁弹吉他,有松鼠(shǔ)作伴,森林里(lǐ)大大小小的镜(jìng)子里(lǐ)折(shé)射(shè)的(de)是主人公脸的国王、猫、摩登女郎,表示(shì)在书中体会不同人生美好。

     

    H5页面设计


    在巨大的书上(shàng)弹着(zhe)钢(gāng)琴,远处看到故乡暖暖的(de)灯光,一家人围坐吃饭的场景,体验家的感觉(jiào)。

     

    H5页面设计


    书变成(chéng)帐(zhàng)篷一样,在(zài)书里面(miàn)邂逅无形(xíng)的舞。

     

    H5页面设计


    最后看完书的主人(rén)公(gōng)背起书包,拿着书,从森林回到城(chéng)市。读完书获得了力量的(de)人,高昂着(zhe)头,笑(xiào)容满面(miàn)。

     

    H5页面设计


    3、视频设计

     

    视频内(nèi)容方面相对(duì)简单,主要是将书(shū)籍样式、书籍名称、作者、初(chū)版单位(wèi)等基础信息展示出来,并通(tōng)过转(zhuǎn)场动画进行切换展示。

     

    读书日H5


    四、程(chéng)序开发

     

    相比于视(shì)觉设计来说(shuō),这类展示型H5的制作相(xiàng)当简单,核心在于前端页面的(de)展示,控制好H5一屏的显示尺寸尤(yóu)为重要。由于H5为(wéi)横版长图,且是假横屏形式,所以页面宽1280px*高(gāo)870px,主要内(nèi)容控制在宽1280px*高630px,以确保页面显(xiǎn)示完整。

     

    五、结(jié)语

     

    “简约风”H5不是说H5的页面设计风格为简约风,而(ér)是指整体体(tǐ)验流(liú)程的简约,让用户通过简(jiǎn)单的活动规则、简单的操作(zuò)方式(shì)来参与活动,重拾H5只占用用(yòng)户零碎时间,轻量小巧的特点。欢(huān)迎大家扫码体验一下这个休闲简单(dān)的H5活动。



    联(lián)系QQ:2899301896

    蓝(lán)橙互动·致力于(yú)为企业提(tí)供更高效(xiào)的(de)开发服务

    开云手机站登录入口-开云online(中国)

    开云手机站登录入口-开云online(中国)