XX科技产品原型设计规范v11产品经理Word文档下载推荐.docx

XX科技产品原型设计规范v11产品经理Word文档下载推荐.docx

《XX科技产品原型设计规范v11产品经理Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《XX科技产品原型设计规范v11产品经理Word文档下载推荐.docx（11页珍藏版）》请在冰豆网上搜索。

季莹莹

备注：

状态表示为：

1.新建2.完成未审3.完成已审4.完成归档

文档修改记录

编号

描述

（包括：

日期，变更的图、表、段落号，标题或简单描述）

修改类型A，M，D

2017.11.07新增内容XXX

A

2

3

4

5

6

修改类型表示为：

A-增加M-修改D-删除

1.引言

1-1.目的及意义

对项目：

规范性产品原型的目标在于清楚的表达产品的设计理念和功能的执行逻辑，提高沟通效率，避免信息不对称和信息传达中出现问题而导致的开发进度拖延。

1.帮助开发和设计团队提高设计质量和工作效率。

2.降低各方面沟通成本，统一设计标准和设计方法。

3.支持模块化设计，减少开发成本，加快产品更新迭代的速度。

4.提高交互设计水平，提升用户体验。

对个人：

规范性产品原型可以减少开发、产品、UI设计人员的沟通成本，达成更好的时间管理目标，同时避免责任纠纷。

1-2.假定和约束

产品原型设计根据项目周期可选原型类型：

1.低保真原型：

表现软件的重点功能和基本交互过程。

制作成本低，速度快，修改也方便。

适合任务简单，整个团队沟通顺畅，个人能力较强的情况。

2.中度保真原型：

中度保真的产品添加了更多细节，对软件的交互进行了更细致的设计，更接近最终的产品。

在大部分情况下，中度保真原型已经足够，既表现了软件的功能特性和交互过程，界面有一定的细节，而且使用者已经能完整体验到最终的产品，可以验证产品的可行性，确保了不会在后面的开发过程中发现重大失误。

缺点是花费时间会多一些。

3.高保真原型：

几乎完全按照最终产品来制作的原型，细节丰富，包括了产品的所有功能以及详细的交互细节。

制作高保真原型可以显著降低沟通成本，原型更精准和精美。

但是，保真度越高就意味着需要花更多的时间和开发精力，而且一旦有修改也会更加耗费时间。

2.全局规范

2-1.原型设计原则

1.力求降低认知成本。

2.遵循标准的设计规范。

2-2.主流设计工具

Axure设计界面原型及交互（主要）

Mindmanager绘制功能结构图（主要）

MicrosoftWord开发周期允许时撰写PRD

Photoshop制作高保真原型图适当使用

2-3.原型大纲

一个完整的项目的产品原型必须有“原型大纲”，包含内容如下：

1.产品/版本概况，包括：

1版本记录

需明确记录原型的增删改内容及日期，对于不找查找的内容可以使用超链指向修改位置。

原则上，版本记录为相关人员达成一致后，由项目负责人填写，即所有需求改动都要经过当前项目的负责人。

2设计目的

让开发人员明确设计目的，在“抓大放小”的原则下，使研发经理可以适当灵活安排开发任务，也可以在重点功能中使用出彩的实现手段，提高产品质量。

3功能点列表

明确开发任务及优先级。

也可标注“1期”、“2期”等，开发人员可以适当做预留，提高整体工作效率。

2.功能结构图

1使用Mindmanager绘制，或使用Axure生成/制作，目的为让开发人员了解整个功能框架、或者页面结构，形成全局观，利于估算开发时间。

2“功能结构图”中使用的功能及页面名称要和“功能点列表”保持一致，且与各页面标题保持一致。

3.界面原型及逻辑说明

1界面原型

各个功能及所包含的页面，每个功能建立独立文件夹。

2逻辑说明

包含数据逻辑和操作逻辑，针对开发人员和UI设计人员。

阐述“尽可能利于实现的功能逻辑”，例如下面两条描述：

A.点击按钮M，出现界面N。

B.点击按钮M（按钮M状态“正常”、“突出显示”、“禁用”、“已选中”分别有不同的UI设计），当前页面进行跳转至界面N，新界面出现方式为“向左滑动”。

相比之下，描述B更明确，也减少了沟通成本，同时一定程度上避免了可能出现的延迟反馈问题。

3设计说明

必要时要注明设计需求，多用于重点功能，产品人员需要设计人员帮助设计以迎合用户心理等需求。

4.交互用例及说明

必要时应该给每个可点击控件设置交互用例，最低要求也要给界面原型中的所有菜单设置交互用例，防止跳转流程不清晰造成的开发资源浪费。

3.原型设计详细规范（针对产品经理和交互设计师）

本篇主要针对产品经理和交互设计师的原型实际绘制工作，列举部分常见问题及案例来说明原型设计规范。

3-1.原型尺寸规范

原型设计规范随着产品规格和设计理念的推陈出新逐步更新或完善，参考规范如下：

3-1-1.iOS（iPhone）

3-1-2.Android（主流机型）

3-1-3.web

1.屏幕常用分辨率：

1280px*768px

主体设计内容宽度：

1200px（常用宽度：

1190px，1170px，1100px，1200px）

首屏高约：

750px

2.其他设计建议

PS中新建文档宽要大于主体设计内容的宽度，目的为了表现设计意图，展示背景效果，左右宽度最少200px，主体内容要是想要适应所有用户必须低于1000px

3-2.原型界面

3-2-1.界面命名问题

原型界面的命名规则需要保持全局一致，同时对可能混淆的页面名称要加以区分。

以下图为例：

图中有两个“新增”，在沟通时不好辨别，建议以功能排序，按下图命名，沟通时可以直接说编号：

3-2-2.界面大小及位置问题

除特殊情况（如信息流长界面等）外，相同界面框架的大小和位置在同一原型文件中要保持一致，且尽可能展现实现效果。

例如下图对比：

3-2-3.界面控件问题

尽可能的使用正确的控件，例如列表框使用“列表框控件”，主要目的也是避免信息传递出现偏差，保证目的的情况下可灵活。

3-3.原型标注

3-3-1.跳转问题

除默认跳转外，必须注明跳转方式、是否有loading、loading形式等，便于开发人员及UI设计后续工作。

3-3-2.按钮状态问题

特殊按钮状态必须在原型上注明，便于开发人员及UI设计后续工作。

常见案例有：

注册登录界面，前端判断当前用户名或密码的输入状态，按钮“正常”、“突出显示”、“禁用”、“已选中”不同状态的不同条件与展示需求。

例如下图中某种情况：

3-3-3.其他规则问题

“排序”、“随机性”等数据逻辑必须注明详细规则，例如：

排列顺序、随机库、随机概率等。