产品管理流程及规范:产品原型设计

目的:产品原型的规范化,目的是清楚表达产品设计理念和功能交互及执行逻辑,提高产品、研发、UI及业务部门之间的沟通效率,避免信息不对称和信息传达的遗漏和缺失而导致的整个项目进度延期问题。

一般有五个维度来测量一个原型的真实(保真)程度。

a、视觉精炼层次

原型与最终产品看上去有多相似?一个低保真的原型也许就是一个手绘的草稿,而一个高保真原型就会是精确到像素,看上去和真实的产品没什么区别。

b、功能的广度

原型能够包含多少的功能?一个低保真的原型聚焦于那些最重要的任务,而高保真原型会有更细节的任务

c、功能的深度

每一个功能能够被多大程度地制作成原型?一个低保真的原型可以在页面和页面之间跳转,并在已有典型数据的情况下,告诉你大概的用户流程。一个高保真的原型可以让你输入数据,知道那些在进行不同的输入时影响到输出的区分。

d、交互的丰富性

原型中会有多少的交互?低保真原型也许会相当简单,在用户使用时没有任何的反馈信息。高保真原型将会考虑动画效果,表单验证,和所有用户与产品直接的细节交互。

e、数据模型的丰富性

你的原型中应用的数据有多丰富?低保真原型使用的是有限的,典型的数据设置,显示最常见的用例。高保真原型会包括边缘的情况,比如非常长的用户名(应该减少用户名的长度),无数据(提供默认人物头像),第一次使用(使用空白状态),或者极端大的数据量(使用翻页或者过滤)。

产品原型设计根据还原度,也就是与最终成本的逼真度,大致分为低保真、中保真,高保真原型。我在过往中基本做到中保真,这也是绝大公司的要求。不同团队及个人可能对保真度理解不一致,仅仅为个人观点。

a、低保真原型

表现软件的重点功能和基本交互过程,使用简易的线框进行处理,。好处是:制作成本低,速度快,修改也方便,在功能简单及团队沟通顺畅时可以使用

b、中度保真原型

c.高保真原型

d、各类保真度优劣总结

墨刀:设计界面原型及交互(目前阶段使用),墨刀在线协作优势更明显,保密性上可以由公司统一购买账号尽量避免使用私人账号并在权限上做一定的限制;

Axure:的保密性更强,功能更强大,但是在线协作稍微差一点点。

Xmind:绘制功能结构图(主要);

Visio:绘制用户使用流程、系统业务流程、功能架构等;

Word:开发周期允许时撰写PRD;

一个完整项目的产品原型需要有“大纲”,包含内容如下:

a、版本记录

需明确记录原型的增删改内容及日期,

b、功能点列表

列出该原型图的功能点,明确开发任务及优先级。对于分期开发,但原型已经出完的,标注不同功能开发的阶段,“1期”、“2期”等。

b、功能结构图中使用的功能及页面名称要和“功能清单列表”保持一致,

示例:

a、原型界面设计

在绘制产品原型时,按思维导图的产品规划,先搭框架,制作主页面菜单,菜单支持多个级别,各页面的层级关系需要明确,但一般不要超过3级到4级,级数过多则意味着用户的使用层级深,是不太好的方式。。

设置母版,对于产品中的通用性功能、模块、建立统一的母版组建,为后期原型绘制提高便利性,如统一调用母版,统一修改母版。

b、逻辑交互说明

包含数据逻辑和操作交互,主要是面向开发人员和UI设计人员阐述。描述要有利于功能逻辑的实现”,比如说,以下两种方式的准确性

i.点击购物车结算按钮,跳转到订单支付页面。

ii.点击购物车结算按钮,需要判断是否选中商品,所选中商品是否有货,a、如果没有选中商品,点击之后则当页弹窗提醒“您尚未选中商品”,b、如果有选中商品,则跳转订单支付页面(对于不同情况下的点击效果,需要做多个按钮进行不同跳转,),可进一步说明不同跳转的切换效果,比如是左右滑动还是直接跳转等。

对比以上两种方式,则第二种更明确,这也会减少沟通成本。

c、设计说明

如果对设计有特殊要求的也需要做说明,比如支付的一般此阿勇明亮饱和的色调,专业性则一般采取蓝色,或者有设计可供参考的,配色等方面。但如果对于设计没有较好感觉,或是专业知识的,建议尽量让设计师处理,毕竟专业的事情留给专业的人来做嘛。

