原型设计的职责

我们首先明确两个定义：

原型的定义：

用线条、图形描绘出的产品框架，也称线框图。

交互设计的结果输出，可能是一张纸上的几张图；原型代表着交互设计的结果，当最终实现的时候，交互流程会和原型保持一致；可以理解为草稿或者叫做参照物

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

原型设计的定义：

线框图描绘的是页面功能结构，它不是设计稿，也不代表最终布局，线框图所展示的布局，最主要的作用是描述功能与内容的逻辑关系。

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

其次，了解原型设计的作用，主要有两点：

沟通： 因为是原型是需求和功能的具象化表达，所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路。虽然需求文档也是可以满足沟通需求的，通过用例将交互写到设计描述文档中，但是原型可以更详细地解释交互。

测试：因为原型相较于UI稿来说修改更方便，所以原型能提高产品经理的功能设计没通过评审时返工的工作效率。没有哪一家互联网公司可以不经过测试，就直接上产品和服务。原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。

（原型设计在产品设计中所处的位置）

设计流程：首先明确产出原型目的以及用户群体，这个原型有多大效率帮助我传达设计或测试设计？ 有多少时间做原型？其次需要什么级别的保真程度？

该如何使用原型设计，那么原型设计工具就是必不可缺的。

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

1. 熟悉程度和获得工具的便利度；

2. 所需的时间和精力；

3. 可复用的代码/框架；

4. 为测试创建可用的原型；

5. 价格和学习曲线。

目前比较好用的在线原型设计工具有Marvel，Invision，墨刀等等。

希望对你帮助~

有任何疑问可以追问，满意请采纳，谢谢~

而交互设计师则会分不同的阶段输出不同的原型。比如在产品概念阶段，在白板上画线框图；创意阶段，在纸上画图进行构思；后期使用软件（比如Axure）绘制线框图，并配上各种注释和说明；有时候为了进行测试，也可能做一个能模拟实际使用情况的高保真原型。

所以对于产品经理来说，原型仅仅是辅助他说明意图的工具，产品经理并不靠原型混饭吃，他就算不会使用Axure之类的工具也没关系。而原型对于交互设计师，则是安身立命的工具（当然并不是唯一的工具）。在我看来，交互设计师的一个功能就是将产品需求翻译成设计需求，并通过视觉化的方式让参与项目的人员容易理解，而原型就是很好的一个工具。另外原型也是设计师整理思路，扩展思维，记录设计成果的工具。所以一个好的交互设计师必然能很好地利用原型这个工具，在不同的设计阶段灵活运用。

作为设计师我们又该怎么做呢？当然是从设计者的角色转变成研究者的角色。销售是负责推广产品某个优势功能或者补充特定功能，开发人员更多的关注解决技术问题，所以作为设计师是直接负责创造的人员，需要我们对产品负责，做整体的概念设计的时候，提供真正意义上的产品定义，考虑用户目标、需求、动机的，系统的把研究方案转化成设计方案。因此，需要设计师去分析产品原型架构，并对对用户的任务目标进行分解，让设计的界面能对用户的行为产生影响，最终达成我们的业务目标。

有什么好方法能让我们更加深入了解原型呢，今天来用五个用户体验要素方面的内容来分析产品原型，尽可能把实际操作案例分享给大家。

用户体验在产品原型上如何表现的呢？一个清晰的产品是有条不紊的体验，本质是由一系列决策组成的，这些决策彼此依赖，理解这些决策和行为如何来的，就明白了原型的几本内容，其要素包括以下五个方面，简单讲解：

【想得到什么】 产品设计者本身想从网站和用户得到什么，我们对产品的期望，可能是商业目标或者其他。

1、产品目标：想从这个产品 得到什么 ，比如想要更快的马，不是马的问题，而是快的问题，所以发明了汽车、飞机等。

2、用户需求： 什么样的方式 来满足他们所达到这个目标和其他目标

【功能要不要】 某个功能是否应该成为产品功能之一，就属于范围层要解决的问题

