Photoshop UI设计实战案例教程（移动端+Web端） 课件 第6章 Web UI 导航 组件创意设计.pptx

;第6章WebUI导航组件创意设计;;本节概述

该节主要介绍了WebUI的主要导航组件，具体内容如下：;6.1.1顶部导航

1.布局位置

顶部导航是网站常见的导航形式，多位于页面最顶部的一行横跨整个页面的通栏中。其布局通常为左右布局，左侧为导航菜单，右侧包含注册/登录入口、用户头像等元素。

2.交互方式

带下拉菜单

这种交互方式下，当单击或者鼠标指针悬停于导航标签后，会展开下拉菜单展示二级导航菜单项。其菜单样式丰富多样，有较为简单的单栏菜单，二级导航项较少；也有复杂的多栏二级菜单样式，甚至是更复杂的父子级结构样式。在视觉样式上，多数以文字为主，部分可能会加上小图标辅助识别。不过，也存在一些设计大胆的网页，其顶部导航的下拉菜单采用以图片为主体的设计，并且采用少见的横排布局。

3.直接跳转

单击导航标签后直接前往对应页面。这两种交互方式各具特点，并且在实际应用中，它们可能会同时出现在同一个网站上，根据不同的需求混合使用，以满足网站的导航功能和用户体验需求。;6.1.2侧边导航

1.位置与应用场景

侧边导航在网站架构中具有特定的位置和应用场景。它通常用于首页之下的次级页面，即当用户从首页顶部导航栏单击菜单项之后进入的网页，侧边导航便开始发挥作用，为用户提供进一步的导航指引。

2.视觉样式

从视觉呈现角度来看，侧边导航栏通常位于页面左侧，菜单项纵向排列。这种排列方式符合用户的阅读习惯，方便用户快速浏览和选择所需的菜单项。

3.样式分类

单层级菜单：其中一种侧边导航样式是仅有单个层级菜单。这种样式较为简洁，适用于页面内容相对简单、层级较少的情况。例如华为云官网的“产品”页面，其侧边导航采用的就是单层级菜单，用户可以直接看到所有相关的产品分类选项。

多层级菜单（树状菜单）：另一种是可以展开多层级菜单的树状菜单。这种样式适用于页面内容丰富、层级复杂的情况。例如一些具有复杂业务逻辑和大量信息分类的网页，其左侧会设置多层级侧边导航栏。用户可以通过点击菜单项展开下一层级的菜单，逐步深入到具体的内容页面。

4.特殊情况

虽然大多数网页的侧边导航位于左侧，但也存在极少数将侧边导航放在网页右侧的情况。这种特殊的布局方式可能是出于特定的设计需求或网站整体风格的考虑，但相对来说不太常见。这种布局方式可能会给用户带来一些不同的使用体验，需要在设计时充分考虑用户的操作习惯和便利性。;6.1.3侧边导航

1.位置与视觉特点

面包屑导航常见于网页主体内容上方，在视觉上通常比较小而轻，是整个页面中相对较小的一类组件。

2.设计要点

符合导航习惯：其链接顺序应符合用户从左到右的导航习惯，这样能让用户更自然地理解页面层级关系。

清晰表达层级：链接文本必须能清晰地表达导航层级，使用户一眼就能明白自己所处的位置以及如何返回上一层级。

区分可单击性：在样式上应区分可单击和不可单击的部分。可单击部分应具有明确的视觉提示，如颜色变化、下划线等，以保证用户单击后能够正确返回相应的导航层级。同时，面包屑导航应在页面显著位置展示，但又不过于显眼，以免影响页面整体的视觉效果和用户对主要内容的关注。

3.应用场景与优势

面包屑导航适用于具有多层级页面结构的网站。它可以帮助用户快速了解自己在网站中的位置，提供便捷的导航路径，尤其是当用户需要频繁在不同层级页面之间切换时，面包屑导航能提高用户的导航效率，减少用户迷失方向的可能性。与顶部导航和侧边导航相比，面包屑导航更侧重于展示页面的层级关系，以一种简洁明了的方式辅助用户导航。;;6.2.1绘制菜单底板背景和灯光照亮效果

1.绘制菜单底板背景

新建文档并设置底层背景：新建一个1440×1280像素的文档，将背景图层转换为普通图层并命名为“底层背景”，为其添加“径向”渐变样式，渐变色条左右两端色值分别为#53555和#373b41。

绘制侧边栏底板：使用圆角矩形工具绘制一个300×1180像素的圆角矩形作为侧边栏底板，设置“填充”为任意颜色，“描边”为无，“圆角”半径为40像素，为其添加“线性”渐变样式，渐变色条左右两端色值分别为#17181c和#33333a，“角度”为97度。;6.2.1绘制菜单底板背景和灯光照亮效果

2.绘制灯光照亮效果

（1）绘制灯光照亮核心：使用圆角矩形工具绘制一个特定大小和位置的圆角矩形，命名为“灯光照亮核心”，为其添加“渐变叠加”样式，渐变色条左右两端色值分别为#ffdb5e和#ffac4b，“角度”为0度。将该图层转换为智能对象图层并添加“高斯模糊”滤镜和“动感模糊”滤镜。;6.2.1绘制菜单底板背景和灯光照亮效果

2.绘制灯光照亮效果

（2）复制并调整灯光照亮图层：重复按3