产品经理原型设计知识手册

一、偏好配置，把能配置的都配置上用快捷键 Mac 使用「Cmd + ，」，Win 使用「F9」，调出「偏好配置」弹窗。1、启用自动备份可以在调出的「偏好配置」弹窗中选择「备份」；也可以点击「文件 」，选择「自动备份设置」。勾选启用备份，备份间隔 5 分钟。如果系统崩溃后，再次进入时，系统一般会提示恢复最近备份的文件。也可以通过「文件→从“备份中恢复”」找回最新的版本。2、画布配置把「单快捷键、画布负空间」都勾上，如果喜欢暗黑风格，也可以选择「黑暗模式」。3、网格配置把「网格对齐」勾上，间距设置成 10 即可。元件将会按照网格进行吸附，可以快速对齐。如果想在「画布」中展示出网格，可以使用快捷键「Ctrl+'」或者在画布的空白区域，鼠标右键，勾上「显示网格」，将会把网格显示出来。不过展示出网格并不好看，可以不展示网格，只要能自动网格对齐就行了。4、辅助线配置使用辅助线快速对齐，将「辅助线对齐」勾上。在画布空白区域「鼠标右键」，设置标尺。然后把「显示标尺」「显示全局辅助线」、「显示页面辅助线」都勾上，就可以从画布左边、上边，拖出辅助线，帮助我们快速对齐。5、元件对齐配置把「元件对齐」「边缘对齐」勾上，垂直和水平设置成 10 即可。这样在拖拽元件时将会展示出对齐辅助线与元件之间的间距数字，帮助元件快速对齐。按住 Alt 键（Wins）/Option 键（Mac），鼠标放在元件上时可展示出元件之间的距离。二、复制粘贴很厉害使用 Ctrl+C、Ctrl+V，快速复制内容。6、复制粘贴图片可以将图片直接复制粘贴进 Axure；Axure 中的组件可以选中后，可以复制粘贴成图片到微信去发送。7、复制粘贴样式选择元件后，Ctrl+C，然后选中要粘贴样式的元件，快捷键 Alt+Ctrl+V（Mac 则是 Option +Cmd+V），即可复制样式。也可以通过「右键—粘贴选项—粘贴样式」。8、复制粘贴表格在 Excel 中写的内容 Ctrl+ C 后，进入到 Axure 中，「鼠标右键 - 粘贴选项 — 粘贴为表格」，即可按照表格进行粘贴。当我们在画后台表格页面时，想快速填充内容时，可以采用这种方式。Axure 表格不支持合并单元格。9、快速复制元件除了 Ctrl+C、Ctrl+V 复制粘贴元件，还可以选中元件后，按住 Ctrl + 鼠标拖动（Mac 按住 Option 拖拽），即可拖出一个相同的组件。还有「Ctrl+D」，直接复制出来。10、快速复制页面在 Axure 的页面里，选择要复制的页面后，可以使用 Ctrl+C、Ctrl+V 复制粘贴出页面，也直接「Ctrl + D」，即可快速复制出一个相同的页面。如果想复制整个文件夹下的全部页面，选中文件夹后，「鼠标右键-重复-分支」，可复制出文件夹下的全部页面。11、复制粘贴交互事件选中交互事件后，Ctrl+C、Ctrl+V，即可实现复制。三、快捷键——专家用户的首选12、单快捷键单快捷键是Axure 9 的特色，在「偏好配置 - 画布」里，勾上「启用单快捷键」，即可实现单快捷键的使用。常用的有：按一下「O」， 快速画圆形。按一下「T 」，快速拉出文本。按一下「L」， 快速拉出线段。按下「O」后，直接使用鼠标左键，即可拖出圆形；在按一下「O」，即可取消；对于「T」「L」都是一样的操作。按一下「E」，元件中将会出现连接点，可以直接用鼠标画连接线，再按下「E」，即可取消。按一下「>」 ，可快速调出浏览器预览原型。13、必会的快捷键Axure 中的快捷键和其他工具，如 word、PPT 等，都有很多通用的，像 Ctrl+C、Ctrl+V、Ctrl+X 等等。而且快捷键很多，我们不需要记住那么多，因为一些快捷键还不如用鼠标点击的快。以下是以下常用的，能提高效率的快捷键：Ctrl+S ，保存Ctrl+A，全选Ctrl+Z，撤销Ctrl+Y，重做（比如撤销多了，在使用 Ctrl+Y 恢复过来）Ctrl + G，合并成组，选中多个元件后，可以合并成组Shift + Ctrl + G，取消成组按空格键，鼠标左键拖动画布Ctrl + -，缩小画布Ctrl + +，放大画布按住 Ctrl，移动方向键，可以一次移动 10px；如果开启网格对齐，则会先对齐最近的网格，然后才开始 10px 移动。Ctrl + B，加粗字体，但并不支持全部字体。Ctrl + T，修改字体Ctrl + Alt + -，缩小字号，MAC 对应 Cmd+option+-Ctrl + Alt + +，放大字号，MAC 对应 Cmd+option++Ctrl + Shift + X，添加交互快速新建页面文件夹与页面：除了点击右上方的新建页面、新建文件夹，还有对应的快捷键：Shift + Ctrl+Enter 可以快速新建文件夹Ctrl + Enter 可以快速新建页面当想把新建的页面放到新建的文件夹时，只要按一下「Tab」键，将会自动移入文件夹层级下，相当方便。按「Shift + Enter」则可以移出层级。以上 Ctrl 对应 Mac 的 Command 键。三、能提效的功能14、自适应文本大小在使用文字时，可能会出现元件尺寸大，想按照文字进行调整的情况，这个时候选中元件，在样式里，有 2 个小按钮，点击即可自适应文本高度、宽度。15、同比例放大/缩小尺寸有 2 种方式：鼠标放在元件边缘的编辑点上，按住 Shift+鼠标左键拖，可以锁定长宽比来放大缩小元件。手动调节尺寸，将锁勾上，即可锁定长宽比。16、多种类型的文本框拖拽「文本框」元件后，在「交互」面板里可选择 11 种文本框类型，不同的类型可以达到不同的效果。如：密码格式：输入的内容会被隐藏数字格式：只能输入数字文件格式：可以选择文件日期格式：可以直接选择日期……样式将会使用浏览器的对应样式。17、文本框里的预置文字在表单填写时，经常会在输入框中填写提示内容。Axure 的文本框可以直接在右侧“提示文字”框输入文字，预置文字将会显示出来，在输入内容时将会隐藏。（可以在「隐藏提示」中设置是输入内容就隐藏，还是有了光标就隐藏）。同时可以填写文本框内可以输入的最大长度。18、替换、查找文字Axure 也支持替换、查找文字，直接 Ctrl+F，输入文字进行查找；当元件内容过多时，可使用「查找」，快速定位到具体元件。替换的操作和其他工具一样，MAC 快捷键是「 Cmd+R」，Windows 是「Ctrl+H」，直接替换即可。19、不常移动的元件进行锁定锁定不常移动的元件，比如背景页。锁定的元件位置会固定住，这样就可以避免选中后误移。可以使用「Ctrl+K」快捷键进行锁定，「Shift+Ctrl+K 」解除锁定。20、裁剪/切割图片画原型时有时候会使用到截图，需要对截图进行处理。可以选中图片后，对图片进行裁剪、切割。通过「右键-裁剪/切割图片」；也可以通过单快捷键「S」快速分割；「C」快速裁剪。21、旋转元件按住 Ctrl，将鼠标放在元件的边缘，鼠标变成旋转样式，即可旋转。也可以在「样式」中调整旋转角度。这个不常用。22、引用页面引用页面，元件引用页面后元件文案将会线上成页面的名称，点击元件可快速跳转到引用的页面。这个在画原型时的具体应用场景我没有找到。23、拖动页面名称鼠标选择页面名称，直接拖入画布里，会出现页面名称的按钮框。可以用来做流程图，点击页面名称框，会直接跳转到对应页面。24、页面快照拖动页面快照到画布里，双击弹出要引用页面选择框，选择引用的页面后，会出现页面预览。点击可进入对应页面。可用于页面概览图制作。25、导出原型为图片除了能通过复制粘贴的方式复制图片，也可以直接将整个页面导出成图片，「点击文件 - 导出为图片」，即可导出 PNG 格式的图片。26、页面布局可以调整在页面中的每个模块都是可以通过拖拽进行调整的，你可以自定义你习惯的布局。可以通过「视图 - 重置视图」，恢复成默认布局。27、自定义工具栏在「视图 - 工具栏」中，你可以设置工具栏的功能内容，按照你使用的习惯来，把经常用的都放出来。28、碍眼的遮罩在 Axure 中当转换成母版、动态面板时，都会有一层颜色遮罩，在预览原型时不会展示出来颜色，但是在画原型时会有。如果你觉得遮罩干扰你画原型，可以通过「视图 - 遮罩-勾选/取消勾选对应内容」，在画原型则不会再有遮罩颜色。取消遮罩后，效果如下（隐藏的遮罩还是保留，不然找不到了）：29、不同的连接线在使用连接线时，Axure 中有 4 种连接线样式可以使用，选中连接线后，在「样式」面板里，可以选择直线、折线等样式。30、快速调整表格行高行宽当使用表格元件时，选中需要修改的表格，然后直接修改宽度与高度，即可批量修改选中表格的尺寸。如果想修改个别表格，按照 Ctrl 键，再选中即可。接着修改宽度与高度，就可直接修改选中表格的尺寸。31、画泳道图Axure 中自带了流程图元件，但是没有提供泳道图的样式。可以使用「表格」元件，调整一下表格数量、尺寸即可。32、快速重命名多个页面当需要对多个页面重命名时，比如批量对页面名称添加编号，可以先选中一个页面重命名，然后在重命名状态下，使用键盘上下键，进到下个页面时还是重命名状态，就可以直接重命名了。33、合并多个 Axure 文件当需要将多个 Axure 文件合并到一个文件中时，点击「文件→从 RP 文件导入→选择文件→导入」选择文件后，选择需要导入的页面与内容，按照页面操作一直进行即可。34、重复的元件可以转化成母版对于多个重复的元件，每次修改一个地方，其它也挨个修改，很麻烦，这个时候我们可以使用“母版”。选中元件后，「右键 - 选择转换成母版」，转换成母版后，修改母版内容，则整个 Axure 中使用到母版的都会一起调整。双击母版元件，就会进入到母版编辑窗口，修改后的元件会同步到所有母版元件。使用到母版元件时，直接在母版区拖进画布使用。使用母版元件时，元件里所有的样式和交互都是一样的。实际工作中，肯定存在不同交互，这时可以“点击鼠标右键——脱离母版”，然后对这个元件单独操作。35、母版可以调整赋值对于母版中放在不同页面里，可以需要单独调整某些字段；比如我们把「左侧导航+顶部菜单+面包屑 」整体转成母版，需要修改页面的面包屑时，我们可以选中母版，在「样式」，找到「重写」，选取对应的字段填写新的文字即可修改。36、元件过多时选中的方法1）多个元件重叠时，想选中下层元件，选中上层元件，然后等 1 秒左右，在点击一次，就会选中下一层元件2）在概要中通过搜索找到，元件过多的时候可以通过搜索，这是命名的重要性就出现了。3） 使用“查找”功能：Ctrl+F，通过搜索元件里的文字来找到四、一些动态效果37、鼠标悬浮显示提示内容添加元件提示后，鼠标悬浮时将会展示出提示内容，可以用使用元件提示来达到鼠标悬浮显示全部内容的效果。选中元件后，可以「右键-工具提示」填写内容；也可以在「交互」面板里填写。38、选项组命名——实现单选效果将多个可选中的元件设置成相同的选项组后，每次只能选中一个元件，其它元件自动取消选中。39、快速返回上一页如果你在画原型时，涉及到页面间的跳转，想直接返回上一页。进入「交互」面板，点击“打开链接”，选择下方的“返回上一页”就可以了。40、滚动查看将元件转换成动态面板，然后选中动态面板，「鼠标右键→滚动条→选择滚动方式」即可。也可以在样式面板中，直接选中滚动方式即可。41、位置固定到浏览器比如：将弹窗在屏幕中间显示、导航固定在顶部。都可以通过固定到浏览器实现。首先将固定的内容转换成动态面板，然后在「样式」中选择固定到浏览器，选择对应的位置即可。42、使用动态面板达到合并成组的效果在进行分组时，除了可以使用 Ctrl+G，也可以将元件转化成动态面板，同样可以达到合并成组的效果。43、实现灰底突出弹窗有 2 种方式：加个灰底样式元件，与弹窗一起显示。多个元件会影响效率，不推荐。使用“灯箱效果”具体操作：在设置显示时，更多选项选择“灯箱效果”，背景色选择黑色，不透明度设置成 50%。在设置显示时，推荐勾选“置于顶层”。注：当使用灯箱效果时，点击灰底区域，弹窗将会自动消失。44、实现非模态的效果比如弹出气泡弹窗后，想实现点击弹窗外的区域关闭弹窗的效果。可以使用「显示/隐藏」，选择「灯箱效果」，背景颜色选择透明。45、显示时勾上置于顶层在做显示/隐藏动效时，当需要显示时，可以将「置于顶层」勾上，这样可以避免要显示的内容被遮挡。五、还能这样导出与查看原型46、导出原型为 word你可以试下「Ctrl+Shift+D」，或者是点击「发布-生成 word 说明书」。将会把 Axure 原型导出为一个 word 文档，文档里包含内容，排版样式等内容都可以配置；常规的包含原型图片、功能说明等内容。原型图片会按照每个画布生成图片，功能说明则是在「说明」面板里填写的内容。这个导出 word 我极少用，主要的使用场景是在将需求描述写到「说明」里，然后可以直接生成 Word 格式的需求文档。47、快速导出 Excel使用 「Ctrl+Shift+M」，或者是「发布 - 更多生成器和配置文件」，选择 CSV，点击生成选择保存文件地址后，创建 CSV 报告，即可将页面和页面中的说明导出成 Excel。这个导出 Excel，对于我来说最大的用处是导出页面名称，然后使用页面名称去划分功能点，最终用于研发评估功能的工时。48、查看原型看带交互的元件浏览器查看原型时，或者是别人看我们带有交互动效的原型时，可以告诉对方，勾上显示热点，让对方知道哪里可以触发动效。49、查看原型时调整宽度浏览器查看原型时，原型的宽度是默认的，如果你想看整个页面的原型，可选择不同的原型尺寸。50、查看原型时快速切换页面浏览器查看原型时，可以使用<，>这两个快捷键，在多个页面之间来回移动。

