互联网产品(原型)设计规范

产品原型标准在产品开发的过程中，原型是一个至关重要的环节。

通过原型，可以使开发团队更好地理解产品需求，准确地表达设计想法，并能及早发现和解决潜在问题。

因此，制定产品原型的标准是非常重要的。

本文将探讨产品原型标准，并介绍一些关键要素。

1. 原型设计要素1.1 外观设计原型的外观设计应该符合产品的整体风格和品牌形象。

一般来说，原型应该具备简洁、美观和易于理解的特点。

在原型设计中，可以使用视觉效果、颜色、布局等手段来突出产品的特点，并保证用户体验的一致性。

1.2 功能设计原型的功能设计是保证产品能够实现预期功能的关键。

在设计原型时，应根据产品的功能需求，确保每个功能在原型中都能够得到准确的呈现。

同时，原型需要考虑用户的操作流程和交互方式，以提供便捷的用户体验。

1.3 数据设计在产品原型中，数据设计指的是原型所使用的数据类型、数量和来源等。

根据产品需求，确定原型所需的数据，并保证数据的真实性和准确性。

在原型设计中，可以使用填充数据或模拟数据来展示产品功能，以帮助用户更好地理解和评估产品。

2. 原型标准制定要点2.1 清晰明确的标准制定原型标准时，应确保各项要求都明确清晰，并能够准确地表达设计意图。

标准应该包含外观设计、功能设计和交互设计等方面的要求，以及页面布局、色彩搭配和组件规范等具体细节。

2.2 易于理解和遵守原型标准应该以用户和开发人员为中心，易于理解和遵守。

标准应该采用简洁明了的语言，避免含糊和歧义，以便开发人员能够准确地理解和实施。

同时，标准应该与实际开发过程相结合，符合开发人员的工作习惯，并能够提高开发效率。

2.3 灵活适应变化产品开发过程中，需求和设计常常会发生变化。

因此，原型标准应该具备一定的灵活性，能够适应需求和设计的变化。

在标准中，应该明确变更的规范和流程，并建立相应的沟通和评审机制，以确保变更的及时性和准确性。

3. 原型评审和修改3.1 定期评审在原型开发的不同阶段，应定期进行评审，以检查原型是否符合标准和需求。

移动互联网产品原型尺寸规范最近公司安排我带一下新来的交互设计师，我想给他制定一份交互设计规范。

这样一来，即使新来的交互设计师没什么基础，也可以根据这一份规范，做出大致标准的原型图。

因为Ui设计稿是先做iPhone6的，方便向上适配iPhone6Plus，也方便向下适配iPhone5和iPhone4的尺寸。

所以，交互设计稿的尺寸，就按照iPhone6的尺寸来做。

1、iPhone6的界面布局是：屏幕是4.7英寸的，设计稿的大小为750x1334px。

状态栏(status bar)：就是电量条，其高度为：40px；导航栏(navigation)：就是顶部条，其高度为：88px；主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px截图如下：推荐3款测量工具为：MarkMan马克鳗，Dorado标注，PXcook像素大厨。

2、关于iPhone6的图标的尺寸：导航栏的图标高度为44px左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。

关于iPhone6的文字的尺寸：导航栏的文字大小最大值是34px，标签栏的图标下方的文字大小为20px。

内容区域的文字大小是：24px，26px，28px，30px，32px，34px。

3、（iPhone6设计稿尺寸是@2x），做原型图的时候，可以做成@2x的，即750x1334px；也可以做成@1x的，即375*667px。

4、设置界面的图标高度和开关滑动按钮的图标高度：58px。

参考下图：5、关于颜色，自从我做了3套高保真的交互原型图之后，发现后面还是改成画线框图来的快。

线框图的黑白灰之纯美，有利于专心布局界面，而不用在意界面的颜色搭配。

黑白灰颜色常用的数值是：文字黑色#282828文字深灰色#656565文字浅灰色#98989边框浅灰色#C3C3C3背景淡灰色#f2f2f2按钮背景纯白色#ffffff6、常用的可点击高度，在iPhone6的原型图上，统一成88px。

原型设计规范（初稿）更新记录1.编写目的建立基本的通用的原型设计规范，提升低保真、高保真原型的制作效率。

