NingG +

产品分析、设计基本流程

原文地址:高效输出移动app产品原型。本文在原文基础上,进行适当的调整,添加了自己的理解。

目标:输出移动 app 产品原型,高效的实现这个目标。

几个特点:

具体操作步骤:

下文将分开来说上面的 3 个操作步骤。

产品流程图,界面为单位

高校输出,首先要保证产品的整体思路要正确,这点可以从产品流程中体现出来。移动产品需要做到聚焦,因为手机界面的大小,用户的碎片化使用等等,所以一个界面上必然不可能出现太多的内容和行动点,这就保证了我们可以用最简洁的方式来画流程。以界面为单位,定义 界面标题主要内容,如下图所示:

以上述页面为单位,来画流程,下面以一个app的登录注册为例:

上述的产品流程图,有几个目的:

疑问:手机界面小,需要聚焦,因此以 界面 为单位,绘制最简洁的流程;那 PC 端的产品流程图,如何画?

基础原型控件,可修改

如何快速产出高保真原型?一套备用的基础原型控件,必不可少。大部分设计师一般利用axure来完成产品原型,所以从协同合作的角度,本文专门在axure里制作了整套最常用的移动产品组控件。设计师只要改文字,改颜色,摆位置就可以完成简单的高保真原型。基础组控件截图如下:下载地址

以此控件为例子,在之前提到的app登录注册例子,快速组件高保真原型,如下图:

关于设计上很多细节,大家可以查考书籍方寸指间——移动设计实战手册,里面涉及到很多最基本的移动设计知识。

动态原型,可点击

完成高保真原型,根据流程图,可以很方便制作出在手机上可体验的动态效果,让产品人员或用户真实感受app实际的效果。这里推荐一个特别简单的方法,登录Flinto,完成注册,将高保真原型以图片的方式导入,通过链接和专长方式选择,就可以很方便地在手机上查看。网站提供的指导比较具体,大家可以直接查看。

疑问:提供可交互的浏览方式,最佳方案就是借助Flinto等第三方工具吗?

Top