游戏玩法与页面设计是H5吸引用户的两大重要因素，一些H5的页面交互虽然简单，但凭借好看的视觉效果，同样能够得到用户的主动转发分享。下面，西安H5开发的小编就给大家分享一些页面设计为主的手绘风H5案例。

案例：东区美食地图

1、创意定位

广东省中山市东区“吃货”必备地图，可以一目了然的看到东区美食分布和相关活动讯息，还可以在地图中分类查找，方便快捷。

2、策划逻辑

点击标题页面，来到手绘的简约地理分布图，图中有当地街道分布详情，哪个地方有什么美食也标注了出来，点击商场可以查看美食店铺列表，点击公园等户外场所可查看简介，感兴趣的地方可以收藏，在个人中心里面可以看到收藏的店家和优惠卷。打开下方寻味导航，地图中有美食分类，点击后直接就可以看到，感兴趣的可以直接前往。

3、页面设计

手绘风格的作品，还原当地街道概况，清晰简约，画风休闲轻松，绿意盎然，当地人民会感觉十分亲切，外地人也很容易看懂，地方标注很清晰，看起来很方便，想吃什么一下就能找到。案例中大范围标注了标志性建筑，还有地图可以直接前往，商家和用户也可以联系出品方，扩充和补充美食店铺。下方始终有回主页，个人中心和导航图触点，随时满足用户需求。

案例：摇可乐挑战

1、创意定位

摇晃后液体喷溅是碳酸饮料的最大特点，H5案例以此为挑战项目，通过摇晃手机，挑战喷溅射程，以此有点恶作剧感觉的游戏激发热情，最后还可以参与抽奖，用优惠券的形式吸引用户购买产品，提高销量。

2、策划逻辑

简单的手绘作品，“小鹅拼拼”APP的吉祥物小鹅手持可乐，点击触点开始挑战，查看游戏规则后，点击“开始”，倒计时快速跳转，用户快速摇晃手机，倒计时结束后，可乐瓶盖打开，可乐疯狂喷溅，上方有有趣的图案落下，左上角有喷溅射程米数跳转，最后是落地海报，包括用户的手速，打败了全国多少百分比的用户，手速称号，射程和抽奖触点，用户可再次挑战或分享好友。

3、页面设计

H5采用手绘风格，页面清新简单，蓝白背景，红色小鹅和棕色饮料，主题明显。快速跳跃的倒计时营造要抓紧时间快速摇晃的紧迫感，喷泉一样的喷溅效果看起来很爽，落下的小图案十分可爱，丰富体验。

大多数手绘风H5的交互玩法都比较简单，在H5游戏趣味性上略显不足，但其页面设计却有相当不错视觉效果，对于不喜欢游戏活动的用户来说，这类H5案例更符合他们的喜好，商家可根据目标用户的特点来进行选择。