APP原型的设计步骤是什么？

Posted 2021-03-13 白玲

当我们开始设计一款APP的原型时，应该遵从的设计步骤是什么？总结一下自己首次设计APP的思路步骤，以期自己对原型的设计认知能更规范化、流程化。

一、定框架

一款APP应该有固定的上导航、下导航和尺寸大小，基于这个思路，在开始画页面之前，应先定好上导航、下导航和原型尺寸。

1.上导航：上导航位于页面的顶部，一般组成有三部分，左按钮、页面标题、右按钮。

A.左按钮一般为“返回”上一级的功能，用于告诉用户怎么回去之前的路；

B.页面标题则居中显示，为当前页面的名称，告诉用户当前在哪；

C.右按钮一般为操作区，用于隐藏一些针对当前页面的操作、全局操作等，一般设计为抽屉导航，以节省页面空间和统一设计。

2.下导航：下导航位于页面底部，由四到五个标签组成，点击标签，用户可方便地在不同页面间来回切换。一般将应用中最重要的几个功能模块抽象出来后，形成下导航标签。

3.原型尺寸：原型尺寸的确定取决于APP目标用户使用设备的分辨率。此处需调查两份数据：

A.设计一份简单的在线调查，面向目标用户收集到他们的设备使用情况.其中iPhone使用率占49.57%，华为使用率占比18.48%，之外，OPPO和vivo分别占比12.6%和11.34%，小米占比7.9%；

B.查阅android和ios设备分辨率占比情况：

 

 

综合两份数据，将应用支持的分辨率确定为：安卓 1920 x 1080，ios  1334*750，应支持的系统版本：安卓适配4.4及以上，ios适配8.0及以上。

根据屏幕分辨率的定位，结合在网上查找的一些资料，最终确定原型尺寸为375*667。

有了上导航、下导航和尺寸，app的框架就定下来了，页面的设计就是往这个框架里面塞内容了。为了提高效率，将框架制成母版，做到在所有页面的复用和统一：

 

 

二、定全局

一款应用中，每个模块或页面都要用到的功能，可以抽象出来做成全局功能，一是可以达到一次设计，全局适用的效果，提高原型设计的速度；二是防止每次遇到都交代，导致同样的功能，设计不一样。根据业务的需要，抽象出的全局功能有：

 

 

除了全局功能，保持操作和反馈的一致性，是对用户友好、降低用户学习成本的最基本要求。为此定义应用的全局规范，包括：

 

 

其中反馈包括操作反馈（错误反馈、操作成功提示、操作确认等）、页面加载反馈（刷新提示、加载中、加载失败、全部加载等）、页面状态反馈（无网络、请求失败、加载失败、无内容、页面不存在等）

这一块会跟UI设计师一起确定，并形成适合公司的标准规范，设计成公司组件库，方便各个项目之间复用。

三、画页面

页面框架定好了，全局规范定好了，最后就剩下设计具体的页面了。在设计具体的页面时，用状态去指导设计不仅让自己的思路很清楚，不会遗漏功能，在交付给其他团队成员的时候，也更容易理解和沟通。

如此，在设计每一个页面时，应先梳理这个页面涉及的业务操作流程：

 

 

然后根据操作流程抽象出不同的操作状态迁移图：

 

 

根据不同的状态，此处至少应输出：包裹创建中的页面、保存为草稿的页面、创建失败的页面、创建成功的页面；其中创建包裹时，又可以细分出操作流程，如选择仓库、选择sku、选择物流方式，根据这个流程又划分出不同的状态，画出不同的页面。如此一层层细分，直到所有业务逻辑划分完成。这样做的好处是，流程清晰、操作逻辑清晰，不容易遗漏细节。

四、输出原型

最后，将产品的来龙去脉、用户等简介信息与操作页面融合起来，整理出完整的文档，目录脉络是这样的：

 

 

因第一次负责移动端产品，没有经验和成熟的思路指导，在设计的过程中走了很多弯路：

一是盲目下手，没有充分利用网络上的资源，比如在搭建页面框架的时候，其实已经有成熟的组件可直接使用，只要按需改一下文字名称即可，比如antdesign这个网站上就有很完善的mobile、web端的组件库可供下载，充分利用可大大提高原型设计效率。

二是没有确定固定的表达模式（如按状态划分页面，说明业务规则），导致每个功能表达方式不一致，又不得不花费时间和精力调整。

三是没有仔细研究和学习iOS和Android的官方design guide，导致有一些设计不符合规范，看起来不像一款移动端应用的设计，更像web端。

静下来总结思考，其实每件事情都有几乎接近标准的实施步骤，有了这个步骤的指导，当你拿到相关任务的时候，就不会感觉无从下手了。