Photoshop CC网店美工全能一本通课件

项目简介：随着移动互联网的发展及普及，消费者在手机端电商平台进行网购已经成为了主流现象。因此，手机端店铺首页的设计对于所有商家而言都至关重要，是网店美工设计任务中的核心工作。本章针对手机端店铺的基本概述和首页模块设计等基础知识进行系统讲解，并针对流行风格和典型行业的手机端店铺首页进行设计演练。通过本章的学习，读者可以对手机端店铺首页的设计有一个系统的认识，并快速掌握手机端店铺首页的设计规范和制作方法，成功制作出具有强大购买力的手机端店铺首页。第7章手机端店铺首页设计课堂学习目标掌握手机端店铺基本概述熟悉手机端店铺首页模块设计7.1手机端店铺基本概述手机端店铺设计的必要性手机端与PC端店铺设计的区别手机端店铺设计的关键点

7.1.1手机端店铺设计的必要性随着移动互联网的发展及普及，大众使用移动设备上网的时间远远超过使用电脑设备。淘宝、京东、一条等各大电商平台适应时代趋势，相继开发App，便于广大消费者使用移动设备进行购物。由于移动设备有着方便灵活的特点，极大地满足了消费者可以随时随地进行购物的需求。如今，消费者通过移动设备进行购物的数量不断增多，甚至在重大节假日，通过手机端进行购物的消费者已经远超越PC端。因此，手机端店铺的设计与装修对于所有商家而言都至关重要。

7.1.2手机端与PC端店铺设计的区别在店铺设计与装修过程中，部分网店美工会把PC端店铺的图片直接运用到手机端店铺中，这会产生尺寸不合适和呈现效果不理想等问题。手机端店铺的设计看似简单，实则大有名堂，对最终的商品成交起着关键作用。下面分别对手机端和PC端的区别进行介绍。

1.设计尺寸不同手机端店铺和PC端店铺的设计尺寸大不相同，网店美工不能将设计好的PC端店铺图片直接照搬到手机端店铺，否则会引发界面混乱、显示不全和呈现效果不佳等问题。以店铺首页为例，手机端店铺首页的宽度通常设计为1200像素，而PC端店铺首页的宽度一般设计为1920像素。7.1.2手机端与PC端店铺设计的区别

2.页面布局不同由于设计尺寸的不同，手机端店铺与PC端店铺的页面布局也要有所区别，以此增强消费者对手机端店铺的浏览体验。例如，在PC端店铺使用左右布局的横版海报，而在手机端店铺则需要设计成上下布局的竖版海报。7.1.2手机端与PC端店铺设计的区别

3.构成模块不同手机端的构成模块划分清晰，并且会根据设备特点加入更能吸引消费者的模块。如店铺首页，手机端通常会在店招下方加入文字标题、店铺热搜和店铺会员等模块，较PC端内容更加丰富。7.1.2手机端与PC端店铺设计的区别

4.信息内容不同:由于设计尺寸缩小，手机端店铺需要在有限的空间内进行设计。因此相较于PC端店铺，手机端无法通过比较详细的文字说明商品，只会选择更为重要的文案内容，并且对价格进行加重和调整颜色等处理以突出强调，令其更适合在手机端展示。7.1.2手机端与PC端店铺设计的区别

7.1.3手机端店铺设计的关键点消费者在手机端店铺购物得到了便捷的体验，但对于网店美工而言，设计手机端店铺却面临着设备的设计尺寸有限等挑战。因此在进行手机端店铺设计与装修时，应该掌握其以下4个设计关键点，才能事半功倍。1.符合浏览规范为了保证消费者在手机端购物的浏览体验，设计时需要保证符合手机端的规范。如设计尺寸、字号大小和色彩搭配等都要按照手机端的设计规范进行，以避免消费者因浏览问题降低购物欲望。2.统一平台视觉手机端店铺设计虽然要根据手机端的特点进行调整，但也要注意与PC端店铺的视觉进行统一呼应，不能令消费者有进入两家不同店铺的错觉。因此两者的设计均应保留相通的视觉元素，以提升品牌关联性。

