淘宝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

相关推荐

  • 人机交互 (HCI) 交互设计 (交互设计) 的区别是什么?

    作为一个PM当然非常需要注重产品在使用过程中的一些交互体验,可是广义的人机交互和交互设计又有什么区别呢?让我们来看看知乎里别人都是怎么回答的吧。

    2014-12-30
  • 圈圈的Visio星球大战-交互设计那些事儿 阿西UED 交互设计实用指南方法与提升秘诀解读 交互设计工作思路与设计技巧书籍

    交互设计那些事儿 阿西UED 交互设计实用指南方法与提升秘诀解读 交互设计工作思路与设计技巧书籍

    2016-06-18
  • Axure RP 8 入门手册 – 第6章(三)

    第8节检视功能-元件属性Alice.:小楼大大好!小楼大大帅!我有些小困惑,想请你帮我指点下。可以吗?小楼:你诚实直白的我无法拒绝。Alice.:嘻嘻!我的问题有点多哦。小楼:来嘛!Alice.:我想做个密码输入框,就是输入文字时只能看到圆点那种。帅帅的小楼老师,这个怎么实现呢?小楼:这个是文本框的类型,看来你对这个元件的属性不太了解呀!我给你详细讲解吧!在检视功能的属性面板中有每个元件的属性设置,不同元件的属性会有差别。这里我对各类元...

    2018-04-22
  • 交互设计的进阶三重境

    ✨交互设计师的迷茫作为交互设计师,工作几年之后,如果还处在 “从产品接需求输出线框图” 的循环中,或许就会产生一些迷茫:自己的价值和竞争力在哪里?如何突破,进一步提升自己的能力与话语权?迷茫,是因为无法定位自己,寻不得方向,找不到出路。所以,当我们提问该如何提升时,不妨先想一想,【用户体验设计】这座高塔,究竟是个什么模样,而自己又在什么位置。此文中,我根据自己的一些工作经历和理解,将交互设计师的能力成长分出三个阶段:功能完善者、产品推动...

    2018-02-26
  • Stack自动布局:Sketch中的Flexbox

    Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。小提示:

    – Stacks能产生一致性。

    – 一致性使设计清晰。

    – Stacks能使设计清晰。我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师不依赖团队的其他部分,比如开发人员的优先关注点就与设计团队不同。

    2017-05-06
  • 决战双11,哪些技巧可以让你的专题页设计脱颖而出?

    这是小编见过讲双十一专题设计的最完整最有帮助的文章,我只是看了十遍而已。“以前有个同事她说要减肥要健身
    我说好啊看你能坚持多久
    因为我也好几次喊过这种话
    最后却都不了了之了
    可是几个月后再看到他
    细腰美臀大长腿
    显得更加自信了
    是啊她总可以做到付诸行动
    而我只会给自己找借口
    也许再这样下去
    我都配不上和她做朋友了吧”全场5折起/全场买三免一/1元秒杀0元抢购/周年钜惠等等

    争做行业领跑者/先赚它1个亿/上天猫就购了/好物低价上京东等等热烈庆祝XXX成立几周年/欢迎XXX领导莅临我司/恭喜XXX荣获XXX称号乘年轻,住好点/Just Do It/我的青春我做主/你值得拥有bigger than bigger/again and again/more and more(完全不知所云但是看起来很厉害的样子的文案,超级大牌都爱用。。)老板跑路了/美工甩手不干了等(歪瓜出品,我后面会再提到,因为它简直是电商设计界的一股泥石流。。)改变食界,条条是道-卫龙买了就是朋友-故宫淘宝“那么,我去当香葱烤鸡肉串去了”“啊!要是把早上下的蛋也带来就好了”“我可不能在这种地方被吃掉”“您好,您的食材到了”保湿护肤一步到位/棉柔舒适超强吸附力/轻松舒适不变形等等,常用于详情页里

    2017-05-16
  • 绘制用户体验

    在今年的UX Weeks大会上,Jim Kalbach组织了一场Mapping Experience的工作坊,提出在产品和服务之间关系日益密切的今天,如何形成一个服务生态系统,是商业竞争中的重点。其实阿里巴巴集团在早前就提出了“商业生态”这个概念,但是到底应该如何做?Jim提出:想要在竞争中胜出,其中非常重要的,就是必须清楚的了解自己提供的各种产品和服务是如何相互作用的,以及是怎样在用户的生活中发生影响的。

    2017-05-16
  • 从音乐属性改进用户体验,QQ音乐和虾米音乐如何再优化?

    本文将抛开市场占有率,将腾讯的QQ音乐与阿里的虾米音乐作对比,从音乐的本身属性和对人心理的影响出发,分析用户需求,对产品提出用户体验方面的优化建议。

    2017-05-18
  • 网站交互设计模式为什么值得读

            对于现在的web的发展来说,这本书优点旧了,里面的相关案例网站都是一些比较早的数据。但是这本书还是很值得一读。就像作者所说的,时间在流逝,模式会变化,适当改变信息密度,网站的…

    2017-08-03
  • 简约至上--交互设计四策略

    无所不在的产品简单设计人们喜欢简单、值得信赖、适应性强的产品。复杂的产品很难吸引人。所有不必要的功能都是要付钱的。简单并不意味着欠缺或低劣,也不意味着不注重装饰或者完全赤裸裸。而是说装饰应该紧密贴近设计本身,任何无关的要素都应该予以剔除。四个策略以DVD遥控器设计方案为例.删除:去掉所有不必要的按钮,直至减到不能再减。组织:按照有意义的标准将按钮划分成组。隐藏:把那些不是最重要的按钮安排在活动仓盖之下,避免分散用户注意力。转移:只在遥控...

    2018-02-09