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

UI设计基础 PAGE 1 目 录 TOC \o 1-3 \h \z \u 一、概述 1 二、步骤 2 扁平导航（宫格式） 本次课程介绍导航设计。导航是页面结构和界面设计的重要一部分，它可以结构化产品内容和功能、突出核心功能、扁平化用户任务路径，下面举一些案例浅谈一下常见的导航形式和一些导航设计的技巧。 一、概述 网格式导航有两种，一种是作为内容的展示，像网易云音乐用来展示歌单，音悦台用来展示MV。它们都是以图片为主的内容展示，具有较强的视觉冲击力。 另一种是作为功能的入口，像美团首页banner下的美食、电影、酒店等入口。它们以图表加文字说明的形式呈现，这种排布能够节省屏幕空间，在有限的空间就能排下四个甚至是八个的功能入口。 网格式导航多用于二级导航，很少见于全局导航，因为用户使用完一个功能必须跳回到首页才能继续使用其他功能，这样会加重操作成本，不符合扁平化用户任务路径的原则。凡是都不是绝对，如果每个功能之间独立性比较高，用户每次只会使用其中的一个功能，这时候将网格式导航最为主导航就没有问题，像美图秀秀就采用网格式导航作为主导航。 步骤 旅行预定类移动应用携程助手和资讯阅读类移动应用Zaker的导航模式相同，它们都在采用跳板式导航的同时还采用了一个标签式导航。携程导航采用的是不规则网格的跳板式导航，以突出内容的优先级。优先级较高的内容所占面积较大。 移动应用“携程助手”的图形用户界面 移动应用“Zaker”的图形用户界面 2、标签的设计，在同一个系统中，我们需要考虑的是如何让标签统一。例如我们需要确定风格一致、色彩一致、表现方法一致、组合方式一致、用词方式一致。 infographics文字标签设计