|
|
| 《移动UI设计案例教程》第三章 |
|
|
|
|
第3章 APP 页面构成元素设计了解APP 页面构成元素和常用设计组件的名称与作用了解常见的6 种导航形式掌握列表式导航的设计方法学 习
目 的目录 / CONTENTS页面构成导航形式常见组件案例实战3.1 APP页面构成 基础的APP 页面由栏和内容视
图两大部分构成，而栏又由状态栏、导航栏和标签栏3部分构成，如下图所示。3.1.1 栏3.1 APP页面构成 状态栏：位于页面顶部，
高为 40 像素，用来显示通知、时间、信号和电量等常规信息。无论是iOS 系统还是Android 系统，状态栏一般都是透明的，其中
的图标和文字会根据当前页面的颜色更改为白色或黑色，如下图所示。3.1.1 栏导航栏：位于状态栏下方，高为 88 像素，用于管理屏幕
信息，以及页面层级结构间的导航。导航栏左侧为后退按钮，中间显示当前页面的内容标题，右侧为当前页面的操作按钮。栏内的按钮可以是文字，
也可以是图标。3.1 APP页面构成3.1.1 栏标签栏：是 APP 的全局导航，用户可点击此栏中的功能图标快速切换页面。标签栏一
般位于页面底部，高为98 像素，栏内图标分为选中和未选中两种状态，通常使用剪影图标加文字描述的方式表示。 栏内图标以3
～ 5 个为宜，且文字要通俗易懂，精炼概括，尽量不超过4 个汉字宽度，如下图所示。3.1 APP页面构成3.1.2 内容视图内容
视图包括APP 的主要内容信息和交互行为，是视觉设计的主要区域。 适合展示数量较多，级别相同的信息。在等高的单元格中，
标题信息默认左对齐，副标题、按钮右对齐。 一个能显示多行文本的区域。当内容太多而超出显示范围时，页面还可支持滚屏，将文
本内容显示完整。 在内容视图中占位较小，是向用户提供额外功能和选项的视图。例如，点击加号后出现的下拉列表，在删除APP
时弹出的提示对话框等，都属于临时视图。常见导航形式3.2 常见导航形式 此处的导航区别于前面所说的导航栏，它是对页
面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP 的各项功能。 通过卡片对信息进行归纳，可以增加
页面的层次感，让信息有更明显和更规矩的区分，给用户很好的视觉感受。 但卡片周围都要保留一定间距，这会占用屏幕空间，导致
一屏内无法呈现较多信息。因此，这类导航不适合用于阅读或新闻等以文字为主的APP 中。 使用该类导航的APP 有米家、英
语流利说和爱彼迎等，如右图所示为爱彼迎APP 页面。卡片式导航3.2 常见导航形式 舵式导航能较大限度地引导用户，其
标签栏中通常有 3 或 5 个导航项，中间的导航项是重要且需要频繁点击的功能图标。 使用该类导航的APP 有美拍、小红
书、开源中国和映客直播等，如右图所示为使用舵式导航的美拍APP 页面。舵式导航：3.2 常见导航形式 层次清晰，易于
理解，可展示内容较长的标题，配合下拉列表还可展示次级内容。 但列表式导航的灵活性较差，只能通过顺序或颜色来区分入口级
别，同级标题过多时，会使用户产生视觉疲劳。 使用该类导航的APP 有微信、网易新闻、每日瑜伽和简书等，如右图所示为使
用列表式导航的微信APP 页面。列表式导航：3.2 常见导航形式 也称侧滑式导航，用户可通过左右滑动页面，或点击页面
左上角的展开按钮，控制当前页面的显隐。 为使页面间过渡平滑，此类导航需要设计切换动画，实现难度相对较大。
使用该类导航的APP 有手机QQ、滴滴出行、网易邮箱和酷狗音乐等，如右图所示。抽屉式导航：3.2 常见导航形式 目
前比较流行的导航形式。其特点是随着页面向下滚动，内容会不断加载，直至穷尽。适合展示以图片或视频为主的信息，如图1所示为使用瀑布式导
航的微博APP。 根据APP 的版式需求，内容视图中的模块也可用双排平齐或错位排列，如图2所示为双排平齐的优美图APP
页面。 使用该类导航的APP 还有花瓣和抖音等。瀑布式导航：3.2 常见导航形式 将功能入口等距分布
在页面中，便于用户查找所需功能。一般横向不超过5 个图标，超过时可将设置为左右滑动形式。 缺点在于：一旦进入某个页面后
，需要返回主页才可进入其他功能入口，形成较长的路径链，不适合多任务操作。因此，常用作次级导航。 使用该类导航的APP
有优酷、支付宝主页和微信中的“钱包”页等。宫格式导航：常见APP组件3.3 常见APP组件3.3.1 控制元素 控制
元素是指页面中可与用户交互、向APP发出指令的设计组件，如音乐播放器中调整音乐音量的滑动器；设置页面中控制程序启动的开关；购物车中
控制数量的步进器等都属于控制元素。3.3.2 筛选器 筛选器是页面中用来调整和筛选数据的组件。数据类型不同，组件的表现
形式也有所区别。 条件筛选器则让用户从给出的分类条件中选择若干限制条件，从而逐步缩小搜索范围。 时间选择
器和地区选择器通常采用上下滚动的方式调整信息。3.3 常见APP组件3.3.3 表单 APP 中常见的表单控件有单选
框、复选框、文本框和下拉列表等。它们常用于接收用户信息的页面中，如登录页和注册页等。设计时应区分表单内信息的级别，强化重要信息，弱
化次要信息，并将同类信息等距排列，以便用户浏览，如右图所示。3.3 常见APP组件 按钮是APP 的基础控件之一，被广
泛应用于页面各模块中，当用户点击按钮后，可触发即时命令，跳转至相应页面、完整的按钮视觉体系分为强、中和弱3 个层次，能区分按钮未点
击、点击和不可用3 种状态。3.3.4 按钮 按钮所处位置不同，其外观也会有所区别。位于导航栏的按钮，通常会直接使用“
文字”或“文字+ 图标”的形式表现。 位于内容视图的按钮，一般作为重要的交互组件，多用“文字+背景”或“文字+ 背景+
图标”的形式表现，以增强视觉表现力，引导用户点击。3.3 常见APP组件3.3.4 按钮颜色鲜明：注意将按钮和页面背景颜色区分开
，提高识别度，使按钮更突出。设计按钮时应注意以下3 点：内容精炼：按钮中的文字或图形必须表意明确，高度精炼，越直接越好。级别分明：
页面中通常包括多个按钮，根据需求，设计师要区分按钮级别，对于次要按钮弱化处理，关键按钮强化处理，让按钮呈现视觉的优先级别，从而使页
面逻辑清晰，主次分明。3.3 常见APP组件3.3.5 其他组件 其他组件是指在APP 中必需却不太常用的组件，如提示
浮层组件。提示浮层包括轻量级和重量级两种。重量级提示浮层也称对话框，常在APP 处于某种特殊情况时自动弹出，让用户对重要信息进行确
认，此时浮层外变为不可操作状态，如右图2所示。轻量级提示浮层一般位于当前场景页面之上，用于通知用户出现的即时问题，出现两秒后自动消
失，不影响用户对页面的操作，如右图1所示；案例实战——按钮设计3.4 案例实战——按钮设计 本案例通过绘制如图 所示的
关注按钮，学习如何在内容视图中突出关键按钮。本例制作的是一款社交类APP 关注页面中的按钮，目标用户群以中青年为主。考虑该页面是女
性用户的主页，因此按钮背景颜色采用粉色渐变，以呼应用户性别。考虑关注按钮是该页级别最高的按钮，因此为其添加投影，突出按钮级别。该按
钮在制作时主要用到形状工具、羽化和文字工具等相关工具与知识。作品展示设计思路案例实战——导航栏设计3.5 案例实战——导航栏设计
本案例通过绘制如图所示的导航栏，学习导航栏的一般绘制流程，以及页面设计中参考线的绘制与应用技巧。本案例制作的是一款美
食类APP 页面中的导航栏。导航栏中包括扫码、搜索和消息提示功能。扫码和消息提示功能分别被放在导航栏两侧，搜索功能放在导航栏中间，
并在放大镜图标右侧添加热搜美食。该导航栏在制作时主要用到了形状工具、布尔运算和文字工具等相关工具与知识。作品展示设计思路案例实战—
—列表式导航设计3.6 案例实战——列表式导航设计 本案例通过绘制如图 所示的消息页面，学习列表式导航页面的一般绘制流程。本例中的页面基于一款服务于中青年用户，用于社交和旧物交易的APP。该页面以750×1334 像素尺寸为例进行设计，由于内容视图中包含多个级别相同的信息（联系人），因此该页面使用列表式导航进行布局。作品展示设计思路案例步骤1）制作导航栏和联系人部分2）制作列表部分 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
