当我们开始设计一款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端。
静下来总结思考,其实每件事情都有几乎接近标准的实施步骤,有了这个步骤的指导,当你拿到相关任务的时候,就不会感觉无从下手了。