网页界面设计要点-2-功能篇-1导航

功能篇\1-导航\1-Tab导航\Tab交互设计
• Tab个数：对于导航Tab，一般建议是一级导航Tab3-10个，二级导航项不超过7个
• 点击后的跳转：新开窗口，还是在当前页面刷新？新开页面需要注意Tab导航条的项
目个数、排序等信息也不应有所改变。
• hover切换还是点击切换：tab多的时候建议点击切换，否则容易让用户心烦。Tab较 少用到hover切换，因为涉及到页面载入、刷新等问题，如果一定要做，需要解决灵 敏度问题，如悬停3秒后触发。
功能篇\1-导航\1-Tab导航\简述
• 优点：直观、清晰 • 缺点：扩展性较差 • Tab导航的主要展现形式：
• 设计TAB导航前需要想清楚的问题：
– 用Tab解决什么问题？ – Tab结构是什么？ – Tab的视觉样式是什么样子？ – Tab的交互方式如何设计？
功能篇\1-导航\1-Tab导航\Tab信息结构关系
功能篇\1-导航\8-搜索式导航\简介
• 根据网站类型以及作用重要性等，搜索区可分为以下几类：
– 搜索引擎网站的搜索区： 对于搜索引擎网站，搜索区就 是网站的核心区域，因此主。
– 网站的全局搜索：网站内的全局搜索一般放在网站导航区内， 属于广义导航中的一部分。
– 建议解决方案：
• 增加快捷方式，无需返回子功能上级也可以进行其它功能选择。
功能篇\1-导航\2-树状导航\容易遇到的问题及解决方案讨论2
• 问题4：每个节点展开收起需要点击，点击次数太多
– 建议解决方案：
• 提供全部展开和收起按钮 • 提供二级菜单全部展开 和收起按钮 • 智能搜索直接定位 • 尽可能展现为平铺方式，能极大的减少点击次数
– 网站子类别中的局部搜索：站内的全 局搜索相对覆盖面很广。局部搜索指的 是某些网站内部的搜索只针对网站局部， 由于缩小了搜索的范围，因此结果也往 往更加精确，符合用户期望。目前使用 这种局部搜索的网站如豆瓣、淘宝等。
功能篇\1-导航\8-搜索式导航\网站内的全局搜索
• 网站内的全局搜索一般放在网站导航区内，属于广义导航中的一部分。目前主 流有2种不同的设计方式。
• 问题5：UI效果不大好做，美观程度较差
– 建议解决方案：
• 这个没有一定的解决方案，如果条件许可，增加背景，用线条、色块等分隔，会美观很多。
功能篇\1-导航\2-树状导航\案例讨论
功能篇\1-导航\3-面包屑导航\简述
• 面包屑导航通常出现在主导航和内容区之间，作为网站的辅助导航，它的一般 结构如下：首页→一级分类→二级分类→当前页面，如果有更深层的页面就继 续增加三级分类、四级分类，依此类推。
网页界面设计要点-2-功能篇-1
BIZ BI 魏 凌 2013年9月
目
录
• 视觉篇
– 1-界面布局 – 2-色彩搭配 – 3-分隔类型
• 功能篇
– 导航 – 条件选择 – 提示框 – 表单 – 表格 – 图形 – 按钮来自功能篇\1-导航\总述
• 导航的定义：能够在页面上起到指示和引导作用的元素，都可以称之为导航。 • 按导航的作用类型可以分为：
• 点击热区大小：有图片的整片设置为热区，只有文字的，需要注意热区大小需要考虑 页面空白位置，而不只是在文字上。
• 视觉效果：Tab被选中的，需要有明显的视觉突出效果，并且多级tab间关联要明显。
功能篇\1-导航\1-Tab导航\案例讨论\ Amazon的导航变迁
功能篇\1-导航\2-树状导航\简述
– 同样的，对于淘宝的店铺来讲，每家店铺 都是一个相对独立的子站点。用户在店铺内 浏览时，就相当于在浏览一个相对独立的站 点，因此有必要在店铺内设置局部搜索，让 用户在更精确的范围内进行搜索。
功能篇\1-导航\8-搜索式导航\设计要点1
• 输入框长度：
– 用户搜索时经常两个或者两个以上的关键词组合，因此搜索框不能过短。否则用户无法看 到所有输入的内容，不够直观，而且操作起来不够舒畅。
• 鱼眼菜单适用于类目较多的导航，可以起到缩小目标区域、 快速定位的作用。它通常可以有很酷的效果，具有强烈视觉 冲击力，但导航中很少会出现这么多类目，如果生搬硬套的 话，很容易成为华而不实的设计。
功能篇\1-导航\6-网站地图\简介
• 网站地图（Site Map）通过对网站 内容进行组织归类，以一个扁平的 页面呈现出网站的主要框架，一般 包含主导航下的一级和二级菜单。 它能够让用户快速了解网站的内容 与结构全局，同时也是对搜索引擎 友好的表现,易于搜索引擎优化。
树状导航是纵向导航中的一种，因其形状像 树的分支结构而得名。最典型的树状导航就 是Windows 资源管理器中的树状视图
相对横向导航来讲，树状导航项数量较少受 到空间的约束，可以放置更多分类，适用于 分类较多的大型网站，因此目前较多网站已 经采用了这种导航方式。
功能篇\1-导航\2-树状导航\设计注意事项
站LOGO
功能篇\1-导航\1-Tab导航\Tab结构与视觉样式
• 几个简单的例子：
– 同样选中Tab4，但效果却不一样：
– 一些Tab视觉样式示意：
更多导航样式见 /design_elements/navigation/index.php?page=1
• 主次分明：面包屑导航作为辅助导航，不宜占用过多面积，避免与主导航争夺 用户的注意力。
• 例：可以和其它类型导航结合
功能篇\1-导航\4-引导性导航
• 引导性导航适用于流程型任务，通过“Step by Step”的引导，帮助用户完成 任务。如表单的填写等。
功能篇\1-导航\5-鱼眼导航\简介
• 鱼眼导航是HCIL（人机交互实验室，UMIACS的下属实验 室之一）的研究成果，因其形状类似鱼眼而得名，对于目标 区域的选项会有像放大镜一样的效果。
– 全局性导航：网站架构中权重最高的导航，统领整个网站的信息架构，决定网站形状和整 体的信息分类，通常使用固定模式。
– 局部导航：是在全局导航之下的用于访问下级结构的导航，经常作为全局导航下一个分支 的平铺引导。形成局部导航的机制有很多，比如树状导航、垂直菜单、动态菜单等。
• 导航的主要类型：
– Tab导航 – 树状导航 – 面包屑导航 – 引导式导航 – 鱼眼导航 – 网站地图 – 推荐性导航 – 搜索式导航
– 建议解决方案：
• 菜单首字母智能定位，或是中文自动定位 • 增加搜索功能 • 按常用业务规则排序 • 可让用户自定义顺序
• 问题2：若子节点选中后需要打开新页面，打开多了，返回上一级会有困难
– 建议解决方案：
• 在子页面增加：返回上一级目录的按钮，直接重新打开上一级目录页面
• 问题3：子功能之间切换较麻烦
• 设计Tab之前，需要考虑清楚导航与Tab是否匹配，也就是为什么要用Tab。 • 需要细致的考虑：
– 每个tab下的信息到底是什么？ – 信息之间的关系是什么？ – 信息结构一共有多少层？ – Tab跟大标题之间的关系如何划分？
• 例：
– Tab就是一个入口 – Tab之间信息不交叉、层级相同 – 总共为一层信息 – Tab和大标题之间没有层级关系，大标题是网
排序规律：树状导航的分类往往较多，因为 需要将分类近照一定的规律进行排序，如按 重要程度或字母的顺序。
导航位置：看网页的目的，例：如果希望用户从 导航入手查找内容，放左边合适；如果希望用户 先看内容，再看导航，放右边或下方更合适。
功能篇\1-导航\2-树状导航\容易遇到的问题及解决方案讨论1
• 问题1：树状层级太深，找东西困难
• 作用：
– 让用户了解目前所处的位置，以及当前页面在整个网站中的位置。 – 体现了网站的架构层级，能够帮助用户快速学习和了解网站内容的组织方式，从而形成很
好的位置感。 – 提供了返回各层级页面的快捷入口，方便用户操优化面包屑导航每个级别的
• 除了以上讲到的几种导航之外，还有推荐式 导航、引导型导航等。
功能篇\1-导航\7-推荐性导航\简介
• 随着网站对用户行为分析的深入，推荐式导航也越来越成为一种流行趋势，尤 其针对SNS网站。它能够根据你的浏览习惯和喜好，推荐你可能感兴趣的内容 给你，这种推送式的服务更加人性化和个性化，但是需要智能的算法做支持。
名称，多使用关键字，都可以优化SEO（搜索引擎优化）。
功能篇\1-导航\3-面包屑导航\适用场景
• 层级较深的网站：面包屑导航适用于层级较深的网站，如果只有一级分类的话， 通过主导航就已经能够起到快速定位的作用，如豆瓣等扁平型架构的网站就没 有使用面包屑导航的必要，如：
• 独立不交叉的网站结构：由于面包屑导航路径是线性结构的，即下一级分类必 定只属于上一级分类，因此网站内容必须划分得非常清晰，且不存在交叉。否 则，面包屑导航的路径是不唯一的，同一个分类可能出现在不同的路径中，让 用户感到困惑。
网站地图的设计应该重视以下几点：
• 分组归类：体现出菜单间的层级关系，而不 是简单地堆砌和罗列，使网站结构更加清晰， 有助于用户的理解和学习。
• 呈现的层级不宜过多，也不宜过少：一般呈 现到主导航下的二级菜单，过多的层级会使 网站地图过于复杂，而过少的层级起不到应 该有的作用，没有存在的必要。
• 采用文本链接方式：搜索引擎蜘蛛爬过的时 候，一般优先抓取文本方式的内容，因此采 用文本链接作为网站导航的主要方式，有利 于搜索引擎优化，提高网站内容被搜索到的 几率。
• 站内的全局搜索相对覆盖面很广。局部搜索指的是某些网站内部的搜索只针对 网站局部，由于缩小了搜索的范围，因此结果也往往更加精确，符合用户期望。 目前使用这种局部搜索的网站如豆瓣、淘宝等。
– 豆瓣在不同分类下均提供相应的局部搜索。 试想一下，当用户在浏览小组相关的内容时， 较少去搜索书籍、电影和音乐，因此在小组 页面提供“小组搜索”
• 搜索框中的提醒文字
– 有些网站在搜索框中使用灰度显示的提示文字，提醒用户应该输入的内容。但要注意的是， 当用户鼠标选中输入框时，文字应该自动消失，否则就需要选中文字并删除，给用户带来 不便和沮丧。