什么是Axure及产品原型
axure RP是一款快速原型设计工具,它不需要任何编程或写代码基础,就可以设计出交互效果良好的产品原型,常用于互联网产品设计、网页设计、UI设计等领域 。
作为一款热门的原型设计工具,它可以完成很多纸和笔画不出来的事情,特别是高交互的页面,用动画效果展现让人瞬间清楚你要表达的内容 。
原型:用线条、图形描绘出的产品框架,也称线框图 。
原型设计在整个产品流程中处于最重要的位置,有着承上启下的作用 。何出此言?原型设计之前需求或是功能信息都相对抽象,原型设计的过程就是将抽象信息转化为具象信息的过程,之后的产品需求文档(PRD)是对原型设计中的版块、界面、元素及它们之间的执行逻辑进行描述和说明 。所以说,原型设计的重要性无可替代,产品经理应当要对此有绝对的控制和驾驭能力 。
话说回来,原型设计虽然很重要也应当是有限度的,原型设计的作用有以下几点:
1、因为是原型是需求和功能的具象化表达,所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路 。
2、因为原型相较于UI稿来说修改更方便,所以原型能提高产品经理的功能设计没通过评审时返工的工作效率 。
“原型”是什么意思?
什么是原型和设计?
原型:用线条、图形描绘出的产品框架,也称线框图 。
设计:综合考虑产品目标、功能需求场景、用户体验等因素,对产品的各版块、界面和元素进行的合理性排序过程 。
原型设计的重要性是怎样?
产品阶段:Idea→需求采集→功能结构→原型设计→产品需求文档(PRD文档)→Roadmap
原型设计在整个产品流程中处于最重要的位置,有着承上启下的作用 。何出此言?原型设计之前需求或是功能信息都相对抽象,原型设计的过程就是将抽象信息转化为具象信息的过程,之后的产品需求文档(PRD)是对原型设计中的版块、界面、元素及它们之间的执行逻辑进行描述和说明 。所以说,原型设计的重要性无可替代,产品经理应当要对此有绝对的控制和驾驭能力 。
话说回来,原型设计虽然很重要也应当是有限度的,原型设计的作用有以下几点:
1、因为是原型是需求和功能的具象化表达,所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路 。
2、因为原型相较于UI稿来说修改更方便,所以原型能提高产品经理的功能设计没通过评审时返工的工作效率 。
原型设计的类型和工具有哪些?
1、手绘原形(草图)
所需工具:铅笔、橡皮、白纸
铅笔相比于中性笔的好处在于方便修改,白纸的好处在于安静的随心所欲,不过对于移动产品的设计来说,本人倾向于使用印有手机框架的白纸上绘制,以便于快速进入情景状态,也能对首屏的界面分配做到心中有数 。
PS:给草图(App)拍照,配合POP使用,也可以实现交互效果,有兴趣的童鞋可以试下 。
由于草图的非正式性,多使用原型设计的前期论证阶段(功能设计可行性),个人也比较喜欢先画草图(纸上推演)再画工具原型(完善) 。
2、工具原型
所需工具:Axure RP(推荐)、Justmind(App)、Keynote(最近比较火,适用于Mac OS)
多说一句,凡是软件(不论PC或是App),我都建议用最新版,产品经理更应该如此 。
Axure RP无论是PC端产品经理还是App产品经理都会比较熟悉,通过工具绘制的产品原型已经比较正式,如果添加了色彩和交互动作(高保真),可以与最终产品形态无异 。
在这里有必要说一下原型有没有必要做到高保真的状态,个人观点是:没有需要,就没有必要;时间宽裕,做交互但不加颜色 。
原型的目标在于清楚的表达产品的设计理念和功能的执行逻辑,所以我认为能够达到这个目标的原型都是合格的,在原型中加入色彩和交互的目的无非是让产品经理与技术的沟通更加顺畅 。再说,PRD的作用也是交付给技术,完整的PRD应当包括功能需求、线框原型、PRD描述、UI稿、UE演示和修订记录 。产品经理阶段的原型就高保真了,是不是PRD就不用写了呢?视觉设计师的UI稿根据高保真原型来设计?那交互设计师的呢?(多数公司没有该职位)
多一些时间,用来观察用户、分析需求、重视(用户体验)细节……
产品状态原型是什么意思
这里有三条关于原型的定义:
- 用线条、图形描绘出的产品框架,也称线框图 。
- 交互设计的结果输出,可能是一张纸上的几张图;原型代表着交互设计的结果,当最终实现的时候,交互流程会和原型保持一致;可以理解为草稿或者叫做参照物
- 原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式 。就本质而言,原型是一种沟通工具 。
另外说说,原型设计目的主要有两点:
1、沟通: 因为是原型是需求和功能的具象化表达,所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路 。虽然需求文档也是可以满足沟通需求的,通过用例将交互写到设计描述文档中,但是原型可以更详细地解释交互 。
2、测试:因为原型相较于UI稿来说修改更方便,所以原型能提高产品经理的功能设计没通过评审时返工的工作效率 。没有哪一家互联网公司可以不经过测试,就直接上产品和服务 。原型在识别问题、减少风险、节省成本等方面有着不可替代的价值 。
另外,目前比较好用的在线原型设计工具有Marvel,Invision,墨刀等等 。
产品经理必备技能 | 如何画原型
产品经理当然要会画原型啦~
聊聊怎么画原型吧!
在画原型之前,更重要的事情,就是画 页面流程图 和 信息架构图 !假如你没有这些东西,就开始画原型,那么等着你的就是没完没了的改改改 。
页面流程图是以用户视角,看流程合理性 。通常适合于跳转比较复杂的产品功能,如电商、社交产品 。
为什么要画页面流程:
(1)是交互设计/原型设计的基本依据,是逻辑基础 。如果你都没想好页面流转的顺序,那么你画的原型一定不是可以确定下来的版本
(2)代表了用户的操作过程,先画页面流程图能迅速发现体验问题 。有了页面流程图,你可以设身处地想象用户在使用产品时的操作流程,发现其中可能出现的问题
(3)突出页面重点元素与逻辑关系,提升原型的设计效率 。很多页面不是全新页面,而是在原有页面做一些修改,如果你知道页面流转顺序,那么会给你画原型减轻很多工作量
页面流程图包含:
(1)四方形:业务流程中的四方形部分,异常流程或弹层通常用菱形表示
(2)流向:主干流向和辅助流向
(3)重点元素:每个流程中,重点要体现和表达的内容是什么
画页面流程图的工具:
(1)Axure:画了页面流程图可以紧接着画原型
(2)ppt:方便讲解
【产品状态原型是什么意思 产品原型设计】 需要注意的地方:
(1)回归业务流程,明确主线:页面流程一定来自于业务流程,一般为业务流程中的方形部分 。异常流程一般为弹层或弹窗提示 。业务流程画的好,页面流程就简单 。
(2)明确页面中的重点元素:功能在页面中,有哪些是需要表现元素 。增加异常流程的处理逻辑 。增加辅助的帮助页面 。考虑下游触发点(按钮/链接/滑动...) 。
(3)沟通与优化:首先要尽可能穷举涉及的页面,然后做减法,有些页面合并或删除 。通过原型草图,优化调整页面关键元素 。与UI、UE、前端研发多沟通会有更好的效果 。
页面流程图一般规则:
页面流程图例:
一个具体案例:
业务流程:
页面流程:
主要是分离出了普通用户的操作流程,加异常处理 。
对于普通用户的关键页面和关键流向:
页面流程图:
(1)分离出5个页面,确定流程流向
(2)固定元素,例如在“1购物车”中,“提交订单”就是下游触发点,点击后流向下一个页面;在“2输入优惠码”中有关键元素“填写优惠码”,另外还有下游触发点“确认订单”...
(3)针对每个页面去画对应的原型图
信息架构图,以产品视角,看包含多少功能点 。适合于层级分明的,如音乐产品、新闻客户端、阅读类产品等 。
信息架构图例1:
有了页面流程图或信息架构图,现在终于可以开始画原型啦 。首先,什么是产品原型设计?
产品原型,俗称 线框图,大概就是草图的意思吧 。它是产品落地的关键点,是从虚拟概念到用户接触的节点 。同时也是产品经理产出的关键内容,上传下达,上给老板,下给UI、UE同事 。
产品从原型到上线的流程:
大公司的产品经理只需要做手绘和低保真的部分,小公司可能还要兼职交互设计...
案例:
好的原型有什么特点:
(1)整体:页面结构清晰、跳转关系明确、与业务流程一致、完整表达用户需求
(2)独立页面:功能元素明确有序、位置关系清晰、不同状态变化清晰
(3)交互设计:清晰的交互逻辑、一致交互方式、界面统一
常用工具:
(1)纸笔:自己画画,快速学习和定位
(2)白板:多人讨论
(3)软件Axure/Sketch/墨刀:产出正式文档
案例:
(1)研究流程:业务流程->页面流程
(2)确定页面框架:大概确定页面布局和大的框架
(3)画原型:画模块,确定交互细节
注意事项:
(1)尽可能用真实比例、真实文案,使元素更真实,也避免在需求评审时被之一 。尽可能真实模拟极端情况,并示例清楚 。
(2)紧扣需求主体,不横生枝节 。如果原型需要增加新功能,一定要是来源于需求,并且要考虑后端数据来源 。
(3)不要上颜色!原型就用黑白灰,不要给UI、UE挖坑
(4)目录树清晰,阅读流畅
(5)保存修改记录,关键修改重新保存文件
画/改原型的时间尽量控制在20%工作时间之内,否则就要问问自己是不是哪里出问题了哦 。
产品需求想明白了没???
产品流程理清楚了没???
手绘草图画了没???
手绘草图和Boss确认了没???
产品原型设计基本原则(2)
手绘-----------低保真-------------高保真---------UI设计------>上线
做什么确定干不干确定元素交互设计-------视觉设计
做不做自己思考其他产品运营......UE/UXUI
产品需求没想明白之前、产品流程没理清楚之前、没有手绘之前,不要碰axure
在你没把草图和Boss过了基本确定之前 。不要碰axure
1.明确本次需求的用户与场景;2.认真研究需求的业务流程图;3.完成页面流程与目录
4.确定页面框架;5.确定交互细节、串联;6.讨论迭代细节修正;7.定义细节上的规则
备注:画原型改原型的时间尽量控制在20%以内,原型修改通常是因为需求没封闭
1.先手绘,在上软件
2.真实比例,真实文案
真实比例、真实字号会让元素更真实
真是文案可以避免在需求评审的时候被质疑
真实模拟可能出现的极端情况,并示例清楚
3.不要上颜色
原型就用灰白即可,不用上颜色;做的太漂亮,坑UI/UE; 太漂亮的调整会舍不得删除;
备注:如果在上颜色的情况下一定要沟通,界面的颜色最好定义好前期,后面改动费时间,界面不统一的话(个人体会)
4.目录树足够清晰 阅读流畅
5.修改记录,关键修改重新保存文件留历史版本及时长传服务器或者云盘避免丢失,有日期,不要覆盖保存
6.紧扣需求主题不横生枝节
如果原型需要增加新功能,先考虑后端数据来源
不要为了“长得好看”而增加新模块
7.设计大牛如何称为
努力画、认真画、重复、方法、多看设计的书达到思想上的交流
产品原型工具有哪些
产品原型工具有Pixso协同设计,PencilProject等,其中推荐选择Pixso协同设计,该工具不仅是一站式产品设计协作工具,更是一款专业的UI/UX设计工具 。更多矢量网格、布尔运算、样式创建、智能排版等高阶功能,组件级自动布局,增加或删除内容都无需手动调整,智能排版,且自适应不同屏幕尺寸 。使设计师真正专注于创造本身 。
Pixso通过内网本地服务器部署,确保团队敏感数据和核心业务数据私有化,直接在原型基础上,快速邀请团队成员开启设计协作,自动生成切图标注,打开浏览器就能获取CSS、iOS、Android代码片段,还能根据团队配置,进行定制化功能开发,自定义管理权限,规避数据泄露风险 。
想要了解更多关于产品原型工具的相关信息,推荐选择Pixso协同设计 。该工具无缝衔接以往工作,支持Sketch、XD、SVG等文件导入导出,自由进行Sketch的文件格式转换 。并且,文件自动保存到云端,一键回溯到任意历史版本,再也不用担心文件丢失 。素材库集成众多大厂优秀的设计系统,所有UI设计师均可直接拖拽复用,从此省去大量模块化设计环节的重复劳动 。
关于产品原型和产品原型设计的内容就分享到这儿!更多实用知识经验,尽在 www.hubeilong.com
- 产品经营策略包括哪些内容,产品经营策略案例分析
- 玉兰油产品成份有什么不好?为什么很多人不用 为什么很多人会砍价
- 产品毛利怎么算出来,含税毛利怎么算出来
- 银行产品经理岗位职责,终端产品经理岗位职责
- 产品质量承诺书,安全质量承诺书
- 今年315曝光哪些产品2022,今年315曝光哪些产品蛋黄派
- 有以下两种状态情况:承载能力极限状态下:基本组合和偶然组合 荷载规范中有几种荷载组合
- 如何宣传推广产品 产品宣传推广策略
- 《俞军产品方法论》---十二条产品定律 用户模型模板
- 心理学家卡尔·荣格提出的原型理论的概念之一 阴影什么意思