UI设计基础-2017 内容主导式导航（陈列式导航） 内容主导式导航（陈列式导航）.docx

UI设计基础 PAGE 1 目 录 TOC \o 1-3 \h \z \u 一、概述 1 二、步骤 2 内容主导式导航（陈列式导航） 本次课程介绍导航设计。导航是页面结构和界面设计的重要一部分，它可以结构化产品内容和功能、突出核心功能、扁平化用户任务路径，下面举一些案例浅谈一下常见的导航形式和一些导航设计的技巧。 一、概述 打开iOS的自带天气应用，你发现整个页面都是关于某个地域的天气形式，想查看其它地区的天气就左右滑动来切换，这种导航形式就是平铺式导航。平铺式的我们用天气APP去倒推什么情况下该使用平铺式导航：①只有一个维度的区别，像天气应用的地域；②整个APP只有一种内容展示，或者某个模块功能里只有一种内容展示，天气APP只用来展示天气。 为了暗示用户可以左右滑动，一般会在页面底部放在页面控制器，或者采用堆叠的设计。 除了天气应用，还有前段时间很火的左右滑动来筛选好友的社交软件，用的都是平铺式导航。 步骤 陈列馆式（Gallery）导航也被称为图示导航，通过在页面上显示各个内容项来实现导航，显示内容可以是图片、图文结合、幻灯片；可以呈网格状显示、也可以是幻灯片显示。这种导航的优点是非常直接，让用户被视觉刺激与导引，并且其及时性也更强。 购物类移动应用“淘宝” “京东商城” ，消费指南类移动应用“大众点评” “果库” ，使用的也是跳板式导航，只是在形式上淘宝混合了陈列馆式导航；大众点评混合了列表式导航；果库混合了陈列馆式导航；京东购物助手混合了列表式导航。 移动应用“淘宝”的图形用户界面 移动应用“京东购物助手”的图形用户界面 移动应用“大众点评”的图形用户界面 移动应用“果库”的图形用户界面 移动应用“Asobi o”的图形用户界面 移动应用“豆瓣电影”的图形用户界面 移动应用“虾米音乐”的图形用户界面 图所示为音乐类移动应用虾米音乐，除了陈列馆导航方式之外，还使用了上部的图片轮盘，顶栏、底栏的选项卡式导航。并且顶栏的选项卡以文字方式出现，而底栏则使用了图标，信息层次得以分开，整个设计有条不紊。