资源简介

(共18张PPT)
第8章
佳诺店铺页面设计
8.1
店铺页面需求分析及规划
经与王先生深入沟通，小张针对店铺页面做了如下分析和规划。
8.1.1需求分析设计目标：提升店铺形象，改善用户体验，吸引更多摄影爱好者进店消费。功能定位：为消费者提供摄影器材的在线购买、咨询和帮助服务。整体风格：店铺的整体风格应结合简洁、时尚、科技感等特点进行设计。页面规划包括网页布局设计和网页颜色、字体设计，下面分别说明。8.1.2页面规划店铺首页布局设计：根据店铺的功能定位及整体风格，店铺首页的版块结构分为：横向导航栏、Banner、代金券、滤镜分类、推荐商品、商家信息和商品主图展示版块。设置网页宽度为1 920像素，版心宽度为1 280像素，版块间距为50像素。网页布局和最终效果如图8-1所示。1．网页布局设计图8-1 网店店铺首页布局和效果图商品详情图布局设计：商品详情图根据店铺首页的风格进行延伸设计，宽度为790像素，采用黄黑相间的色块将商品基本信息、特色介绍和拍摄效果展示版块进行分割，使详情图结构清晰，节奏感十足，既美观大方，又能有效展示产品细节，如图8-2所示。图8-2 商品详情图提 示店铺页面不同于企业网站的页面。店铺页面的框架是由商城规定的，店家只负责店铺页面的主体布局、图片和文字内容即可。另外，详情页的框架也由商城提供，因此店主只需提供相应的详情图即可。2．颜色与字体页面中的标准色使用黑色、白色、蓝色和黄色。正文字体使用常规的微软雅黑字体，以便阅读；标题或需要强调的文字则使用笔画较粗的方正综艺和Humnst 777字体，在销售商品时能起到强调和提示效果，如图8-3所示。图8-3 标准颜色与字体
8.2
店铺首页制作
8.2.1制作页首视频讲解图8-3 绘制页首底色部分在Photoshop中新建图像文档，设置尺寸为1 920×4 000像素，分辨率为72像素/英寸，颜色模式为RGB颜色，文档名称为“店铺首页”。创建文档后，根据前面规划好的版心宽度分别设置垂直320、960和1 600像素的参考线。步骤1使用“矩形工具” 在页面顶部绘制一个宽高为1 920×155像素，填充颜色为#ffd700，无描边的矩形，再绘制一个宽高为1920×30像素，填充颜色为#313131，无描边的矩形，然后使用“移动工具” 将2个矩形对齐，置于页面顶部，如图8-3所示。步骤2按【Ctrl+O】组合键，打开本章案例素材“Logo.png”，将其移动至合适位置，然后选择“横排文字工具” ，在“字符”面板中设置参数，如图8-4（a）所示，在Logo右侧输入店名“佳诺官方旗舰店”，按【Ctrl+Enter】组合键确定，然后调整字体大小为12点，在店名下方输入广告语，效果如图8-4（b）所示。步骤3图8-4 制作页首店铺名称（a）（b）制作关注本店按钮。使用“圆角矩形工具” 绘制一个宽高为100×20像素，圆角半径为9.5，填充颜色为#626262，无描边的圆角矩形；使用“自定义形状工具” ，绘制一个填充颜色为#0dbef3，无描边的心形，将其置于圆角矩形中；使用“横排文字工具” 在心形右侧输入“关注本店”文字，设置字体为微软雅黑，字体颜色为白色，字体大小为12点，效果如图8-5所示。步骤4图8-5 制作“关注本店”按钮使用“横排文字工具” ，在“关注本店”按钮右侧输入导航菜单项，设置字体为黑体、字号为14，不加粗，然后使用“直线工具” 绘制导航项的分隔线，再使用“移动工具” ，分别将分隔线和导航项水平居中分布，效果如图8-6所示。步骤5图8-6 制作导航项使用“矩形工具” 、“直接选择工具” 和“横排文字工具” ，制作如图8-7（a）所示的标签图像，将其复制并使用“移动工具” 分别移动到“云台套装”和“摄影套装”的菜单项左上方，效果如图8-7（b）所示。步骤6图8-7 绘制新品标识（a）（b）使用“钢笔工具” 绘制波浪形状，并填充颜色为#ffd700，如图8-8（a）所示；将该形状复制2次，并分别更改填充颜色为#fff66d和#e9c500；使用“移动工具” 将3个波浪形状层叠排列，效果如图8-8（b）所示。步骤7图8-8 绘制波浪形状（a）（b）在“图层”面板中将3个波浪形状图层分别剪贴至“矩形1”图层，效果如图8-9所示。步骤8图8-9 绘制装饰图
THANK YOU!

展开更多......

收起↑