给主要交互控件设置交互用例,这在墨刀中算是较为容易实现,比Axure要简单,只需要连线即可,完善的交互能够帮助开发清晰的理解需求。

a、在页面层级树的第一个顶级菜单设置并填写【产品名称】,下面可以添加更多层级;

b、版本号——采用子页面进行管理,页面名称命名:版本号+【版本编号】如版本号V1.1.1;

d、功能清单说明——采用子页面进行管理,使用表格说明本次产品原型中需求的主要内容和功能;

e、正式原型部分:

i、产品页面的层级,最高一般不超过4层;

ii、产品模块,命名规则为“【序号】+【产品模块名称】”;

iii、产品功能级页面,命名规则为“【序号】+【产品页面名称】”;

复用元件/组件,必须使用母版设计,然后再统一添加到页面上。在添加母版时,产品的背景,要求使用“位置锁定”,防止在原型绘制的过程中,背景变动频繁调整的情况;

a、PC默认尺寸为墨刀的【网页/电视】类别,APP/H5/小程序默认尺寸选择iPhone6或者一个特定的尺寸,并在之后的原型沿用;

b、APP的框架设计不区分Android与IOS,仅在交互用例的设计上进行区分;

“流程页面”设计并制作用户对本功能的使用流程,一般使用泳道流程图,泳道流程图的画法可以进行百度搜索,一般而言是二维方式,横轴为角色,纵轴为流程进展,在流程旁边,给出必要的文字备注说明,对流程进行进一步的阐述。

需按照产品原型规范要求,需使用能更好表达原型的,使产品原型上的所有功能板块,能够

准备模拟用户的操作情景,保证所有功能的动态面板交互、点击效果、页面跳转链接等交互效果准确并正确。

并且为准确描述页面的交互效果需求。可在页面旁边增加“点击交互效果需求”的说明,来描述页面中每一个功能的操作交互需求。

为了方便开发人员查看和理解,在产品原型中对功能的实现逻辑或使用的限制条件等进行说明。对页面的功能点进行编号,在对应编号进行说明备注

范例:

项目整体页面之间的交互流向逻辑,这个在墨刀上有一个工作流,可以点击进入之后,选择需要展示流向的页面,之后可以选择:a、每个页面与页面整体交互的方式;b、所有控件交互的流向两种方式进行自动生成。第一种方式对于查看页面的主交互方式更清晰

以上即是“产品管理流程及规范3——产品原型设计”的内容,主要讲解了产品原型设计的一些标准、规范及实际操作方式,方法。

