淘宝UED:如何高效输出移动APP产品原型

文章目录[隐藏]

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

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

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

gbz01

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

gbz021gbz02gbz022

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

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

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

gbz03

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

gbz04

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

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

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

gbz06

 

本文来自淘宝UED团队博客出品

 

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/6928/

(0)
iouedioued
上一篇 2015-07-08
下一篇 2015-07-10

相关推荐

  • 即将开课!6周,快速玩转axure,同时提升产品和交互能力

    前段时间,一位朋友因为原型不太过关,被老板委婉提醒了。我这位朋友的状况不是特例,原型是产品经理最基础的技能,如果不过关,后果太可怕了!最后给老板留下的印象:这人产品能力不行,每天加班就为改原型,产出太低。想成为靠谱、高薪的产品经理?第一步得提高Axure原型能力!起点学院&腾讯课堂联合打造给产品经理的Axure课程已有1868位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理通过6周...

    2018-04-08
  • 图片优化的那些工具

    图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、 image…

    2014-11-06
  • 浅谈动效设计,帮你掌握视觉都需要的动效知识

    精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

    2017-05-10
  • 设计基础|设计的7条心理学原则和定律

    译者注:上图的中文版金字塔并非原文内容,找来帮助大家理解。译者注(图中文字):
    费茨定律示例
    它是什么意思呢?费茨定律表明,你应当让按钮和其他界面元素足够大,因为用户点击小按钮十分困难。
    如果你有个小按钮,像【OK】这样,可以增加一些内边距,或者让它更宽:【 OK 】
    如果说网站上有个按钮,让整个按钮都能点击——而不仅仅是文字标签。
    而且,如果你把物体放在很远的地方,最好就要增大它的尺寸作为补偿。

    2017-05-24
  • 回归设计,iPhone 6是一个好产品吗?

    很有意思的是,几乎每一代新 iPhone 出来后网上总会骂声一片,许多人抱怨它的样子难看、没什么改变……这次发布的大屏 iPhone 6 也不例外,普遍大家抨击的焦点都在后置凸出的摄像头以及后壳两条突出的天线设计上。 有…

    2014-10-28
  • 从2种形式和4种附加价值,来浅谈APP启动页

    当应用程序被用户打开时,在程序启动过程中被用户所看到的过渡页面(或动画)都被我们统称为启动页。为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。
    ——摘自苹果官方对于iOS启动页的设计说明

    2017-05-05
  • [高级交互设计教程]如何创建一个信息构架?

    本文译自Donna Spencer所著《A Practical Guide to Information Architecture》,第18章。 本书主要对信息构架及其设计进行了一些入门的理论和实践介绍,其中包含了一些作者自己的方法,和业界采用较多的方法。无论…

    交互设计 2015-01-26
  • 作品集讲座 | 交互设计与工业设计的关系?

    专注艺术留学作品集辅导前几期克瑞斯带同学们分析了景观设计、建筑设计和室内设计三大专业。今天为大家分享艺术作品集比较热门的交互设计和工业设计专业,对于交互设计,许多同学们都不太了解,甚至因为同样涉及到产品,因此容易和工业设计混为一谈 ,今天克瑞斯就来跟大家详细讲一讲交互设计与工业设计的区别,希望同学们在选择专业上更加清晰明了。如今的工业设计变得非常的宽泛,它本身就是一个非常需要人们来思考的概念思维,并且它的设计思维都是从产品的整体外形线条...

    2018-03-31
  • 用户体验 | 6个细节成就了今天的X1 Carbon 2018(上篇)

    时光穿梭回到2012年,第一代ThinkPadX1 Carbon发布的时候的心情我清晰的记得。Think的意志清晰而明确,效率大屏+高强度轻薄+黑色商务气质。对于未来移动办公的理解,高端ThinkPad是什么样?如今的ThinkPad X1 Carbon 2018(Gen6)便是答案。Yonemochi San曾经坦言,曾经打造的ThinkPad X300正是如今X1 Carbon系列的“祖父”。碳纤维材料的应用,如出一辙的轻薄,不一味...

    2018-03-10
  • 如何进行可用性启发式评估

    经验分类: 经验/观点 / 自译外文 原作者: Armen Ghazarian 用户体验只有在渗透入从创意到开发测试等产品开发的各个阶段时才能发挥最佳效果。当通常来说事情没这么简单,用户体验专家需要反复对已经完成的产品进行…

    2014-10-30