
1.3 掌上店铺的制作流程
掌上店铺制作流程是指从主题、整体风格、网站架构、店铺页面组件设计,一直到最后的店铺维护和更新等一系列过程。图1-10为掌上店铺设计与装修的主要流程架构及主要内容。

图1-10 掌上店铺设计与装修流程图
1.3.1 规划时期
规划是搭建掌上店铺之前的作业,不论是企业还是个人掌上店铺,都少不了规划时期。掌上店铺设计就好比为客户做项目,事先必须经过详细规划及讨论,然后才能凭借团队合作的力量将成果呈现出来。
设定掌上店铺的主题及客户群
掌上店铺主题是指移动端网上店铺的内容及主题诉求,图1-11所示为女装网店。

图1-11 主题鲜明的掌上店铺
客户群指会进入移动端网上店铺页面的主要对象,这就好像市场调查一样,越接近主客户群的产品,市场的接受度越高。同样的宣传主题,针对的人群不同,在设计时就要考虑不同的页面风格,只有这样才能更加贴近客户群体,从而使移动端网上店铺更具有竞争力,图1-12所示为针对宠物爱好者设计的宠物用品掌上店铺。

图1-12 针对宠物爱好者设计的掌上店铺
怎样让移动端网上店铺具有高浏览率就是设计之前的规划重点,虽然不可能为了设计一个掌上店铺而进行市场调查,但是在掌上店铺建立之前,若能先针对网店主题及客户群多与客户及团队成员讨论,必定可以让掌上店铺做得更加成功,也不会因为掌上店铺内容不符合客户的需求,而导致人力、物力及财力的浪费。
绘制掌上店铺的页面规划
掌上店铺页面规划架构图是整个掌上店铺的组织结构,也可将其看作页面的分类方式,可以根据网店主题及客户群设计出掌上店铺需要哪些页面来放置商品及数据。下面以户外商品的移动端网上店铺为例,为其设置一个首页和五个二级页面,如图1-13所示。

图1-13 掌上店铺的页面规划
链接交互设计
浏览导航就像商场中的地图一样,会引导浏览者到想要去的地方。但网页上的链接却不能这么直观地引导浏览者,此时链接按钮的设计就显得非常重要。
垂直链接顺序
此种链接顺序是将所有的导航功能放置于首页,使用者必须回到首页才能继续浏览其他页面,优点是设计容易,缺点是浏览时较麻烦。图1-14中的箭头就代表浏览者可以链接到的页面顺序。

图1-14 垂直链接顺序
垂直与水平链接顺序
水平链接指的是在同级页面之间可以互相链接。同时具有水平及垂直链接顺序的导航设计便具有浏览容易的优点,缺点是设计上较为复杂,如图1-15所示。

图1-15 水平与垂直链接顺序
温馨提示
不管各位想要采用何种方式设计链接,一定要经过详细讨论与规划,在每个页面中都放置可直接回到首页的链接。
设定掌上店铺的整体风格
页面风格就是掌上店铺界面的美术效果,可细分为首页及二级页面的画面风格。首页属于掌上店铺的门面,一定要针对主题及客户群两大需求进行设计。二级页面放置掌上店铺中的各项内容,风格和首页保持一致即可,界面不需要太花哨,否则会让浏览者感觉无所适从,找不到重点。
在掌上店铺图像广告设计中,颜色最好保持在三种色系以内,这样的页面会使浏览者感觉非常轻松,不会产生厌烦感。
另外,各个页面中的链接文字或图片数量则是依据掌上店铺主题进行设计的,建议大家先绘制相关草图,由客户及团队成员共同讨论,再将其设计成掌上店铺效果。这样可以避免反复修改,也会给客户一种被重视的感觉。
前期预算
预算费用是掌上店铺设计中最不易掌控及最现实的部分。不论是掌上店铺布局、图像编修,还是请专人设计相关组件、视频动画、店铺动态等,必须支出费用。无论如何,各位都要将可能支出的费用及明细详列出来,以便掌控预算费用,也可以尽量避免后期与客户产生经济纠纷。
工作分配及制定时间表
根据设计团队中每个人的专长来分配掌上店铺开发的各项工作,除了可以让掌上店铺内容更加精致,更可以大大缩减开发时间。
专业分工的缺点是进度及时间较难掌控,因此在分工完成后要再绘制一份开发进度的时间表,将各项设计的内容与进度做详细规划。在团队中也要有一个领导者专职进度掌控、作品收集及与客户的协调作业,以确保设计的整体风格一致,满足客户的需求。
关于主题掌上店铺的资料收集
以建构一个围巾掌上店铺为例,围巾照片、文字介绍及店铺LOGO等必须由客户提供。各位可以根据掌上店铺架构中各个页面所要放置的数据内容,列出一份详细的数据清单,并请客户提供,团队中的领导者也要随时和客户保持联系,做团队与客户之间沟通的桥梁。图1-16所示为围巾掌上店铺。

