学习单元十-付费版店铺装修任务二焦点图片设计

店铺装修整页设计授课教师：姓名移动商务视觉设计Contents任务一付费模板的调整任务二焦点图片设计任务三其他部分任务3付费版整页设计2.1认识焦点图片2.焦点图片的设计焦点图是一种网页内容的展现形式，在网页很明显的位置，用图片组合播放的形式，类似焦点新闻的意思只不过加上了图片。一般多使用在首页版面或频道首页版面，因为是通过图片的形式，所以有一定的吸引性、视觉吸引性。容易引起访问者的点击，据国外的设计机构调查统计，焦点图的点击率明显高于纯文字，转化率高于文字标题5倍。任务3付费版整页设计2.焦点图片的设计2.2焦点图片的构图分析图示任务3付费版整页设计2.焦点图片的设计2.2焦点图片的构图分析图示任务3付费版整页设计2.焦点图片的设计2.2焦点图片的构图分析图示任务3付费版整页设计2.焦点图片的设计2.2焦点图片的构图分析图示任务3付费版整页设计2.焦点图片的设计2.2焦点图片的构图分析图示任务3付费版整页设计2.焦点图片的设计2.2焦点图片的构图分析图示任务3付费版整页设计2.焦点图片的设计2.2焦点图片的构图分析图示任务3付费版整页设计2.焦点图片的设计2.2焦点图片的构图分析图示任务3付费版整页设计2.焦点图片的设计2.2焦点图片的构图分析图示九宫格式构图-八种排版任务3付费版整页设计2.焦点图片的设计2.3焦点图片设计分析字体传达：清晰易辨认推荐“方正兰亭黑”系列禁止使用微软雅黑等未授权字体尽量少使用英文，且拼写一定要正确尽量避免对字体的变化，倾斜、拉伸、变形等焦点图片设计要素：字体任务3付费版整页设计2.焦点图片的设计2.3焦点图片设计分析焦点图片设计要素：图片图片质量严格按照TMS标准下，从视觉上控制JPG产生的噪点和层次感的丧失。图片素材素材图片应该以真人实景为主。除特殊需求否则不推荐卡通效果类素材。图片素材当素材设计到大小调整或图片比重调整时，需按照1：1的长宽比进行缩放或修改。含人物，风景等易辨识内容时，严禁压扁或拉长素材内容。任务3付费版整页设计2.焦点图片的设计2.3焦点图片设计分析焦点图片设计要素：色彩焦点图的色彩诱导必不可少，多色搭配或是纯色搭配，只要色彩得当就能产生过目不忘的效果。任务3付费版整页设计2.焦点图片的设计2.3焦点图片设计分析（1）撞色放大主题选取了洋红色和绿色这两种对比性强烈的色彩，但这样对比却也形成了绝隹的视觉冲突。黄色作为色系的代表色和洋红色构成了一个补充，同时又巧妙地协调了洋红和绿色，这2大色系的色差，最后通过构图的平衡和用户从左向右农的视觉习惯，将受众的眼神牢牢的锁定在了洋红色的高腰裤上，将要强调的双排扣和高腰的特点放到最大。任务3付费版整页设计2.焦点图片的设计2.3焦点图片设计分析用红色的大墨镜、手套和夸张的呐喊表情动作构成了视觉的焦点，引导卖家的眼光顺从焦点，形成一个从左向右的流动态势，促使买家的受众视觉热点流向右边的文字区域，同时“新品陆续揭载”的字样又和左边形成了呼应的关系，合理的视觉流向不但给了买家继续浏览下去的欲望，也遵从了浏览习惯的原则。（2）肢体语言全场任务3付费版整页设计2.焦点图片的设计2.3焦点图片设计分析（3）留白抢风头

留白设计也是焦点图设计中常用的一种手法。就好比当画面里所有人都静止时，有动作的人更惹人注目。同样的，当物体都聚集在一处时，某一留白处理的部分，只写上寥寥几个字或者一句话时，留白处的信息便成了焦点区，它能把买家的视觉集中到这处显眼的地方。任务3付费版整页设计2.焦点图片的设计2.3焦点图片设计分析当然，在焦点图的设计呈现有很多的技巧与方式都是组合应用而非单一出现的，但不管方式怎样变换组合，焦点图的设计的共同目标都是为了更加淸晰地去完善店铺在视觉部分的呈现以实现销售的提升。任务3付费版整页设计2.焦点图片的设计2.4焦点图片规范示例规范：TMSTMS图片算法：高x宽x0.4/1024+2=标准最大k数510x200x0.4/1024+2=41.8KB常用尺寸：300x150

最大19.578K270x70

最大9.383K190x70

最大7.195K80x80

最大4.5K任务3付费版整页设计2.焦点图片的设计2.4焦点图片规范示例任务3付费版整页设计2.焦点图片的设计2.5焦点图片设计技巧字体选用正版字体（方正），一般两种字体搭配

为佳。不要超过三种。太多的附加元素，会干扰用户对主题的识别英文尽量少用，万不得已情况下，一定要拼写正确图片素材要注意版权问题，人物最好用授权过的颜色方面，最好选择纯度高的颜色，尽量避免在颜色中添加过多的灰度尽量避免对字体的变化，倾斜、拉伸、变形等，PS位图软件会出现锯齿任务3付费版整页设计2.焦点图片的设计2.5焦点图片设计技巧图片格式：JPG

JPEG图片以24位颜色存储单个光栅图像。JPEG是与平台无关的格式，支持最高级别的压缩。但这种压缩是有损耗的。任务3付费版整页设计2.焦点图片的设计2.5焦点图片设计技巧图片格式：GIF

GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它GIF最多支持256色

最简单的支持低版本IE的透明色解决方案

任务3付费版整页设计2.焦点图片的设计图片格式：PNG2.5焦点图片设计技巧

PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的