2.主要内容基础素材；对常用的控件库和组件库的建立，降低开发时间成本，提高一致性和规范性，保持良好的界面风格。

原型制作：划分为流程、关键页面、辅助页面和原型注释。

对原型制作的关键步骤进行规范。

原型发布：1）用于迭代用户评估。

2）用于开发前审核合理性和开发后验证相符性。

界面规范：遵循一些基本的界面设计规范，增强原型的可用性和制作效率。

3.基础素材3.1常用控件定义：控件是指界面中所有的最小元件。

比如：按钮、文本框、下拉框、单选按钮、复选框、图片占位符等等。

文本类控件定义：对原型中文本元素的推荐控件及参数版本：文本类 V1.0播放类控件作用：播放按钮的推荐控件和参数。

菜单和按钮作用：常用菜单和按钮推荐和参数。

版本：菜单和按钮控件 V1.0表单元素作用：提供表单及元素的推荐尺寸版本：表单元素控件库 V1.0图表和表格作用：提供图标和表格基本样式版本：图表和表格 V1.0常用图标控件作用：界面中常用的按钮图标。

版本：各类图标控件 V1.0弹出面板作用：提供弹出面板（窗口）的基本样式。

版本：弹出面板 V 1.0浮层窗口尺寸作用：提供弹出窗口的尺寸规格。

版本：浮层尺寸 V1.0视频窗口尺寸作用：提供视频窗口的尺寸规格版本：视频窗口尺寸 V1.0图片尺寸作用：提供引用界面的尺寸规格（待定）版本：1.03.2常用组件定义：能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本，实现界面的一致性，规范性，突出界面的风格特征。

布局作用：使用栅格作为布局的摆放参考。

版本：栅格布局V 1.0示例：日期选择作用：提供日期选择的原型组件版本：日期选择 V1.0导航作用：提供导航页签的组件。

版本：导航 V1.0表单处理作用：对表单等数据的多种处理方式，如搜索，格式化、总览和浏览。

版本：1.0树状列表作用：提供树状列表组件的包括机构树、搜索及相关操作。

从零开始教你做⾼保真原型图+UI设计规范编者按：《从零开始设计App》系列到这篇已经是第三期了，上期是低保真原型图，这期聊聊如何从零开始制作⾼保真原型图和UI 。

往期回顾：1.2.Hi-fi 输出上篇⽂章提到，在Hi-fi阶段⼤概可以分为前期、中期和后期三个阶段。

这篇⽂章就是对Hi-fi阶段的详细解说。

前期前期的主要任务是hero screen（主功能页⾯）的尝试设计，通过它进⾏视觉风格上的确定。

APP进⼊视觉风格确定的时期，主要确定的内容包括颜⾊、字体、图标三⼤块。

1. 颜⾊确定的过程先做好⼼理准备，很⼤程度上会来回折腾，改来改去。

着⼿点可以从产品点位出发，结合企业视觉系统进⾏统⼀形象设计。

如果企业有⾃⼰的logo和产品线，那视觉出发点可以在保持现有产品线的基础上，进⾏APP个性定位。

通俗点说，就是保持统⼀的前提下，有所区别。

打个⽐⽅，Nike+系列的产品，有Nike+RunClub、Nike+Move、Nike+Training、Nike+，从整体上来看，他们都⽤统⼀的带有运动感的荧光绿作为主⾊调，然后⽤⿊⽩灰进⾏搭配。

三者⼜有⼀定的区别，⽐如说Nike+RunClub的header是绿⾊，Nike+Training的header 是⿊⾊，前者更有活⼒运动感，户外使⽤阅读更⽅便，后者对室内体验更友好。

如果没有企业视觉系统，⼀切从0开始的话，建议从竞品分析开始，市⾯上做得⽐较成功的产品进⾏分析，以及从⾃⾝产品特性和⾏业特性进⾏出发。

⽐⽅说餐饮⾏业代表⾊是橙⾊，运动⾏业蓝⾊，⾼科技领域不同⾊值的篮等等，也可以另辟蹊径做出个性化的尝试，⽐如keep的绿⾊与棕⾊的搭配⽅案。