1、功能型产品：创建功能的规格，即对产品的 功能组合 的详细描述。比如抖音中的拍摄流程、用户中心、关注列表等等，它决定了用户都可以在我们的产品上做什么，它的决策需要充分思考用户的不同场景诉求；我们可以依据目标用户在不同场景下的行为路径判断出他们的刚需。

2、信息型产品：以内容为需求，对各种元素要求的详细描述。指的是用户编辑内容UGC和专业编辑内容PGC的对外展示,比如喜马拉雅中用户上传的音频就是用户编辑内容UGC，而运营/产品我上传的音频就是专业编辑内容PGC。

【功能信息分类】 确定网站各种特性和功能适合的组织方式，比如结构层确定哪些要素应该出现在导航条上，以及哪些要素要去到哪里。

1、交互设计：定义系统如何影响用户请求，安排好用户与系统的功能产生互动的界面元素。比如减少手势操作，点对点直线使用功能，沉浸式加速动画。

2、信息架构：屏幕上的一些元素组合，允许用户在信息架构中穿行。比如梳理复杂的产品功能，确保用户体验的逻辑，落地到实处的话可以理解为功能节点的关联流程图。

使用到：交互设计、用户心理

交互设计原则：高效、易学、反馈、容错、吸引力（互动参与）

用户心理：减少选择、使用旧习惯、可视化、成就感

【促进信息理解】 合理安排元素内容促进人类理解信息，让用户优先看到他们需要的内容和我们想让他看见的内容。比如定位导航条的位置，以及导航条上各要素的排列方式。

1、核心优化布局：以达到按钮、留白、文本元素的最大效果和效率，用户在使用的时候能记得标识并找到相应按钮。

2、信息设计：确定了页面上交互元素的位置

【组件】 表现形式由一系列图片、文字、通用组件、导航、数据表单、列表、详情等组成

感知设计：色彩、板式、细节决定。因为表现层是我们设计用的最多的，这方面也深入讲解app里面的视觉部分。

色彩 ——从色彩上营造产品品牌风格、从色彩上明确视觉层级、色彩使用6:3:1的调色规则、多色彩使用但不超过4种，色彩冷暖的调和、

板式 ——第一原理是考虑用户停留在此页面的时间长短【高效有趣】。

板式应用如下：

统一和变化：统一是主导，变化是从属，相同元素的风格是统一的基础原则，比如统一使用圆角。统一强调了画面的整体感，变化打破了死板。就想修公路是弯曲的，而一直笔直的公路会产生疲劳。（本质是多巴胺的兴奋阀值——停留时间加长）

对比和调和：对比是强调差异，调和是找到共同点，提升界面的舒适感，尝尝使用整体调和局部对比的手法，比如比例一致，界面设计中间距的使用属于对比调和，常用在一倍图使用8，16，20，24等。（本质是信息接收效率——过滤无用信息）

对称和平衡：视觉和心理上的静止和稳定感，使用的时候主要是给予元素合理的位置，就像天秤，是放左边还是右边，达到视觉中心的平衡。（本质是平衡的稳定感——具有安全感）

细节 ——丰富页面视觉

图标使规律，线性和图形视觉轻重，质感的丰富程度。

以上就是全部的用户体验要素定义，帮助我们更好的理解产品原型，让我们设计的界面最大化的满足用户目标，帮助用户更方便地完成一系列行为。最后，做设计也会遇到不给原型的产品呢，怎么办呢，就算是产品口述，我相信经过分析后，你的界面最后的设计一样是最适合的！！！

我作为10多年互联网行业的老鸟，从三个问题的回答来一次性解决你所有问题。

一、产品经理应不应该画原型？

直白地说，产品经理是不应该画原型的，或者说不应该只画原型。

原型仅仅是工具，它是用来阐述界面操作流程的。原则上，产品经理是不会直接控制这个环节的。

