微信小游戏官网设计总结

| 导语 如果说网站是一个平台，那网页就是这个平台的门面，网页设计是够合理，美观，将直接影响浏览者对它的关注和认可。美观大方富有创意的网页设计不仅能够吸引大量的浏览者，使得更多的人认识了解，过目不忘，还能让人青睐相应的品牌。

项目背景：

微信小游戏是基于微信客户端的游戏，它即点即玩，无需下载安装，体验轻便，2017年12月28日，微信更新的 6.6.1 版本开放了微信小游戏，并开放了小游戏开发文档和开发者工具。2018年3月份下旬，微信小程序游戏类正式对外开放测试。微信小游戏平台希望让更多海外开发者了解微信小游戏的主要内容，吸引更多优秀的海外开发者能够更清晰的了解微信小游戏，并且顺利找到接入指引和开发指南。

任务介绍：微信小游戏官网设计

目标：海外开发者

设计目标：针对符合海外开发者审美习惯的品牌宣传类官网

一.设计之前

需要解决的问题：

1.微信小游戏目前还没有很强品牌识别度，人们对于小游戏品牌认知更多的是跳一跳，而对于小游戏本身品牌的了解则需要更长时间的培养，小游戏现有的视觉品牌元素只有一个logo，以及一个logo的主色调，需要如何通过现有的品牌元素强化小游戏的视觉认知和品牌宣传是个急需解决的问题。

2.设计形式上：微信小游戏是基于微信小程序下的一个游戏类目，设计风格需要与微信小程序的网站设计风格衔接上，又要不局限于小程序的版面布局和设计框架。调研了小程序平台以及微信开放平台等，设计风格偏向简洁，素雅，干净风格为主，颜色为黑白灰微信绿四色。版式大多是头部通栏banner图和分栏式设计，如图，如何打破原有页面格局去引导用户更清晰的浏览信息？

小程序页面结构：

微信小程序页面内容与微信小游戏页面内容对比可看出，网站主要展示几个大的模块信息，相比之下，微信小程序的内容展示为四个主要模块，除了开发支持可以跳转外，其余均为信息文案展示，内容较为清晰，更适合单屏阅读，用户在首页浏览一屏半即可，因此页面结构适合顶部通栏banner和多栏式的icon布局设计，上下滑动浏览即可。再次分析微信小游戏的内容，主要为五个板块，案例展示以及开发指南，导航均有跳转，小程序接入指引步骤中有并列同步进行的步骤，多层信息需要采用不同的交互展示，不仅仅是静态为主，思考如何使得页面信息逻辑更易读是关键，再加上需要更进一步的交互切换效果，单屏上下浏览的方式已经不是最优的浏览方式了，一个页面承载了太丰富的内容和交互操作使得用户会比较困扰，这里我尝试用左右屏幕滚动设计，分为五个板块，每个板块承载相对应的内容，这里上下承接且交互不干扰，设计师可以把每一个板块的内容通过不同的交互样式设计的更大胆。

结合设计定位以及页面流程图，绘制低保真线框图。小游戏平台的定位，在前期会专注于“高传播性”与“口碑较好”的游戏类型。官方的希望是在前期给小游戏树立的形象就是“小而美”，通过精品游戏提高整个小游戏平台的格调，在保持微信平台现有基本风格的基础上融入小游戏的色调。

初期版本尝试和问题：

针对上述问题的最后修改版本如下：

设计总结：

网页设计是展现平台，介绍产品和服务，体现平台发展战略的重要途径，因此明确设计的目的和用户的需求，以用户为核心，根据市场状况，结合品牌的思路去思考设计的价值。在构思网站时候，前期需要整体分析整个网站需要展现的内容模块，快速定位平台的特性，寻找一个最优的交互方式展现内容。网站的类型，特性，以及人群的特点，国家，性别年龄等，这些都是设计师需要了解的背景，保证网站设计的形式与内容良好的统一，形式符合主题的需要，不能只讲究表面的形式以及过分独特的设计风格而脱离内容，或者只追求内容而缺乏艺术表现，网页设计会变得空洞而无力。设计师只有将2者有机的结合起来，深入主题，融合自己独特的思想，找到一个最合适内容的表现形式，才能体现出网页设计独具分量的价值。