主要作用：看图说需求-高效的沟通工具，一张图胜过千言万语在对外宣讲、需求评审时，直接拿原型图进行讲解，无需长篇大论地进行解释，直接展示原型图。让听众可以一目了然地看清楚产品的设计方案，从而能够更快速地理解产品的需求内容与设计意图。可以节省大量的时间，提高沟通效率，让项目成员更深入地理解产品设计的目的与最终落地方案，大家目标对齐，一起推动项目向前。那产品经理可以不画原型图吗？当然可以，原型图并不是必须的，它就是让看原型的人知道要做个什么东西？如果你能和团队成员配合的很好，你一说他就能知道要做什么，为了省事当然可以不画原型图。另外原型图是为了展示出功能的样例，如果你要做的需求不是功能需求，压根就没有页面，当然也根本没有必要去画原型了。

在我们说原型要画成高保真时，一定会有同学疑问，那交互设计师干啥？如果你有这个疑问，说明你了解交互设计师这个职位。交互设计师：负责设计用户界面，通过梳理产品功能、信息架构、操作流程，输出界面交互原型，保证产品易用性。你会发现交互设计师的工作职责中和产品经理会有重叠的部分。交互设计师作为产品经理的下游，通过产品经理给出的需求文档进行交互设计，输出交互稿。比如产品经理的原型中描述为「点击展示弹窗」。在交互稿中可能会是「点击右侧展示出抽屉弹窗，抽屉从左到右滑动出现，出现用时300ms，出现效果缓动缓出」。产品经理输出的原型，只要能保证功能的能用，为功能满足需求负责。交互设计师关注的功能的易用，不仅要满足功能，还要让功能更好用，为用户体验负责。交互设计师会评估用户画像、业务场景、展示字段多少、功能的关联性等，确定最适合的交互方案，对产品的交互描述的很详尽。俩者在职责上有重合，在输出产物上有重合。但是，不是每家公司都有交互设计师对于后台产品，很少有交互设计师介入，一般都是产品经理自己搞。当没有交互设计师这个岗位时，产品经理就需要承担他的工作职责，不仅要产品能用，还要让产品好用。这也是为什么产品经理要懂交互设计的理由之一。用户体验也是产品经理的必须关注的一点。不过就算有了交互设计师，资源有限的情况下，那就看需求优先级，要排期的。就算有交互设计师输出交互稿，产品经理也需要确定交互稿的设计方案。因为产品经理是最懂自己业务的，下游人员在产品经理输出的基础上进行再加工。所以产品经理也还是需要知道交互设计，这样在确定交互稿时，也能通过自己的专业角度进行分析。而不是交互稿过来，自己就看着好就行了，你需要替用户把关，站在用户的角度、用户的使用场景，和交互设计师一起确定最优的方案。我们可以看下什么是交互设计交互设计，就是行为的设计它的覆盖面很多，只要是涉及到人与系统互动层面的设计，都是交互设计。它不仅在软件层面，在硬件设计、工业设计等领域都会覆盖。就像你用电视遥控器，为什么关闭点击的按钮一般在右上角/左上角，为什么上下按钮是调频道，左右按钮是调音量，就像现在使用手势与电视互动，伸开手掌然后握拳，电视机关闭……还有语音对话这种交互，“小爱同学”“Siri”这种……人与系统之间的互动，就是交互而对这种行为的设计，就是交互设计。对于我们的移动端与PC端的软件设计，点击、双击、鼠标移入、鼠标悬浮等等方式，也都是交互。在Axure中添加交互动效时触发事件、触发后的动作，两者加一块，就是一个交互事件。比交互设计更大的是用户体验设计 ，交互设计包含在用户体验设计内。用户体验：用户使用产品的主观感受。说简单点，就是打开页面时不懵逼，操作过程中不懵逼，操作完成后感觉还不错。我们在这不做深入探究，我们会在后边章节中详细说明。说到交互设计，你可以去看《交互设计精髓》这本书。书很厚，不仅能当枕边书，当枕头都够。不过，我的个人经验是：如果你是纯小白，没有任何产品经验的，先不要去看了，你的收获不会大，因为你没有办法代入到具体场景中；如果你实际走过了一个产品上线的流程，我推荐你去看，你的收获会很大。对于产品经理V交互设计师，我们先说到这，在之后说原型的时候，我会详细说明产品经理需要了解的交互设计。