在颜⾊这个领域分为代表⾊、辅助⾊、搭配⽅案这三⽅⾯的内容。

⼀般配⾊⽅案是，⼀种彩⾊作为重要信息的突出⾊彩，配上不同深浅的⿊⽩灰或者蓝、棕⾊等⽆⾊彩或者⾊彩感⽐较弱的搭配⽅案。

这样的搭配⽅案，在信息呈现⽅⾯会⽐较清晰。

⽽在做设计⽅案中，还需要考虑的是，设计出不同底⾊的搭配⽅案，⽅便在不同场景的⽅案进⾏统⼀。

《AxureRP原型设计》课程标准《Axure RP原型设计》课程标准课程名称：Axure RP原型设计学分：4计划学时：72适用专业：计算机应用技术1．前言1.1课程性质本课程是计算机应用技术专业的一门专业拓展课，其功能在于向学生介绍使用Axure RP创建快速原型的方法，培养学生轻松创建应用软件或Web网站的线框图、流程图、原型和规格说明文档的能力。

通过本课程的学习，使学生熟悉Axure RP的工作环境，重点掌握线框图和流程图的创建方法，简单链接和高级交互，多人协助和版本管理等技术，从而能够进行高效的原型设计，为将来从事APP软件开发、用户体验设计、交互设计、界面设计等相关工作奠定基础。

本课程的先修课程为C语言程序设计，后续课程为移动WEB开发(HTML5+CSS3)。

1.2设计思路本课程是以高职计算机类移动开发方向学生的就业为导向，在行业专家的指导下，对移动开发过程中所涉及的岗位进行职业能力分析，以实际工作中移动WEB开发前期原型设计任务为引领，以原型设计过程中涉及的专业知识与技能为课程主线，通过项目组织教学，倡导学生在项目活动中学会动态原型设计的基本技能。

在教学内容的选择上，贯彻“技能培养为主，知识够用为度”的教学思想，以学生为主体，注重学生实际操作能力与应用能力的培养。

根据原型设计的工作流程，按项目构筑课程教学内容，通过项目引领和任务驱动，并配以案例分析进行教学，着重培养学生的实践应用技能。

建议本课程课时为72学时，计算机类三年制安排在第5学期，计算机类五年一贯制安排在第9学期。

2．课程目标2.1总体目标通过本课程的学习，要求学生充分认识到原型制作的重要性，掌握快速创建动态原型的方法，掌握简单链接和高级交互的实现方法，并学会如何进行多人协同设计和对版本进行管理控制。

教学过程中利用以任务做驱动，对项目和案例进行分析和实现，在此过程中逐渐学会快速创建动态原型，不仅可以让团队成员一起体验自己的设计，而且可以向用户演示和交流以确认用户需求，并为下一步学习移动WEB 开发等课程奠定基础。

产品设计规范要求1. 引言本文档旨在详细说明产品设计规范的要求，以确保产品设计满足用户需求、行业标准和公司政策。

本规范适用于所有产品设计项目，设计师应遵循本文档中的要求，以确保产品设计的一致性和高质量。

