《网页美工设计》教案-第1节 化妆品类网页设计制作综合案例（上） 教案

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE第三部分综合实训篇第八章综合案例——化妆品类网页设计制作标题第一节化妆品类网页设计制作综合案例（上）课时2课时教学目标教学内容与过程化妆品行业是一个非常细分的行业，不同的化妆品品牌和产品都有自己的特点和卖点。因此，在设计化妆品类网页时要有针对性，为不同的产品和品牌设计不同的页面和内容。以百雀羚产品的网页设计为例，配色上，为了展现百雀羚的自然健康的价值理念，采用绿色为主色调。页面简洁大方，网页导航清晰美观、符合目标用户的习惯。化妆品行业是一个需要视觉效果支撑的行业。消费者在购买化妆品时，往往会受到产品包装和广告宣传的影响。因此，在设计化妆品类网页时要注重视觉效果，通过图片和视频等方式展示产品的特点和卖点。接下来我从这三个方面来讲解本节课的内容。首先了解一下化妆品类网页的功能定位。化妆品类网页主要是为广大消费者提供各类化妆品信息，在服务消费者的同时获得利润。通过精心的策划和设计，化妆品类网页能够成为一个吸引消费者的平台，推动化妆品销售的增长。可以在网页上提供例如品牌定位、产品展示、营销活动、用户评价、客户服务和移动端适配等内容，以增加消费者对化妆品网页的兴趣。例如雅诗兰黛化妆品网页下方专门设置了品牌故事、美容社区、最新单品三个分区，用来吸引消费者。化妆品类网页设计风格要符合化妆品行业消费者的浏览习惯，突出功能性和实用性。例如女性化妆品网页以女性为主要受众，可以选择柔和的色彩搭配，如粉色、绿色、紫色等，让人感到舒适和亲切。同时，可以加入一些精美的插画或照片，展示产品的质感和效果，让消费者一眼就能被吸引住。接下来我们看一下化妆品类网页的设计要点，首先是引起消费者兴趣。对于化妆品类网页来说，精美的视觉元素和高质量的图片是至关重要的。产品的图片要详细清晰，尽可能展示产品的各个角度的图片，提升网页的亲切感及信任度。另外合理的运用色彩搭配和排版方式，以吸引消费者。例如这个化妆品网页将图片设置为灰色，大面积的灰色为页面打造出时尚的视觉效果。二是保证网页的可用性。在化妆品类网页中，图片和文字应该合理平衡，消费者能够快速准确地找到所需的信息。另外，网页页面要精简，不要过分夸张，在有内容的情况下，也要注意排版的简洁性。例如MAC化妆品电商网页，首页一眼就能看到大幅的促销信息。网页的导航栏也突出了重点，“新品发布”，“最畅销产品”等等。消费者能通过这些导航栏找到他们想要的信息，能够更快速的锁定想要的产品。三是建立品牌形象。化妆品网页设计需要与品牌形象相符，传达品牌风格和特色。网页设计应该注重细节，确保整个网页的风格保持一致，从而建立品牌形象和声誉。诞生于1828年的法国娇兰，是化妆品界的先驱。时至今日，法国娇兰已经成为广受赞誉的奢华品牌。可以看出它的网页色彩主要以大气，高贵的黑色和金色为主，搭配精美的产品图片和优雅浪漫的兰花，整个页面传承优雅与浪漫的气质，体现高贵的品调，网页设计风格与品牌形象高度契合。接下来我们一起来看一下化妆品类网页设计方法。首先是化妆品类网页的布局设计。网页的页面布局主要指将图片和文字排放在页面的不同位置，让访问者以最舒适的浏览方式进行页面浏览。网页的布局对整体规划有着重要的作用，将页面划分为不同的区域，有使整体保持协调一致的效果。网页设计常见的布局有：骨骼型、满版型、分割型、中轴型、对称型、曲线型、焦点型、自由型等等。例如下面这个化妆品网页就属于自由型的布局方式。在设计化妆品网页时，应该注重页面布局。合理的页面布局可以让访问者更加愉快地浏览网页，从而提高访问者的购买意愿。相反，不合理的页面布局会让访问者感到困惑和不适，从而影响访问者的购买意愿。根据客户需求，可以强化页面整体构成设计，为了更好地让化妆品的功能效用和营销广告能被关注，需将各元素在版式编排中做整体视觉流程策划。在网页主页面的设计上，人们的视觉焦点一般在网页中心点偏上的位置，人对版面视觉的关注度一般是上部比下部强，左半部比右半部强，因此该网页的海报和产品图片都放在页面靠左的位置上，而后随着页面元素的强弱大小等相关规律视觉开始进行流动，最后完全吸收网页。我们在版面构成中要可以参考平面设计的方法，用直线、曲线、焦点、反复、导向、散点视觉流程，动静结合、刚柔并济综合使用。由于化妆品类网页对视觉效果的注重，色彩对于化妆品类网页设计是至关重要的。好的色彩搭配能给访问者带来强烈的视觉冲击力，一方面能够吸引访问者的注意力，另一方面有助于网页的主题宣传，探索色彩在网页设计中的搭配规律十分重要。利用色彩进行信息组织、区域划分和识别、便于访问者操作和分辨，减少认知负荷。对主体内容进行必要的强调，对网页内容层次分明、条理清晰和色彩均衡，便于吸引访问者在网页上的停留时间，激发兴趣。网页设计色彩可根据logo的主色来变化，使用logo的辅助色，或以相近颜色达到过渡效果变化，也可以使用相反的颜色达到对比反差效果来进行页面设计。女性化妆品网页基本上喜欢用红色、粉色、紫色、金色或绿色象征女性的柔美如花或者是天然草本萃取。除了这些色彩运用外，还要注重黑白灰、金、银等万能色的使用，如纯度较高的网站可以搭配黑色，调和均衡其明度效果。文字不仅是网页信息传递的重要载体，也是必不可少的视觉符号，因此，化妆品类网页文字的设计不仅影响网页信息传播效果，而且直接影响页面的视觉美感。网页的导航条、广告语、网页标题、正文文字都是网页信息的重要组成部分。其中为了区别正文文字，对访问者进行信息传播和视觉诱导，导航条和广告语的文字设计要结合色彩、图形着重设计，文字之间的间距、大小、行距、字体要和网页设计风格保持统一性，文字和背景要形成鲜明对比，可以运用色彩、大小的变化，增加页面的互动性、生动性和可读性，更加良好而准确地表达文字的意义。其他标题文字和正文文字要和谐布局，字号、色彩统一，不要使用多种色彩或者每个页面字体不一致。文字的设计和编排的好坏，影响到整个网页设计的品位和整体性。教学反思《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第三部分综合实训篇第八章综合案例——化妆品类网页设计制作标题第二节化妆品类网页设计制作综合案例（下）课时2课时教学目标教学内容与过程本次课继续学习化妆品类网页制作的相关内容。首先我们分析几个化妆品类网页的案例。从页面布局上分析，这个网页设计属于满版型，以图片形式充满整个版式，来引起访问者的兴趣，再用文字压置在图像上，将网页的内容传递给访问者，展示着强烈的视觉传达效果。这个案例在页面布局上属于分割型的网页设计，大小不一的划分可以带来强烈的和谐感，使整个页面显得条理有序，加强了视觉的力度，利用页面的分割在网页上放置大量的元素内容，整体又达到了视觉的平衡，增加了网页对访问者的视觉吸引力。从页面色彩搭配上来看，紫色和粉色通常用于以女性为主的网页，女性化妆品网页很适合使用这类色彩，贯穿网页整体的曲线给网页带来了活泼又雅致的感觉。这个案例将页面设置成灰色来提升时尚感，用紫色的导航条打破了画面的沉寂，点缀上黄色的色块，增强了画面的对比，整个网页呈现出简约、时尚的风格。接下来我们来看一下化妆品类网页设计制作案例的演示，首先我们看一下需求描述，网页的整体风格与目标用户相匹配，并能传达出品牌的特点。二是网页布局简洁明了，方便用户浏览和搜索所需的信息。下面我们来进行这个案例的演示。首先新建画布，预设选择Web，可以选择他自带的大小1600X1200，然后新建图层，我们把网页案例打开对照着制作。根据网页的页面布局新建几条辅助参考线，这些水平参考线可以帮助我们更好的制作网页，通过参考线对网页页面进行大致划分。观察一下网页案例，我们可以先填充网页背景色，用拾色器吸取色彩，填充背景色。之后可以制作这个网页品牌名称及搜索栏的部分，根据参考线绘制矩形选区，调整一下位置，填充黑色，调整一下矩形选区的大小和位置。置入品牌名称，调整它的位置和大小，这个时候可以新建一个居中垂直参考线，根据参考线将品牌名称调整到位。接下来制作搜索框，使用圆角矩形工具绘制搜索框，填充为白色，调整一下位置，使用文字工具打出搜索，调整字体、大小以及位置，放到合适的地方。然后制作导航条，使用矩形选框工具绘制一个矩形选区，填充这个灰色，然后制作导航标题，用文字工具打出导航标题：品牌故事，调整字体、色彩和大小，运用同样的方式制作剩余的导航标题：产品系列、本季推荐、会员中心，字体保持一致，调整文字的位置，然后再使用对齐工具，整体再稍微调整一下位置。下面制作这个点击选中状态的效果，绘制一个矩形，调整图层的顺序，然后调整矩形的大小，填充背景色，为了增加对比度，将这一标题文字改为黑色，这样使导航更加醒目。接下来插入banner