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

目的:产品原型的规范化,目的是清楚表达产品设计理念和功能交互及执行逻辑,提高产品、研发、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.16款界面原型设计工具Axure RP 能让操作它的人快速准确的创建基于Web的网站流程图、原型页面、交互体验设计、标注详细开发说明,并导出Html原型或规格的Word开发文档。通过扩展还会支持更多 【免费】软件界面原型设计工具 UIDesigner UIDesigner,简称“UID”,是一款进行软件界面原型设计的工具。 它拥有强大的模板和预制功能,能够快速的搭建https://www.douban.com/group/topic/88116554/
2.十大必备界面设计工具,让你的设计更出彩!2.UIDesigner软件界面设计 2.5.5 腾讯CDC设计研发的界面原型设计工具,专为交互、视觉、用研设计师打造。拥有强大模板和预制功能,快速搭建高保真原型。实现设计师、产品经理、程序开发工程师间的快速沟通,减少工作内耗。 UIDesigner软件界面设计 2.5.5 官方 https://app.zol.com.cn/jiqiao/69907.html
3.5款Windows界面原型设计工具转自:界面原型设计工具 - 开源软件 - OSCHINA - 中文开源技术交流社区 Pencil 是一款开源的原型图绘制工具,手绘风格的,就像自己在纸上画的那样。Pencil 还可以用来绘制各种架构图和流程图,同时还提供 Firefox 的插件。 【商业】原型制作软件 Axure RP https://blog.csdn.net/kupe87826/article/details/19931833
4.UIDesigner(软件界面原型设计工具)下载UIDesignerUIDesigner(软件界面原型设计工具) v2.11系统其他 软件等级: 软件大小:29.98MB 支持语言:简体中文 授权方式:免费版 软件分类:系统软件/系统其他 官网链接: 更新时间:2024-09-11 07:34:01 运行环境:WinXP, Win7, win8 厂商: 关键字:移动应用原型设计原型设计 https://www.crsky.com/soft/318664.html
5.原型设计软件网站原型设计工具原型设计工具大全可以让用户快速创建应用软件,自由建立原型,还可以在线预览。 2.protopie 可以将自己建立的原型发送到手机上进行实验,体验多种转场方式。 3.墨刀 国产原型设计工具,界面全部中文,还可以将作品保存在云端。 4.UIDesigner 由腾讯开发的原型设计工具,内置超多模板,用户可以免费使用,还可以快速分享。 http://www.downyi.com/key/grlcrj/
6.十大原型设计工具,UI界面设计原型设计软件排行榜2024年原型设计工具十大品牌最新发布,原型设计工具排行榜前十名品牌有Sketch、Figma、Axure RP、Adobe XD、摹客、墨刀、莫高设计、Pixso、Proto.io、即时设计。原型设计工具10大品牌排行榜由品牌研究部门收集整理大数据分析、研究得出,帮助你了解原型设计工具哪个牌子好。https://www.maigoo.com/maigoo/9593yxsjgj_index.html
7.UIzardUIzard是一个网页和app应用界面设计工具,集成了Google API,可以快速构建界面和原型,支持人工智能技术进行自动化设计。 UIzard是一个面向网页和应用开发的界面设计IDE。它内置了Google的API,如Google Fonts、Google Maps等,可以简单快速地构建界面和交互原型。UIzard还采用人工智能技术,可以根据用户输入自动生成界面设计方案。https://www.aizhinan.cn/tools/2094.html
8.MasterGo我们知道 Sketch 和Figma 都是国际流行的设计工具,但 Sketch 仅有 Mac 版,Figma 也因美国制裁禁止大疆使用的事件闹得沸沸扬扬。加上定价都很高,使得这两者都难以适合国人。 MasterGo 是一款能替代 Sketch、Figma、AdobeXD 甚至是 PS 的国产免费 UI / UX 矢量设计工具!它提供了产品界面设计、交互原型制作、网页/https://www.iplaysoft.com/mastergo.html
9.原型设计工具axureapp原型设计工具有哪些原型设计工具大全为大家收集整理许多软件原型设计工具,如axure,Justinmind,mockplus等,均为中文汉化破解版,可以帮助玩家快速便捷的制作软件等模型界面,适合于PC端上的软件以及移动端的app应用界面设计.https://www.qqtn.com/qqkey/yxsjgj/
10.产品经理常用原型设计工具详细介绍作为一个功能强大、灵活多样的原型设计工具,Axure RP 能够满足用户在设计过程中的各种需求。无论是创建简单的界面原型,还是设计复杂的用户流程,Axure RP 都提供了丰富的功能和工具,让用户能够轻松实现他们的设计想法。 2. 界面功能 Axure RP 界面功能主要由 9 大模块组成分别是菜单栏,页面,概要,原件,母版,样式,https://www.msn.cn/zh-cn/news/other/%E4%BA%A7%E5%93%81%E7%BB%8F%E7%90%86%E5%B8%B8%E7%94%A8%E5%8E%9F%E5%9E%8B%E8%AE%BE%E8%AE%A1%E5%B7%A5%E5%85%B7%E8%AF%A6%E7%BB%86%E4%BB%8B%E7%BB%8D/ar-AA1m8GPa
11.6个画网页原型图工具汇总!设计师必备!ProcessOn 是一款功能强大的在线页面原型设计工具,它可以帮助用户快速创建交互式页面原型和流程图。ProcessOn 具有简洁易用的界面和丰富的图形库,让设计过程更加高效和便捷。 3、Pidoco Pidoco 是我周围设计师经常提起的原型设计工具。最值得一提的就是丰富的交互效果选项,可以让你的网页原型变得更加生动,给用户们带来更https://js.design/special/article/tools-for-drawing-web-prototype.html
12.设计师常用的9款界面设计工具,你都用过哪些?Pixso是国内一款为本土设计师量身打造的在线UI界面设计工具,集成原型、设计、交互与交付等所有界面设计需求。UI界面设计工具Pixso拥有中文界面,所有的界面功能上都有中文解释,对于本土设计师来说,没有语言上的压力。同时,这款也非常适合UX和UI设计的小白来使用,Pixso开创了原型设计协作新模式,无需在工具之间切换,需求梳https://pixso.cn/designskills/jiemianshejigongjv/
13.2024年10款好用的原型设计工具推荐Sketch是一款macOS上的原型设计工具,它是设计网站和应用最流行的工具之一,它也可以做原型设计,它是一个轻量级的工具,界面非常简单,让设计师可以自由地专注于手头的任务,可重复使用的元素可以通过智能布局功能在整个网站上使用,智能布局功能可以根据元素中的内容改变其尺寸。还有就是易用性,除了精心设计的用户界面,Sketchhttps://www.v1tx.com/post/best-prototyping-tools/
14.线框原型图绘制工具BalsamiqWireframes4.7.2x64中文汉化版摘要:Balsamiq Wireframes 中文版是一种用于创建原型和线框图的软件工具。它被设计用来帮助用户快速绘制应用程序、网页和其他界面的草图。使用 Balsamiq Wireframes,您可以通过拖放预定义的元素和组件来创建简单而直观的界面,并添加注释和互动效果以传达设计意图。该软件的目标是在早期阶段实现快速迭代和… http://www.dayanzai.me/balsamiq-wireframes.html
15.即时原型即时原型(原xiaopiu)是产品原型设计工具和团队实时协作平台,作为产品经理和交互设计师工作学习的必备软件工具,堪称快速原型交互设计神器。可制作手机app、web网站网页、桌面应用软件的原型,拥有海量原型交互模板资源素材,可替代axure在线使用无需下载https://www.xiaopiu.com/
16.以“耐”为例,聊聊产品经理原型设计中的“道术器”比如:高效快速输出原型——“生产力”,精准的将客户需求转化为原型——“理解力”,美不胜收的原型界面设计效果——“审美力”,令人眼前一亮的原型交互动效——“创意”力等。 那么这些能力中,哪个更为重要呢?为什么有些产品经理可以通过“画原型”完成自己的能力突破,而有些人则停留在操作工具阶段,沦为了“原型https://cloud.tencent.com/developer/article/2109350
17.XDv50.0.12破解版AdobeExperienceDesign原型设计工具它为团队设计、原型、共享和合作提供了数十个强大的功能,以实现丰富的用户体验。 >>>Adobe XD v50.0.12>>> Adobe XD v50.0.12的软件功能: 设计惊人的体验。 立即从基本的线框变为精美的设计。使用矢量绘图工具、颜色、字符样式、网格、参考线等定义用户界面的外观。 组件。创建设计元素以在整个XD文档或多个文https://www.yutu.cn/softhtml/showsoft_7641.html
18.墨刀(Mockplus)墨刀(Mockplus)是一款强大的在线原型设计与协同工具,专为UI/UX设计师、产品经理以及前端开发人员打造,旨在简化产品制作和设计流程。它提供了一系列直观的设计工具,使用户能够快速创建和迭代原型设计。https://pidoutv.com/sites/10294.html
19.分享13款优秀的网页线框图设计和制作工具心得技巧网页制作它是基于浏览器的线框图工具,其特色是通过点击和拖动来布局系统。 轻松、快速的创建可调整大小的,容易调节的线框图。 Pencil 这款工具的旨在建立一个自由和开源的工具,用于制作图表和图形用户界面原型。 主要功能:内置图表原型,多页文档背景页面,跨页链接的以及富文本编辑支持。 https://www.jb51.net/web/69919.html
20.原型设计工具有哪些?原型设计工具排名免费原型工具推荐原型设计工具哪个最好用?像axure、mockplus、sketch、墨刀等都是常用的原型设计软件,可以用于画原型图、web网页原型设计等,是交互设计师和产品经理必备工具。绿色资源网还提供了手机版原型设计工具哦!http://www.downcc.com/k/yxsjgj/
21.设计必备12款Prototype工具推荐,让你轻松上手原型设计如果你熟悉 Sketch 的话,那 Figma 对你而言应该也不困难,这是一款相当实用的全端设计工具。 他能够处理线框、原型制作、UI 设计、工程交付等任务,如果你不想写进程码或想以互动模式查看你的原型,那你一定要试试 Figma。 Figma 直觉的操作界面,可以满足设计师想要在自己的设计上添加动态,并预览设计在各种 app、http://cn.eagle.cool/blog/post/prototyping-tool