2. 设计目标产品设计应实现以下目标：- 满足用户需求和期望- 符合行业标准和法规要求- 具有高质量、可靠性和可维护性- 易于使用和操作- 具有竞争力3. 设计原则产品设计应遵循以下原则：- 用户中心：以用户需求为导向，关注用户体验和满意度- 简洁性：设计简洁、直观，减少用户操作步骤- 一致性：界面元素、交互方式应保持一致，提高用户熟悉度- 可用性：确保产品易于使用，降低用户学习成本- 可访问性：考虑不同用户群体，满足无障碍访问需求- 可靠性：确保产品在各种环境下稳定运行，降低故障率- 可维护性：设计易于维护和升级，降低后期成本4. 设计要素产品设计应包括以下要素：- 用户界面（UI）：界面布局、色彩、字体、图标等- 交互设计（UX）：用户操作流程、交互逻辑、动效等- 功能设计：产品功能模块、业务流程、数据结构等- 架构设计：系统架构、模块划分、技术选型等- 界面原型：使用原型工具绘制界面原型，展示产品功能和交互- 设计规范：制定设计规范，确保产品设计一致性5. 设计流程产品设计应遵循以下流程：1. 需求分析：深入了解用户需求，明确产品目标2. 竞品分析：分析竞争对手产品，汲取优点，弥补不足3. 概念设计：提出创新性概念，为产品增值4. 原型设计：绘制界面原型，展示产品功能和交互5. 设计评审：组织相关人员对设计方案进行评审，确保质量6. 设计修改：根据评审意见对设计方案进行优化和完善7. 设计输出：输出设计成果，包括图纸、规范等6. 设计规范1. 界面布局：合理规划界面元素布局，关注用户体验2. 色彩：使用符合产品调性的色彩，提高视觉舒适度3. 字体：选择合适字体，保证阅读清晰，具备辨识度4. 图标：制作简洁、直观、符合风格的图标5. 交互逻辑：确保交互逻辑清晰，操作流畅6. 动效：合理使用动效，提高用户体验7. 界面风格：保持界面风格一致，提高产品熟悉度7. 验收标准产品设计成果应满足以下标准：1. 符合设计目标和要求2. 界面美观、简洁、易于操作3. 交互逻辑清晰，用户体验良好4. 设计成果完整，包括图纸、规范等5. 代码规范，可维护性强8. 变更管理在产品设计过程中，如遇变更需求，需进行以下操作：1. 评估变更对项目的影响，包括时间、成本、资源等2. 分析变更的必要性和可行性3. 修改设计方案，重新评审4. 通知相关人员进行调整5. 更新设计成果和相关文档9. 附录本文档未涵盖的所有内容，请参考以下文献：1. 《产品设计手册》2. 《交互设计原则》3. 《界面设计规范》4. 《系统架构设计》10. 修订历史- 版本号：V1.0- 修订日期：2021年10月1日- 修订人：张三- 说明：制定本文档，用于指导产品设计工作。

产品原型设计的参考步骤1.确定产品目标：明确产品的目标和定位，了解产品的核心功能和用户需求，以此为基础进行原型设计工作。

2.用户研究：通过市场调研、用户访谈等方式深入了解用户的需求和行为模式，收集用户反馈和建议，为原型设计提供有效的参考。

3.制定用户故事板：将用户需求转化为用户故事板，明确产品的各个功能点和用户使用场景，以此为基础进行原型设计。

4.构思设计思路：根据用户故事板和产品目标，团队成员可以进行头脑风暴，产生一些初步的设计思路。

5.绘制草图：根据初步的设计思路，快速绘制草图，概括产品的各个界面和功能，草图可以是手绘或电子绘制的。

6. 创建低保真原型：利用专业原型设计工具（如Axure、Sketch 等），将草图转化为低保真原型，设计界面布局、交互流程等。

7.迭代优化：将低保真原型分享给相关利益方和用户，收集反馈并进行优化，重复这个过程多次，直到满足用户需求和产品目标。

8.创建高保真原型：在低保真原型的基础上，逐步完善界面设计和交互细节，创建高保真原型，并增加适量的动画效果和交互细节。

9.进行用户测试：通过将高保真原型提供给用户进行测试，收集用户的使用体验和反馈，评估产品的可用性和用户满意度，为产品优化提供参考。

10.输出设计规范：根据高保真原型的设计结果，总结出产品的设计规范，包括色彩、字体、图标等，确保产品的一致性和可维护性。

11.与开发团队对接：将设计规范和原型交给开发团队，与开发团队紧密协作，确保设计能够被准确地实现。

12.完善文档：根据最终的原型和设计规范，完善产品的相关文档，包括界面交互说明、用户使用手册等，确保产品的可理解性和易用性。

总结起来，产品原型设计是一个循序渐进的过程，需要不断与用户和团队成员进行交流和迭代优化。

通过参考上述步骤，可以帮助团队更好地进行产品原型设计，并最终打造出用户满意的产品。

产品经理高保真原型制作与规范产品经理在产品设计过程中，高保真原型制作与规范的重要性不言而喻。

高保真原型能够提供给开发人员清晰明确的设计需求，减少沟通成本，规范则能够保证产品最终的用户体验与设计初衷的一致性。

本文将从高保真原型制作和规范两个方面展开讨论。