那么产品经理应该做什么呢？对于产品经理来说，需要更多侧重分析用户需求、规划功能上。张小龙说过：“产品经理是站在上帝身边的人。”他把产品经理比喻成看透芸芸众生及人性的上帝视角玩家，那么上帝身边的人就要根据用户的需求，为这个产品设定游戏运转规则，整体上推动产品运转，不客气地讲，脏活累活是甩给交互去做的。

产品经理确实也需要画图，但应该画的是“故事板”，向大家讲清楚，我们这个功能，在用户的真实生活中是帮他们解决什么困难的，舍本逐末，不可取。

当然，这是把产品和交互分成两个角色来说的。一个思考需求，一个思考实现。只要足够牛逼，包圆儿了也没问题，只是不要再招一个交互了，会害了人家。

二、产品经理应不应该懂交互设计？（你应该也很想知道）

答案是肯定的！您可能会觉得矛盾，上文说产品经理不应该画原型，那为什么非得还要懂交互设计？这不矛盾。

产品经理对待产品要像孩子一样呵护，如果完全禁止产品经理不画交互设计稿，就好像不让扎克伯克写代码一样的感觉；反过来看，有几个产品经理可以把代码（或交互稿）的工作做得像扎克伯格一样优秀呢？

究其原因，国内产品经理现在画交互设计稿的现象，是行业起步落后和交互设计人才缺乏最主要的原因。产品经理应该不应该画交互设计稿，很大程度上取决于企业文化和组织架构。

我认为正确的做法应该是，产品经理对待交互稿，应该是快，草；快速梗概的把信息传递给交设计师，交互设计师根据大致概念信息形成细化的方案，这个是两者最大的区别。如果说配合，这样的配合是最高效的，这里。

三、产品经理和交互设计是应该怎么分工？（之前的方法论，这条是落地执行干货）

产品经理主要负责用户需求整理，规划，功能筛减，商业模式、运营模式探索，版本迭代时间规划，敏捷开发功能点描述等；

如果是WEB端的产品，交互相关的东西会涉及的比较少，由于产品经理洞悉各个功能点，倘若对原型设计较为精通，那么由PM亲自操刀出来的原型，既有利于开发人员了解功能点，又能减少与交互设计师沟通的时间，如此可以大大提升工作效率。

如果是移动端的产品，交互相关的东西会涉及的比较多，由于产品经理需要规划每个功能点，倘若操刀交互细节，将会非常费力，这个时候可以考虑将交互的细节分给交互设计师来做，自己全心全意规划功能，此为上策。虽然花费了一些沟通成本，但优化后的交互细节，在用户体验上会达到一个更加专业的程度。

综上所述，产品经理的demo和交互设计是的demo，最大的区别在于对交互细节的描述上，亦需根据产品的交互复杂度来定。

题外话：作为产品经理，需要不断提升自己的能力，熟悉使用各类工具和在线设计平台，比如国外的软件Sketch、Axure、justinmind，以及国内的摹客在线产品设计协作平台。不管是交互还是技术甚至是UI审美方面，都要保持进步，这样才能应对更多的复杂急性事件。

想要制作一个优秀的手办，必须深度了解人体构造学知识，同时还需要高超的雕刻本领，制作一个手办平均得花上几个月的时间，这和我们印象中的泥土做的人偶以及普通的玩具有着很大的不同，普通的人偶随便粘，样子差不多就得了因此卖的便宜，但是一个好一点的人偶价格还是很高。

1、定义不同，前端开发，顾名思义就是对网站进行视觉上的设计，网页UI的设计等。原型设计则是指根据交互设计师、用户体验设计师的设计思路，完成的功能实现的流程图与界面的框架图，为前端开发工程师的响应开发提供参考。

2、详细程度不同，前段开发是具体的工程，原型设计是一个大概的概念。

了解不同的设计师角色、他们的工作以及他们如何与彼此和项目互动，可以让您了解您可能想要担任的角色类型。它还让您对可能需要与哪些类型的设计师一起工作或为项目聘请的设计师提供了坚实的想法。

用户拥护者的角色落在了 UX 设计师 身上。他们的主要目标是在用户和界面之间建立积极的关系。他们还旨在使产品高效、令人愉悦且可供所有人使用，同时满足用户和他们工作的公司的需求。