图1-16 围巾掌上店铺
1.3.2 设计时期
设计时期已经进入掌上店铺实际制作的阶段,最重要的是整合及校正错误。如何让客户满意整个掌上店铺作品,如何呈现整个掌上店铺中页面的功能,如何掌握页面之间的链接,都会在这个时期决定。
掌上店铺设计稿
在与客户沟通完毕后,应该先设计一个最原始的版面,在与客户达成共识后,再对页面中的各个组件进行精确设计。
掌上店铺页面组件设计
在进行掌上店铺设计之前,可以先将店招、素材图案、用于宣传的广告图片及视频动画设计好,再进行效果组合。各个成员根据专长来设计各组件,将客户提供的照片进行调整,对文字做修饰,所有素材都准备好后进行页面整合。
掌上店铺页面设计及校正错误
至此才能算是掌上店铺设计,才会真正运用到装修功能。我们先装修首页、新建自定义页面及店铺动态页面等,然后将设计好的各组件在此进行整合,完成整个掌上店铺的搭建。掌上店铺搭建完成后,必须按照客户的意见进行进一步修改,并且针对掌上店铺中所有的功能内容进行测试,确保内容准确无误。
因此,在设计工作时间表时,要将此测试时间加入其中,免得没有进行测试的时间。
1.3.3 保存与发布时期
保存与发布时期的工作就简单很多,就是将整个掌上店铺内容在装修页面中进行保存并发布,通过手机扫描二维码就可以将掌上店铺的效果展现到手机中,或者在手机浏览器中输入网址打开掌上店铺。
在电脑端保存并发布
通过手机淘宝装修设计与开发的掌上店铺,绝大多数还是在电脑中进行保存并发布操作的。
在手机淘宝中可以查看店铺效果
在手机淘宝装修页面中保存过的掌上店铺,可以直接在手机淘宝App中扫描二维码进入,也可以在手机淘宝中直接查找店铺并进行浏览。
我们可以将生成的二维码打印出来,或者将其与其他平面媒体放在一起,好的广告及营销手法可以增加商品的市场占有率。
1.3.4 维护与更新时期
定期对掌上店铺做内容维护及数据更新,是维持掌上店铺竞争力和宣传店铺的不二法门。我们可定期或在特定节日,改变掌上店铺的风格样式,给浏览者带去新鲜感。
数据更新是随时都要注意的部分,避免商品已在市面上流通了一段时间,但掌上店铺中的数据却还是旧数据的情况发生。
另外,掌上店铺内容的扩充也是更新的重点之一。在掌上店铺创建初期,商品内容及种类一般较单一。但是慢慢就需要增加内容,让整个掌上店铺的数据更加完备,建议各位多参考其他同类型的掌上店铺或相关数据书籍,勤做笔记,多下功夫,真正让自己的掌上店铺在同行业中立于不败之地。