IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

高效输出移动app产品原型

TaoBaoUED 2014-07-15 23:02:58 累计浏览 3,657 次
本机暂存

   如何高效输出移动app产品原型? 清晰的产品思路,顺畅的协同合作,齐备的素材元素,真实的体验感受…保证过程的高效,更要保证有效的成果。下面我们将分三步走,来完成高效输出移动app产品原型。

   一、输出以界面为单位的产品流程图

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

   gbz01

   如何利用起这样的界面单位来画流程,下面以一个app的登录注册为例:

   gbz02gbz02gbz02

   这样的一个产品流程图,可以快速了解产品有多少界面,检验用户路径是否太长,形式简单,也方便讨论修改。

   二、使用可修改的基础原型控件

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

   gbz03

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

   gbz04

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

   三、制作可点击的动态原型

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

   gbz06

同分类推荐文章

  1. 「置顶」我做了什么 (2026-05-05 12:13:28)
  2. 万字长文推演:手机不再从 App 开始,Agent OS 如何接管任务入口 (2026-04-28 14:57:22)
  3. Android Perfetto 系列 10 - Binder 调度与锁竞争 (2025-11-16 15:33:30)

查看更多 移动开发 文章 →

建议继续学习

  1. 120个优秀的水平导航设计 (累计阅读 75,625)
  2. 流程管理与用户研究 (累计阅读 17,053)
  3. 我的 Sublime Text 2 笔记 (累计阅读 16,728)
  4. 越简单越丰富――极简网页设计视觉呈现技巧 (累计阅读 11,599)
  5. 看看各个网站的404错误处理 (累计阅读 10,208)
  6. 视觉设计前瞻实用性研究(PNVD) 第五期 (累计阅读 7,198)
  7. 视觉注意力―解剖设计的根源 (累计阅读 6,969)
  8. 给想转行做产品经理的同学 (累计阅读 6,927)
  9. 可用性测试好助手——Morae软件的应用 (累计阅读 6,780)
  10. 在大公司和小公司做产品的区别 (累计阅读 6,075)