门店的部分文件与图片素材

项目主题与内容框架

在梳理内容时，我们发现了3个要重点展示的信息，它们分别是品牌、功能和区位。

在品牌方面，要对店铺有具体介绍，让用户知道你是谁；在功能方面，要对店铺服务做说明，让用户知道你能干什么；在区位方面，要对店铺的位置和经营做一定说明，让用户知道你在哪里，什么时间可以找到你。

“你是谁”“你能干吗”“你在那里”，可以说是普通消费者要关注的3个信息点，如图所示，用这个思路对H5进行设计，方向就比较清晰了。

3个重点信息

在品牌方面，“一拙”的品牌文化主要围绕茶展开，品牌的座右铭是“用好物，喝好茶，现代品质生活”，这给人的理念感比较像是“现代城市中，一个带有文化情怀的独立休闲空间”，是一个可以让人放松、静心、会友的地方。而功能方面，围绕品牌特征，我们发现小店有以下3个主要经营特色：

（1）提供茶相关的饮品和食品；

（2）提供设计师原创设计器物（以茶类产品为主）；

（3）提供主题创意活动和沙龙的场地。

通过对品牌与功能的分析，这支H5的内容原型基本被梳理出来了。

（品牌）品牌展示：

第1屏：封面图-主副标题

第2屏：品牌门店介绍

（功能）产品展示：

第3屏：品茶（茶饮产品）

第4屏：好物（器物产品）

第5屏：展览（活动产品）

第6屏：媒体（活动产品）

（区位）门店区位：

第7屏：地址（门店位置展览）

第8屏：邀请（邀请大家来门店体验）

8屏这个数量，不会显得内容过多，不会让用户看得太疲惫，也正好交待了品牌、功能和区位这3个信息点。

而从主题来说，我们可以发散出很多方向。比如，喝茶可以让人静心和放松；比如，来这里喝茶可以会友和聊天；再比如，在这里你可以看到很多创意展览。经过发散后，我们得到了如下主题：

①不要错过一个能让你放松身心的空间；

②“一拙”是一个会友的好去处；

③这是一个在城市中能让你放松下来的空间。

对比下来，项目选择了（3）作为主题，因为独立空间不仅可以隐含喝茶、静心和会友这些特征，还有“放松”的含义，这与品牌调性是比较一致的。为了让文案更加生动和有吸引力，最后使用的标题是“请问你来“一拙”做过客吗？”

用疑问句会有着更加轻松的感觉，也容易让人愿意继续看下面的内容，避免了说教和太过于直白。确定了主题和内容后，下一步就可以出草图了。

H5原型和设计构思

有文化气息的文创品牌比较适合清雅、简约的风格，色彩不需要太多，对比也不应太强。H5的色调以Logo的金色作为主色调，整支H5的页面风格应追求简洁、大气的感觉，就像是中国画，会注意留白和视觉氛围。此次项目的原型图采用Illustrator（AI）绘制，具体样式如图所示。

H5的原型图

H5制作过程

在制作方面，采用了Photoshop和MAKA（如图所示）。Photoshop主要用来进行内容布局设计，动态效果则是在H5工具MAKA中完成的。其实项目完全可以在MAKA中完成，但为能演示更多的工具操作，这里选用了两个工具配合进行制作。

MAKA的网站主页

制作前要建立Photoshop尺寸文件，画布设置宽为 640px、高为1008px，如图所示，这是为了后期方便将设计文件导入到H5工具，这是目前H5工具普遍采用的页面尺寸。下面开始详细讲解。

设计的细则讲解

（1）图片设计

图片是此次设计的关键，因文字内容整体较简单，所以文字只起点缀作用，这就凸显出图的重要性。从品牌提供的图片中选择合适的图片分别安插在了8个页面当中，但很快就出现了一个难题。

因为在页面中整版图最为美观，所以计划用8张整图配8段文字来设计画面。但在产品展示部分，品牌方并没有可以包含所有产品的整图，只有单个产品的展示图片。

如果直接将不同产品图拼凑在一个页面，就会很不美观，但如果将产品图分散到其他页面，又会使得H5的页数太多。