《网店美工》教案手机淘宝视觉设计.docx
- 文档编号:24261407
- 上传时间:2023-05-25
- 格式:DOCX
- 页数:12
- 大小:1MB
《网店美工》教案手机淘宝视觉设计.docx
《《网店美工》教案手机淘宝视觉设计.docx》由会员分享,可在线阅读,更多相关《《网店美工》教案手机淘宝视觉设计.docx(12页珍藏版)》请在冰豆网上搜索。
《网店美工》教案手机淘宝视觉设计
***学校《网店美工》教案第1页
学
科
网店
美工
项目七手机淘宝视觉设计
检查
授课班级
授课时数
4
教具
计算机、多媒体广播
授课时间
教学方法
演示、讲解、实操
教学目的
①了解手机端网店与电脑端的区别
②熟知手机端网店的各模块构成
③熟记手机端各模块尺寸参数
④了解手机端网店的重要性
教学重点
和难点
重、难点:
手机端设计与电脑端的实质区别的理解和应用
复习提问
教学内容、方法、过程和版书设计
教学
追计
手机淘宝是淘宝网官方出品的手机应用软件,整合旗下团购产品天猫,聚划算,淘宝商城为一体。
具有搜索比价,订单查询,购买,收藏,管理,导航等功能。
随着智能手机的迅速发展和普及,移动互联网购物也在短短两年内被广大手机用户所接受和青睐。
手机客户端格式作为登入移动互联网最便捷的方式,是PC端所无法比拟的,也因此,手机端的网络交易突飞猛进,到2016年,手机淘宝目前每天超过1亿活跃用户访问,移动月活用户近4亿。
数据显示,接近80%的流量来自于手机端,仅以淘宝网为例,全网接近70%的成交来自于手机端。
手机端作为移动互联网的第一入口,未来将为企业进入营销时代开辟了一条康庄大道,也是无线互联网行业中一个重点发展的项目,具有重要的意义。
淘宝手机端有以下几个特点:
1、使用场景多样化,手机是现代人随时随地上网工具。
2、时间碎片化的聚集体,碎片式时间可以引发瞬间的消费。
3、短时间预览,快速阅读,快速消费。
4、减少竞争。
搜索呈现没有PC端多,手机端受流量限制打开速度不如PC端,消费者都属于快消费群体,会产生查阅对比相对PC端减少,因此减少了产品与产品、品牌与品牌之间的竞争。
5、手机店铺增加了买家与卖家的粘性,也给线上与线下互通提供了载体,为品牌与卖家沟通、互动提供了平台。
为了大力推广手机端业务,淘宝还特别推出独立于PC端的一款营销产品,叫手机专享,是无线端一个重要的设置,拥有手机端独立的筛选条件,获得手机端搜索加权,商品会被优先展示。
手机成交量,成交越多,权重越高。
手机店铺的流量越多,排名也会相应的越靠前。
2016年手机端淘宝的市场可谓越来越大,商家要想抓住无线端的广大市场,必须要掌握的技能,那么,重视和加强手机端视觉设计,就显得愈加的重要。
任务30手机端的设计与制作
淘宝手机框架由官方组件、文本组件、标题组件、图文组件、焦点图轮播组件、miniBanner组件、宝贝组件、辅助线组件8个主要部分组成。
(目前淘宝已进行改版,框架更加自由,可自定义编辑模块增多。
)
手机端的尺寸单张图片宽度在480px-620px内,单张图片高度小于等于960px。
手机淘宝的设计上大致有以下几点规范:
1.基本要求
手机详情总体大小:
图片+文字+音频应小于等于1.5M,图片仅支持JPG、GIF、PNG格式。
因为容量有限,最好所有图片都是本宝贝相关的图片。
2.图片大小要求:
(1)宽度480-620像素;
(2)高度小于等于960像素;
(3)格式为:
JPG\GIF\PNG。
举个例子哈,比如小伙伴可以上传一张宽度为480,高度为960像素,格式为JPG的图片,就搞定啦。
3.文字要求:
(1)当需要在图片上添加文字时,中文字体大于等于30号字,英文和阿拉伯数字大于等于20号字;
(2)当需要添加的文字太多时,建议使用纯文本的方式编辑,这样看起来更清晰。
手机上看文字不同于电脑,所以文字建议尽量简洁,用一些关键词去突出产品的特色。
以下是手机端首页的大致设计框架:
图7-1手机端首页框架示意
手机淘宝店铺装修无线端详情页和PC端是有区别的,无线端店铺是没有店招这部分的,假如设计一个店招的,就会增强视觉效果,提升网店品牌形象。
手机端图片相较PC端要小很多,图片布局也完全不同,图片上面的文字也变得很小,因此把PC端的网店装修的内容都缩小之后照搬到手机端是绝对禁止的!
如果在手机上的买家看不清图片上的内容,更不会看得到我们的宝贝详情了,那么就大大增加了跳失率。
手机端设计需注意几点:
图片应尽可能小,以便快速打开。
(尤其在非WIFI状态下,打开速度非常有限。
)
信息简洁,直击重点,快速浏览。
设计主题和店铺风格统一。
及时更新,根据不同的活动内容和促销目的,需有不同的风格,增强给买家的新鲜感。
分类结构要明朗,模块划分清晰,多以图片为主。
色彩明快,但颜色不宜过杂。
手机端因为浏览面积小,色系若过分沉重,视觉上会有不适感。
而因尽量使用单色背景,遵循“简约”的设计理念。
7.字体大小的问题,也是最重要的问题。
经验上来看,正文文字使用(雅黑26px模式为锐利)的时候,在手机上浏览感觉最舒服。
26px在pc上看似有点大,其实在手机上显示是很小的。
谨记以上几点,我们挑选宫格部分进行设计制作:
【案例一:
玩具】
步骤1开启PhotoshopCS6。
新建文件为“手机端宫格”,尺寸为宽度620像素,高度400-960像素;
图7-2执行“新建”命令
步骤2由于手机端大小限制,我们可设定每行为2个宫格,以方便观看并适合手指点击;
图7-3绘制宫格
步骤3使用文字工具
排列所需文字内容;
步骤4用矩形工具
做出色块部分,对版面做层次处理;
图7-4在宫格内添加文字
图7-5绘制装饰色块
步骤5分类对文字填充颜色,突出每个文字部分;
图7-6添加文字
步骤6拖入产品图,位于宫格中心,居中,完成手机端宫格设计;
图7-7添加产品图
图7-8玩具手机端最终效果
【案例二:
服装】
步骤1开启PhotoshopCS6。
新建文件为“手机端宫格”,尺寸为宽度620像素,高度400-960像素;
图7-9执行“新建”命令
步骤2由于手机端大小限制,我们可设定每行为2个宫格,以方便观看并适合手指点击;
步骤3使用文字工具
排列所需文字内容;
图7-10绘制宫格
图7-11在宫格内输入文字
步骤4用矩形工具
做出色块部分,对版面做层次处理;
图7-12绘制装饰图框
步骤5从素材文件夹拖入“双十一标志.psd”,位于画框左上角;
图7-13在装饰框内添加文字
步骤6拖入产品图,位于宫格中心,居中,完成手机端宫格设计;
图7-14添加产品图
图7-15服装手机端最终效果
我们可以看出,除去尺寸差别,手机端设计手法与PC段基本一致。
按照以上设计方法,我们把手机端首页完善(如图7.1.8),当中各版块的尺寸可参考运用:
位于手机端首页最低部的自定义菜单,可根据个人需求去设定选项;
图7-16自定义菜单选项
同理,手机端商品详情页尺寸单张图片宽度在480px-620px内,单张图片高度小于等于960px,我们可利用PC端详情页的设计作为基础,调整尺寸与文字大小,精简内容,做到图文都简明扼要,全面去适应手机端的要求。
手机端淘宝店铺装修其实并不难,只要我们掌握好一些小技巧就行,并且在做手机端淘宝网店装修时多多注意一些细节问题,那么一个高转化率的手机店铺就实现了。
课后任务:
1.综合以上知识,按下图“作业素材-手机页面”方向进行无线端页面设计和规划,产品可自行寻找和下载,文字可沿用。
图7-17作业素材-手机页面
2.设计“优品食代”无线端首页。
风格及表现手法不限。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网店美工 美工 教案 手机 淘宝 视觉 设计