“双双，你在看什么看的这么聚精会神？而且我看你今天你的黑眼圈很重呀”
双双打了个哈欠：“丽丽姐，这黑眼圈是我认真学习的证明。我在网上报名了一个84节课学习Axure课程，我现在看到if,and等在处理微信向下滑动的交互效果呢”
“哎呦，你这学习劲值得称赞。不过我要为你及时止损。网上讲的各种绚丽的交互效果其实我们工作中不用的，他们无良商家为了凑课时可害惨了你们这些想学Axure的人。为什么我们不用是因为我们要考虑我们的用户，来考考你，看我们文档的用户是谁？“
双双不太肯定的说：“业务部门？”
“看来你的笔记要时常复习才行。我们的目标用户还有我们的团队成员，UI设计师要根据我们的PRD文档（原型加需求备注）出视觉稿，前端和后端研发工程师要根据我们的PRD文档进行研发设计，测试工程师要根据我们PRD文档写测试用例。而网上讲的那么多复杂的交互效果大多数是隐藏，还要点击等，如果不在文档中平铺展开，我们的用户们会漏掉”
双双一脸开心“啊，终于不用学那么多了。我看网上的那么多节课愁死了，现在听丽丽姐这么一说，那我这个产品小白学Axure需要多久时间呀？”
双双竖起了她的拇指：“牛牛牛，我跟对了师傅呀”
“好滴，18岁的双双，我们开始Axure的讲解把。”
1.Axure的安装注意事项
①Axure的汉化。安装后界面都是英文，要对它进行汉化处理，汉化处理的步骤是将lang文件复制粘贴到安装包的文件夹下。
②Axure的授权。Axure如果没有授权的话，只有一个月试用期，一个月试用期结束后就不能使用了。所以需要授权，授权码你可以网上百度下，在【帮助-授权管理】中填写授权的 授权人和秘钥。
③Axure元件库。绘制原型时（前端和后端原型）经常使用到Axure元件库（即模板）。载入元件库方式：
说明：原型绘制时我们多采用灰黑白三色系，当然有浅灰深灰等。具体用什么颜色由UI设计稿来定。
1. Axure常用元件
①文字类：我们可以使用一级/二级/三级标题，文本标签来写我们的文字。为了简单，我们一般用文本标签来写文字，然后采用字号，加粗，字体颜色来表示页面和文字的层次感。
②图片和图标
在Axure绘制时图片经常用到，比如说聊天列表页个人头像，比如商品列表页商品图片。我们可以用以下几个元件图片来代替。
图标比如说点赞收藏等图标，可以采用图片代替，也可以进入阿里巴巴矢量图库将其下载然后采用图片控件进行导入显示在原型上。不过具体图标是UI设计师来决定，我们在原型上仅做表示下。
③热区
热区指的是交互效果（比如说点击，滑动等有动作的成为交互效果）区域。由UI设计师决定，前端研发工程师进行完成。
比如说微信聊天列表 我是点击文字区域到达聊天详情页，还是点击头像到达聊天详情页。当然正确答案是：点击这一行都到达聊天详情页，这一行都是热区。
④动态面板
动态面板主要使用于一个空间不同内容的场景。不过按照上面讲的原则，如果有不同内容，我们更多的是写在需求备注中，不采用动态面板和交互形式。这样便于看文档的人清晰明了。
⑤复选框和单选按钮
复选代表可多选，单选代表仅能单选。这个场景不能弄错。比如性别不是男就是女所以用单选框，学生喜欢的课程 数学英语历史课多选，学生最喜欢的课程那也是单选。
采用下拉列表可单选也可多选，这个写在需求备注中。多选需要表示出多选之后的样式。
下拉列表中的可选项，要么是写死，要么是读取的数据，写死的数据要给出枚举值，比如说数学英语历史学科。读取的数据要表明接口来源，比如说调用主数据系统的仓库API接口。
⑥尺寸和不用操作系统
移动端（手机端）尺寸是376*800（宽和高）。Web端（PC端）尺寸是1440*1024。一般宽是固定的，高是随着内容增加可增加的。
移动端安卓和苹果的常用交互效果是不一样的，比如说安卓长按显示更多，苹果一般左右滑动做交互效果。出原型时仅用出一个版本的原型，安卓和ios前端开发工程师可以根据各自系统习惯进行开发，产品经理要考虑2个系统的用户不同操作习惯。
2. Axure常用交互
在我们使用的软件中，点击/鼠标移入/鼠标移出/左滑/右滑/下滑/上滑/双击/拉开放大/缩小等都是常用的交互效果。我们在Axure绘制时候基本只用点击的交互效果，为了便于我们PRD评审时候演示原型。其他交互效果不需要用Axure做出来，仅需要在需求文档中写清楚即可。
双双：“丽丽，你这样一顺，我学习压力顿时减少许多”
“噗，那你把学费给我呀。”
双双立马get到：”下午蜜雪冰城我请了。”
3. Axure实战
“好，冲着你的蜜雪冰城，我再给你一个Axure完成原型的思路。我们以微信聊天列表页为例绘制原型。需求备注我们在明天再说。在绘制原型时候我们如何绘制出这个页面呢？”
双双：“这个我知道，昨天说的用XMind列举出这个页面的功能点和字段。要代入场景来想。”
“你说的对。任何一个产品都不是凭空捏造的，它有人物，有场景。对于微信而言，它也是和线下聊天类比的，只是做成了线上聊天的工具。那么聊天列表都有哪些场景有哪些功能呢？我们来梳理一下。因为聊天列表页也是登录之后的首页，首页有入口作用，所以你看到微信旁边有更多，点击可以发起群聊，添加朋友，扫一扫，收付款的快捷入口。
我们集中微信的主要聊天功能来聊一聊”
需求收集模板
功能设计
下班时间我看到同事消息了但就是不想回。第二天告诉他我没有看到。
双双：“丽丽，微信虽然我平常都用，但是今天经过你这么一分析，我才有点从产品的角度看它的感觉。丽丽，我绘制成什么样子聊天列表页面才能给业务人员确认呢，这个尺度在哪里呀？”
“用一张原型表现更多不同的功能点，比如说我以下的图形你来探索一下有哪些产品点。”
“①更多在右边画出了更多的弹框内容
②头像上显示了未读消息。但是消息免打扰和非消息免打扰的未读消息不一样显示。
③最后聊天内容是文字或者表情不同的表现方式
④群聊天未读消息条数显示。群聊天最近一条内容显示发言者和说话内容
⑤置顶和非置顶采用了不同颜色背景
⑥与我相关内容红色醒目提示
⑦右滑动作显示出来了”
⑧导航显示了 当前所在导航和未读消息总数”
双双：“我有1个疑问：群聊天和个人聊天头像要做区分把？原型中并没有显示出来”
“对滴，要做区分，我们不显示在初步原型中，会写在需求备注中由UI进行设计。其实你再细观察下群头像，3个人，4个人..9个人等他们的排列方式是不同的，这个是写在需求中由UI进行设计。并不在我们原型部分进行确认。我们在设计过程中就是一步步细化的过程。”
双双开心的说：“还好你给我提点，不然我跟着网上学就学偏了，还浪费我钱”
“浪费钱还是小事。现在对于我们来说价值排序是这样：注意力＞时间＞金钱。
你把注意力和时间浪费了那才可惜了。以后你遇到这样的事情多想一想多问问身边人，确定了方向再投入哦。不然南辕北辙那可太浪费你的青春年华啦。那布置一个作业，你把申请人的请假审批相关页面绘制原型给我看吧。”
双双给了一个ok的手势。“没问题。那丽丽姐啥时候我们开始学习需求备注了。感觉我闯关快闯50%了呢”
丽丽笑了笑“还早着呢，你在产品路上20%都还没到哦。不过需求备注等我这个产品迭代上线就给你讲哈。我后面会先给你讲一下我们常见的设计知识点”
每日案例拆解库，AI等产品打卡群
PMTalk创建的产品设计打卡社群，加入后365天，每天体验一款APP。提升产品设计能力，同时有1300份体验报告帮助你找到竞品。
在这里你可以随时查询到你想找的各类竞品行业APP，无须自己亲自下载就可以马上得到APP的一手产品优化、交互设计、功能描述信息。
从优化&建议、商业模式、运营、功能描述、交互设计、产品定位至少6个维度，体验一款应用。
平均1天1块钱，扫码购买即可加入
连续体验48款应用，通过后原路退回
报名后，添加星球助理（否则报名无效）
PMTalk123
13122402111
13122402111