快速制作高保真原型不得不知的小技巧
从零开始教你做高保真原型图+UI设计规范
从零开始教你做⾼保真原型图+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的绿⾊与棕⾊的搭配⽅案。
在颜⾊这个领域分为代表⾊、辅助⾊、搭配⽅案这三⽅⾯的内容。
⼀般配⾊⽅案是，⼀种彩⾊作为重要信息的突出⾊彩，配上不同深浅的⿊⽩灰或者蓝、棕⾊等⽆⾊彩或者⾊彩感⽐较弱的搭配⽅案。
这样的搭配⽅案，在信息呈现⽅⾯会⽐较清晰。
⽽在做设计⽅案中，还需要考虑的是，设计出不同底⾊的搭配⽅案，⽅便在不同场景的⽅案进⾏统⼀。
产品高保真原型的制作与规范
1原型的定义 2原型的种类 3原型的工具 4高保真原型
建立控件库
制作步骤 建立组件库
故事版
设计辅助页
原型注释
绘制流程图 设计关键页
10
1原型的定义 2原型的种类 3原型的工具 4高保真原型
高保真原型注意事项
1. 灰度线框图：颜色会干扰视觉设计，效果会影响大家对易用性的判断。 2. 清晰地展示流程：好的操作流程是易用性的最基本标准。 3. 关键功能要有故事版：更好的、更快的理解产品。 4. 要有注释：图只能展示界面元素，图文并茂才能准确全部传达设计思想。 5. 有一致性：一致性会降低用户对界面的学习和识别成本。 6. 有规范性：好的软件或者网站绝对是规范的。
12
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 2: 建立组件库
Accordion(手风琴)
Tag Cloud(标签云)
能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本， 实现界面的一致性，规范性，突出界面的风格特征。
13
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
3
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
4
1原型的定义 2原型的种类 3原型的工具 4高保真原型
保真度
低
高
保
保
真
6
1原型的定义 2原型的种类 3原型的工具 4高保真原型
2: 低保真原型
低保真原型能够准确的 传达界面的布局和交互 方式，但是美观、效果 欠佳。可以理解为介于 纸面原型和高保真原型 之间的输出的统称，往 往也可以作为需求设计 稿输出。
产品原型设计规范
产品原型设计规范产品原型设计规范是指在产品设计过程中所遵循的一系列规范和原则，旨在确保产品原型的制作过程高效、一致且易于理解。
下面是一些常见的产品原型设计规范：1. 原型尺寸和比例：确保原型的尺寸和比例与实际产品一致，以便设计师和开发人员在制作和实施过程中能够准确理解和执行。
2. 页面布局和结构：确定页面的布局和结构，包括头部、导航栏、内容区、侧边栏等，以确保页面的一致性和易用性。
3. 颜色和样式：使用统一的颜色和样式，确保不同页面和组件之间的一致性。
可以使用公司品牌的颜色和样式，以提高产品的识别度和可信度。
4. 导航和链接：设计清晰的导航和链接，使用户可以轻松地浏览和导航整个产品。
确保导航和链接的位置明显和易于理解。
5. 输入和反馈：针对用户输入和反馈设计相应的界面元素。
例如，使用文本框、下拉列表和按钮等输入界面元素，以及提示信息、加载状态和错误提示等反馈界面元素。
6. 功能和交互：定义产品原型的功能和交互方式，确保用户可以按照预期的方式与产品进行交互。
例如，确定按钮的点击效果、滑动条的操作方式等。
7. 响应式设计：考虑产品在不同屏幕尺寸和设备上的呈现方式。
确保产品在不同设备上都能够以最佳形式展示，并提供相应的交互操作。
8. 可访问性：设计师需考虑到一些特殊用户的需求，例如色盲、视力障碍或听力障碍者等。
确保产品原型对这些用户也能够提供良好的体验。
9. 图片和多媒体：使用高质量的图片和多媒体内容，以提高产品的视觉效果和吸引力。
同时，确保图片和多媒体内容的大小和格式适配不同的设备和网络环境。
10. 文本和排版：使用易读的字体和字号，确保文本内容的可读性。
同时，注意文本的排版和对齐方式，以提高页面的整体美观度和可用性。
11. 辅助工具：考虑到一些用户可能会使用辅助工具（如屏幕阅读器或放大镜）来访问产品。
确保产品原型能够与这些辅助工具无缝衔接，为用户提供良好的体验。
12. 用户测试和反馈：在制作过程中经常进行用户测试和获取用户反馈，以便及时修复和改进产品原型。
高保真原型的这几个秘密，你知道吗?
高保真原型不是一个人可以做的事情，高保真原型需要交互、视觉、产品的配合；高保真原型不是必须的，但有它更好，请在合适的时间和场景下制作高保真；高保真原型是一个最小化的MVP产品之一，它可以帮助你快速验证市场；高保真原型的阅读人群更加广泛，它不仅可以被视觉、开发、产品阅读，还可以被市场、运营、boss和种子用户阅读；原型的保真程度可以分为：低保真、高保真低保真原型（纸面原型、物理原型），下图为低保真下图图为高保真原型原型常被称为线框图、mockuo、demo，原型制作是在正式开始视觉设计和开发之前最具有成本效益的可用性手段之一。
高保真原型可以真实的模拟产品最终的视觉效果、交互效果和用户体验感受。
高保真原型也是最小可行性产品，即MVP产品。
一个登陆页的栗子：二、为什么要做高保真原型？高保真原型是团队成员沟通的有效工具，它也是获取前期用户反馈数据的重要手段之一。
那么，我们来看看一幅关于软件产品的漫画，带着问题继续阅读。
一千个人眼中有一千个哈姆莱特，每个人对需求的理解都不尽相同。
如何让不同的人对与需求，有一个统一的认识？高保真原型无疑是一个很好的选择。
1，它能清楚的告诉你的团队成员，要做的产品是什么样子；2，它能清晰的体现产品的用户体验；它能准确的模拟后台数据的大部分交互效果；3，它能让你的团队成员（市场、运营等）都能更好的理解需求；4，它更加容易的被修改；它还能让目标用户直接参与测试，告诉你他们是否需要；高保真原型对不同人员的影响对于公司1，保证产品质量。
低成本高质量的高保真原型为真正产品提供了保障；2，工作量具体化。
设计、开发、测试等环节评估工作量变得有据可依；3，节约时间成本。
大多会影响产品的隐患，都会在产品原型的时候被发现，在开发阶段之前被解决；4，快速检验产品设计。
用高保真原型去验证产品的市场，获取最早期的市场信息，它是真实产品的试金石；5，加深各个团队对产品需求和具体工作的理解；注：创业公司的首要任务应该是确定开发什么样的产品，千万别在浪费了100W刀之后才醒悟，已经开发了一个用户不需要的产品。
实验报告快速原型制作(3篇)
第1篇一、实验目的1. 理解快速原型制作的概念、原理和方法；2. 掌握快速原型制作工具的使用；3. 培养团队协作和沟通能力；4. 提高设计实践能力。
二、实验原理快速原型制作（Rapid Prototyping）是一种设计方法，旨在通过快速构建可交互的原型来验证和优化设计。
它基于以下原理：1. 用户参与：快速原型制作强调用户参与，通过与用户沟通和反馈，及时调整设计；2. 交互性：原型应具备一定的交互性，让用户能够直观地感受产品的操作和功能；3. 可修改性：原型应易于修改，以便在迭代过程中不断完善；4. 可视化：原型应直观地展示产品功能和界面设计。
三、实验方法1. 确定原型类型：根据项目需求，选择合适的原型类型，如线框图、高保真原型等；2. 收集需求：与用户沟通，收集产品需求，明确原型设计目标；3. 设计原型：使用快速原型制作工具，根据需求设计原型；4. 用户测试：邀请用户参与测试，收集反馈意见；5. 迭代优化：根据用户反馈，对原型进行修改和优化；6. 最终原型：完成迭代优化后，得到最终原型。
四、实验工具1. 线框图工具：Axure RP、Mockplus、Sketch等；2. 高保真原型工具：Adobe XD、Figma、InVision等。
五、实验步骤1. 组建团队：明确团队成员分工，如需求分析、设计、测试等；2. 收集需求：通过访谈、问卷调查等方式，收集用户需求；3. 设计原型：根据需求，使用线框图工具设计原型；4. 用户测试：邀请用户参与测试，观察用户操作过程，收集反馈意见；5. 迭代优化：根据用户反馈，对原型进行修改和优化；6. 最终原型：完成迭代优化后，得到最终原型。
六、实验结果与分析1. 实验结果：通过快速原型制作，我们成功构建了一个具有交互性、可修改性和可视化的原型；2. 分析：快速原型制作方法有助于我们及时发现问题，优化设计，提高设计质量；3. 用户反馈：用户对原型表示满意，认为原型功能完善，操作简单。
高保真原型制作规范
把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑 和功能；怎么让她通过原型来理解这个产品，使用这个产品。
11
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 1: 建立控件库
控件是指界面中所有的 最小元件。比如：按钮、 文本框、下拉框、单选 按钮、复选框、图片占 位符等等。
组件库示例
14
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 3: 绘制流程图
1. 流程图表达的是一个用户用例，通常是HappyFlow 2. 流程图有一个起点和一个终点 3. 流程图中相同的元件代表相同的意思 4. 结构清晰，易于理解 5. 不要用一个流程图展示所有的流程 6. 逻辑完整，清晰 7. 每一个用户的决策都是DecisionPoint 8. 流程图的作用在于梳理流程和规范流程
6
1原型的定义 2原型的种类 3原型的工具 4高保真原型
2: 低保真原型
低保真原型能够准确的 传达界面的布局和交互 方式，但是美观、效果 欠佳。可以理解为介于 纸面原型和高保真原型 之间的输出的统称，往 往也可以作为需求设计 稿输出。
7
1原型的定义 2原型的种类 3原型的工具 4高保真原型
3: 高保真原型
12
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 2: 建立组件库
Accordion(手风琴)
Tag Cloud(标签云)
能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本， 实现界面的一致性，规范性，突出界面的风格特征。
13
1原型的定义 2原型的种类 3原型的工具 4高保真原型
真
原
原
低保真原型与高保真原型在设计中的差异与应用
低保真原型与高保真原型在设计中的差异与应用在设计领域中，低保真原型和高保真原型是两种常用的原型制作方法。
它们在设计过程中的差异和应用方式各有特点。
本文将解析低保真原型和高保真原型在设计中的差异以及它们的不同应用场景。
低保真原型和高保真原型在设计中的差异主要体现在制作过程、外观表现、功能交互等方面。
低保真原型相对于高保真原型来说，制作过程更为简单和快速。
低保真原型通常使用简单的工具和材料，例如纸张、黏土、线框等，可以手绘或手工制作。
而高保真原型则需要运用专业的设计软件和工具进行细致的制作，比如Sketch、Photoshop等。
制作高保真原型需要更多的时间和技术能力。
低保真原型在外观表现上往往更为简单和粗糙。
低保真原型注重概念的传达和设计思路的表达，因此外观通常比较简单，仅包含基本元素和重要信息。
而高保真原型则更加注重细节和真实感，可以呈现出更为逼真和精细的外观效果，包括颜色、图标、字体、布局等都可以精确还原。
再次，低保真原型更适合用于快速验证概念和交流设计思路。
由于制作过程简单快速，低保真原型可以在设计初期就迅速呈现出设计概念，便于与团队成员或客户进行交流和讨论。
而高保真原型则更适合用于展示最终设计效果和功能交互。
高保真原型制作精细，可以准确地还原产品的外观和交互细节，帮助设计师和开发者更好地理解和实现设计要求。
低保真原型还可以用于初步的用户测试和用户反馈收集。
通过低保真原型，设计师可以快速制作出初步的功能模型，让用户参与使用并提供反馈意见。
这样可以及早发现问题和改进设计，提高最终产品的用户体验。
而高保真原型则更多用于技术评审和最终产品展示，准确呈现出最终产品的外观和交互效果，便于技术人员评估实现成本和可行性。
总结来说，低保真原型和高保真原型在设计中有着不同的应用场景和目的。
低保真原型适合用于快速验证概念、交流设计思路和进行初步的用户测试。
它具备制作简单快速、外观粗糙简单的特点。
而高保真原型更适合用于展示最终设计效果、进行技术评审和最终产品展示。
如何用Figma设计高保真原型
如何用Figma设计高保真原型在当今的设计领域，Figma 已经成为众多设计师的得力工具。
它强大的功能和便捷的协作特性，使其在设计高保真原型时具有显著的优势。
接下来，让我们一步步深入了解如何用 Figma 来设计出令人满意的高保真原型。
一、前期准备在开始使用 Figma 设计高保真原型之前，我们需要明确设计目标和用户需求。
这就像是在出发旅行前先确定目的地一样重要。
比如，如果我们要设计一个购物 App 的原型，就需要了解用户在购物过程中的期望和痛点，例如便捷的商品搜索、清晰的商品展示、安全的支付流程等。
同时，收集相关的参考资料也是必不可少的。
可以从其他成功的应用程序、设计网站或者行业报告中获取灵感。
这些参考资料能够帮助我们更好地理解当前的设计趋势和用户喜好。
二、创建项目和页面打开 Figma 后，首先要创建一个新的项目。
给项目取一个清晰明了的名称，方便后续的查找和管理。
在项目中，根据设计的流程和功能模块创建相应的页面。
比如，对于购物 App 原型，可能会有首页、商品列表页、商品详情页、购物车页、支付页等。
每个页面都要有明确的主题和功能定位。
三、选择合适的布局和框架Figma 提供了丰富的布局选项，如单列布局、多列布局、网格布局等。
根据页面的内容和设计需求，选择最合适的布局方式。
比如，在商品列表页，可能会选择网格布局来整齐地展示商品图片和信息；而在商品详情页，则可能采用单列布局来突出商品的详细描述。
同时，要注意页面的框架设计。
确定好页面的边距、标题栏、导航栏等元素的位置和尺寸，以保证页面的整体平衡和美观。
四、绘制图形和组件这是设计高保真原型的核心步骤之一。
Figma 拥有强大的绘图工具，可以轻松绘制各种形状、线条和图标。
对于常见的组件，如按钮、输入框、下拉菜单等，可以使用 Figma的组件库或者自己创建组件。
创建组件的好处是可以在不同的页面中重复使用，提高设计效率的同时保证设计的一致性。
在绘制图形和组件时，要注意细节。
制作原型以及实施方案
制作原型以及实施方案一、制作原型。
在进行产品设计和开发之前，制作原型是非常重要的一步。
原型是产品设计的初步呈现，它可以帮助设计师和开发人员更好地理解产品的功能和外观，也可以帮助客户更好地了解产品的特点和优势。
因此，制作原型是产品设计和开发过程中不可或缺的一环。
1.1 确定需求。
在制作原型之前，首先需要明确产品的需求。
这包括产品的功能、外观、用户体验等方面的要求。
只有明确了产品的需求，才能有针对性地制作原型，确保原型能够满足产品的需求。
1.2 选择合适的工具。
制作原型需要使用相应的工具，例如Axure RP、Sketch、Adobe XD等。
选择合适的工具可以提高原型制作的效率和质量，同时也能更好地满足产品的设计要求。
1.3 制作原型。
在确定了产品的需求和选择了合适的工具之后，就可以开始制作原型了。
制作原型需要根据产品的功能和外观设计相应的页面和交互效果，确保原型能够真实地呈现产品的特点和优势。
二、实施方案。
制作原型完成之后，下一步就是实施方案的制定。
实施方案是指产品的开发和推广计划，它包括产品的开发周期、开发成本、推广渠道、推广策略等方面的安排。
一个好的实施方案可以帮助产品更好地被市场接受和认可，提高产品的竞争力。
2.1 确定开发周期和成本。
在制定实施方案时，首先需要确定产品的开发周期和成本。
开发周期和成本直接影响产品的上线时间和市场竞争力，因此需要合理地安排开发周期和成本，确保产品能够按时上线并具有竞争力。
2.2 确定推广渠道和策略。
产品的推广渠道和策略也是实施方案中需要考虑的重要因素。
选择合适的推广渠道和制定有效的推广策略可以帮助产品更好地被市场认可和接受，提高产品的知名度和销量。
2.3 制定实施计划。
在确定了开发周期、成本、推广渠道和策略之后，就可以制定实施计划了。
实施计划需要包括产品的开发进度安排、推广活动的时间节点、推广效果的评估等内容，确保实施方案能够顺利地执行和落实。
综上所述，制作原型以及实施方案是产品设计和开发过程中非常重要的一环。
产品设计流程与技巧手册
产品设计流程与技巧手册第1章产品设计概述 (4)1.1 产品设计的基本概念 (5)1.2 产品设计的重要性 (5)1.3 产品设计流程简介 (5)第2章需求分析 (5)2.1 用户需求调研 (5)2.1.1 确定调研目标与对象 (5)2.1.2 制定调研计划 (6)2.1.3 收集与分析数据 (6)2.1.4 输出用户需求报告 (6)2.2 市场趋势分析 (6)2.2.1 收集行业数据 (6)2.2.2 分析市场趋势 (6)2.2.3 评估市场潜力 (6)2.2.4 制定市场策略 (6)2.3 竞品分析 (6)2.3.1 确定竞品范围 (6)2.3.2 收集竞品信息 (6)2.3.3 分析竞品优劣势 (6)2.3.4 挖掘竞品创新点 (6)2.4 确定产品定位 (7)2.4.1 综合分析 (7)2.4.2 确定产品核心价值 (7)2.4.3 确定产品功能方向 (7)2.4.4 制定产品策略 (7)第3章概念 (7)3.1 创意思维方法 (7)3.1.1 头脑风暴法 (7)3.1.2 SCAMPER法 (7)3.1.3 故事板法 (8)3.1.4 635法 (8)3.2 概念筛选与评估 (8)3.2.1 评估标准 (8)3.2.2 筛选方法 (8)3.3 原型制作与测试 (8)3.3.1 制作原型 (8)3.3.2 原型测试 (8)3.3.3 评估与改进 (9)3.3.4 迭代开发 (9)第4章产品规划 (9)4.1 功能规划 (9)4.1.2 功能分类 (9)4.1.3 功能优先级 (9)4.1.4 功能拓展性 (9)4.2 界面设计 (9)4.2.1 布局设计 (9)4.2.2 色彩搭配 (9)4.2.3 字体与图标 (10)4.2.4 动效与交互 (10)4.3 交互设计 (10)4.3.1 交互逻辑 (10)4.3.2 反馈机制 (10)4.3.3 易用性原则 (10)4.3.4 个性化设计 (10)4.4 用户体验设计 (10)4.4.1 用户研究 (10)4.4.2 用户场景 (10)4.4.3 用户测试与反馈 (10)4.4.4 持续优化 (10)第5章设计实施 (10)5.1 设计规范与原则 (10)5.1.1 设计规范 (11)5.1.2 设计原则 (11)5.2 设计工具的应用 (11)5.2.1 原型设计工具 (11)5.2.2 图形设计工具 (11)5.2.3 动画设计工具 (11)5.3 色彩、字体与布局 (11)5.3.1 色彩 (11)5.3.2 字体 (11)5.3.3 布局 (12)5.4 设计评审与迭代 (12)5.4.1 设计评审 (12)5.4.2 设计迭代 (12)第6章原型制作 (12)6.1 原型工具选择 (12)6.1.1 Axure RP (12)6.1.2 Sketch (12)6.1.3 Figma (12)6.1.4 Adobe XD (13)6.2 低保真原型制作 (13)6.2.1 使用线框图 (13)6.2.2 保持简洁 (13)6.2.3 适当标注 (13)6.3.1 色彩与字体 (13)6.3.2 图片与图标 (13)6.3.3 交互效果 (13)6.4 原型交互与动画 (13)6.4.1 简单交互 (14)6.4.2 页面过渡动画 (14)6.4.3 交互动画 (14)第7章用户测试 (14)7.1 测试方法与技巧 (14)7.1.1 用户测试类型 (14)7.1.2 测试技巧 (14)7.2 用户招募与筛选 (14)7.2.1 招募渠道 (15)7.2.2 筛选标准 (15)7.3 测试数据收集与分析 (15)7.3.1 数据收集 (15)7.3.2 数据分析 (15)7.4 产品迭代与优化 (15)7.4.1 问题分类 (15)7.4.2 优化策略 (16)第8章工程技术 (16)8.1 前端技术概述 (16)8.1.1 HTML/CSS/JavaScript基础 (16)8.1.2 前端框架与库 (16)8.1.3 响应式布局与移动端适配 (16)8.1.4 前端功能优化 (16)8.2 后端技术概述 (16)8.2.1 服务器端编程语言 (16)8.2.2 数据库技术 (16)8.2.3 服务器架构与部署 (17)8.2.4 安全性与防护 (17)8.3 移动端与跨平台技术 (17)8.3.1 移动端开发技术 (17)8.3.2 跨平台开发技术 (17)8.3.3 移动端功能优化 (17)8.4 技术选型与评估 (17)8.4.1 需求分析 (17)8.4.2 技术调研 (17)8.4.3 成本与风险分析 (17)8.4.4 技术方案制定 (17)第9章项目管理 (17)9.1 项目计划与进度控制 (17)9.1.1 项目目标设定 (18)9.1.3 工作分解结构 (18)9.1.4 项目进度计划 (18)9.1.5 进度控制技巧 (18)9.2 团队协作与沟通 (18)9.2.1 团队构建与角色分配 (18)9.2.2 团队沟通机制 (18)9.2.3 决策与问题解决 (18)9.2.4 团队激励与评价 (18)9.3 风险识别与应对 (18)9.3.1 风险识别 (18)9.3.2 风险评估与分类 (19)9.3.3 风险应对策略 (19)9.3.4 风险监控与调整 (19)9.4 项目总结与反思 (19)9.4.1 项目成果评估 (19)9.4.2 项目过程总结 (19)9.4.3 团队成员成长 (19)9.4.4 改进措施 (19)第10章产品推广与运营 (19)10.1 产品推广策略 (19)10.1.1 确定目标市场 (19)10.1.2 选择合适的推广渠道 (19)10.1.3 制定推广计划和预算 (19)10.1.4 评估推广效果 (19)10.2 运营数据分析 (20)10.2.1 数据收集 (20)10.2.2 数据处理 (20)10.2.3 数据分析 (20)10.2.4 数据应用 (20)10.3 用户反馈与持续优化 (20)10.3.1 收集用户反馈 (20)10.3.2 处理用户反馈 (20)10.3.3 持续优化产品 (20)10.4 品牌建设与市场拓展 (20)10.4.1 品牌建设 (20)10.4.2 市场拓展 (20)10.4.3 合作与联盟 (21)口语第1章产品设计概述1.1 产品设计的基本概念产品设计是一种创造性活动，旨在通过系统的分析和综合思考，以满足用户需求为核心，结合美学、工程技术、市场趋势等多方面因素，形成具有功能性和审美性的产品。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
原型示例
我不会告诉你我是这样做的
准备篇
素材积累
工作的时候每隔一段时间我会停下手头的活，休息几分钟（番茄工作法）。
一般在这几分钟我会站起来走两步，然后就是看看素材类，图片类网站。
因为逛这类网站不用动脑，所以放松挺不错。
顺便看到不错的图片就保存下来当素材。
列一些我常去的网站：
花瓣网 /
国内知名图片分享网站UI社 /
素材类网站，免费下载psd文件easyicon
可以搜索你想要的各种icondribbble https:///
交互类作品分享平台，国外大神常出没于此reeoo 国外素材类网站，支持免费下载
修图小技巧
积累的图片素材有时候不能直接用，可能背景不透明，可能填充色不对等等。
所以掌握简单的修图技巧还是需要的。
通常用的比较多的就是切图（psd文件切图标用），剪切，调整图片大小，抠图，修改填充色。
由于MAC下PS比较卡，所以我用的修图软件是Affinity Photo(下简称AP)。
网上不太容易找到AP 的使用教程，这里就介绍下AP的切图方法。
其他的琢磨两下就知道了。
psd切图
用AP打开psd文件
创建切片
导出切片
原型设计规范
刚开始学画原型图时，我总是在字体的大小，颜色等等这些细节上很苦恼。
如果太随意，虽然省事，但效果实在不堪；如果扣细节，却又要花很多时间，得不偿失。
后来我发现，不同的产品原型完全可以用一套设计标准，因为不管原型如何，UI最终会针对APP出相应的视觉设计规范。
于是我制定了我的设计标准，管你什么APP，直接套，即便捷又美观。
比如我的文字大小颜色等等是这样设置的。
可以根据自己的需要制定自己的规范。
自定义组件
虽然Axure已经提供了一些方便使用的基本组件，但为了提高效率，我们需要自定义常用的组件。
比如iPhone的navigation栏和tab栏，跟大宝似的天天见。
那我就做成了组件，随时用，随时拖。
我的一些自定义组件
注意，自定义组件本身也是遵守原型设计规范的。
另外，看到图中方案1下面的那几个组件了吗？有什么用呢？待会说，先卖个关子。
Axure使用篇
常用快捷键
想要快速，尽然不用快捷键？别逗了。
分享下乌金老师整理的Axure RP7.0快捷键中英文PC
和MAC对照版/s/sRCuwKXDvAjWC
辅助线
Axure有全局辅助线和局部辅助线。
全局辅助线在所有页面都有效，局部辅助线只在当前页面有效。
在开始制作原型图前，我会先布局好主要的辅助线。
比如我做的原型界面是375×668（iphone6屏幕像素的一半）的大小，控件距屏幕边缘20px宽，为方便布局，我会先设置几条全局线。
创建全局辅助线
移动左边两条辅助线
移动后
选中所有辅助线，设置锁定
这样基础的辅助线就设置好了，再在具体使用中灵活运用局部辅助线，我们就可以愉快的布局玩耍啦。
利用辅助线快速布局
对齐分布和等间距分布想要多个控件的位置摆放合理美观，我们常常用到对齐分布或等间距分布。
对齐分布有三种方法：
一，利用Axure的提示对齐线移动控件的过程中，提示对齐线会自动出现（原谅我截不了图），按提示操作即可，很傻瓜式。
二，利用辅助线关于辅助线，前面已经说到，不罗嗦了。
三，利用对齐动作比如我想让控件2对于控件1进行左对齐，先选中控件1，再选中控件2(注意
顺序)，然后去点右上角红圈处的对齐按钮，选中左对齐即可。
可以记住对齐快捷键，那操作就很快啦。
对于2两个以上的需要等间距分布的控件，我们可以利用等间距操作。
比如tabbar，通常有4、5个
按钮。
我们在设置好一个按钮后，直接复制粘贴，如图
把最两边的按钮位置放好，选中全部按钮
顶部对齐
进行水平等间距
完成
取色
这里正是我前面卖的关子。
我们制定好了规范，每个界面的背景色都是#F7F7F7，现在我要修改一个蓝色背景的矩形组件，怎么该颜色呢？输入色值？当然可以，但慢啊。
用取色笔？屏幕里没有我要的颜色啊？瞧我的。
我根据规范的颜色，分别自定义了矩形组件。
这样会在Axure的组件栏里显示出来。
这些组件不是用来拖的，而是方便我取色的
接下来用取色笔就可以方便的取色啦，是不是很机智。