门店的部分文件与图片素材
项目主题与内容框架
在梳理内容时,我们发现了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的页数太多。