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

网页界面设计要点-2-功能篇-1 BIZ BI 魏 凌 2013年9月 目 录 • 视觉篇 –1-界面布局 –2-色彩搭配 –3-分隔类型 • 功能篇 –导航 –条件选择 –提示框 –表单 –表格 –图形 –按钮 功能篇\ 1-导航\总述 • 导航的定义：能够在页面上起到指示和引导作用的元素，都可以称之为导航。 • 按导航的作用类型可以分为： –全局性导航：网站架构中权重最高的导航，统领整个网站的信息架构，决定网站形状和整 体的信息分类，通常使用固定模式。 –局部导航：是在全局导航之下的用于访问下级结构的导航，经常作为全局导航下一个分支 的平铺引导。形成局部导航的机制有很多，比如树状导航、垂直菜单、动态菜单等。 • 导航的主要类型： –Tab导航 –树状导航 –面包屑导航 –引导式导航 –鱼眼导航 –网站地图 –推荐性导航 –搜索式导航 功能篇\ 1-导航\ 1-Tab导航\简述 • 优点：直观、清晰 • 缺点：扩展性较差 • Tab导航的主要展现形式： • 设计TAB导航前需要想清楚的问题： –用Tab解决什么问题？ –Tab结构是什么？ –Tab的视觉样式是什么样子？ –Tab的交互方式如何设计？ 功能篇\ 1-导航\ 1-Tab导航\Tab信息结构关系 • 设计Tab之前，需要考虑清楚导航与Tab是否匹配，也就是为什么要用Tab。 • 需要细致的考虑： –每个tab下的信息到底是什么？ –信息之间的关系是什么？ –信息结构一共有多少层？ –Tab跟大标题之间的关系如何划分？ • 例： –Tab就是一个入口 –Tab之间信息不交叉、层级相同 –总共为一层信息 –Tab和大标题之间没有层级关系，大标题是网 站LOGO 功能篇\ 1-导航\ 1-Tab导航\Tab结构与视觉样式 • 几个简单的例子： –同样选中Tab4 ，但效果却不一样： –一些Tab视觉样式示意： 更多导航样式见 /design_elements/navigation/index.php?page=1 功能篇\ 1-导航\ 1-Tab导航\Tab交互设计 • Tab个数：对于导航Tab ，一般建议是一级导航Tab3-10个，二级导航项不超过7个 • 点击后的跳转：新开窗口，还是在当前页面刷新？新开页面需要注意Tab导航条的项 目个数、排序等信息也不应有所改变。 • hover切换还是点击切换：tab多的时候建议点击切换，否则容易让用户心烦。Tab较 少用到hover切换，因为涉及到页面载入、刷新等问题，如果一定要做，需要解决灵 敏度问题，如悬停3秒后触发。 • 点击热区大小：有图片的整片设置为热区，只有文字的，需要注意热区大小需要考虑 页面空白位置，而不只是在文字上。 • 视觉效果：Tab被选中的，需要有明显的视觉突出效果，并且多级tab间关联要明显。 功能篇\ 1-导航\ 1-Tab导航\案例讨论\ Amazon的导航变迁 功能篇\ 1-导航\2-树状导航\简述 树状导航是纵向导航中的一种，因其形状像 相对横向导航来讲，树状导航项数量较少受 树的分支结构而得名。最典型的树状导航就 到空间的约束，可以放置更多分类，适用于 是Windows 资源管理器中的树状视图 分类较多的大型