一、高保真原型制作的重要性1.规避需求误解和沟通成本：高保真原型能够让产品经理将设计思路、交互流程等用更具可视化的方式呈现给开发人员和其他相关人员，减少了口头沟通时由于信息传递不明确导致的需求误解和沟通成本。

通过高保真原型，开发人员可以更加清楚地了解产品的功能和交互逻辑，从而更加准确地实现产品设计。

2.提前发现问题和迭代优化：高保真原型在制作过程中，能够让产品经理和设计师发现设计中存在的问题，进行迭代优化。

在产品还未花费大量开发成本之前，就能够通过高保真原型发现并解决问题，降低后期修改成本。

此外，高保真原型也能够用于用户测试，在用户群体中进行反馈和调整，从而减少产品上线后的用户体验问题。

3.加快开发进度：高保真原型能够提供给开发人员尽可能详细的设计需求和交互细节，避免了在开发过程中频繁与产品经理和设计师沟通，加快了开发进度。

开发人员可以根据高保真原型进行代码实现，而不需要进行额外的设计决策，提高了开发效率。

二、规范的重要性1.统一视觉和交互风格：规范能够确保产品在视觉和交互上的一致性，让用户在使用产品时感受到一种统一的风格和体验。

当产品内不同功能模块的设计都遵循同一套规范时，用户可以快速熟悉和理解新功能，提高了用户的使用效率和满意度。

2.提高产品可维护性：产品经理在制定规范时可以考虑到产品的扩展性和可维护性，如模块化的设计和文档化的规范可以帮助开发人员快速理解和维护代码。

规范也能够约束开发人员的行为，减少不必要的重复开发和低效的代码实现。

3.保证产品质量：规范可以确保产品在设计和开发过程中遵循最佳实践和行业标准，减少潜在的错误和缺陷。

规范也能够帮助产品团队进行代码审查和设计评审，发现潜在问题并及时改进，提高产品的质量。

产品经理——产品原型设计规范1 术语与解释表 1 1术语表2 概述2.1 前言由于多种因素，在需求分析阶段得到完全、一致、准确、合理的需求说明存在困难。

在获得一组原始需求后，如何快速地使其“实现”，通过原型反馈，加深对系统的理解？如何满足用户基本要求，使用户在试用过程中受到启发，对需求说明进行补充和精确化，消除不协调的系统需求，逐步确定各种需求？如何获得合理、协调一致、无歧义的、完整的、可行的需求说明？图 2 1不同角色认为的需求随着计算机辅助设计的应用，产品设计和生产能力得到极大提高，然而在产品设计、研发和生产前，快速获取产品设计的反馈信息，如何对产品用户价值、可行性、可用性和交互体验等快速地做出评估、论证和改进，这是软、硬件产品生产的痛点。

快速原型技术的出现，为这一问题的解决提供了有效途径，不仅解决了需求阶段的一致性问题，还能很好地将这种一致性的传递到产品研发过程中的系统设计阶段、视觉设计阶段、编码和测试阶段等过程。

快速原型是非常有效的需求可视化呈现、传递和解释手段。

2.2 定义快速原型（特指IT领域，下同）常被称为线框图、mockuo、demo，是对产品可视化的呈现，主要表达一个产品的信息架构、页面布局、内容、功能和交互方式，可以真实的模拟产品最终的视觉效果、交互效果和用户体验感受。

快速原型，按照仿真效果划分为：低保证原型和高保真原型；按照业务流程划分为：水平原型和垂直原型。

目前，主流的产品原型设计软件/工具有：POP（Prototyping on Paper）是由来自台湾的Woomoo公司推出的一款界面原型设计工具，适用于iOS和Android平台。

摩客（Mockplus）是一款简洁、快速、免费的原型图工具，适合软件团队、个人在软件开发的设计阶段使用。

该工具具有低保真、无需学习、快速上手等功能特点，可以帮助用户轻松的做出专业化的原型设计。

Briefs是Mac最新上架的专业App设计工具，提供了成熟的交互设计功能，堪称移动App上的“Axure RP”，设计师可以利用Briefs 设计完整的iPhone、iPad应用交互模型，并利用模拟器即时体验设计的成果，或者利用BriefsLive，将作品同步到装有Briefscase的iOS 6设备上。