CH06-APP原型设计

本章目标

• 了解APP项目设计流程
• 掌握APP设计中的原型设计工作
• 掌握并能完成APP原型设计

课题导入

在之前的课程中我们已经学习了是整个APP设计项目的前期调研工作，包括APP项目定位、用户画像、竞品分析以及信息架构，今天我们来学习一下APP的前期设计部分工作，如图1。

（图1 APP原型设计）

原型设计

大体框架结构确定之后，就需要针对任务流程对每个具体页面进行细节处理，这一阶段的产出物也就是交互设计师的最终产出物了，包括高保真/低保真原型以及适当的动效展现等，如图2。

我们在完成了APP的前期调研工作之后，得到了许多的数据以及相关资料信息，这足以为我们后续的设计做好基础。

（图2 原型设计）

原型类型

同样这一阶段仍然需要很严密的逻辑思维能力，和对整体交互的规划能力。还需要有创新意识，在一些细节的纠结之处用创新的概念来解决或许有意想不到的效果，当然前提是你得有足够的交互形式和创意想法的积累。还需要对各个操作平台的设计规范有相当深度的了解，尤其是自己负责的平台。同时还需要有一定文案表达能力，用简练且无歧义的文字表达自己所想。最好还能融入一些情感化的设计元素，因此还需要有一些设计心理学的知识，当然原型制作软件是最基础的表达设计方案的方式，也是需要掌握的，如图3。

（图3 原型类型）

原型设计类型

设计时原型的类别也需要关注，每个项目启动时对原型的需求不一定都相同，交流的对象也有可能会对原型的类别产生混淆，以为线框图（Wireframe）、原型（Prototype）和视觉稿（Mockup）是一个东西，设计开始前最好先与产品经理/甲方确认要绘制什么类型的原型，如图4。

原型设计类型涵盖了低保真原型图以及高保真原型图。

（图4 原型设计类型）

低保真原型图

三种类别虽然产出效果不同，但在本质上都是一样的，为设计开发服务，所以在产品研发时，并没有硬性规定一定先产出哪一个类别的原型图，一切以实际研发过程中的要求为准，如图5。

在设计的过程中，我们如果在最初期就将颜色等视觉样式设计好，在后续的设计中要是出现问题，则不易更正，所以我们需要在低保真原型图设计过程中完成布局等工作，以便于后期的视觉设计工作。

（图5 低保真原型图）

桌面设计规范

我们在设计的过程中，首先需要选择好手机的尺寸大小，在我们的练习中使用的都是375*812px的大小，手机的类型为iPhone 13mini。

在确定好手机的尺寸大小之后，我们还需要找好设计规范，就比如间距等等的规范，在我们的素材中包含状态栏、导航栏等等组件可以直接使用。

我们的桌面图标统一设计为58*58px即可，在圆角大小的使用上我们统一为9px，当然如果不使用圆角也是可以的。

图标与顶部状态栏相距20px，与文本介绍相距16px，文本统一使用“Ping Fang SC”字体，字号则选用11px即可，图标之间上下间距为20px，如图6。

（图6 桌面设计规范）

跳转交互

在设计完我们的桌面图标之后，肯定还需要设计相关的交互动作才行，不然就只能当做静态图片观看了，当然现在有同学会问什么是交互，交互其实就是交流和互动。

首先我们需要学习的是”跳转“这类型的交互动作，比如我们想点击图标，让他跳转到界面，我们可以将右侧的“设计”切换为“原型”版面，之后选中起点，牵出一条交互线到终点，随后设置参数以及类型即可。

可以看到图中有许多的参数和设置，在顶部是类型，我们可以根据需求选择，默认”单击“即可，动作则是需要呈现的功能，”导航到“也就是跳转的意思，如图7。

（图7 跳转）

叠加交互

我们在使用APP的过程中，常常会遇到一个页面叠加在另一个页面上的效果，例如支付页面、弹窗页面以及相关卡片页面等等。

这时候我们就可以使用“叠加”交互进行设计，还是一样，选择好我们的起点，也就是想要通过哪个画框完成叠加效果。

在选好起点之后，我们从起点牵出一条交互线，连接到终点，与“跳转”不同的是，我们需要将动作切换为“打开叠加”，这样就能完成相关操作了，如图8。

（图8 叠加）

滚动交互

同学们对这个交互动作绝对不会陌生，无论是我们的浏览器，还是其他的所有APP，都一定会有这个类型的交互动作。

也就是页面的上下滑动以及左右滑动等操作，这个设计原理就是我们将需要滚动展示出来的内容进行裁剪，展示出来的只是页面的一部分。

这就需要我们将滚动的内容进行“添加画框”操作，随后再将画框的大小进行调整，让画框的大小小于我们的内容，这时候就会有内容被隐藏了，而隐藏的内容就是我们需要滚动才能看到的了。

在右侧的“原型”中，我们将画框滚动形式设置为“水平”或者“垂直”，根据画面进行调整即可。

（图9 滚动）

课后练习

同学们自行选择成员组成小组，寻找市面上的APP，小组内部讨论APP的创意点，完成APP设计项目的前期调研工作，在完成APP设计项目的前期调研工作以后，我们再根据收集好的资料进行原型的设计。

作业要求：

小组成员讨论，自行设计出具有创意的APP项目，并完成原型设计，命名格式为“班级+姓名”。