淘宝天猫美工 第9章 手机淘宝页面的设计

图 9-9
9.2.2 焦点图设计
手机端的焦点图即电脑端的海报图或轮播图，其设计的 要点类似，但由于手机屏幕较小，制作焦点图时切忌使用暗 沉的颜色。制作的焦点图的最终效果如图 9-10 所示。
图 9-10
下面便来制作家居店铺手机端首页的焦点图，其具体操 作步骤如下。
STEP 1 新建一个尺寸为 750×550 像素、分辨率为 72 像素 / 英寸的空白文件。
图 9-6
图 9-7
STEP 8 输入文字，设置颜色和字体，然后选中文字图层， 按【Ctrl+T】组合键进入变换状态，再按【Ctrl+ALt】组 合键对其倾斜变形，如图 9-8 所示。
STEP 9 设置前景色为字体的红色，新建图层，使用画笔 工具任意绘制装饰图像，效果如图9-9 所示。
图 9-8
颜色区别：许多电脑端的页面在视觉上更能体现出效 果，而手机端因为浏览面积小，反而不太适合运用一 些视觉画面来体现，因此在颜色搭配上也要尽量简单。
9.1.2 手机淘宝设计要点
1. 首页
同电脑端从左到右的浏览习惯不同，手机端的浏览习惯 一般是从上到下，因此，在版式设计上可以使用各种大模块 的组合，如焦点图、左文右图、多图等。
图 9-1
2. 详情页
手机端的详情页是增加无线端宝贝和店铺的加权点之一。 手机端的详情页可以同步电脑端的详情页，但是可能会出现 字体不整齐，图片重叠等情况。因此，若是从电脑端直接生 成的手机端详情页，在制作时要检查清楚图片和文字有无错 误；若需要重新制作手机端详情页，还应该注意以下几个方 面的问题。
STEP 2 将背景填充为粉色，如图 9-3 所示。
STEP 3 使用椭圆工具 并按住【Shift】键拖动绘制圆形， 然后使用路径选择工具 选中圆形路径，按【Shift+Alt】 组合键复制圆形路径，如图 9-4 所示。
图 9-3
图 9-4
STEP 4 框选所有圆形路径，在工具属性栏中单击“路径 操作”按钮 ，在打开的菜单中选择“合并形状路径” 选项。
9.2.1 店铺店招设计
手机端的最新店招尺寸为 750 像素 ×254 像素，可以 是活动公告，也可以是海报图片等，制作的店铺店招的最终 效果如图 9-2 所示。
图 9-2
下面通过 Photoshop 来制作手机端的店铺店招，其具体 操作步骤如下。
STEP 1 新建一个尺寸为 750×254 像素、分辨率为 72 像 素 / 英寸的空白文件。
布局区别：手机淘宝根据受众的需求，在布局上要做 到更加简洁明了，要懂得舍弃不必要的装饰。
详情区别：电脑端因为屏幕较大，可以通过较多的文 字来说明产品功能、卖点等，但是手机淘宝的详情页 则需要使用较多的图片来展示商品，而文字则越简洁 越好。
分类区别：手机淘宝在宝贝分类上要结构明确，模块 划分清晰。
手机端的店铺首页包括店招、店名和其他相关图片模块 等。店招同电脑端不同，一般是一张图片；店名包括头像和 店铺名称，头像可以是图片，也可以是店铺的 logo，但是 因为手机端的屏幕尺寸有限，因此店铺名称不易过长，过长 的名称在手机端会显示不完整；在图片模块的排版上，可以 是单列，也可以是双列。
如图 9-1 所示为两个典型淘宝手机端的店铺主页。
随着移动设备的发展，手机逐渐成为生活中不可或缺的 电子产品，众公司也逐渐开发出移动客户端供用户使用。据 不完全统计，通过淘宝移动客户端进行网络购物的比例在总 和中占80%以上，远超淘宝PC客户端。因此，淘宝店铺不能 只注重PC端界面的设计，更要把重点放在手机淘宝平台的视 觉设计上。本章将为一家家居店铺制作淘宝手机客户端的相 关页面，包括首页、详情页等。通过本章的学习，可以了解 手机淘宝页面的制作方法。
STEP 5 在圆形路径上绘制一个矩形路径，选择两个形状 图层后，单击鼠标右键，在弹出的快捷菜单中选择“合并 形状”命令合并两个形状图层，
图 9-5
STEP 6 在工具属性栏中设置填充颜色为比背景色稍微深 一些的粉色，并调整其位置，如图9-6 所示。
STEP 7 复制形状图层，将复制的图层放在原形状图层下 方，在工具属性栏中设置颜色为白色，如图 9-7 所示。
当善宝贝主文字说明太多时，可以舍弃图片，直接使用纯 文本的形式。
图片的制作尽量控制在手机屏幕以内，这样可以集中浏览 者注意力。
尽量完图，通过主图将宝贝信息展现出来，更有利于提高 买家购买欲和下单率。
手机端的首页设计同电脑端的首页设计模块大体相同， 包括店招、海报（焦点图）、优惠券、宝贝分类等，下面分 别对各个模块进行制作。
STEP 2 将素材文件“图 1.jpg”拖入到图像文件中，并 缩放到合适大小，如图 9-11 所示。
STEP 3 在左侧使用直排文字工具 输入文字，设置字体 和大小，效果如图 9-12 所示。
图 9-11
图 9-12
STEP 4 在文字上方绘制圆形选区，新建图层，选择“编 辑 / 描边”命令，打开“描边”对话框，设置描边为黑 色的 1 像素，如图 9-13 所示。
9.1.1 淘宝手机端和电脑端的区别
在设计手机端的页面时，许多店家会直接将电脑端 的图片现搬到手机端来使用，但是因为手机尺寸的局限 性，可能会出现尺寸不合、文字太小和体验太差等问题。 那么淘宝手机端和电脑端有什么区别呢？具体如下：
尺寸区别：手机屏幕的尺寸决定了图片的尺寸，若尺 寸不合适则会造成界面混乱等问题。
图 9-15
图 9-16
9.2.3 优惠券设计
手机端的优惠券模块较小，若使用太复杂的图像反而会 喧宾夺主，所以可以使用简洁的图形和文字来制作。制作的 优惠券的最终效果如图 9-17 所示。
STEP 5 在圆形里面输入文字，设置字体，然后调整文字 的大小和圆形的大小，效果如图9-14 所示。
图 9-13
图 9-14
STEP 5 选择圆形图层wk.baidu.com使用橡皮擦工具擦除一些空隙， 如图 9-15 所示。
STEP 6 在左下方输入文字的英文翻译，字号可以设置得 小一些，让其起到装饰作用，完成后保存所有操作即可， 效果如图 9-16 所示。