「原型」很常见，在很多行业中，成品出现前，都会先出「模型」，如原型机、原型车等。同样的对于互联网产品经理，在进行软件功能设计时，也需要绘制出原型图。1、原型图是产品功能的样例界面，是产品功能的初步表现。将原型页面中的元素，分别排列布局到页面中，让大家知道要做的东西是个什么样子。产品经理根据需求内容先绘制出原型图，设计出整体功能的页面布局、展示出功能页面中的内容元素、页面流程。让每个项目成员知道我们要落地的功能是个什么东西。2、原型图是接下来项目的指导方向产品经理将原型图设计过程中，还需要同步完成产品需求文档（PRD）的输出。在接下来的工作中：研发会按照PRD进行研发方案设计，根据PRD进行进行数据库结构设计、接口设计等工作。交互设计师根据PRD进行交互设计，输出交互设计稿。UI设计师根据交互设计稿+PRD，进行UI页面设计，输出UI设计稿。在说原型图的时候，我们不可避免的提到PRD。我们可以先这样理解：原型图只是PRD中的一部分内容。具体的说明我们在之后会说。

大家好，我是大鹿最近很高频的遇到一些事，让我有了写一套关于画原型的文章的想法。01、和好多转行做产品经理的同学沟通聊面试的事主要是做产品实习生、和转行做产品助理这些初级产品。很多人说产品经理要对产品的思考，要理解用户，明白用户想要什么，要有商业思维，搭建商业体系，能让业务增长。说的很对，一点毛病没有然后我说看看你的需求文档和原型，第一眼，丑的不行，然后继续细看页面流程不通描述各种场景遗漏很多逻辑缺失……甚至有些同学，简历还掺水，说3年工作经验，通过原型一看就知道没做过产品。这些同学们的东西我不方便放在文章里，但是让我触动有些大。如果你去找实习生，产品助理，初级产品经理这些职位，你的日常工作内容一定就有画原型，写文档这些基础工作。什么产品规划、行业动态、商业体系等等，自己有空想想，实际工作上交给你的领导和老板去搞就行了。另外站在面试官对这个职位的定位，实习生、产品助理、初级产品经理需要的就是能帮忙干活，画原型写文档基本工作完成的可以，能再往上做一些中级产品经理的活那就更好了。但是，如果基本工作都做不好，会很难，会很消耗自己。在这些基础工作中，画原型，我认为，是花费少量时间练习，就可以掌握的。02、很多同学求职的作品集中，没有亮点。不论从竞品分析文档、PRD、原型图，这些里边中，都有着很浓厚的培训班色彩。想起来我5年前面试的时候，面试官问我是不是XXXX培训的，我很大方的承认，并说了培训的原因，然后再吧啦吧啦自己的态度和能力。面试官说我现在一看这作品集，就知道是哪个培训班出来的。几年之后，轮到我当面试官的时候，看一眼写的文档和 PRD 就知道是不是培训班出来的。我也是培训班出来的，这里也不是说培训班不好，最起码能花钱带你入门。我们在说回来，在你准备的东西里一定要有一个自己的亮点。亮点是什么？和别人不一样那就是个亮点竞品分析文档写的论点明确，论据充足，分析的头头是道，这是个亮点需求文档写的详尽清晰，逻辑说明没有大的遗漏，这是个亮点原型图画的好看，规范美观，交互逻辑清楚，这是个亮点……现在回头想想，我原型图的背景都是用的灰底，可能就是个亮点。有个面试官说他也是这个习惯，然后和我聊聊……（当时的原型图，现在看，内容很拉胯）与其说让自己有亮点，不如说让自己有一个强项。因为产品经理的工作很杂，你总归要有一个自己的强项——懂业务、懂行业、懂技术、懂运营、懂交互、懂数据分析、各种软件用的溜等等当有人在某个你的强项领域怼你的时候，你可以直接怼回去。最重要的一点，自己的强项会很大增加自己的自信心。我初期就是把自己的强项定位到原型、需求文档、沟通上，在职场工作的前2年一直在总结学习这几点。尤其是原型，花费少量时间，就能有很大提升。到现在，我一点都不担心评审时有人来 diss 我的原型和PRD。所以，我也想结合我曾经的窘境+现在同学们遇到的问题，把我的总结分享出来。我整理了关于原型图几类问题：1、纯纯的没思路，不知道怎么画2、画出来了，但是难看，原型没有规范，没有层次3、工具不会用，用的慢，效率低4、只沉迷于画图，不了解自己画图的最终目的这些内容看着很少，实际上涉及到很多。因为原型图不仅仅是一个图片，它体现出一个产品经理对需求理解、用户场景判断、产品流程、功能架构、交互设计、审美能力等专业能力的体现。所以，我才打算写一系列内容，就教你怎么画原型。03、目标：让这个手册帮你又好又快的画出原型主要围绕：1、原型基础篇：简单说下原型是什么2、原型理论篇：产品设计中的一些必须了解的理论3、原型规范篇：了解PC端/移动端原型规范，知道要画出什么4、原型工具篇：介绍Axure的使用 & 提效技巧5、原型实战篇：从需求分析、流程梳理、功能划分、上手画原型的每一步引入一个实战项目，带你快速理解每一步6、原型案例篇：直接抄，将常见功能的设计方法、原型图直接给你7、番外篇：说下产品经理其他的内容在文章里我都会有实例，空谈理论的文章我写不出来。如果你觉得没有收获，24h内可以随时退款。所以，我开始写了，共同努力，一起进步！