《交互界面设计》课件-4.2APP页面的构成要素

双击安装字体，安装后重启PPT请安装字体山东科技职业学院交互界面设计UIdesignUI设计UIdesign山东科技职业学院4.2APP页面构成元素讲课人：田雨学习目的1.了解APP页面构成2.了解常见的6种导航形式APP页面构成4.2.1APP页面构成基础的APP页面由栏和内容视图两大部分构成，而栏又由状态栏、导航栏和标签栏3部分构成，如下图所示。一、栏4.2.1APP页面构成一、栏1.状态栏位于页面顶部，高为40像素，用来显示通知、时间、信号和电量等常规信息。无论是iOS系统还是Android系统，状态栏一般都是透明的，其中的图标和文字会根据当前页面的颜色更改为白色或黑色，如下图所示。状态栏在制作时符合视觉习惯即可。4.2.1APP页面构成一、栏2.导航栏位于状态栏下方，高为88像素，用于管理屏幕信息，以及页面层级结构间的导航。导航栏左侧为后退按钮，中间显示当前页面的内容标题，右侧为当前页面的操作按钮。栏内的按钮可以是文字，也可以是图标。导航栏添加按钮，可用加号或其他表示可展开的图标代替。4.2.1APP页面构成一、栏3.标签栏标签栏是APP的全局导航，用户可点击此栏中的功能图标快速切换页面。标签栏一般位于页面底部，高为98像素，栏内图标分为选中和未选中两种状态，通常使用剪影图标加文字描述的方式表示。栏内图标以3～5个为宜，且文字要通俗易懂，精炼概括，尽量不超过4个汉字宽度，如下图所示。4.2.1APP页面构成二、内容视图1.表格视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。适合展示数量较多，级别相同的信息。在等高的单元格中，标题信息默认左对齐，副标题、按钮右对齐。4.2.1APP页面构成二、内容视图2.文本视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。一个能显示多行文本的区域。当内容太多而超出显示范围时，页面还可支持滚屏，将文本内容显示完整。4.2.1APP页面构成二、内容视图3.临时视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。在内容视图中占位较小，是向用户提供额外功能和选项的视图。例如，点击加号后出现的下拉列表，在删除APP时弹出的提示对话框等，都属于临时视图。常见导航形式4.2.2常见导航形式1.卡片式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。通过卡片对信息进行归纳，可以增加页面的层次感，让信息有更明显和更规矩的区分，给用户很好的视觉感受。但卡片周围都要保留一定间距，这会占用屏幕空间，导致一屏内无法呈现较多信息。因此，这类导航不适合用于阅读或新闻等以文字为主的APP中。使用该类导航的APP有米家、英语流利说和爱彼迎等，如右图所示为学习强国和爱彼迎APP页面的卡片式导航。学习强国爱彼迎4.2.2常见导航形式2.舵式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。舵式导航能较大限度地引导用户，其标签栏中通常有3或5个导航项，中间的导航项是重要且需要频繁点击的功能图标。舵式导航重点突出了核心功能，并放进了一些常用的功能。可以提高导航栏趣味性，让用户贡献更多的内容。不足之处是将多个功能在+号里，增加了点击的层次。使用该类导航的APP有美拍、小红书、开源中国和映客直播等，如右图所示为使用舵式导航的喜马拉雅和闲鱼APP页面。喜马拉雅闲鱼4.2.2常见导航形式3.列表式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。层次清晰，易于理解，可展示内容较长的标题，配合下拉列表还可展示次级内容。但列表式导航的灵活性较差，只能通过顺序或颜色来区分入口级别，同级标题过多时，会使用户产生视觉疲劳。使用该类导航的APP有微信、网易新闻、每日瑜伽和简书等，如右图所示为使用列表式导航的微信APP页面。微信4.2.2常见导航形式4.抽屉式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。也称侧滑式导航，用户可通过左右滑动页面，或点击页面左上角的展开按钮，控制当前页面的显隐。抽屉式导航适合作为产品的辅助导航，一般用来放置需要但是不常用到的功能，例如设置、当前用户等信息其缺点是：功能容易被忽视。另外，操作效率低，用户需要双手操作，然后等待菜单展开数据，再点击功能。使用该类导航的APP有手机QQ、滴滴出行、网易邮箱和酷狗音乐等，如图所示。手机QQ滴滴出行4.2.2常见导航形式5.瀑布式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。目前比较流行的导航形式。其特点是随着页面向下滚动，内容会不断加载，直至穷尽。适合展示以图片或视频为主的信息，如图所示为使用瀑布式导航的微博APP。根据APP的版式需求，内容视图中的模块也可用双排平齐或错位排列，如图所示为双排平齐的优美图APP页面。瀑布式导航的缺点是不适合层级架构复杂的产品，容易发生空间位置迷失；容易产生疲劳感。使用该类导航的APP还有花瓣和腾讯视频等。微博优美图4.2.2常见导航形式6.宫格式导航此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。将功能入口等距分布在页面中，便于用户查找所需功能。一般横向不超过5个图标，超过时可将设置为左右滑动形式。缺点在于：一旦进入某个页面后，需要返回主页才可进入其他功能入口，形