原型设计

做互联网产品的小伙伴一定不会对“原型”这个词感到陌生。它就像“用户体验”一样经常被各类人挂在嘴边。它有许多近义词，如线框图、故事板等。那么究竟什么是原型设计，我们为什么需要原型设计，如何进行原型设计呢？

原型设计在产品开发和用户体验领域扮演着至关重要的角色，产品经理通过画产品原型图，可以让需求可视化，进而快速测试和验证产品可行性，为后续推动产品研发提供坚实可靠的依据。

1. 名词解释

1.1 原型设计

原型设计是产品开发过程中的一个关键环节，通常在产品设计阶段的早期进行，原型设计的目的是验证产品的概念、功能和用户体验，以便在进一步的开发和生产中进行改进。

原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言，原型是一种沟通工具。

原型图是最终系统的代表模型或者模拟，比线框图更加真实、细致。

1.2 设计尺寸

1.2.1 像素 px

像素，构成图片的最小单位，也是设计的最小单位；

像素没有固定的物理长度，例如iPhone3和iPhone4的物理尺寸完全一样，但是iPhone3的分辨率为480×320px，而iPhone4的分辨率为960×640px。

Note

iPhone 4使用了一种名为Retina（视网膜）屏幕的显示技术，Retina屏幕是一种具备超高像素密度的液晶屏，它可以将960 x 640的分辨率压缩到一个3.5英寸的显示屏内。

也就是说，该屏幕的像素密度达到326像素/英寸（PPI），乔布斯称，当像素密度超过300ppi时，人眼就无法区分出单独的像素，不会再出现颗粒感。

1.2.2 英寸

固定的物理长度，1英寸=25.4毫米。

1.2.3 屏幕点密度 DPI

屏幕点密度，我们可以将屏幕理解为是由一个又一个点组成的，DPI就是每英寸（长度）所包含点的数目。

DPI我们用的不多，只需了解即可。

1.2.4 像素密度 PPI

屏幕像素密度，即每英寸（长度）所包含的像素点数，该值越高，则屏幕越细腻。

PPI计算公式如下：

这个公式其实就是运用勾股定理算出手机对角线上有多少像素点，再除以手机对角线的长度，从而得到每英寸长度上所包含的像素点数。

2. 原型设计种类

2.1 线框图

草图也就是线框图，它可以是纸质稿，也可以是电子稿。

草图也就是线框图，它可以是纸质稿，也可以是电子稿。草图是一种最简单、快速、低成本原型设计方法，它关注页面结构、布局和基本元素的位置，不关注细节、交互以及视觉效果。

草图通常用于最初期的概念验证以及初步布局设计阶段，能帮助团队快速迭代和优化产品设计方案，并为后期的数字在线版原型提供参照基础。

画草图要避免陷入审美细节，尽可能快速的导出想法才是关键。

• 优点：简单、快速、成本低
• 缺点：细节不足

2.2 低保真原型图

低保真原型图无需装饰和设计，只专注呈现设计的核心想法和概念，它像是一个框架，没有填充修饰物，目的是尽可能在早期检测和修复产品策略主要问题。

低保真原型构建起来比较容易，成本也低，且易于展示和分享，因而能快速得出产品反馈，有利于推动后期的产品迭代和策略优化。

2.3 中保真原型图

中保真原型更多的是指在电脑上使用原型计工具（如墨刀、Axure 等）制作的产品图形界面设计，它虽然有一定的界面展示，但不需要过多的细节修饰，中保真原型可以具备必要的交互效果。

中保真原型可以看做是把纸质的草图数字化，以便通过软件在电脑上不断改进和补充，可以更灵活地选择界面布局和导航方式，设置控件和界面元素以及进行可用性测试。

2.4 视觉稿

视觉稿，也叫做高保真原型图，是具有逼真的界面设计和完善的交互效果，相当于一个最小化的 MVP 产品，可以帮助快速验证市场，让用户体会到真实的产品使用感受。高保真原型的受众更广，不仅产品、设计、研发人员可以使用，市场人员、运营人员、老板股东以及种子用户都可以参与体验，高保真原型不仅是团队高效沟通的工具，也是获取用户反馈数据的重要方式之一。