3.页面视觉统一除了进行平台与平台之间的视觉统一，还需要保证页面本身以及页面之间的视觉统一。设计单张页面时，整张页面需要和谐统一，并且各个页面之间也可以相互衔接，以促成更多交易。4.合理运用模块手机端店铺设计时不要为了丰富内容而加入大量模块，而应根据店铺特点和活动要求，合理使用。整体信息量要合适，如店铺首页多控制在6个屏幕以内，这样不会显得繁琐杂乱，以便于消费者愉悦轻松地进行浏览。7.1.3手机端店铺设计的关键点7.2手机端店铺首页模块设计轮播海报设计优惠券设计分类模块设计商品展示设计底部信息设计模块合并设计

7.2.1轮播海报设计手机端店铺首页的轮播海报是网店美工正式进行设计的模块，其宽度为1200像素，高度为120~2000像素，支持jpg或png格式，大小不超过2MB。

下面为制作手机端家居网店首页轮播海报的设计方法，在设计过程中，我们围绕主体物双人床进行创意。背景为室内场景图，凸显产品主题。色彩选取白色、桔黄色和深棕色，分别体现了整洁、温馨和舒适。字体选用黑体呼应主题。7.2.1轮播海报设计

7.2.2优惠券设计网店美工在进行手机端首页的优惠券设计时，设计尺寸、字号大小和色彩搭配等要符合手机端浏览规范。

7.2.2优惠券设计下面为制作手机端家居网店首页优惠券的方法，在设计过程中，我们结合轮播海报，围绕店铺优惠活动进行创意。将背景变为纯色，令内容易读。色彩选取中蓝色、灰色和中黄色分别体现了清新、稳重和舒适。优惠信息以标签的形式出现，具有直观的特点。

7.2.3分类模块设计在手机端店铺中，消费者进行浏览使用的是上下滑动的方式，因此网店美工在移动端店铺设计时应尽量减少大规模的点击交互，所以分类模块通常在商品类型丰富的PC端店铺中进行保留，同时手机端首页分类模块的设计会进行简化处理，以节约面积。

下面为制作手机端家居网店首页分类模块的方法，在设计过程中，我们结合轮播海报，围绕店铺产品分类进行创意。将背景变为纯色，令内容易读。色彩延用优惠券模块中的配色。图标采用了与家居相关的线性图标呈现了简约精致的特点。整体排版简洁清晰。7.2.3分类模块设计

7.2.4商品展示设计手机端店铺首页的商品展示由于面积有限，无法像PC端那样一行4列的展示商品，通常会以1行1列、1行2列或1行3列的形式进行展示。当以1行1列展示商品时，可以做成单图海报，其宽度为1200像素，高度为120~2000像素。当以1行2列或1行3列展示商品时，可以在模块中的最上方加入Banner提升美感。Banner的宽度为1200像素，高度为376像素或591像素，支持jpg或png格式，大小不超过2MB。

下面为制作手机端家居网店首页商品展示的方法，在设计过程中，我们结合轮播海报，围绕店铺热销产品进行创意。将背景变为纯色和渐变色，令内容易读。色彩延用优惠券模块中的配色。整体排版整齐有序，一目了然。7.2.4商品展示设计

7.2.5底部信息设计底部信息由于位于店铺首页的尾部，消费者在浏览这部分时会容易产生视觉疲惫。因此，手机端的大部分店铺会去除底部信息。在个别保留底部信息的手机端店铺中，会将PC端店铺首页的底部信息做元素简化或颜色变化等处理来进行设计，以减轻消费者的浏览负担、提升消费者的观看兴趣。

下面为制作手机端家居网店首页底部信息的方法，在设计过程中，我们结合轮播海报，围绕店铺简介进行创意。背景为产品实拍图，凸显网店经营方向。色彩沿用商品展示中的配色。7.2.5底部信息设计

7.2.6模块合并设计制作完成各个模块后，需要将模块合并形成一张完整的店铺首页。下面为制作手机端家居网店首页模块合并的方法。在设计过程中，围绕主体物头戴式耳机进行创意。背景为渐变色、纯色与图片相结合的形式，增加多种元素实现点缀效果。色彩选取亮蓝色、深紫色和玫红色分别体现了科技、时尚和悦耳。字体选用方正粉丝天下简体和黑体起到了呼应主题的作用。采用黄金比例分割的左右构图表现和谐美感。图标采用了与数码产品相关的线性图标呈现了简约精致的特点。整体设计充满特色，契合主题。7.3课堂实训-手机端