电商视觉设计教程-第8章-移动端网店的用户体验设计

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