《第6章APP导航设计ppt课件.pptx》由会员分享，可在线阅读，更多相关《第6章APP导航设计ppt课件.pptx（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第6章 APP导航设计第6章 APP导航设计 认识表单控件 UI 表单控件设计原则3 3 了解导航设计分类，能够区分导航设计的所属类别。 掌握不同类别导航设计的优缺点，能够选择合理的导航类型应用到界面设计中。学习目标 目录【任务13】：标签式导航设计6.26.2【任务14】：宫格式导航设计6.36.36.16.1认识APP导航 本章将通过“标签式导航设计”和“宫格式导航设计”两个案例，详细讲解APP导航设计中的相关技巧。章节概要导航设计在APP设计中占有着举足轻重的地位，与用户体验效果密切相关。导航设计的专业与否直接决定了界面信息是否可以有效地传递给用户。优秀的导航设计会让用户轻松浏览到所需内
2、容。6 6 6.1 认识APP导航在开始着手设计APP界面或是APP原型图之前。面临的第一个问题就是以何种方式将信息组合起来，以满足开发者的需求又能给用户带来完美体验，这时掌握好导航设计分类就显得尤为重要。导航的设计多种多样，常见的样式分类主要有以下几种。7 7 1、标签式导航6.1 认识APP导航1、标签式导航标签式导航又称选项卡式导航，位于页面底部，是一种常见的导航设计类型。通常包含四到五个标签，方便用户在不同分页间频繁切换。8 8 1、标签式导航6.1 认识APP导航优点：1）直接展示最重要接口内容信息。2）分类位置固定，清楚当前所在入口位置。3）减少界面跳转的层级，轻松在各入口间频繁跳
3、转。缺点：1）占用一定屏幕高度。2）功能入口过多时，该模式显得笨重不实用。9 9 2、舵式导航6.1 认识APP导航2、舵式导航舵式导航作为标签式导航的一个变种，是将用户常用的标签按钮收录到一个标签功能按钮中，通过点击这个标签功能按钮，来展开多个标签按钮。1010 6.1 认识APP导航优点：1）较大限度的引导用户点击中间按钮。2）重要且操作频繁的入口很显眼。缺点：1）中间按钮的突出导致两侧按钮点击率较低。2）对中间按钮设计美感要求较高，需和页面整体设计风格相协调。2、舵式导航1111 3、抽屉式导航6.1 认识APP导航3、抽屉式导航抽屉式导航又称侧滑式导航，是将非核心的选项或功能隐藏在当前
4、页面之后，点击入口就可以像拉抽屉一样拉出菜单，此设计方法节省了页面展示空间，让用户将更多的注意力聚焦到当前页面上。此类导航设计须要提供菜单滑出时的过渡动画。1212 6.1 认识APP导航优点：1）不占用页面展示空间。2）可容纳多个条目，可扩展性强。缺点：1）用户不容易发现功能入口，对入口交互的功能可见性要求较高。2）用户容易“迷路”。3、抽屉式导航1313 4、宫格式导航6.1 认识APP导航4、宫格式导航宫格式导航是将主要入口均聚合在页面之上，方便用户做出选择的导航类型。此种设计方式无法让用户在第一时间看到内容，但给人的视觉效果较为舒服。当有多个内容项（一般大于5个）时，可以考虑用这种导航
5、方式。1414 6.1 认识APP导航优点：1）分类清晰、入口独立、风格简约。2）用户容易记住各入口的位置，方便用户快速查询。缺点：1）菜单之间的跳转要回到初始点，不利于用户体验。2）容易形成更深的路径，不能直接展示入口内容。4、宫格式导航1515 5、列表式导航6.1 认识APP导航5、列表式导航列表式导航是APP设计中不可缺少的一个信息承载模式。通常用于二级页面，不会默认展示任何实质内容。这种导航结构清晰，易于理解，能够帮助用户高速的定位到相应的页面。列表项目可以通过间距、标题等进行分组，形成扩展列表。1616 6.1 认识APP导航优点：1）层次展示清晰明了。2）视线流从上到下，浏览体验
6、快捷。3）可展示内容较长的菜单或拥有次级文字内容的标题。缺点：1）导航之间的跳转要回到初始点，灵活性不高。2）同级内容过多时，用户浏览容易产生视觉疲劳。3）不展示实质内容，需要用户点击后才能知道具体内容，增加了用户的操作成本。5、列表式导航1717 6、轮播式导航6.1 认识APP导航6、轮播式导航轮播式导航又称旋转木马式导航，当应用程序信息足够扁平化时可采用此类导航。通过左右滑动页面可以实现信息的轮播效果，这种设计方式可以最大程度的保证应用页面的简洁性，操作也极为简便，通常会给人耳目一新的体验。1818 6.1 认识APP导航优点：1）单页面内容整体性强，聚焦度高。2）操作方便，只需手指左右
7、滑动即可。缺点：1）只能查看相邻卡片展示的内容，并不能跳跃性地进行选择。2）展示的内容数量有限。6、轮播式导航1919 6.2【任务13】：标签式导航设计标签式导航是用户体验效果较好的导航设计类型。在进入App的时候，可以根据用户的使用频率对默认界面的导航选项进行设置，并通过颜色差异区分选中和未选中的状态。2020 6.2【任务13】：标签式导航设计本次任务是设计一款针对电器商城APP的标签式导航，要求根据iPhone 7界面的分辨率进行设计，需设计出相关的导航图标，并配以文字说明，标签项需通过合理的配色进行区分。最终效果任务描述通过本任务的学习，读者可以掌握标签式导航的基本设计技巧以及图标的
8、设计方法。2121 6.2【任务13】：标签式导航设计1.尺寸规范：由于本任务是针对iPhone 7界面的分辨率（7501334像素）进行设计，因此标签栏的尺寸大小和图标及文字大小都要遵循iPhone 7界面的设计规范，具体如下。1）标签栏：在iPhone 7界面中标签栏的尺寸为75098像素。2）图标和文字：标签栏中导航的图标大小为5050像素，字体大小为24像素。任务分析2222 6.2【任务13】：标签式导航设计2.设计风格：任务分析本次任务将采用扁平化设计风格，通过简洁、明快的图标对用户进行引导。2323 6.2【任务13】：标签式导航设计3.标签项颜色：根据标签式导航的特性，标签项分
9、为默认状态和选中状态两种，因此在颜色上需加以区分。任务分析 默认状态：默认状态尽量采用较暗的颜色，以彰显选中状态。本任务计划采用灰色作为默认状态。 选中状态：选中状态一般选用较醒目的颜色，方便和其他标签项进行区分，视觉效果上也更利于用户体验。本任务是针对商城类APP进行设计，为了激发用户的购买热情应尽量采用暖色调，本任务计划采用橘红色。2424 6.2【任务13】：标签式导航设计4.图标分类：任务分析根据电器商城APP的特性，可将标签项分为首页、发现、商城、服务和我的共5类。2525 6.2【任务13】：标签式导航设计2626 6.3【任务14】：宫格式导航设计宫格式导航的最主要特点是利用网格
10、布局将主要入口全部聚合在页面之上，方便用户做出选择，各项之间同等重要。一般适用于功能模块之间相互独立，没有明显的优先级之分，且用户不需要在不同的功能模块之间进行频繁跳转的情况。2727 6.3【任务14】：宫格式导航设计本次任务是设计一款针对休闲娱乐APP的宫格式导航，该导航位于APP中的二级页面，用于方便用户查询所在位置附近的休闲娱乐场所。要求依据iPhone 7界面的分辨率进行设计，布局合理，图标易辨识。最终效果任务描述通过本任务的学习，读者可以掌握宫格式导航的基本设计技巧。2828 6.3【任务14】：宫格式导航设计1.尺寸规范：由于本任务是针对iPhone 7界面的分辨率（750133
11、4像素）进行设计，因此状态栏、导航栏的尺寸大小和图标及文字大小都要遵循iPhone 7界面的设计规范，宫格导航模块的大小以及图标和文字大小可根据设计美感自行把握，具体如下。1）状态栏：一般不需绘制，可通过引用素材完成。2）导航栏：在iPhone 7界面中导航栏的尺寸为75088像素，图标尺寸为4444像素，标题文字大小为40像素。3）宫格导航模块：模块大小可设置为345366像素，图标大小100100像素，文字大小36像素。任务分析2929 6.3【任务14】：宫格式导航设计2.设计风格：针对每一宫格模块，计划采用图片做背景，图片上方通过添加图标和文字内容加以说明。根据这一设计特点，本任务计划采用扁平化设计风格。任务分析3.图标分类：由于当前页面的主要功能是方便用户查询所在位置附近的休闲娱乐场所，因此可将导航模块依据娱乐场所的特性进行划分，可分为电影、KTV、公园、健身、咖啡和酒吧共6类。3030 6.3【任务14】：宫格式导航设计