UI设计基础-2017 扁平导航（舵式导航） 扁平导航（舵式导航）.docx

UI设计基础 PAGE 1 目 录 TOC \o 1-3 \h \z \u 一、概述 1 二、步骤 2 扁平导航（舵式导航） 本次课程介绍导航设计。导航是页面结构和界面设计的重要一部分，它可以结构化产品内容和功能、突出核心功能、扁平化用户任务路径，下面举一些案例浅谈一下常见的导航形式和一些导航设计的技巧。 一、概述 扁平导航（舵式导航） 这种导航形式一般不会用于全局导航，多用于浏览类的APP的二级导航。 用户一般每次只浏览一种类型的内容，像刷微博，女生们刷美妆时就会一直刷下去。 菜单式导航还有一个好处就是节省屏幕空间，它用一个展开的图标，将几个甚至几十个分类都集合在一起，在寸土寸金的移动端屏幕显得尤为重要。 滴滴的地区选择页面，微博和花瓣的二级导航都采用菜单式导航的形式。 步骤 导航一般位于顶部，通过点击呼出导航菜单，用户可以通过点击该菜单之外的部分收起菜单。它的优点是与界面的连贯性较好，展开和收起菜单时对当前界面的布局没有影响。并且大部分菜单式导航都是以突出文字内容为主，简单明了。但缺点在于由于操作位置在顶部，会给用户的单手操作带来困难。 图所示为资讯社交类移动应用新浪微博的首页截图。其菜单式导航针对的是微博关注人的分组。顶部点击位置显示微博博主ID ，指示出当前所在位置，并可通过滚动操作在菜单中显示更多名称。 移动应用“微博”的图形用户界面 移动应用“I nstagram ”的图形用户界面 移动应用“Reci pes”的图形用户界面 移动应用“下厨房”的图形用户界面