3.4导航设计(课件）-《电商视觉营销》同步教学（西南财经大学出版社）

网店首页设计 项目三 1 YCF 01 网店Logo设计 03 店招设计 02 店标设计 目录 CATALOG 04 导航设计 05 焦点图设计 06 页尾模块设计 2 思政课堂 一家经营“国货”的品牌店主营业务产品是汉服。在“双11”大促即将到来之际，请你为该网店的首页进行设计，使其突出“国 货”这个重点，以弘扬中华文化，体现出汉服的美，达到吸引广大 客户的目的。请将你的想法写在下面，并将设计图交给教师。 3 网店的首页设计是电子商务行业的热门话题，关于网店装修的意义和目标，设计者一直存在不同的观点。然而不论是实体店还是网店，其作为一个营销的平台，装修的核心是促进销售。网店首页整体布局如图所示。 项目导读 01 掌握Logo的设计方法。 02 掌握店招的设计方法。 学习目标 03 掌握焦点图的设计方法。 04 能够为网店设计静态店标与动态店标。 05 能够为网店设计导航条。 04 导航设计 一、导航的设计要点 二、导航的设计步骤 6 一、导航的设计要点 导航栏的布局是根据买家浏览习惯而定的，一般人习惯从左往右看，所以越重要的内容越要靠近左侧，导航条范例如图所示。 7 二、导航的设计步骤 导航的设计要结合其设计要点，突出导航想给消费者提供哪些方面的导航服务。有的店招图片中预留了导航栏的位置，有的店招图片中没有预留导航栏的位置。下面介绍如何在没有预留导航栏的店招中设计导航。 仍以“Honey童装小铺”为例，其导航栏的视觉要点是颜色醒目、分类明确，使消费者进入网店后能很快运用导航条找到自己想要的商品。 8 二、导航的设计步骤 步骤1：打开Photoshop软件，执行“文件”→“新建”命令，新建大小为950像素×150像素、分辨率为72像素/英寸、名称为“Honey导航设计”的文件，具体参数设置如图所示。 9 二、导航的设计步骤 步骤2：打开“素/项目三/Honey店招.jpg”图片，单击工具箱中的“移动工具”，移动图片至“Honey导航设计”文件中并放置在顶端，效果如图所示。 10 二、导航的设计步骤 步骤 3：设置前景色 RGB 为“0/110/100”。选择“矩形工具” ，设置其属性，创建宽度为 950 像素、高度为 30 像素的矩形，如图 3-37 所示。 11 二、导航的设计步骤 步骤 4：选择“横排文字工具” ，设置文字的颜色为白色，字体为宋体，大小为18 点，仿粗体，依次输入文字“首页”“所有宝贝”等，每个词类为单独的文字图层；单击工具箱中的“移动工具” ，调整文字模块的间距，效果如图所示。 12 二、导航的设计步骤 步骤 5：为了更加突出导航中的某类，可以设置导航条底色突出显示。在本例中，需要突出“夏季新品”，这里使用红色圆角矩形进行突出显示。在图层面板中单击“所有宝贝”文字图层，如图所示。 13 二、导航的设计步骤 步骤 6：设置前景色 RGB 为“255/0/0”，选择“矩形工具” ，右击，选择“圆角矩形工具” ，设置半径为 20 像素，其属性参数设置如图所示。 14 二、导航的设计步骤 步骤 7：设置圆角矩形的参数后，在夏季新品位置绘制圆角矩形，突出显示“夏季新品”，效果如图所示。以后可以根据网店的需求移动圆角矩形来改变突出的商品类别。 15 二、导航的设计步骤 步骤 8：执行“文件”→“存储”命令，存储文件“Honey 导航设计 .psd”；执行“文件”→“存储为”命令，选择文件类型为“JPEG”，将文件另存为“Honey 导航设计 .jpg”。 16 $$