《网页美工设计》教案-第六章 网页导航设计制作第一节 网页导航设计制作1

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE第二部分技能提升篇第六章网页导航设计制作标题第一节网页导航设计制作1第一讲网页导航设计制作1（上）课时2课时教学目标教学内容与过程网页中的导航可以快速引导用户寻找所需要的产品与服务，是网站的基础设置。在导航栏上可以搭配相应内容的图形LOGO，文字，色彩等元素进行设计与制作。下面通过“优U家居”网页导航设计与制作，讲解网页导航设计制作。一、网站导航尺寸与配色1、先打开photoshop软件，新建像素大小1920px*178px分辨率为72模式为RGB的白色画布2、CTRL+R调出标尺，点击移动工具拖拽找到中心参考线的位置，运用矩形选区工具——工具选项栏——固定大小，调整宽度1000px*高度124px像素，按住ATI键在中央参考线点击一下，左右拉出垂直参考线，上下水平线，调整边距大小，以此确定了LOGO和搜索栏的位置。3、其次家居网站的卖点是“绿色环保，天然工艺”是消费者最优的选择，所以网站的基本色块为：草绿色（R：128G：165B：57）棕色（R：206G：181B：138）在图层面板新建图层，快捷键ALT+DEL添加LOGO和搜索栏的底色，调整图层透明度24%。这样，我们完成了网站导航的尺寸与基本色调。二、“优U家居”LOGO设计“优U家居”LOGO设计是由大写字母U，加号，房屋轮廓，树叶形状设计制作。首先运用文字工具（51pt），颜色设置为绿色，打开大写字母键，打入文字U，调整大小，放在适合的位置。其次运用钢笔工具绘制房屋轮廓路径（工具选项栏选中路径），调整画笔工具大小5p颜色，注意画笔默认颜色为前景色。在图层面板新建图层命名为轮廓，点击路径面板，（路径面板可在窗口调出）选中路径，右击描边路径，调出对话框选中画笔，完成路径描边。结合矩形形状工具，设置颜色，加减锚点，直接选择工具，绘制出几何图形，并且栅格化图层将其转化为普通图层。再运用钢笔工具绘制出叶子形态，绘制叶子轮廓的，CTRL+回车键建立选区，在矩形的图层上按DELETE删除图层，形成叶子空白区域。在绘制叶根与叶脉，矩形工具添加“+”号，完成LOGO图形效果。运用文字工具，微软雅黑，调整字体颜色，在“U”上设置为棕色字体偏小一点，“家居”两字结合字体面板倾斜调整效果，突出家具网站名称，将两个图层合并双击图层样式添加投影，颜色换成浅棕色稍深一点的棕色，调整投影大小，完成效果。微调位置，将做好的CTRL+G编组命名为LOGO设计，完成第二部分。置入文字“全国总机：电话号码”三、搜索栏制作1、矩形工具拉出白色长方形搜索栏，设置描边大小，颜色。2、绘制绿色搜索图标的底色，填充绿色，无描边，运用剪切蒙版将图层植入下方白色图层，在运用椭圆形状绘制正圆描边，调整意描边的大小，运用圆角矩形，绘制出搜索白色小图标，合并形状调整大小。3、运用灰色文字在搜索栏输入“请输入搜索内容”教学反思《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE第二部分技能提升篇第六章网页导航设计制作标题第二节网页导航设计制作2第一讲网页导航设计制作2（上）课时2课时教学目标教学内容与过程导航是网页设计中不可缺少的部分，网页导航是网页访问者的路标，它通过一定的技术手段，使其可以方便地访问到所需的内容，是人们浏览网页时可以从一个页面转到另一个页面的快速通道。一、网页导航的概念和作用网页是由导航、banner、模块和文字构成。导航是访问者寻找内容的一个途径，起到方便查找的作用。导航有栏目菜单、辅助菜单、在线帮助等表现形式。导航显示的位置：可以设置在网页的顶部、底部、左侧、右侧等。导航的功能作用有：添加分类信息，提供到网页不同区域的链接等。二、网页导航类型1、水平导航水平导航栏是最常见的网页导航栏设计类型之一。水平网页导航栏设计一般拥有3-6个按钮，导航文字横向有序地排列，用于介绍页面信息及链接站点。操作方式也非常简单，鼠标左右滑动点击选项即可。水平导航栏的特点是占用面积小，常被信息量大的门户网页、资讯网页使用，例如这个网页，显示的信息量大，使用水平导航方便用户寻找需要浏览的信息。水平导航由于独立性强，占用空间较少，因此需要设计创造出简短，易于理解，且满足业务需求的标题。当内容过多时可以选择在单个导航下放置下拉显示二级导航，下拉显示的二级导航可以很长或采用滚动显示的方式，这种临时的模态导航可以最大限度地利用到屏幕空间。垂直导航垂直侧边导航栏是最流行的导航栏设计类型之一，相比水平导航栏，垂直侧边导航栏的用户体验更好一些。垂直侧边导航栏可以很好的利用侧边的非视觉中心区域，将视觉中心区域留给重要的内容展示，让用户边导航边看内容两不误。垂直导航占用的空间较多，通常放置在页面左边位置，用不同的底色或分割线将其与主内容分开，内容文字一般采取左对齐，便于阅读，导航层级过多时会采用点击展开的样式，上下滚动的常用交互也让垂直导航容纳的内容更多。部分垂直导航是可隐藏或可收缩的，垂直侧边网页导航栏一般都可折叠，折叠后的侧边栏会变得更加简洁，便于使用。3、汉堡导航栏汉堡导航栏的命名是因为图标酷似汉堡包的三层造型。汉堡导航栏设计可以包含更多内容，通过点击汉堡按钮，可以将一些次要的信息隐藏起来，释放更多的页面空间，使得顶部栏更加清爽简洁，用户的注意力更好的集中在重要的内容信息上。汉堡风格的导航栏经常出现在移动端。但是现在很多pc终端越来越喜欢汉堡式的导航设计。这样的设计节省了空间，相当于把导航做成隐藏式设计或者弹出式设计，很有设计感，右边这个网页使用的就是汉堡包导航。汉堡的导航在使用中非常多，用户也很熟悉，但是汉堡按钮容易被忽略，需要将其放置在明显的位置，让汉堡按钮清晰展示。4、混合导航在拥有复杂信息的网页中，会将水平导航，垂直导航等其他样式混合使用。这就是混合导航。比如亚马逊这个网页，使用了水平横向导航和垂直竖向导航两种导航模式相结合，使用户能够快速找到想搜索的信息。5、其他类型导航除了这些常用的网页导航模式，还有一些特殊的网页导航，比如全屏导航，这就是将导航是作为整个网页设计的核心，全屏导航是一种非常有效的技术，用户可以更加便捷地切换到不同的页面，内容成为更加触手可及的东西。全屏导航式页面可以做的非常明显，也可以以更加微妙的方式呈现出来。只要设计的够合理，用户会在无意识间充分运用起它的导航功能。还有卡片式导航，像这个网页使用的就是卡片式导航，整个导航清晰直观，简单大气，几乎所有用户都可以在这种导航下找到想要的东西。每个卡片可以承载一个特定的种类，也可以容纳若干小的分支，配合网页其他元素，提高网页视觉效果。在一些特殊行业的网页上，使用常规导航会和整个网页很不搭配，比如卡通玩具类，幼儿园类网页都可以使用卡片式导航。卡片式导航可以随意设计成任何符合网页整体效果的样子。三、网页导航设计原则一个网页的导航设计是十分重要的，在网页推广中合理的设计导航栏可以吸引用户的浏览，所以一定要做好导航设计。导航设计首先要遵循一致性原则。1、一致性同一类型导航的视觉表现和交互操作在整个网页页面中要保持一致，清晰一致的导航可以让用户预见每一步操作的结果。尽量在所有页面中使用相同的导航模式，这是非常重要的，以便用户可以轻松访问你的网页而不会丢失。网页的导航设计应该与网页的整体风格保持一致，从字体大小、颜色、字体形式上与网页的其他元素进行配合，符合用户的审美习惯，使之能够更好地融入页面。2、清晰性网页导航的文字颜色与背景颜色的对比，标题与内容的字号大小，这些最基本的元素直接影响导航的清晰度。与平面设计中的原理一样，留白让网页页面布局平衡，张弛有度；装饰与留白相结合，让导航表现得更精美，也有助于视觉分割。有些导航起引导作用需要突出，有些起辅助作用需要弱化，强弱对比结合丰富了视觉层次，并让导航起到它该起的作用。3、合理性一般来说网页的主导航是网页导航设计中比较关键的控制模块，称之为一级目录。无论是全局或局部导航，数目越多用户处理和记住信息的难度越大，所以在导航设计中要让网页总体更加扁平化、链接的层级更少，尽量使用少层级导航，避免使用多层级导航，对网页导航展开整体规划，保证网页频道构造一目了然。在导航的设计过程中，应该尽可能深入了解用户的行为和需求，找到他们在网页上最常浏览使用或最常跨度的业务和内容，将其分类归纳成少数几类，放在页面主导航栏上。通过分组分层来提高信息浏览效率，运用设计优化来实现隐藏导航的合并，从而减少用户操作负担。总之好的导航应该是用户体验的重要组成部分，用户不应该花费过多时间来寻找他们想要的内容，网页导航设计应该尽可能简单，即便用户初次进入网页也能不费力的找到自己想要的内容。教学反思《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第二部分技能提升篇第六章网页导航设计制作标题第二节网页导航设计制作2第二讲网页导航设计制作2（下）课时2课时教学目标教学内容与过程本节课看几个网页导航设计案例。首先来看一个是男士剃须护肤品牌的网页，网页的导航栏很清晰，固定在顶部。产品页面采取下拉菜单展示更多相关产品，并且还附带图片展示，让用户更加直观和清楚知道产品是什么，导航栏目共有4项，数目适中，即便用户初次进入网页也能够不费力地找到自己想要的内容。下面这个案例是一个数字以及品牌设计服务的网页。网页的导航是典型的汉堡导航栏，点击可以查阅网站信息，导航栏的信息隐藏使得整个网页显得简约大方。接下来我们一起绘制一个企业网页导航，对导航设计制作的要求是导航清晰、文字识别度高、便于用户点击，且页面具有科技感，美观简洁。下面我们用PS软件来完成这个案例。首先新建一个尺寸800×300画布，然后建立图层。接下来再分别新建4条水平和垂直的参考线，作为辅助。页面左右两边各留40厘米，水平方向上方留50厘米，下方留150厘米，这样参考线就作好了。可以把导航案例打开，对照着作图。可以看到背景是蓝色的，使用拾色器吸取颜色，然后填充背景。网页下方的背景图片也可以先插入做好，打开背景图结合参考线拉伸放置到合适的位置上。下面我们可以来制作网页导航左边的公司名称和logo部分。根据尺寸先建一个参考线，可以看到背景色是深蓝色，使用矩形选框工具，用吸管工具吸取颜色，填充背景。接下来置入LOGO素材，调整大小和位置，按住shift健防止logo变形，找准大致的位置，接下来用文字工具打出公司名称，调整字体大小和颜色，我这里使用的是微软雅黑字体，由于背景是深色，选用白色形成反差，使文字更清晰。然后调整文字和logo的位置，对比一下与案例图片位置大致相同。接下来我们可以再制作导航右边的部分，可以看到背景色是白色，先把底色做出来，依然使用矩形选框工具，填充白色。看一下导航上方，先选取大致范围，使用渐变工具，运用黑白渐变达到所需要的效果。接下来我们可以制作搜索框，使用矩形工具，新建一个矩形，自动填充了白色，调整一下位置，然后导入图标，为了节省时间，这些图标我都已经提前处理过，将图标移动到这个位置，调整大小和位置。接下来可以制作下面这四个模块，先将字打出来（关于我们），修改