《移动终端UI设计》教学教案06APP导航设计.docx

《《移动终端UI设计》教学教案06APP导航设计.docx》由会员分享，可在线阅读，更多相关《《移动终端UI设计》教学教案06APP导航设计.docx（6页珍藏版）》请在第一文库网上搜索。

1、*学校教师教案（ 学年第学期）课程名称：移动终端UI设计授课专业：任课教师：所在系部：2019年7月第6章App导航设计任务名称6.1认识App导航设计教学目的掌握如何利用PS CC软件绘制App导航的样式。教学方法讲授法、案例法教学手段多媒体教学、手机客户端重点难点重点：掌握绘制标签式导航设计、陈列式导航设计、宫格式导航设计和列表式导航设计难点：素材的整理与收集和对素材的灵活堆嵌教学内容设计授课内容：每一个优秀的App都一定拥有一套完整的堪称完美的导航设计内容，能够合理的将产品展示在用户面前，并能够起到快速引导用户使用App的产品各个功能，同时也增强了识别度。导航最主要的功能就是能够帮助用户

2、清楚的展示自己所在的页面，并帮助用户快速的到达自己想去的界面。我们在生活中可能每个人都迷路过，都有找不到目的地的情况，但是我们通常会找在路口有没有路标，墙面是否有指示牌，导航在界面中，也就是等于我们生活中的路标和指示牌，通过它，我们能快速的找到自己要去的地方。如果没有一个能起到引导作用的导航，我们会在应用软件中迷失方向，从而放弃继续使用其应用软件。总结课程内容，重申重点、难点课后作业同学们自行归纳总结App导航的内容。任务名称6.2标签式导航设计教学目的使同学们能够利用Photoshop CC绘制该样式部件。教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端。重点难点重点：掌握标签式导航

3、的设计方法难点：如何灵活绘制该导航教学内容设计授课内容：6. 2.1设计要求标签式导航设计中，在绘制的时候，要注意节省界面的展示空间，导航中按钮太大，或造成样式不美观，按钮太小，又会造成担心会错点的情况。标签式导航一般放置在顶部和底部，如果应用软件分类内容和维度过于繁琐，也会绘制在左右两侧，但非常少见。设计的过程中，应当清楚当前所要展示的内容，以及以最精简的语言展现最重要的入口信息。6.2.2思路剖析标签式导航的标签数量通常不能超过3-5个，因为我们的手指在滑动屏幕的时候，接触的面积较大，一旦超过5个标签数量，每个标签所占面积太小，会点击错误。使选择变得困难，甚至导致点击失误。通常在标签式导航

4、中是以图标、文字加色块的形式出现的。为什么要用图标、文字和色块的形式？因为文字的指向性要比图标的指向性强。其次是人类的视觉化特征，对图形比文字要敏感的多，所以将三者要素结合在一起，是为了让用户以最快的时间理解标签的含义。标签式导航模块之间的关系，般是由主到次，凡是以排列性质出现，都必须遵循主次的顺序，有顺序，就必须有优先选项，也就是将最核心的功能放置在最前面。标签中对应的标签选项需要层级的排序。6.2.3实现步将设置好的文字图层和图层组调整好位置，得到如图所示的“标签式导航设计（2） ”图片样式。PXS课后作业同学们设计自己风格的标签导航。B O T 丁 &明覆100W；/ + 3 g tie

5、 包 赠皂总结课程内容，重申重点、难点任务名称6.3宫格式导航设计教学目的使同学们能够利用Photoshop CC绘制该样式部件。教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端。重点难点重点：掌握宫格式导航的特点难点：熟悉该导航方式的绘制难点授课内容：6. 3.1设计要求宫格式导航设计的设计方式是以九宫格或多宫格的样式展现在用户的面前，以缩略图或者以图标的样式呈现在表格之中。这种宫格式导航是将最主要的入口全部聚合在主页面，让用户做出最直接的选择。这样的组合方式不能第一时间让用户看到内容，所以会给用户选择上带来压力，采用宫格式导航的应用已经越来越少，往往用在二级页面作为内容列表（内容列

6、表基本以缩略图的形式呈现），或是作为一系列工具入口的聚合。（-）宫格式导航设计的优点：1 .能够最直观的展现核心功能和信息；2 .宫格式导航形式可以让用户快速了解产品的功能以及地位，并引导用户正确的使用；3 .能清晰的呈现各个功能入口且展示的效率极高；4 .普遍适合女性用户或者新手用户快速的学会如何使用App软件；5 .功能入口切换便捷，不会使用户在抉择时迷失方向。（-）宫格式导航设计的缺点：教学内容设计1 .入口的展示信息有限，通常是以缩略图或者图标的形式展示，容易造成选择困难，导致效果不佳；2 .各个功能之间不能互通，导致操作的层级较多，较为复杂；3 .虽然宫格式导航设计有模块，会占用过多

