第四章 4.4 导航菜单栏设计-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

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