用户体验设计师的具体职责因公司或项目而异。然而，常见的包括用户研究和测试、数据分析、线框图和原型设计以及项目管理。

UI 设计师 也会牢记用户体验，但他们的主要任务是设计具有视觉吸引力的体验。他们在应用设计原则方面知识渊博，并且擅长构图、色彩理论和排版。他们利用这些知识和掌握来创造美观的设计。 

简而言之，UX设计师专注于功能，而UI设计师专注于形式。

视觉设计师 ——有时被称为平面设计师——使用字体、颜色、摄影和其他设计元素为从网站到印刷广告的所有内容创建引人注目的设计。 

视觉设计师掌握设计原则并紧跟行业趋势至关重要。他们创建的设计旨在吸引注意力、传递信息（信息和营销）并推广产品。视觉设计师经常与 UI 设计师一起设计产品中的特定元素。

产品设计师 可能是最不为人知的设计角色。他们通常负责高层次的设计思维，因此解决问题是一项必备技能。虽然他们的大部分工作都是在概念层面上进行的，但他们有时确实会参与到设计过程的视觉方面。

产品设计师通常在 UX 项目中担任项目经理。在他们的职责范围内，他们可以对产品进行深刻的改变，以确保一流的用户体验。

信息架构师 指导内容在产品或网站中的结构和排列方式。与其他设计角色一样，他们始终牢记受众，旨在创造一种直观的体验，其中信息的结构对用户来说是合乎逻辑的。

信息架构师的具体职责包括组织和分类内容、创建一致的导航、绘制用户流和标记内容组。他们通常在实际设计过程开始之前创建产品的内容基础或骨架。

如果设计将包括动画或其他移动的视觉元素，那么 动效设计师 就是最佳选择。他们使用动画工具来增强设计，使用许多与视觉设计师相同的技能。动效设计师可以设计从全屏动画启动页面到界面内的动画微交互的所有内容。

交互设计师 专注于用户心理，并使用用户测试数据等东西来创建流畅、愉快的用户产品交互。他们的工作涉及 UX 和 UI 设计、行为数据分析和高级原型设计的元素。他们需要扎实的用户体验最佳实践基础才能开始，并且还应该精通创建高保真模型和交互式原型。

虽然 UX 设计师有时会进行自己的用户研究，但在较大的项目中，可能会雇用单独的 UX 研究员。 他们的工作涉及与创造出色用户体验相关的所有实地工作：与客户交谈、计划和组织用户测试和调查、主持用户访谈，以及分析和阐明用户数据。 

UX 研究人员需要出色的沟通和人际交往能力来与用户和客户建立关系。他们需要具备高情商和用户心理学知识，才能了解他们的想法和感受。他们还将与设计和开发团队的其他元素以及营销团队合作，将用户体验放在首位。

UX 工程师 类似于 UX 设计师，具有额外的编码能力。他们进行用户研究和可用性测试，拥有强大的视觉设计技能，并且经常充当开发团队和设计团队之间的桥梁。 

UX 工程师的一个关键角色是，他们可以在将设计团队制作的模型发送给开发人员之前帮助评估实施模型的可行性，从而减少挫败感和延迟。

顾名思义， 插图画家 创作插图。一些插画师可能主要在传统媒体中工作，其他人主要在数字世界中工作，有些人可能同时在两者中工作。您会发现一些插画师专注于特定类型的插图或主题（就像设计团队的任何其他成员一样），而其他人则喜欢从事各种插图项目。 

最好的插画师可以讲故事、吸引用户注意力、激发情感并创造参与度。他们可能会在日常工作中处理从图标到信息图表的所有内容。

UI设计中小的内容是可以根据设计师的看法修改的，比如界面的美观度。但是原型图中关于交互的设计要是有修改的话，还是和交互设计师商量比较好，毕竟会影响到用户体验。

UI设计师(或称界面设计师)是指对软件的人机交互、操作逻辑、界面美观的整体设计的人。