7、的内容显示区；4 .功能入口过多的软件不适合使用宫格式导航设计；5 .针对目前大屏幕手机用户的激增，用户单手操作功能切换较弱。6. 3. 2思路剖析在绘制宫格式导航时，最主要的特点是利用表格（网格）布局将主要的内容展现在界面之上，为用户提供便捷的选择，宫格中的内容之间等同重要。宫格式导航设计一般适用于功能模板之间，为此可以相互独立的出现，因为每个模块中的选项内容的层级是一样的，但内容标题是完全不同的功能。宫格式导航的形式可以让用户快速的了解产品的功能，并以文字和图标的样式快速的引导用户正确的进行使用。所以在设计宫格式导航的时候，一定要考虑到各个功能的效率。宫格式导航能够清晰的呈现各个功能入口，

8、能在有限的屏幕上,以宫格拼图的样式容纳更多的功能菜单。缺点是因为很多用户有选择困难的问题，所以一定要将每一个宫格中的图标和文字展现的特别的清晰易懂。6. 3.3实现步骤我们将“每日一练”组、“签到打卡”组、“讨论空间”组、“资料下载”组、“精选试题”组、“视频”组、“题库”组和“背景”组都绘制好了之后，得到的样式效果如图所示。PS RIm Mlv Ml ftl 3) R， iM 46 G(W MhW附5C.Wy 矍 g 二5*3*2gja 6叨编 sism(名性更冷 - 两力 -16/17 3ffl*9tUHtr pe & ”e il*. 6* 载有在线资料下U*G对论空间5?P 32?a-W

9、MTH1柒y o 而(d G O： 1总结课程内容，重申重点、难点课后作业 自拟行业和内容，设计一款宫格式导航。任务名称6.4列表式导航设计教学目的使同学们能够利用Photoshop CS绘制该样式部件。教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端。重点难点重点：掌握该部件的设计方式与思路难点：熟练绘制该部件并理清思路。教学内容设计授课内容：6.4.1设计要求列表式导航的作用是为用户提供清晰的路径选择，从而方便用户快速地定位自己的目标。所以在进行导航设计时，一定耍符合用户习惯，选择合理的布局方式，最大限度地满足用户体验。在设计布局时，列表项目可以通过间距、标题等进行分组，形成扩展列

10、表，一般应做到如下几点要求：（1）层次展示清晰明了，视线流从上到下，浏览体验快捷。（2）可以使用统一的样式也可以使用组合的样式。统一的样式更为规整、整洁，让用户可以根据分类的目录快速找到自己的目标。组合的样式显得丰富多彩，浏览者不易产生视觉疲劳。（3）可展示内容较长的菜单或拥有次级文字内容的标题。（4）有效地利用产品空间推出推荐功能，这样设计既不影响用户查找分类乂有利于帮助产品曝光。另外，要注意列表式导航的入口设计，尽量避免用户在找入口的时候找不到的情况出现，应将入口设计得清晰、行层次且方便快捷。切忌以下事项：（1）导航之间的跳转要回到初始点，灵活性较差。（2）同级内容过多时，用户浏览容易产生

11、视觉疲劳。（3）不展示实质内容，需要用户点击后才能知道具体内容，增加了用户的操作成本。6. 4.2思路剖析列表式导航设计中的列表项目可以通过标题等进行分组，或者利用间距进行幻灯片式演示，从而形成扩展列表。列表式导航可以将重要的内容部分以列表的形式进行呈现，让用户可以直观地看到自己想要执行的操作或者选择自己想要选择的内容。这一种模式可以让App界面的标题和角标实现更多的操作栏类的导航。在列表式导航设计中，需要很多的扩展列表，能逐级展示用户想要选择的内容。设计师在设计导航的时候，要在主界面上设计扩展列表，在主选项的隐臧下，还要有抽屉式的导航，让用户更专注于核心的功能操作应用上。一般这些隐藏的辅助菜

12、单功能放在侧边栏内。选项卡也就是标签导航，也是常见的显示于屏幕底端或者屏幕顶端两种设计方式。选项卡与导航选项之间是并列的关系，其中常选状态是最为重要、操作最为频繁的一项。用户能清晰地知道自己选择了哪一项，使用起来易于识别或者带有标签的图标样式。在设计中既要考虑到用户需要频繁地在不同分页之间进行切换，通常在标签栏过多的时候，可以将不常用的标签放到通用标签下，或者放置在底部进行滑动选择。所以用户经常浏览、频繁更新的内容，通过在平面上显示各个内容选项来实现导航，一定要将一些文章、照片、产品、菜谱等采用幻灯片式、网格式进行演示，便于显示扁平化信息，直观简洁地展现给用户，以便于浏览。6. 4.3实现步骤我们将所有绘制好的图层进行逐一挑选，并放置在该放置的图层组中，最终得到的样式如图所示。总结课程内容，重申重点、难点课后作业 自拟行业和内容，设计一款列表式导航。