APP页面构成0199课件.pptxVIP

APP页面构成01

3.1APP页面构成基础的APP页面由栏和内容视图两大部分构成，而栏又由状态栏、导航栏和标签栏3部分构成，如下图所示。3.1.1栏

3.1APP页面构成状态栏：位于页面顶部，高为40像素，用来显示通知、时间、信号和电量等常规信息。无论是iOS系统还是Android系统，状态栏一般都是透明的，其中的图标和文字会根据当前页面的颜色更改为白色或黑色，如下图所示。3.1.1栏导航栏：位于状态栏下方，高为88像素，用于管理屏幕信息，以及页面层级结构间的导航。导航栏左侧为后退按钮，中间显示当前页面的内容标题，右侧为当前页面的操作按钮。栏内的按钮可以是文字，也可以是图标。状态栏在制作时符合视觉习惯即可导航栏添加按钮，可用加号或其他表示可展开的图标代替

3.1APP页面构成3.1.1栏标签栏：是APP的全局导航，用户可点击此栏中的功能图标快速切换页面。标签栏一般位于页面底部，高为98像素，栏内图标分为选中和未选中两种状态，通常使用剪影图标加文字描述的方式表示。栏内图标以3～5个为宜，且文字要通俗易懂，精炼概括，尽量不超过4个汉字宽度，如下图所示。

3.1APP页面构成3.1.2内容视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。适合展示数量较多，级别相同的信息。在等高的单元格中，标题信息默认左对齐，副标题、按钮右对齐。一个能显示多行文本的区域。当内容太多而超出显示范围时，页面还可支持滚屏，将文本内容显示完整。在内容视图中占位较小，是向用户提供额外功能和选项的视图。例如，点击加号后出现的下拉列表，在删除APP时弹出的提示对话框等，都属于临时视图。1表格视图：2文本视图：3临时视图：

常见导航形式02

3.2常见导航形式此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。通过卡片对信息进行归纳，可以增加页面的层次感，让信息有更明显和更规矩的区分，给用户很好的视觉感受。但卡片周围都要保留一定间距，这会占用屏幕空间，导致一屏内无法呈现较多信息。因此，这类导航不适合用于阅读或新闻等以文字为主的APP中。使用该类导航的APP有米家、英语流利说和爱彼迎等，如右图所示为爱彼迎APP页面。01卡片式导航

3.2常见导航形式舵式导航能较大限度地引导用户，其标签栏中通常有3或5个导航项，中间的导航项是重要且需要频繁点击的功能图标。使用该类导航的APP有美拍、小红书、开源中国和映客直播等，如右图所示为使用舵式导航的美拍APP页面。02舵式导航：

3.2常见导航形式层次清晰，易于理解，可展示内容较长的标题，配合下拉列表还可展示次级内容。但列表式导航的灵活性较差，只能通过顺序或颜色来区分入口级别，同级标题过多时，会使用户产生视觉疲劳。使用该类导航的APP有微信、网易新闻、每日瑜伽和简书等，如右图所示为使用列表式导航的微信APP页面。03列表式导航：

3.2常见导航形式也称侧滑式导航，用户可通过左右滑动页面，或点击页面左上角的展开按钮，控制当前页面的显隐。为使页面间过渡平滑，此类导航需要设计切换动画，实现难度相对较大。使用该类导航的APP有手机QQ、滴滴出行、网易邮箱和酷狗音乐等，如右图所示。04抽屉式导航：

3.2常见导航形式目前比较流行的导航形式。其特点是随着页面向下滚动，内容会不断加载，直至穷尽。适合展示以图片或视频为主的信息，如图1所示为使用瀑布式导航的微博APP。根据APP的版式需求，内容视图中的模块也可用双排平齐或错位排列，如图2所示为双排平齐的优美图APP页面。使用该类导航的APP还有花瓣和抖音等。05瀑布式导航：

3.2常见导航形式将功能入口等距分布在页面中，便于用户查找所需功能。一般横向不超过5个图标，超过时可将设置为左右滑动形式。缺点在于：一旦进入某个页面后，需要返回主页才可进入其他功能入口，形成较长的路径链，不适合多任务操作。因此，常用作次级导航。使用该类导航的APP有优酷、支付宝主页和微信中的“钱包”页等。06宫格式导航：