但制作高保真原型需要耗费一定的时间和精力，因此高保真原型往往也不是必须的。

3. 原型设计作用

原型设计是产品设计开发中的一个重要的工具和方法，它可以帮助设计团队验证概念、减少风险、提高用户体验并加速产品开发进程。

**那原型设计具有哪些好处呢？**总结起来，其重要性主要体现在以下几个方面：

• **验证和改进产品概念：**通过创建一个初步版本或模型，原型设计可以帮助设计团队验证产品的概念和想法，更好地理解产品的外观、功能和交互方式，以及产品是否能够满足用户需求。此外，通过测试原型，可以及早发现问题并进行改进，从而确保最终产品的质量和可行性。
• **减少开发成本和风险：**在原型阶段发现和解决问题，可以避免在产品制造和市场推出之后发现昂贵的错误或需要进行大规模修改的情况，因此在产品开发的早期阶段就进行原型设计可以帮助降低开发成本和风险。原型设计使团队能够在投入大量资源之前对产品进行测试和优化，从而减少后期的修复和调整成本。
• **提高用户体验：**原型设计使设计团队能够更好地体验和关注用户体验，尤其是通过创建可交互的原型，可以模拟用户与产品的互动过程，有利于收集用户反馈和行为数据，进而助于优化产品的界面、功能和流程。
• **沟通和反馈：**原型设计为设计团队、客户、投资者和利益相关者提供了一个可视化的产品参考物。通过原型设计，产品团队可以清楚地表达设计意图和想法，而 Boss 角色可以更好地理解和评估产品的概念和功能。

4. 原型设计流程

4.1 用户调研

在原型设计之前，就需要进行用户调研，通过与目标用户进行深入交流，可以了解他们的需求、行为和偏好，有助于确定产品的关键功能和目标用户群体，为原型设计提供有力的基础。

用户调研的方式可以采用：

• 面对面交流
• 用户调查问卷
• 用户群体讨论会
• 构建用户旅程图
• 数据分析和用户行为追踪
• ......

4.2 画草图

草图是原型设计的初步阶段，它可以帮助我们快速捕捉和表达设计概念，通过绘制草图，我们可以尽快将想法可视化，并进行快速迭代和修改。

画草图的目标是提炼想法，并且最好给画草图加上一个时间限制，那就是 15 分钟。草图主要关注布局、元素位置和基本功能，帮助我们形成初步的原型框架。

绘制草图的方式包含：

• 在纸张上手绘
• 使用原型设计工具

4.3 演示及评论

演示和评论的目标是把一些想法拿出来跟大家分享，然后进一步完善想法。

在演示过程中，要做好记录，演示和评论的时间可以对半分。

4.4 做原型图

在明确了想法之后，就可以开始进行原型设计了。这个阶段需要考虑很多细节，找出切实可行的方案，运用合适的原型来表达。

4.4.1 组件设计

**在原型设计中，组件是构建用户界面的基本单元。**通过设计和定义组件库，可以建立一致的产品外观和交互模式，页面组件可以在不同页面和状态中重复使用，提高设计效率和一致性。

常见的组件设计包括：

• 按钮：登录按钮、删除按钮、提交按钮等，不同的按钮大小、形状、颜色要有区分；
• 表单元素：单（多）行文本输入框、单选按钮（框）、复选按钮（框）、下拉菜单等；
• 导航栏：顶部导航栏、底部导航栏、左侧滑动导航栏等；
• 卡片：展示组织化信息内容，比如头像组件是圆形还是方形；
• 图标：正确使用图标，传达出其含义；
• 弹框和提示框：展示额外信息，警告、确认或通知；

4.4.2 构建站点地图

站点地图相当于软件产品的骨架，能够清晰展示出软件的结构，展示出页面与页面间的关系，比如父子关系、兄弟关系等等。

4.4.3 绘制原型图

接下来，将组件拼接到一个个站点页面上面去，最终组合成产品原型图。

4.4.4 交互设计

交互设计关注用户与产品的互动方式，通过添加交互元素，如按钮点击、页面切换和动画效果，可以模拟用户的真实体验。交互设计一般是通过创建交互原型进行，能让用户更好地理解产品的功能和操作方式，从而提供更好的用户体验。

