1、了解移动端网店的店标设计掌握移动端网店的图片尺寸标准掌握移动端网店如何进行视觉设计学习目标目 录移动端网店的设计标准8.1移动端网店视觉设计8.28.1 移动端网店的设计标准 01 移动端网店店标设计02 移动端网店图片尺寸标准03 移动端网店框架结构安排8.1 移动端网店的设计标准 手机淘宝的店标直接出现在店铺头上,在店标右侧显示店铺名称。店标图片8.1 移动端网店的设计标准 移动端网店还可以使用商品的实物照片作为店标,一眼即可看出店铺销售的主营商品。店标图片8.1 移动端网店的设计标准 手机淘宝对图片的发布尺寸要求:8.1 移动端网店的设计标准 高度960像素(建议高度不超过600像素);
2、图片格式支持JPG、GIF、PNG需在图片上添加文字时,中文字号30;英文和阿拉伯数字字号20图片尺寸标准8.1 移动端网店的设计标准 移动端网店首页界面红色框出部分为淘宝平台自动生成的版块,其中将店铺首页划分成了“店铺首页”“全部商品”“新品上架”“店铺简介”等固定版块,卖家只需在不同区域添加对应的店铺内容即可移动端网店详情界面图中出现的“收藏”“立即购买”等图标是不需要自己设计的,并且在详情页的第一屏都会出现商品图片、价格、名称等信息展示,卖家可以不考虑这些框架结构的布置,需要设计的是图片、名称等信息内容店铺框架结构8.1 移动端网店的设计标准 图片对应的链接移动端店铺首页的轮播图片对应8
3、.2 移动端网店视觉设计整体设计风格首尾呼应04简单方便的操作与交互03保持常换常新06保持色彩与文字的鲜明感05迎合极速打开需求0102 信息内容简洁,便于快速传播8.2 移动端网店视觉设计图片加载时间长8.2 移动端网店视觉设计手机移动端商品详情界面简化版 电脑版图文详情对比8.2 移动端网店视觉设计PC端的展示文字信息清晰可见8.2 移动端网店视觉设计移动端的展示文字信息则比较模糊界面整体设计感较强,显得较为精致,但消费者不能很好地阅读界面中的文字信息,营销效果也会削弱。因此,不能一味地追求视觉的美观,还要注意通过文字内容的精简与尺寸的变化,保证信息能被消费者快速接收8.2 移动端网店视
4、觉设计大量的文字信息图文结合相比于纯文字的形式,图文结合的方式能让消费者在接收信息时更为省心8.2 移动端网店视觉设计界面的缩放设计 未缩放,正常显示尺寸的商品详情界面。受手机尺寸的限制,界面中 的信息较小,不能清晰地展示在消费者面前滑动屏幕后,界面放大,消费者能够较清晰地看清界面中的信息8.2 移动端网店视觉设计当消费者想要完整且清晰地阅读详情页文字信息时,在未缩放的情况下,无须拖动界面,手机屏幕便可以展示该部分信息而为了能够更清晰地阅读界面上的文字信息,就需要消费者点击图片,然后滑动屏幕,放大界面放大界面后,受手机屏幕尺寸的显示,界面中的信息不能在纵向或横向空间中完整的展示,消费者就需要左右上下拖动界面才能完整地浏览这部分信息8.2 移动端网店视觉设计女鞋手机店铺8.2 移动端网店视觉设计店铺笼罩在黑色色调之中白色底图片手机淘宝所提供的背景是白色前几屏页面风格后几屏页面风格首页装修8.2 移动端网店视觉设计两种色调对比深色调显得较为沉闷与压抑,不能给人带来轻松的感觉明亮的色彩则给消费者带来豁然开朗感,惹眼而又具有活力8.2 移动端网店视觉设计高纯度色彩高明度色调8.2 移动端网店视觉设计雅诗兰黛双十一轮播图课后思考题简述移动端网店店标如何设计。找出三家自己感兴趣的网店,并分析它们的用户体验设计好在哪里。对比PC端和手机端网店的用户体验设计,并分析它们有何不同。