资源简介

(共51张PPT)
第5章
网页元素设计（中）
5.2
网页导航栏设计
导航栏在网站设计中的地位举足轻重。清晰的导航栏能帮助用户更快、更准确地找到想要浏览的内容，提高用户在网站的停留时间，减少跳出率。
根据导航栏在网页中的位置，常见的网页导航栏有以下几种类型。5.2.1导航栏设计类型顶部水平导航栏通常位于网站页面的页首，适合显示3～10个导航项，是最常用的网站导航设计类型之一。当导航项与下拉子菜单结合时，可将网站所有重要的信息向用户展示，如图5-28所示。1．顶部水平导航栏图5-28 顶部水平导航栏图5-29 纵向固定导航栏2．纵向固定导航栏纵向固定导航栏通常可以兼容不同的屏幕尺寸，不论页面滚动到何处，导航栏的位置都不会改变，从而既可节省空间又可让浏览者随时找到导航项，如图5-29所示。将导航栏放在页面底部，页首顶部少了导航栏的设计让页面看起来更通透，增加了页面的自由感。但底部导航有一定的局限性，一般用于以图片展示为主的页面中，如图5-30所示。图5-30 底部导航栏3．底部导航栏场景导航栏通常以图片作为背景，以图片中的元素作为导航项。这样的导航设计方式十分新颖，能给人自由放松的感觉。但由于背景复杂，设计场景导航栏需要设计师具备良好的画面掌控能力，否则难以突出导航项，如图5-31所示。4．场景导航栏图5-31 场景导航栏图5-32 不规则导航栏5．不规则导航栏不规则导航栏以文字和图片作为导航项，并将它们分布在页面中。这种大小不一、颜色各异的导航项能让人耳目一新，同时可以为网页整体带来生机和活力，增强网页的吸引力，如图5-32所示。5.2.2导航栏设计注意事项图5-33 图标风格1．图标风格为了增强视觉吸引力，设计师有时会在导航栏中加入图标，但图标的表现形式应当统一，如图5-33所示。2．文字尺寸网站前端开发人员制作网页时，奇数的字符尺寸会使文字产生毛边，因此为使网页效果更加精致，通常选择偶数值的字符尺寸，如图5-34所示。图5-34 文字尺寸导航项的文字应统一，不宜中文、英文混合搭配，如图5-35所示。3．文字统一图5-35 文字统一图5-36 设置文字颜色4．颜色设置许多设计师习惯用改变文字透明度的方式更改文字颜色，虽然这样很方便，但不利于前端开发人员提取文字色彩，因此应避免调整文字不透明度，如图5-36所示。小张的创业团队接到一个销售电子产品的企业网页制作项目，经与项目负责人沟通，最终确定了网页制作的方向。其中，对网页导航栏的设计要求为：网页导航栏整洁、清爽、大方，能够让浏览者一目了然；宽度为 1 200像素；导航项包括首页、关于我们、主营业务、服务中心和人才招聘，并且需要加入站内搜索版块以便浏览者能够快速找到所需信息。5.2.3课堂案例——设计企业网站导航栏视频讲解图5-37 电子产品销售企业网站导航栏作品展示根据需求分析设计的导航栏如图5-37所示。该导航栏以灰色渐变的圆角矩形为主体，加入金属质感的导航项分割线，使用蓝色作为展开项颜色，通过色彩提升了导航栏的科技感。此外，通过二级导航项让导航栏包含更多信息，方便浏览者使用。
设计思路
① 该企业属于科技类型，制作导航栏主体与搜索版块时，用圆角矩形体现人性化，用金属渐变色体现科技感；
② 制作导航项分割线时，采用金属质感的分割线进行均等分布，呼应导航背景；
③ 将展开导航项与提示线设置为蓝色，体现科技感。
该导航栏主要由导航栏背景、分割线、搜索版块和导航项文字构成，主要设计思路为：
在Photoshop中新建文档，设置文档尺寸为1 200×500像素，分辨率为72像素/英寸，颜色模式为RGB，背景色为白色。步骤1案例步骤新建图层，命名为“导航栏背景”，选择“圆角矩形工具” ，设置圆角半径为10像素，绘制大小为1 200×70像素的黑色圆角矩形，如图5-38所示。绘制好圆角矩形后，用户可利用工具属性栏或“属性”面板设置圆角矩形的大小等参数。步骤2图5-38 绘制圆角矩形为“导航栏背景”图层添加图层样式，在“图层样式”面板中分别设置“描边”“渐变叠加”“投影”样式的参数，如图5-39所示。步骤3图5-39 设置图层样式白色#dedede#dbdbdb图5-39 设置图层样式新建图层，命名为“分割线”，使用“矩形选框工具”绘制高60像素，宽1像素的矩形选区，填充灰色，然后按【Alt+←】组合键复制并移动分割线，并更改复制的分割线颜色为白色，如图5-40所示。步骤4图5-40 绘制分割线在“图层”面板中选中“分割线”和“分割线拷贝”图层，按【Ctrl+G】组合键编组，更改组名为“分割线”，然后按住【Alt+Shift】组合键，使用“移动工具” 水平移动并复制4次分割线，效果如图5-41所示。步骤5图5-41 复制并水平移动分割线使用“移动工具” 选择最左侧的分割线，置于导航栏背景左侧180像素处，然后选择最右侧的分割线置于导航栏背景右侧270像素处，再选中所有分割线，单击工具属性栏中的“水平居中分布”按钮 ，将分割线均等分布（注意预留出右侧搜索版块位置）。在“图层”面板中选中所有“分割线”组，按【Ctrl+G】组合键编组，更改组名为“分割线组”，如图5-42所示。步骤6图5-42 复制并调整分割线位置使用“圆角矩形工具” 绘制尺寸为225×40像素，圆角半径为10像素，形状填充为白色，轮廓填充为灰色，描边宽度为0.28的圆角矩形，并将图层命名为“搜索框”；使用“椭圆工具” 绘制尺寸为25×25像素的椭圆，参数与圆角矩形相同，并将图层命名为“镜片”；使用“矩形工具” 绘制2×12像素的灰色矩形，并将图层命名为“镜柄”，效果如图5-43所示。步骤7图5-43 绘制搜索版块使用“移动工具” 调整各形状位置，然后在“图层”面板中选中“搜索框”“镜片”“镜柄”图层，按【Ctrl+G】组合键编组，并更改组名为“搜索”，如图5-44所示。步骤8图5-44 调整搜索版块位置并编组选择“矩形工具” ，在导航项第三部分绘制125×225像素大小的矩形，将图层命名为“展开项背景”，并移动至“导航栏背景”图层下方，然后按住【Alt】键，单击并拖动“导航栏背景”图层中的 图标至“展开项背景”图层上，复制图层样式，如图5-45所示。步骤9图5-45 绘制导航项展开部分选择“横排文字工具” ，在“字符”面板中设置字体为微软雅黑，字符大小为18，文字颜色为黑色，然后分别输入各导航项名称，并将“主营业务”文字颜色更改为蓝色；使用“移动工具” 调整文字的位置，再使用“矩形工具”在展开项上方绘制与展开项等宽，高度很小的蓝色矩形，然后在“图层”面板中选中所有导航项图层，按【Ctrl+G】组合键编组，更改组名为“文字”，如图5-46所示。步骤10图5-46 添加并调整导航项文字提 示通过改变字体颜色可区分文字的级别和状态，这是处理文字时常用的方法。小张的创业团队接到一个商城网站制作项目。该网站商品类型较多，项目负责人对导航栏的要求为：合理排列导航项，让浏览者能够快捷地找到所需信息。此外，还需要在导航区域加入商品广告版块。5.2.4课堂案例——设计商城网站导航栏视频讲解图5-47 商城导航栏作品展示根据需求分析设计的网上商城导航栏如图5-47所示。第一排黑色底色导航用于用户、企业登录或服务；第二排则是商城商品总分类；左侧纵向导航是商品的细分类，当细分类展开时，会完全遮挡Banner，直接显示商品名称信息，提升浏览效率。该导航栏的颜色使用红色与灰色进行搭配。红色能够潜移默化地促进消费者的购买欲望，而不同层次的灰色可提升页面整体的高级感，使页面更加沉稳，两者搭配可以使页面热烈而不失品味，从而提高商城形象。根据需求，广告版块安排在纵向导航区右侧，其面积与纵向导航大小相同，既起到对称作用，又不会太过抢眼。
设计思路
① 顶部横向导航栏主要用于用户服务，设计时文字相对较小，颜色使用灰色；
② 中部的商城分类导航将商品分成几大类，属于商城的主要导航项，因此在设计时不但需要加大字号，还需要对文字做加粗处理；
③ 左侧纵向导航栏主要用于商品分类，其展开项是商品细分类，能够帮助浏览者快速找到所需商品，在设计时应将“热卖”商品文字调整为红色，以此作为展示重点；
此导航栏为典型的网上商城类导航栏，由于导航项繁多，因此采用横纵结合的方式进行布局。具体设计思路如下：
④ 广告版块与左侧纵向导航版块对称放置，使页面更加平稳。
新建图像文档，设置文档尺寸为1 920×800像素，分辨率为72像素/英寸，颜色模式为RGB，背景色为白色。步骤1案例步骤使用“矩形工具” 绘制1 920×40像素的深灰色矩形，使用“移动工具” 将其移动至文档窗口顶部；选择“横排文字工具” ，在“字符”面板中设置参数，然后单击文档窗口，分别输入导航信息；再使用“移动工具” 调整各文案位置，然后选中除“背景”外的图层，按【Ctrl+G】组合键编组，命名为“导航1”，如图5-48所示。步骤2图5-48 制作顶部导航栏#c8c9c9提 示此处导航并非导航栏中最重要的部分，为了弱化效果，突出下方商品分类导航，将此处的导航文字设置为小字号浅灰色，仅将登录项使用红色作为重点突出。使用“矩形工具” 沿顶部导航栏左下角位置绘制300×180像素的灰色矩形，作为Logo版块，然后使用“横排文字工具” 在版块上输入“Logo”。步骤3使用“矩形工具” 绘制尺寸为690×50像素，形状填充为无，轮廓填充为红色，描边宽度为1的矩形；使用“椭圆工具” 绘制尺寸为20×20像素的白色圆环作为镜片，其他参数设置与矩形相同；使用“矩形工具” 绘制4×16像素的矩形作为镜柄，再绘制65×50像素的红色矩形作为放大镜底纹；使用“移动工具” 调整各图像的位置，以及利用【Ctrl+T】组合键适当旋转镜柄，效果如图5-49所示。步骤4图5-49 绘制Logo底色和搜索版块使用“矩形工具” 绘制220×50像素的红色矩形，然后选择“横排文字工具”，将字体大小设为18，输入热搜和“我的购物车”文案；同时选中红色矩形和“我的购物车”图层，单击“垂直居中对齐”按钮 和“水平居中对齐”按钮 ，使“我的购物车”与红色矩形居中对齐；使用“移动工具” 将“热搜”文案与搜索框左侧对齐，效果如图5-50所示。步骤5图5-50 绘制“我的购物车”版块并添加热搜文字提 示在输入热搜文案时，应将首个商品词调整为红色，其他调整为灰色，使文字之间产生对比，从而既可呼应上方搜索框，也可突出热搜词。使用“直线工具” 沿Logo所在的灰色矩形底部绘制直线，描边红色；选择“横排文字工具” ，在“字符”面板中设置字符参数，分别输入商城分类文案；在“图层”面板中选中除“背景”和“导航1”以外的图层，按【Ctrl+G】组合键，更改名称为“导航2”，如图5-51所示。步骤6图5-51 添加商城分类使用“矩形工具” 在Logo版块底部绘制300×60像素的红色矩形，将图层命名为“分类底色”，再在红色矩形下方绘制300×560像素的灰色矩形，如图5-52所示。步骤7图5-52 绘制商品分类版块使用“横排文字工具” 分别输入商品分类文案，并单独将“商品分类”文字大小调整为24，将“美妆/个人护理”文字更改为红色，再将文案均匀分布；按【Ctrl+O】组合键打开本章案例二素材“图标.PSD”，使用“移动工具” 将素材置于文字对应位置，并在“图层”面板中更改素材名称；为“口红”图层添加颜色叠加图层样式（红色），效果如图5-53所示。步骤8图5-53 添加商品分类版块文案和图标使用“矩形工具” 绘制300×45像素的白色矩形，将图层命名为“展开项底色”，并将该图层置于文案和素材图层下方，再使用“移动工具” 将白色矩形移动至“美妆/个人护理”文字位置，效果如图5-54所示。步骤9图5-54 添加展示项底色使用“矩形工具” 绘制5×20像素的白色矩形，按【Ctrl+T】组合键自由变换，旋转45度，然后复制并调整为箭头形状；选中两白色矩形图层，按【Ctrl+E】组合键合并，然后将合并后的图层复制7次，调整各合并图形位置，使其均匀分布在分类文字右侧；再为“美妆/个人护理”处的箭头叠加红色，如图5-55所示。步骤10图5-55 绘制并分布箭头形状使用“横排文字工具” 在纵向导航栏右侧输入商品细分文案，并根据标题级别和热门商品调整文字的粗细和颜色，然后使用“直线工具” 在文字下方绘制浅灰色直线，效果如图5-56所示。步骤11图5-56 添加商品细分文字按“步骤10”的操作方法制作其他细分类，然后复制纵向导航栏底色矩形，将其移动至页面右侧对称位置，调整颜色作为广告版块，再选择“横排文字工具” 输入“广告区”文字，置于广告版块位置，效果如图5-57所示。步骤12图5-57 复制文本并添加广告版块
举一反三
小张接到了某培训机构的网页制作项目，客户要求页面主色为绿色，并就导航栏的设计提出了以下要求：
① 规格：纵向导航栏。
② 包含导航展开项的效果展示。
③ 内容包括：首页、学院概况、UI设计（展开项为UI/UE高级设计师班、UI/UE高级设计师精修班、高级产品经理精修班、商业插画设计师班、Adobe平面广告全科班）、剪辑包装、影视后期、室内设计、传统美术、游戏动画8项。
④ 色彩运用恰当，与内容相符。
请制作上述导航栏。
5.3
网页页尾设计
在网页设计过程中，大多数网页设计初学者都会把精力投入到网页页首和网页主体部分的设计，在页尾部分只是选择堆叠一些诸如免责、版权声明等信息。事实上，网页页尾的重要性和页首相当，因为对大多数用户来说，页尾是他们最后的“停泊港”，因此页尾也可作为为访客提供注册、联系网站（提供信息/问题咨询）等服务的一个绝佳入口。
图5-58 简洁的页尾简洁是网页设计的普遍规律。在页尾设计上，要保证排版干净，元素排列有序，空间通透不拥挤，从而使浏览者轻松地阅读，如图5-58所示。5.3.1页尾的设计原则1．简洁页尾不仅是提供网站相关信息的版块，还可以是便利的网站导航。对页尾信息进行修饰，搭配图标与分割线，将信息分门别类地排列，可让浏览者快捷地找到所需信息。2．方便图5-59 精心设计的页尾设计网页时除页首和主体内容外，页尾同样需要精心设计。精致优美的页尾会使浏览者眼前一亮，吸引浏览者的目光，如图5-59所示。3．优美压抑、沉闷的页尾不会给浏览者带来好感，而趣味和创意能使浏览者感到轻松愉悦。图5-60所示为一个乐队的网页，其在页尾用电线杆上的小鸟代表团队成员，鼠标滑过会弹出队员介绍，这种别出心裁的页尾设计会使浏览者很容易记住相关信息。图5-60 有趣的页尾4．趣味图5-61 排列整齐的页尾设计页尾时，对信息进行分类，有规律地排列信息，并适当增大页尾面积，能使页面更加通透，给浏览者清新的感觉，如图5-61所示。5.3.2页尾的设计形式1．整齐排列信息图5-62 合并信息后的页尾2．合并信息页尾尺寸一般与网站信息量有关。在需要处理大量页尾信息时，有目的地合并信息，保证页尾有充足空间，能给浏览者留下简洁、精练的印象，如图5-62所示。所谓的“分割线”不仅仅是一条线，它是将页面主体与页尾分割的一块区域。大多数页尾的背景为深色，有些用插画做背景，无论哪种方式，都要确保页尾和页面主体在内容上分离，从而保证视觉上的层次性，如图5-63所示。图5-63 优化“分割线”的页尾3．优化“分割线”课后练习（1）Logo有哪几种设计类型？简述各种设计类型的特点。（2）导航栏有哪几种设计类型？简述各种设计类型的特点。（3）简述网页页尾的设计原则？（4）以字母GY为主体，设计一个“公益保护协会”Logo，要求如下：① 规格：尺寸为800×800像素。② 图形表达准确，具有一定的设计感。③ 构图协调，富有美感。④ 色彩运用恰当，与内容相符。⑤ 写50～100字的设计说明。（5）为某红酒销售企业设计一个横向导航栏，要求如下：① 规格：尺寸为1 200×400像素。② 体现红酒的文化和特色，整体风格以复古、奢华为主。③ 导航项为：首页、企业简介、红酒文化、产品分类、 售后服务。④ 写50～100字的设计说明。
THANK YOU!

展开更多......

收起↑