THE END
1.最全Axure原型模版素材/组件库AxureMost涉及 PM 产品经理相关的 axure 元件库/组件库,axure素材,axure项目合集,PM 资料。思维导图,MD 文档,流程图 Axure RP 简体中文语言包,不定期更新。支持 Axure 9、Axure 10。 axure汉化文件:官网 Axure rp9 : 官网 Axure rp 10 : 官网 macOS 从官网下载安装最新版的 Axure RP 9 并安装 点击下载语言包到https://www.bilibili.com/opus/1008809374589648904
2.产品设计6种原型图的优缺点互联网产品设计过程中,原型图的常用格式,我见过6种以上。 它们的优点和缺点,介绍如下: 1. Axure格式的原型图 优点: 可以在另一台电脑上,阅读和编辑Axure原型图; 在Axure预览模式下,可以在浏览器左侧显示网页的目录; Axure软件有Mac版本和windows版本。 https://www.jianshu.com/p/e5e9b2ab0dfe
3.20个原型设计案例,助你原型设计效率起飞!今天,我将与大家分享20个优质的原型设计案例,它们有丰富的界面元素、交互效果和用户流程,并且全都提供源文件,可以直接进行编辑和修改的噢~ 这些可直接复用的资源可以加速原型设计流程,提高工作效率,为整个产品团队带来更高质量的产出效果 。1.健身管理类 本套原型是一套健身管理类 原型设计案例 ,原型图包含以下https://baijiahao.baidu.com/s?id=1768847178133284720&wfr=spider&for=pc
4.axure产品原型图AXURE产品原型图 热爱设计的鲁大师 上海/网页设计师/5年前/544浏览 版权 1 02:20:57 02:38:26 08:37:09https://www.zcool.com.cn/work/ZMzMzNDM4OTI=.html
5.产品原型图是什么意思原型设计是产品设计过程中最重要的步骤之一,这也是一直以来,困扰了很多初入产品设计的设计师的难题,尤其是产品原型图,所以,今天小编就来帮你解惑,产品原型图是什么意思? 我们都知道,一款产品成型之前得有一个简单的框架,就是将页面的排版布局展现出来,使得每个功能键的交互,产品的初步构思有一个可视化的展示。一般是https://www.hxsd.com/content/27094
6.关于产品原型的思考,以及对设计冲刺精益创业和敏捷开发的理解什么是产品原型? 原型(prototype)这个概念最早出现在工业设计领域,是设计师用来更好呈现设计理念、验证产品、打磨产品的一种方式,同时也能够起到节约成本的效果。 产品原型简单的说就是产品设计成形之前的一个简单框架,是用于表达产品功能和内容的示意图,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一https://www.digitaling.com/articles/457309.html
7.产品经理必备的7款原型图软件原型设计是产品经理必备的技能,一个好用的产品原型图软件能够使整个原型图绘制过程事半功倍。本文为大家推荐 7 款产品经理必备的原型图软件,它们是即时设计、Axure、Figma、Sketch 、InVision Studio、Proto.io 和 Balsamiq,其中即时设计是国内百万设计师都在用的产研全https://js.design/special/article/product-managers-prototyping-software.html
8.用一个实战项目,让你全面认识产品原型的诞生过程!优设网七、流程图 流程图是产品设计的基本,可以保证产品的使用逻辑合理,在 app 中,流程图也叫业务流程图。花语 app 中的流程图可以分为很多模块,现以主要的识别功能的流程图作例子。 八、中保真原型图 低保真原型图:一般产品经理做的原型图叫低保真原型图,也叫线框图,给 UI设计师以及开发看,其中的文字描述比较多,https://www.uisdc.com/actual-project-understanding-product-prototyping-process
9.原型设计6种原型图的优缺点人人都是产品经理原型图的格式,属于“道”,“法”,“器”,这3个层次中的“器”。如果想在用户体验上,走的更远;那么就需要在“道”,“法”,这2个层次上,积累更多的项目经验,还有不同岗位的思维方式和沟通思路。 互联网产品设计过程中,原型图的常用格式,我见过6种以上。 它们的优https://www.woshipm.com/rp/602951.html
10.产品设计原型模板专题模板产品设计原型模板图片素材下载我图网产品设计原型模板专题为您整理了24761个原创高质量产品设计原型模板图片素材供您在线下载,PSD/JPG/PNG格式产品设计原型模板模板下载、高清产品设计原型模板图片大全等,下载图片素材就上我图网。https://so.ooopic.com/sousuo/12046331/
11.3个细节,轻松区分效果图和原型图腾讯云开发者社区产品设计是一个相对宽泛的概念,其中包含的内容不胜枚举。尤其对于新人小白来说,产品设计的分工分类着实令他们头痛。有些设计人员很多时候连自己画的到底是什么都不知道。领导叫你画个图,结果拿过来一看:天哪!你画了个什么?今天我们就来讲一下,效果图和原型图,这对常常扰乱大家工作的完美CP。 https://cloud.tencent.com/developer/article/1063655
12.教程!手把手教你如何绘制原型图原型图简单的来说,就是【一款产品成型之前的一个简单的框架图】,将页面的排版布局展现出来,每个功能键的交互,使产品的初步构思有一个可视化的展示。 它类似于一个产品的骨架模型,剔除了外观后展现产品的基本交互操作原理,在一个完整的系统开发生命周期中,需要设计原型模型,即建构和测试系统的一个基本版本。 https://www.fromgeek.com/daily/1044-417163.html
13.原型图秘籍,如何画出高颜值原型图Kevin原型图秘籍,如何画出高颜值原型图 产品原型绘制是产品经理必备的基础技能,是将产品需求转换成具象的图形化系统页面的过程,本篇最后的章节也会分享一些B端产品原型绘制的技巧。 1.什么是产品原型 产品原型是产品需求解决方案的可视化表达。在软件产品实施开发前,以较少的时间/人力成本,根据产品解决方案设计产品概念模型,https://www.shangyexinzhi.com/article/21316474.html
14.4种常见的原型设计方法,一起学基础!上述原型设计方法非常适合产品设计的早期阶段,能够探索和定义高级用户体验,同时考虑到最终用户的痛点。但是,在设计数字产品时,必须确保所有交互流程一致且体验良好。为此,我们需要使用数字线框图。在任何网站或移动应用设计的过程中,线框图作为设计元素和功能的图示,它有助于帮助定义和更好地传达信息层次结构,让参与设计https://pixso.cn/designskills/yuanxingshejifangfa/
15.20个原型设计案例,助你原型设计效率起飞!今天,我将与大家分享20个优质的原型设计案例,它们有丰富的界面元素、交互效果和用户流程,并且全都提供源文件,可以直接进行编辑和修改的噢~这些可直接复用的资源可以加速原型设计流程,提高工作效率,为整个产品团队带来更高质量的产出效果。 1.健身管理类 本套原型是一套健身管理类原型设计案例,原型图包含以下几类主要页https://blog.51cto.com/u_9540389/6500487
16.好的产品原型设计有哪些特点好的产品原型为什么还要用产品原型摘要:产品经理使用原型设计工具设计出的产品原型质量是参差不齐的,一般好的产品原型要求做到功能分布合理、有逻辑清晰的流程图、自带必要的页面批注及充分的交互说明、统一的风格及符合规范的界面设计。需要注意的是,产品原型并不是做到这些就够了,还需要根据需求进行更新,不然会影响后续产品开发流程。下面一起来了解一下https://www.maigoo.com/goomai/265869.html
17.商户终端APP产品原型图(axure)软件产品原型案例资源《商户终端APP产品原型图(axure)深度解析》 商户终端APP产品原型图是产品设计过程中的关键环节,它预示着应用的功能布局、用户体验和交互设计的初步构想。在本文中,我们将深入探讨如何利用axure这一强大的原型设计工具来创建高效且直观的商户终端APP原型。 让我们了解什么是axure。Axure RP是一款专业的原型设计和规格说明https://download.csdn.net/download/jys1216/8824477
18.创意产品设计必备的5大流程,从0到1设计一款产品!在上述过程进行时,设计师可以通过白板或思维导图理出产品思路,把所想到的产品功能模块及亮点做好记录,并同步进行草图的绘制,一点点将自己粗略的想法表现在产品当中,实现从概念上给出一个完整的产品雏形。 4. 产品原型设计图 当设计团队逐渐明晰自己需要设计一款怎样的产品后,接下来就是开始动手设计的时候了! https://boardmix.cn/article/5productdesignprocess/
19.即时原型即时原型(原xiaopiu)是产品原型设计工具和团队实时协作平台,作为产品经理和交互设计师工作学习的必备软件工具,堪称快速原型交互设计神器。可制作手机app、web网站网页、桌面应用软件的原型,拥有海量原型交互模板资源素材,可替代axure在线使用无需下载https://www.xiaopiu.com/
20.界面原型图是什么?该怎么画?界面原型图可以简单理解为根据需求分析阶段的要求构建出可用的产品界面,常用于项目初期或精细化阶段。可以帮助设计师将抽象的界面具体地展现,辅助设计;帮助开发工程师了解界面在系统中的作用,辅助开发;辅助产品测试员制定产品测试计划;作为产品经理、设计师、开发工程https://www.liuchengtu.com/tutorial/jiemianyuanxingtushishenme.html
21.AxureRP8产品原型设计快速上手指南页面面板中有两种页面类型——线框图页面和流程图页面,其中使用最多的是线框图页面。新建文件时,默认会自动生成4个页面(1个Home页面、3个Page页面)的页面地图,可以在这个基础上进行产品原型设计。 构建页面地图 选择一个熟悉的产品,尝试在Axure中建立一个页面地图。这里我们梳理了微信的产品架构,然后在页面面板中建https://labs.epubit.com/bookDetails?id=N32085
22.UI设计师会根据产品的原型图出设计稿供程序员参考实现UI设计师:顾名思义,我们现在使用的知乎是由设计师设计的。 UI设计师会根据产品原型制作设计稿,供程序员参考实现。 UI工作的女生比较多,入门也比较容易。 然而,大多数人入行后的发展路径都比较模糊。 相对于其他行业来说,起薪其实还可以,但是加薪幅度不会很大。 基本上很多都可以说是原创的。 地面消失了。 我三http://www.bjhwtx.com/h-nd-135700.html