网店店招与导航的设计ppt课件

1、店招与导航的设计店招与导航的设计CHAPTER FOUR店招与导航位于网店首页的最顶端，是买家进入店铺首页后看到的第一个模块，因此是网店首页设计的重中之重。它们的主要作用是向买家展示店铺的店名、所销售商品等，并提供访问店铺各个功能模块的快速通道。 了解网店店招与导航的作用与设计思路。 能够通过添加修饰元素、图层样式等方式对店招进行修饰。 根据店铺商品图片及店铺风格来确定店铺店招和导航的风格及配色。学习目标学习目标Contents目录目录了解网店店招与导航了解网店店招与导航1实操案例：婴幼儿商品网店店招与导航设计2实操案例：女装网店店招与导航设计3综合实训4技能拓展5一、了解网店店招与导航一、了

2、解网店店招与导航0102一、了解网店店招与导航一、了解网店店招与导航n 店招和导航位于网店的最顶端，成功的店招通常采用标准的颜色和字体、简洁的设计版面。此外，店招一般包含精炼、吸引力强的广告语，画面还要具备强烈的视觉冲击力，清晰地告诉买家店铺在卖什么，而且通过店招也可以对店铺的装修风格进行定位。一、了解网店店招与导航一、了解网店店招与导航n 了让店招有特点且便于记忆，在设计过程中都会采用简短、醒目的广告语等辅助内容，并通过适当的配图来增强店铺的认知度。店招所包含的主要内容包括店铺Logo、店铺名称、品牌名称、简短的广告语和广告商品等。一、了解网店店招与导航一、了解网店店招与导航n 设计者在对店

3、招与导航的设计中，使用了与店铺商品风格一致的色彩和图片，同时添加了具有吸引力的广告信息和收藏信息来吸引买家的兴趣和喜爱。一、了解网店店招与导航一、了解网店店招与导航n 橘红色象征着太阳的色彩，所以使用橘红色能让色彩与商品的特点更加吻合。为了突显店铺的品质感，让买家给予店铺更多的信任，在设计制作过程中还使用了不同的字体及颜色等，以此打造精致的画质感。Contents目录目录了解网店店招与导航1实操案例：婴幼儿商品网店店招与导航设计实操案例：婴幼儿商品网店店招与导航设计2实操案例：女装网店店招与导航设计3综合实训4技能拓展5二、实操案例：婴幼儿商品网店店招与导航设计二、实操案例：婴幼儿商品网店店招

4、与导航设计1n 以浅粉色为主，表现出温暖、明亮的感觉。使用明度较高的几种色彩来修饰画面，烘托出婴儿娇柔、稚嫩的肌肤质感，让店铺形象更加活泼、可爱。n 使用浅色的蕾丝图案作为店招背景，营造出漂亮、灵动的视觉效果。n 采用俏皮可爱且圆润的字体来突出文字，使整个画面风格更加统一。二、实操案例：婴幼儿商品网店店招与导航设计二、实操案例：婴幼儿商品网店店招与导航设计2n 使用素材制作店招中所需的背景和修饰元素，通过图层蒙版和不透明度来调整编辑的效果。n 利用“描边”样式对绘制的形状进行修饰，使其边缘清晰可见。n 使用自动形状工具中的“搜索”形状来添加搜索框中的图形。二、实操案例：婴幼儿商品网店店招与导航

5、设计二、实操案例：婴幼儿商品网店店招与导航设计3Contents目录目录了解网店店招与导航1实操案例：婴幼儿商品网店店招与导航设计2实操案例：女装网店店招与导航设计实操案例：女装网店店招与导航设计3综合实训4技能拓展5三、实操案例：女装网店店招与导航设计三、实操案例：女装网店店招与导航设计1n 本案例在色彩搭配上通过使用明亮的色彩来营造时尚、甜美的感觉，整个画面以粉色和黄色为主，女性青春感十足，整个画面色彩和谐而统一。n 店标文字经过适当的艺术化处理，增添了画质的精致度和可爱感；n 在导航上对重点栏目做不同的颜色处理，突出重点，吸引买家眼球。三、实操案例：女装网店店招与导航设计三、实操案例：女

6、装网店店招与导航设计2n 利用剪贴蒙版对模特图像进行处理。n 利用矩形选框工具绘制选区并填充颜色。n 使用圆角矩形工具绘制修饰形状。三、实操案例：女装网店店招与导航设计三、实操案例：女装网店店招与导航设计3Contents目录目录了解网店店招与导航1实操案例：婴幼儿商品网店店招与导航设计2实操案例：女装网店店招与导航设计3综合实训综合实训4技能拓展5四、综合实训四、综合实训Contents目录目录了解网店店招与导航1实操案例：婴幼儿商品网店店招与导航设计2实操案例：女装网店店招与导航设计3综合实训4技能拓展技能拓展5五、技能拓展五、技能拓展n 不同的电商平台上，网店的店招与导航设计的内容都是相

7、似的。在京东上也可以自由地设计店铺的店招和导航，如图所示为京东上某店铺的店招和导航，可以看到店招中都会标明店铺的名称、品牌、广告语、店铺或品牌Logo等，这些内容与淘宝网上的设计是非常相似的。五、技能拓展五、技能拓展n 值得一提的是，在京东上对店招进行装修，可以通过添加模块来进行操作，这样编辑可以对店招与导航的尺寸进行自由的定制，可将模块布局编辑完成后，再根据布局中模块的尺寸来设计对象即可。n 此外，每个店铺首页的最顶部会有一个通栏布局。如图所示为“通栏”模块装修编辑过程中的效果，该布局中放置的模块会自动强制显示在店铺所有页面中。建议在该布局内仅放置店铺招牌、店内导航和主推活动的Banner等内容。课后习题课后习题以不同款式的鞋子图片为素材，设计一个鞋类网店的店