常见的交互设计包含以下：

• 导航和流程：解决用户在产品中的导航路径和流程，设计时需要确保用户能够轻松地浏览和切换页面，找到所需的功能和信息，并保持良好的信息层级结构；
• 用户输入和反馈：提供明确的输入控件和界面指导，以便用户能够轻松地完成任务并获得即时的反馈；
• 状态和转换：关注产品中各种状态和转换之间的过渡，比如在用户执行某个操作或触发某个事件时，应提供清晰的状态指示和平滑的界面过渡，给用户提供连贯的用户体验；
• 反馈和确认：用户在执行操作时，交互设计应该提供明确的反馈和确认机制，比如成功提交消息、错误提示或确认对话框等，以帮助用户了解他们的行为和结果，并提供必要的反馈；
• 动画和过渡效果：通过使用动画效果，比如过渡效果、悬停效果、状态指示等，可以帮助用户理解界面，还可以增强产品界面的交互性和吸引力；
• **进度条和加载动画：**用于展示任务进度或等待状态，设计时需要注重其可视化效果、流畅性和反馈机制，以保证良好的用户体验。

4.5 原型测试

原型的目标之一是让受众来检验产品是否达到了预期，因此可以请 5~6 位测试者，通过模拟运行等方式，看看产品原型是否被顺畅地使用了，最后分析这些记录，改善设计。

4.6 UI 设计

UI 设计是原型设计中的最后一步，它关注产品的视觉呈现和用户界面的美学，通过采用适当的配色方案、字体样式和图标设计，营造出符合产品品牌调性和目标用户的界面。UI 设计使原型更具吸引力和易用性，为用户提供真实产品的使用体验。

UI 设计的核心元素包含：

• **色彩和配色方案：**色彩运用的恰当与否直接关系到用户体验至关的优劣，好的配色方案可以传达情绪、品牌特性和重要信息，加强界面的可读性和视觉吸引力；
• **字体：**选择合适的字体和排版方案有利于提升 UI 设计的科学性和美观，合适的界面字体应具有良好的可读性，且与 UI 风格匹配；
• **排版：**排版应考虑层次结构、信息组织和内容呈现的清晰性；
• **图标和视觉元素：**图标和其他视觉元素用于传达功能、操作和信息的含义，有意义且易于辨识的图标可以帮助引导和辅助用户理解页面；
• **品牌一致性：**UI 设计需要与品牌形象保持一致，通过使用品牌的色彩、字体和元素，确保产品界面与品牌形象一致，并增强用户对品牌的认知和连接。
• **布局和网格系统：**良好的布局和网格系统有助于界面的整体结构和一致性，帮助用户快速找到所需的信息和功能，并确保界面的可扩展性和适应性；
• **图像和多媒体素材：**图像和多媒体素材可以增强用户体验和吸引力，应选择高质量的图像，设计合适的尺寸，还需要确保在不同设备上的展示效果；
• **响应式设计：**UI 设计应该考虑不同屏幕尺寸和设备的适应性。

Note

UI、UE、UX 到底是什么？

• UI：User Interface，用户界面

  • 眼睛看到的，专注于产品视觉效果。
  • 常用工具：PS、Sketch
  • 交付：界面设计图

• UX = UE：User Experience，用户体验

  • 专注于交互，即用户体验。
  • 常用工具：Axure、Sketch
  • 交付物：原型图

5. 原型设计工具

选择什么工具来制作原型？主要考虑以下几个因素（排名分先后）：

• 熟悉程度和获得工具的便利度；
• 所需的时间和精力；
• 可复用的代码/框架；
• 为测试创建可用的原型；
• 价格和学习曲线。

常用的原型设计工具如下（排名不分先后）：

工具	特点
纸	方便快捷，太简陋，无细节
Axure	功能强大，组件丰富
Word	上手容易，功能有限
墨刀	界面简洁，上手容易
摹客 RP	界面美观
Pixso	组件美观，免费
Figma	每月 12 美元
InVision	每月 15 美元

无论使用哪一种原型设计工具，只要能够把产品思路表达清楚即可，不用在意其他实现细节。

6. 常用控件

以 Element UI 的控件为基础。