移动端视觉设计制作

v
v
任务1 移动端店招、焦点图及Mini Banner的制作
8
任务1 移动端店招、焦点图及Mini Banner的制作
9
Mini Banner的设计理念及制作
Mini Banner可以作为分类入口设计，在分类入口的前提下，放爆款商品作为 画面主题，目的是吸引买家点击进入承接页，达到让其看到图片就想点击进入查 看该模块商品的效果。也可以像焦点图一样作为独立Banner出现。 手机端的分 类不一定是单纯的文字，可以以主推商品作为分类画面主体，这样可以快速引导 买家点击进入商品分类的承接页，更多的展现是以图片为主的，不需要看文字来 区别商品分类，更何况我们还有多语言的问题。
任务1 移动端店招、焦点图及Mini Banner的制作
4
（2）手机端焦点图及Mini Banner 手机端焦点图及Mini Banner的图片要求为720px×200px或720px×360px。
任务1 移动端店招、焦点图及Mini Banner的制作
5
焦点图及Mini Banner 的图片模板中，单行多点击的图片总宽度必须在720px及以上。
v
v
任务1 移动端店招、焦点图及Mini Banner的制作
11
目录
contents
任务1 移动端店招、焦点图及Mini Banner的制作 任务2 移动端店铺布局及商品详情页制作
任务2 移动端店铺布局及商品详情页制作
13
店铺的布局百度文库则
以速卖通平台为例，做手机店铺首页布局首先要了解手机店铺包含的基础模块，手机店 铺包含两个页面，第一个是手机店铺首页装修，以下功能模块：店招、6个商品推荐模块、3 个系统模块、6个图片模块、二是无线活动页面。 一般店铺模板的顺序为： 1）店招设计；2）焦点图设计（图片模板）；3）Mini Banner设计（图片模板） 4）宝贝推荐模块展示（系统模板+商品推荐模板）
任务2 移动端店铺布局及商品详情页制作
14
宝贝推荐模板的布局 宝贝主图的布局前提是宝贝主图要做到晰干净，像素要满足平台要求。宝贝设 置标题的时候尽量把主要关键词放在最前面，其他的放在稍微靠后的位置来进行视 觉营销，同时也可以根据自己的需求选择不同的商品展现样式：
任务2 移动端店铺布局及商品详情页制作
项 目 六 移动端视觉设计制作
中国人民大学出版社
跨境电商美工实务
目录
contents
任务1 移动端店招、焦点图及Mini Banner的制作 任务2 移动端店铺布局及商品详情页制作
任务1 移动端店招、焦点图及Mini Banner的制作
3
（1）手机端店招 手机端店招的图片要求为720px×200px，图片格式为jpg或者jpeg
v
任务1 移动端店招、焦点图及Mini Banner的制作
10
焦点图的设计理念及制作
设计理念：除了店招，映入眼帘的就应该是焦点图了，焦点图一可以是店铺 或者平台的活动信息Banner，也可以是爆品推荐，或者配合活动的单品推荐。原 则依旧是文字清晰、内容简洁、尽量阐述单一诉求。手机屏幕较小，浏览信息受 限，买家不会对一个页面做过多停留，更不会细细研读卖家的各种细节文案。
7
焦点图的设计理念及制作
设计理念：除了店招，映入眼帘的就应该是焦点图了，焦点图一可以是店铺 或者平台的活动信息Banner，也可以是爆品推荐，或者配合活动的单品推荐。原 则依旧是文字清晰、内容简洁、尽量阐述单一诉求。手机屏幕较小，浏览信息受 限，买家不会对一个页面做过多停留，更不会细细研读卖家的各种细节文案。
任务1 移动端店招、焦点图及Mini Banner的制作
6
店招的设计理念及制作
设计理念：店招设计以店铺品牌为主，结构元素要尽量少，色彩、字体、 文案、照片、设计结构、创意等。另外，也可以通过店铺或者平台活动等氛 围渲染。原则为文字清晰、内容简洁、尽量阐述单一诉求。
v
任务1 移动端店招、焦点图及Mini Banner的制作
15
模板摆放原则
卖家可以根据自己的要求调整商品的摆放，但 是一定要基于简明清晰的摆放原则。这里推荐一种 最常见的摆放原则：店招+“焦点图设计模块+宝贝 推荐模块”+“mini Banner设计+宝贝推荐”+系统 推荐模块。
版面一：开头的焦点图突出店铺爆款信息，以 及店铺的促销折扣信息。
任务2 移动端店铺布局及商品详情页制作
任务2 移动端店铺布局及商品详情页制作
19
详情页的布局原则
商品详情页是店铺中最容易与用户产生交集和共鸣的页面，详情页设计对用户 购买行为产生直接的影响。在进行商品描述时，文字内容要尽量简短，突出商品的 卖点和特点。
谢谢
中国人民大学出版社
跨境电商美工实务
16
模板摆放原则
版面二：
焦点图下面对应相对的商品模板，把 相应的折扣商品与焦点图放到一起， 突出店铺活动。
任务2 移动端店铺布局及商品详情页制作
17
模板摆放原则
版面三：
突出其他主题风格，把对应商品摆放起来，减少客 户的寻找浏览时间。
任务2 移动端店铺布局及商品详情页制作
18
模板摆放原则
版面四：
根据系统模板把店铺TOP Selling 等模板放到下面， 与上面模板形成对应，增加整个店铺的完整性。