❶ 产品经理必备技能 | 如何画原型
产品经理当然要会画原型啦~
聊聊怎么画原型吧！
在画原型之前，更重要的事情，就是画 页面流程图 和 信息架构图 ！假如你没有这些东西，就开始画原型，那么等着你的就是没完没了的改改改。
页面流程图是以用户视角，看流程合理性。通常适合于跳转比较复杂的产品功能，如电商、社交产品。
为什么要画页面流程：
（1）是交互设计/原型设计的基本依据，是逻辑基础。如果你都没想好页面流转的顺序，那么你画的原型一定不是可以确定下来的版本
（2）代表了用户的操作过程，先画页面流程图能迅速发现体验问题。有了页面流程图，你可以设身处地想象用户在使用产品时的操作流程，发现其中可能出现的问题
（3）突出页面重点元素与逻辑关系，提升原型的设计效率。很多页面不是全新页面，而是在原有页面做一些修改，如果你知道页面流转顺序，那么会给你画原型减轻很多工作量
页面流程图包含：
（1）四方形：业务流程中的四方形部分，异常流程或弹层通常用菱形表示
（2）流向：主干流向和辅助流向
（3）重点元素：每个流程中，重点要体现和表达的内容是什么
画页面流程图的工具：
（1）Axure：画了页面流程图可以紧接着画原型
（2）ppt：方便讲解
需要注意的地方：
（1）回归业务流程，明确主线：页面流程一定来自于业务流程，一般为业务流程中的方形部分。异常流程一般为弹层或弹窗提示。业务流程画的好，页面流程就简单。
（2）明确页面中的重点元素：功能在页面中，有哪些是需要表现元素。增加异常流程的处理逻辑。增加辅助的帮助页面。考虑下游触发点（按钮/链接/滑动...)。
（3）沟通与优化：首先要尽可能穷举涉及的页面，然后做减法，有些页面合并或删除。通过原型草图，优化调整页面关键元素。与UI、UE、前端研发多沟通会有更好的效果。
页面流程图一般规则：
页面流程图例：
一个具体案例：
业务流程：
页面流程：
主要是分离出了普通用户的操作流程，加异常处理。
对于普通用户的关键页面和关键流向：
页面流程图：
（1）分离出5个页面，确定流程流向
（2）固定元素，例如在“1购物车”中，“提交订单”就是下游触发点，点击后流向下一个页面；在“2输入优惠码”中有关键元素“填写优惠码”，另外还有下游触发点“确认订单”...
（3）针对每个页面去画对应的原型图
信息架构图，以产品视角，看包含多少功能点。适合于层级分明的，如音乐产品、新闻客户端、阅读类产品等。
信息架构图例1：
有了页面流程图或信息架构图，现在终于可以开始画原型啦。首先，什么是产品原型设计？
产品原型 ，俗称 线框图 ，大概就是草图的意思吧。它是产品落地的关键点，是从虚拟概念到用户接触的节点。同时也是产品经理产出的关键内容，上传下达，上给老板，下给UI、UE同事。
产品从原型到上线的流程：
大公司的产品经理只需要做手绘和低保真的部分，小公司可能还要兼职交互设计...
案例：
好的原型有什么特点：
（1）整体：页面结构清晰、跳转关系明确、与业务流程一致、完整表达用户需求
（2）独立页面：功能元素明确有序、位置关系清晰、不同状态变化清晰
（3）交互设计：清晰的交互逻辑、一致交互方式、界面统一
常用工具：
（1）纸笔：自己画画，快速学习和定位
（2）白板：多人讨论
（3）软件Axure/Sketch/墨刀：产出正式文档
案例：
（1）研究流程：业务流程->页面流程
（2）确定页面框架：大概确定页面布局和大的框架
（3）画原型：画模块，确定交互细节
注意事项：
（1）尽可能用真实比例、真实文案，使元素更真实，也避免在需求评审时被之一。尽可能真实模拟极端情况，并示例清楚。
（2）紧扣需求主体，不横生枝节。如果原型需要增加新功能，一定要是来源于需求，并且要考虑后端数据来源。
（3）不要上颜色！原型就用黑白灰，不要给UI、UE挖坑
（4）目录树清晰，阅读流畅
（5）保存修改记录，关键修改重新保存文件
画/改原型的时间尽量控制在20%工作时间之内，否则就要问问自己是不是哪里出问题了哦。
产品需求想明白了没？？？
产品流程理清楚了没？？？
手绘草图画了没？？？
手绘草图和Boss确认了没？？？
❷ 产品经理，如何像设计原型那样设计自己的简历
又到了年底跳槽大迁徙的时期，在这里记下自己简历心得（可任意喷）和设计简历原型的奇思怪想献给各位产品新人宝宝们，希望对各位宝宝有抛砖引玉之效。用原型辅助设计自己的简历对于面试产品的人来说，形式上算不上什么奇异技巧，但是可以直观的给面试官展示你的原型交互功底，以及将自己作为产品时，产品结构的设计思路。
混了这么长时间的产品汪，我的感受是，在做产品前一定要对需求进行深度分析，产品可以做，但一定要往对的方向做，好比医生在对病人进行望闻问切后的诊断，明明得的阑尾炎，非得按照腹泻来治，可怜那病人会有好结果么。so，咨询了些异常挑剔的HR们，得到的反馈是她们最关注的就是三点：项目、经验、项目经验。简历RP说到底还是个人简历，像个人信息、项目经验、教育培训、个人评价等简历常态的东西还是要展示。这么多信息如何重点展示，以下做个示例。
首页简要介绍“你是谁，你要干什么，你做过什么”，个人信息中我选择将主要展示的“姓名、求职意向、联系方式”与次要关注的“出生、性别、邮箱、学历、居住地”信息采用镜面翻转形式展示，一来可以为重头“项目经历”腾出重要位置，其次通过翻转形式避免个人信息过多文字堆砌，鼠标移入头像时，头像显示为个人微信二维码（哪知道会不会加好友，先放上）。项目经历栏目中简要说明各项目公司、时间、岗位、内容。然后是简要的的项目经历和个人评价的显示，各栏目可通过点击“更多”按钮，跳转到对应栏目。底部导航中提供各栏目快速入口"首页" "项目" "教育" "培训" "评价"。
项目经历中蒙版显示项目内容，若多个项目可通过添加“下一页”按钮和蒙版底部“项目进度条”显示当前所在的项目。
教育经历中分两个模块：所学专业内容和在校期间荣获奖项。信息内容较少，采用直接平铺展示。
简历可以有多种风格，但是尽量简洁，因为HR可能没有那么多时间去欣赏你的简历。
❸ 初级产品经理-如何高效绘制AXURE原型
原型是产品经理或者交互设计师所设计的某一需求或者某一问题的具体的解决方案。绘制原型的工具有很多，我们公司大多的产品用的都是Axure。用这个软件，高保真或者低保真原型都能做的很好。那么，怎样的原型才适合团队交流？
毕竟绘制出来的原型并不是只给自己看的，还要讲解给团队里的成员，UI/前端/开发。特别是进行小组内评审的时候，通过演示原型，需要向他们讲解产品内部的逻辑、具体的页面、动效等，还要向他们询问设计是否合理，能否实现等，静心倾听他们的意见。这时候，原型就是一个思维传达的工具，将你的想法，翻译并灌输给你的团队成员。同样，原型是也团队的交流工具，针对绘制出来的原型，每个人都可以谈谈自己的看法，交流思想，完善原型不足的地方。
所以原型绘制出来，必须要有基本的交付标准。
一、原型设计的基本交付标准
1.清楚------让他人能明白产品是干什么的，包括什么功能，有哪些页面。
需要清楚地表达页面有哪些内容模块
需要清楚地表达模块内部的构成元素
2.清晰------让队友知道具体有哪些要求，指导他们如何做
【1】功能操作
某一个功能可以进行哪些操作，点击/鼠标悬浮/拖动等操作，以及页面会有什么反应。（方便开发的工作）。
【2】操作路径
有一些操作是要跳转页面，跳转的路径需要标清楚，跳到哪去了，涉及哪些页面，页面之间是如何联系的。防止用户迷失。
【3】点击状态
一些链接，按钮，需要标明它初始的时候是什么样，鼠标悬浮有什么效果（颜色/下划线/提示语等），点击的样式变化，以及点击后的样式。（这些可以为前端的工作提供方便）
【4】信息组合
相关的信息需要组合在一起，比如一些基本信息，姓名/性别/年龄等最好放一块，不要分开。不相关的保持距离。
【5】位置排序
页面的布局应该适应用户的习惯，浏览方式、工作任务。突出强调重点，方便用户的工作。一些数据可以思考一下它们的排列方式，按什么排序，能方便用户查找，仍旧是“以用户为中心”。
3.周全-----产品的各种细节，不能疏忽
【1】交互状态
某些重要的操作，交互样式是怎样的，效果如何，最好单独抽出来做成高保真，演示给他人看，让他们对产品有深入的体验和感受。
【2】数据显示
原型上涉及的相关数据做好有真实的案例，将需要获取的关键数据全部展示出来，比如一篇文章，需要的数据：作者、发布时间、浏览量、喜欢数、收藏数等，方便开发准备必要的数据接口。
【3】异常考虑
需要考虑一些突发情况的应对，比如断网、加载太慢、数据已经被删除了、数据找不到了、没有访问权限等等情况。
【4】配套页面
产品里的一些功能可能和其他产品有关联，需要将可能涉及的其他页面包括到项目内。比如页面在wap上手机的浏览样式、一些发送给用户的消息/短信的内容和样式等等。
4.基本审美
【1】对齐
【2】间距
【3】颜色
【4】字体
推荐大家看看《写给大家看的设计书》这类易上手的书籍。
5.基本规范
【1】页面尺寸
web的宽度有960px、1000px、1200px，App有安卓、iphone5、iphone6等，需要与已有的产品保持统一的尺寸。
【2】字体大小
标题可以是18px或者16px，内容可以是14px。既要考虑用户是否看到清，又要考虑美观。
【3】颜色
原型不要有太多的颜色，坚持黑白灰，除非要突出，可以用其他的颜色。
【4】弹窗
弹唱的样式最好做统一，弹窗名+内容+操作按钮+关闭
【5】元件
不在原型正文添加过多的截图、图标样式，会对UI的设计造成干扰。
二.Axure的快捷使用技巧
工欲善其事必先利其器，工具使用的越娴熟，才能节省大量时间用于方案的思考。下面将简要分享Axure绘制原型时的一些快捷操作：
首先在顶部菜单栏中找到<视图>，把需要的部件显示，就可以设置了。
1.组件库的建立（能提高效率，保证产品层面的统一一致）
2.母版的使用（适用于多页面通用的部分，修改后，集体自动更新）
3.设置页面样式（页面的字体、背景能一次性设置好）
4.元件的交互样式
5.元件组合
把要组合的原件用鼠标框在一起，按住ctrl+G，成为组合后就可方便复制拖动了。许下按住ctrl+shift+G，也可以点击选中后，点击下图的两个图标来组合和取消组合。
6.对齐、居中、平均分布
选中要对其的内容，选择一种分布样式，就能快速得到整齐的原型样式，而不用一个个手动调整。
7.输入框类型的设置（预设好类型）
一些输入框，可能需要设置默认文字，可以直接选中了输入框后，在原件属性里设置提示文字和一些限制。
8.元件的提示语
有些文字需要有鼠标悬浮显示提示语的动作，可以直接在原件的属性里设置“原件提示”，输入要显示的内容，即可。
三、制作原型的过程
1.梳理功能点-------------------将需求转化为功能清单，标出重要等级（前提是需求已经梳理清楚）
2.规划产品结构----------------用Xmind或者笔和纸等工具画出产品有几个页面，每个页面包含哪些元素
3.整理原型目录----------------用Axure添加原型的几个页面，考虑页面之间的跳转关系
4.设计页面的布局（打格子）-----用不同的色块，方框来表示这部分将要表示什么板块，设计好页面的布局
5.填充各模块的细节----------在方框里把具体的信息和数据填充完整
6.增加少量的交互动作--------------体现在一些涉及到任务的操作
7.页面注释-------------完善交互说明
8.审查自检------------------功能是否覆盖完全；页面有没有缺失；流程是否明确；状态是否完备
四、原型应用中的经验
因为我多是负责后台系统的优化，所以是直接和开发打交道，如果涉及前台页面，就需要UI先将原型做成图片，再由前端制作含有动效的demo，开发再按照demo开发。但是不论哪种，绘制出来的原型一定需要让队友都明白你的逻辑和要表达的重点。
第一次负责项目的时候，我用的是高保真，画完整的原型就花了一星期多，各种动作和交互，恨不得做个虚拟的产品。但是和开发讲了原型后，等来验收项目的时候，才发现，开发大部分都没有按照原型上的动作来，甚至连细节都有遗漏。一个个催着补上后，我开始思考这种方式是不是不太划算，太费事费力，结果又不太好。
后来我看了我上级绘制的原型，都是以静态页面为主，可以说是低保真，但是每一种情况都详细地用图文描述清楚，点击之后是什么样子，将要获取什么数据，失败了会怎么样都有。而且这种方式，完成的特别快。于是我就选取低保真模式的开始画原型，结果发现，开发有时候并不能将一些动作做好。
于是我开始“T式原型 ”。“T式原型 ”就是大部分是以低保真铺展开，将整个产品的逻辑都直接呈现出来，再在某些需要重点描述的地方用高保真描述深入。所以，我的原型大部分是以 低保真+注释说明和高保真+动作演示 的组合。 不过对于交互简单的产品来说，低保真模型足够了 。
每个产品绘制原型的习惯和风格都有所不同，但关键还是需要进行小组会议来向队友们讲解原型和逻辑，在开发的过程中，需要多沟通。
另外，分享大家关于AXURE学习的网站，可以在里面找到免费的软件安装包和教学课程。
https://www.axure.com.cn/
如果对文章感兴趣，欢迎评论留言，坚持喜欢的事情，加油~