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

目的:产品原型的规范化,目的是清楚表达产品设计理念和功能交互及执行逻辑,提高产品、研发、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.墨刀和团队一起使用墨刀,支持在线同步编辑评审, 快速完成全流程产品设计。 100+ 可同时协作人数 15小时 单个项目节省时间 100% 团队工作效率提升 免费试用企业版 满足多种角色、 全流程需求 快捷原型创作 海量素材提高原型设计效率,轻松易上手 高保真演示交付 https://modao.cc/usergrowth/
2.主流原型设计工具介绍——AxureRP,墨刀和PixsoSpaddington创建项目:在墨刀中创建一个新的项目,并设置项目的名称、描述等信息。 设计页面:在项目中添加新的页面,并从工具栏中选择所需的组件进行设计。墨刀提供了丰富的组件库和图标库,方便设计师快速构建原型。 设置交互:通过拖拽和连接组件,你可以设置页面之间的跳转和交互。墨刀还支持手势交互和动画效果的设计。 https://www.cnblogs.com/spaddington/p/18194538
3.墨刀原型工具小白入门篇墨刀教程“时间紧,任务重”,如何在短时间内理解、掌握一个原型设计工具的使用?据同事们的推荐,选择了入手“墨刀”这个软件! 2.软件介绍 墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。 https://blog.csdn.net/u012998680/article/details/138354556
4.墨刀原型设计工具101墨刀原型设计工具101 技术标签: 原型设计 墨刀墨刀是一款UI原型设计工具。 注册并登陆后,创建一个web项目,可以看到以下界面: 其中左边的元素都可以通过托拉拽的方式拖放到中间的界面上。右边是页面列表。 重点介绍: 如何创建交互行为:新建一个元素后(或者新建之后单击),会有一个闪电状的图标,拖动并移动到右边页面,https://www.pianshen.com/article/551211022/
5.墨刀AI墨刀(modao.cc)是一款隶属于万兴科技集团的在线原型设计与协同工具,旨在打通产品设计、研发和销售团队之间的协作,实现原型设计、设计、流程、思维导图的一体化。它不仅支持用 墨刀是什么: 墨刀是一款面向产品团队的原型设计工具,它支持创建高保真的交互原型,并且具备强大的编辑和协作功能,适用于多种设计场景。 https://www.aigc.cn/sites/37535.html
6.墨刀官网,原型设计,线上版sketch设计师工具流程图思维导图为墨刀(官网),原型设计,线上版sketch设计师工具、流程图、思维导图为一体 墨刀是什么? 墨刀是A股上市公司万兴科技旗下的产品设计一体化在线协同办公平台,集原型设计,线上版sketch设计师工具、流程图、思维导图为一体,支持团队项目实时协作和管理,金融级数据安全保障,还支持私有化部署,是设计师、产品经理和技术开发团队https://www.8kmm.com/sites/6573.html
7.Xmind是App原型设计工具,而墨刀是思维导图制作工具。Xmind是App原型设计工具,而墨刀是思维导图制作工具。 A. 正确 B. 错误 题目标签:工具原型设计如何将EXCEL生成题库手机刷题 相关题库:中级突击队(导入正确) > 手机使用 分享 反馈 收藏 举报 参考答案: B 复制 纠错举一反三 鼓励企业依托新一代信息技术,在研发设计、计划采购、生产制造、质量检验、物流运输、https://www.shuashuati.com/ti/1aa84a66b07041a5b7edde54e00bbfd4.html
8.墨刀(Mockplus)墨刀(Mockplus)是一款强大的在线原型设计与协同工具,专为UI/UX设计师、产品经理以及前端开发人员打造,旨在简化产品制作和设计流程。它提供了一系列直观的设计工具,使用户能够快速创建和迭代原型设计。https://pidoutv.com/sites/10294.html
9.墨刀墨刀,一款服务于百万产品团队的原型设计工具,提供APP、后台、小程序、网页、H5及大屏等多场景原型设计,支持交互设计、Axure文件导入,助力团队提升设计效率和协作体验。https://www.dongaiapp.com/sites/1414.html
10.墨刀在线免费在线原型设计专业好用在线设计工具 在线PS工具 白板绘图工具 设计平台 排版工具 多场景设计工具 电脑桌面壁纸设计 电子画册设计 工作证设计 名片设计 签名设计 手机壁纸设计 授权书设计 停车卡设计 运营横幅设计 LOGO设计 原型交互设计 海报设计 PPT设计 查看所有工具 即时原型-即时原型 产品原型设计与团队实时http://bangong.360.cn/site/details?id=439&c=sort
11.墨刀强大易用的原型设计与协同工具原型设计墨刀-强大易用的原型设计与协同工具。墨刀是一款在线办公协作平台,集原型设计,线上版sketch设计师工具、流程图、思维导图为一体,支持团队项目实时协作和管理https://123.meibp.com/909.html
12.常用的原型设计工具有哪些?工欲善其事必先利其器,作为一名产品经理或者设计师,原型工具是必备的工具,分享8款常用的原型设计工具:Axure、百度脑图、创客贴、墨刀、摹客、Invision、ProcessOn、sketch。 1、Axure Axure是一款专业设计师不容错过的免费原型设计工具,设计师可以用它快速创建应用软件或Web线框图、流程图、原型和规格说明文档。作为一https://www.chuangkit.com/blog/pingmiansheji342.html
13.?原型图用什么软件做?原型设计工具有哪些墨刀是一种非常强大的原型设计工具,具有云保存、实时手机预览、各种手势、页面切换效果等功能!此外,墨刀可以快速创建页面连接,原始的拖动连接方式,使页面之间的连接关系清晰地显示出来。 缺点: 应用程序的局限性。墨刀专注于app原型设计,在后台和网站上略显疲软。 https://www.xianjichina.com/special/detail_547152.html
14.产品经理界面原型设计工具“墨刀”实战课程产品经理界面原型设计工具“墨刀”实战课程 发布于:22-07-25播放次数:728次 视频简介: Java进阶案例课程是我要自学网继推出Java基础课程后的又一个力作,自从基础课程的发布,得到了很多学员的支持和推崇,很多学员表示要进一步深入学习。这次我们结合大家的需求,推出这套进阶课程,将衔接基础课程,对异常处理、流、线程和https://haoduoke.net/index.php?m=home&c=View&a=index&aid=123
15.使用墨刀快速原型设计详细教程熟悉原型工具墨刀。 使用墨刀完成该网页的原型草图设计。 二、实验环境 操作系统:Windows 10 X64 原型制作工具:墨刀 三、实验过程 1. 选择适合自己操作系统的墨刀版本下载并安装。 安装界面 2. 打开安装好的墨刀,新建项目,给项目取个项目名称,并选择“网页/电视”,默认大小为1440?1024,点击创建即可。 https://www.jianshu.com/p/cbda3a557139
16.墨刀工具原型/交互设计软件功能墨刀是产品设计一体化在线协同办公平台,集原型设计,线上版sketch设计师工具、流程图、思维导图为一体,支持团队项目实时协作和管理,金融级数据安全保障,还支持私有化部署。墨刀为北京磨刀刻石科技有限公司旗下一款在线原型设计与协作工具产品,用户群体包括:产品经理、设计、研发、运营销售、创业者等,墨刀是一款在线原型https://www.36dianping.com/func/487920113210952
17.墨刀笔点导航(www.bidianer.com)是一个简洁的网址导航网站。你可以自定义上网常用网址、自定义你需要的工具模块。你还可以发现、收集、分享,Web开发、设计工作中的优质资源、干货。https://www.bidianer.com/site/86619
18.墨刀简介墨刀原型设计工具墨刀品牌简介,十大品牌网为你介绍万兴科技集团股份有限公司旗下墨刀品牌信息,包括品牌介绍、联系方式、主营产品、最新评论、点赞数量等,告诉你墨刀原型设计工具怎么样,致力于帮助你了解墨刀真实有效的品牌相关信息。https://www.cnpp.cn/pinpai/4086483.html
19.墨刀AI墨刀AI是国内知名产品设计协作平台「墨刀」最新推出的AI产品原型设计助手,帮助产品设计人高效实现和落地创意,激发无限创造力。墨刀AI功能的推出,极大地提高了产品设计的效率,基础性的工具或者是灵感想法,都可以交给AI,让产品设计人员可以更加聚焦业务逻辑和用户体验方面。 https://ai-bot.cn/sites/2648.html
20.手把手教你使用墨刀,快速制作专业原型设计电脑知识墨刀是一款专业的原型设计工具,帮助产品经理和设计师快速创建高保真原型。它拥有丰富的组件库和交互设置,支持团队协作和一键生成设计规范,大大提升了产品设计的效率和质量。无论你是设计新手还是专业人士,墨刀都能满足你的设计需求。https://www.163987.com/jiaocheng/146413.html
21.墨刀app下载墨刀设计工具标签:设计 介绍 墨刀app,一般又称墨刀设计,墨刀设计工具,墨刀中文版,墨刀工具app。 MockingBot(墨刀)是一款在线的原型工具,让您十分钟设计一个App。墨刀 Android 客户端(原型预览助手)帮助您随时随地预览/演示帐号下的应用原型。新用户注册后,需使用 PC 或下载官方客户端登录墨刀(MockingBot),创建您的应用原型。完成https://liqucn.com/os/ios/yx/675142.wml
22.axure是什么软件详细介绍axure原型工具Axure和墨刀哪个适合新手? Axure适合需要复杂交互设计的用户,功能全面但上手难度较高。墨刀则更加简洁直观,适合新手和需要快速出图的设计师。两者定位不同,新手可以根据项目需求选择合适的工具。 Axure对电脑的要求是什么? Axure对硬件要求不高,但由于其功能丰富,建议在具有较好性能的电脑上运行,以获得更流畅的操作体验https://www.bnocode.com/article/what-is-axure-soft.html
23.耐RP,如何重新定义原型设计?在过去,Axure是最传统、最出名的原型设计软件。但Axure的功能特别繁杂,体验也非常粗糙、学习成本非常高。对于产品经理或交互设计师来说,如何把庞大的Axure软件学会是设计原型的第一个门槛。然而随着在线协作软件的发展,不管是摹客RP,还是墨刀、Xiaopiu,原型设计工具的学习成本都变得很低。只要你花上3-5天时间,快速掌握https://www.51zs.net/articles/50/50828
24.墨刀32位MockingBot墨刀墨刀32位下载v0.7.8.0官方版墨刀32位安装教程 墨刀(MockingBot)是一款简洁易懂的原型设计工具,功能强大、学习成本低,内置海量素材,具备便捷式交互、在线协同、打点评论、真机模拟演示、sketch插件等功能,以最短的时间完成设计并进行协作讨论。墨刀旨在帮助产品经理及UI/UX设计师快速构建移动应用产品原型,并及时与团队内其他成员分享和讨论。作为一款专https://www.wmzhe.com/soft-40847.html
25.十大原型设计工具,UI界面设计原型设计软件排行榜2024年原型设计工具十大品牌最新发布,原型设计工具排行榜前十名品牌有Sketch、Figma、Axure RP、Adobe XD、摹客、墨刀、莫高设计、Pixso、Proto.io、即时设计。原型设计工具10大品牌排行榜由品牌研究部门收集整理大数据分析、研究得出,帮助你了解原型设计工具哪个牌子好。https://www.maigoo.com/maigoo/9593yxsjgj_index.html
26.原型设计工具有哪些?原型设计工具排名免费原型工具推荐原型设计工具哪个最好用?像axure、mockplus、sketch、墨刀等都是常用的原型设计软件,可以用于画原型图、web网页原型设计等,是交互设计师和产品经理必备工具。绿色资源网还提供了手机版原型设计工具哦!http://www.downcc.com/k/yxsjgj/