4.4导航菜单栏 课件(共17张PPT)-《网页美工——网页色彩与布局设计（第2版）》同步教学（电子工业版）

(课件网) Coloring Design of Web Elements 第四章 网页要素 的色彩设计 文字的色彩设计TheColorDesign of The Text1网页LOGO的色彩设计TheColorDesign of Web LOGO2Banner的色彩设计TheColorDesign of Banner3导航栏菜单设计Navigation BarColorDesign4目 录CONTENTS小标题设计Little Heading Design5导航菜单栏4PART导航栏是索引网站内容、帮助用户快速访问所需内容的辅助工具。根据网站内容，一个网页可以设置多个导航栏，还可以设置多级的导航栏以显示更多的导航内容。导航栏内容包含的是实现网站功能的按钮或链接，其项目的数量不宜过多。设计合理的导航栏可以有效地提高用户访问网站的效率。导航栏菜单设计Navigation BarColorDesign4.4.导航栏菜单设计1. 响应式导航栏菜单色彩运用解析响应式设计是当前网页设计的流行趋势，针对不同的设备，提供不同的布局解决方案。响应式设计的难点是导航栏菜单在设计之前，要谋划好导航栏菜单在手机、平板、桌面上的布局。图4-41所示，网页的导航栏菜单利用明快、鲜亮的色彩，加强了自身的视觉效果，一下子抓住用户的眼球，让人忍不住浏览此网页的信息。如图4-42所示的网页中，巧妙地将导航栏放在网页的中间位置，利用不同色彩的小色块进行组合排列，再利用白色的文字加以区分，更为巧妙的是当鼠标滑过文字下面的小色块时，会出现比之前更加鲜明的色彩，很好体现了响应式设计的同时，展现出网页与用户的交互性。导航栏菜单设计Navigation BarColorDesign4.4.导航栏菜单设计导航栏菜单设计Navigation BarColorDesign4.4.导航栏菜单设计图4-42导航栏的响应式设计(2)图4-41导航栏的响应式设计(1)导航栏菜单设计Navigation BarColorDesign图4-43全屏导航栏设计(1)4.4.导航栏菜单设计2. 全屏式导航栏菜单色彩运用解析当导航是整个网页设计的核心的时候，页面会是怎么样的？只要合理地策划整合，全屏导航其实是一种非常有效的技术，用户可以更加便捷地切换到不同的页面，内容成为更加触手可及的东西。如图4-43所示、图4-44所示的网页中有若干个导航栏，便于用户更彻底地探索这个网站，同时也强化了品牌识别。图4-44全屏导航栏设计(2)导航栏菜单设计Navigation BarColorDesign4.4.导航栏菜单设计图4-46垂直导航栏设计(2)3. 垂直式导航栏菜单色彩运用解析最流行的两种这类排版，一种是使用汉堡菜单的隐藏式的导航菜单，另外一种使用的是固定的侧边栏来承载菜单，它在色彩运用上一般使用与网页色调相柔和、协调的颜色，既能起到很好的交互作用，又不喧宾夺主。图4-45垂直导航栏设计(1)小标题设计5PART小标题的字体设计原则小标题的色彩设计小 标 题 设 计Little Heading Design4.5 小标题设计.小标题是对一个网页的局部概括，一般来说，网页界面上的一些小标题就是对网页的概括和总结。因此小标题在网页设计中起了画龙点睛的作用，获取瞬间的打动用户的效果，经常是运用文学的手法，以生动精彩的短句和一些形象夸张的手法来吸引用户的兴趣。不仅要争取用户的注意力，还要争取到用户的心理。小 标 题 设 计Little Heading Design4.5.1小标题的字体设计原则.1.使用细字体时，要注意保持字体与背景的对照关系，以保证可读性和清晰性；2.使用细字体时，要合理调整字体大小，太小的字体不引人注目，大一点的字体更容易阅读；3.还要考虑到不同字体之间的互相作用，以求达成较好的视觉效果，保持一致性。如图4-47所示的网页中，对小标题的三条运用原则利用的十分充分。对于小标题的设计原则有以下三个方面小 标 题 设 计Little Heading Design4.5.2小标题的色彩设计1.背景与小标题的色彩关系如图4-48所示，在此网页中，利用棕色调为主的水 ... ...