day4产品微课笔记

01. 需求列表的主要内容

展示需求集合的表格

image.png

1. 需求列表的主要内容：
   1. 干系人；
   2. 时间节点；
   3. 需求：
      1. 原始需求和产品需求；
      2. 建议记录原始需求（在什么时间、什么场景下，由谁提出了什么需求）；
      3. 产品需求：先看是否为bug,修复之后是否会复现问题，不一定要新增什么功能需求，先解决掉原始需求；
   4. 优先级；
2. 注意事项：
   1. 每个公司的需求列表都不相同；
   2. 大家进入企业以后，该如何记录和处理需求，先问之前怎么做的，再看之前的做法是否有优化空间或者是否需要优化，最后再做；

02. 需求列表（需求池）示例

1. 建议
   1. 「字体」统一，比如都用「微软雅黑」；
   2. 表格制作精美一点，好看
2. 需求列表作用：
   1. 需求回溯：知道当时为什么要这样设计功能的原因；
   2. 需求管理；

03.步进器

常见场景：电商app购物车;

1. 步进器案例制作方法：
   1. 添加三个元件，减号、数字、加号，注意命名，注意给减号添加禁用效果；
   2. 添加加号的交互动作，鼠标单击时：
      1. 让数字的值 +1；（使用局部变量获取数字的值，然后让它+1就可以）
      2. 启用减号；
   3. 添加减号的交互动作，鼠标单击时：
      1. 如果数字的值＞2，鼠标单击时，让数字的值 -1 就可以；
      2. 如果数字的值≤2，鼠标单击时，让数字的值为1，同时，要禁用减号；
2. 局部变量的使用方法：
   1. 在添加交互时，选择“Fx“；
   2. 在弹窗中，先添加局部变量，设置局部变量获取的内容；（本案例中，是获取数字的元件文字）
   3. 插入局部变量，同时，将需要处理的“+1”或“-1”添加到公式中；
   4. 点击确定即可完成；
3. 注意：局部变量的使用范围有限，仅限于这个弹窗中；

04.订单详情案例制作（1）

目的：加深局部变量和全局变量使用
注意：所有涉及交互的元件都要命名

1. 制作步骤：
   1. 先添加所有的元件，注意元件的命名；
   2. 给“提交按钮”添加交互事件，鼠标单击时：
      1. 显示”订单详情“的组合内容；
      2. 给订单详情中”姓名框“、”电话框“、”地址框“赋值；
      3. 注意，使用局部变量获取相应输入框的文字即可完成赋值；

05.订单详情案例制作（2）

1. 制作省市二级联动的效果；
2. 添加全局变量，获取城市动态面板的值，要考虑该变量的三种不同值：
   1. 「页面载入时」页面刚打开时，显示的值；
   2. 当省份下拉框选项改变时，显示的值 → 默认为当前省省会地址；
   3. 当城市动态面板中，具体某一个省份的下拉框，选项改变时，显示的值；在动态面板选项修改中，将局部变量赋值给全局变量；
3. 将添加好的全局变量，插入到地址框中即可；

06. 中继器元件介绍

1. 中继器的作用：
   1. 当原型的结构相同，但内容不同时，可以使用；
   2. 表格类的原型，增删改查，都可以用（针对后台原型）；
2. 中继器的使用：
   1. 添加中继器元件，编辑中继器模板；
      1. 注意，模板中所有的元件都需要命名；
      2. 每个元件内容不用写，保持样式相同即可；
   2. 在中继器的”检视 - 属性“区域，添加中继器表格的内容，可以从Excel中直接粘贴复制；
      1. 「每项加载时」→ 勾选数据 → 用表格函数表示；
      2. 「图片」：必须要右键导入，且导入成功的图片旁边能看缩略图；
   3. 添加中继器的交互事件，将中继器表格中的数据赋值给中继器模板中的元件；
      1. 注意：图片的添加，只能通过”设置图片“完成 →（「每项加载时」→ 「设置图片」→ 「用函数表示赋值」）；
   4. 修改中继器布局，在中继器的“检视 - 样式”区域完成；
      1. 「网格排布」→ 「一行四个」=》就会换行，一行显示4个
      2. 中继器每个元素间距：「选中中继器元件」→ 「样式」→ 「间距」；

07. 中继器案例demo

1. 案例页面制作：
   1. 先添加中继器表格的表头，然后添加中继器，需要设置中继器模板，注意命名；
   2. 设置中继器表格的表头及数据（检视 - 属性 - 中继器）；
   3. 设置中继器的交互动作（检视 - 属性 - 交互），=》将设置的数据赋值给表格；
   4. 添加各个输入框和操作按钮，注意命名；
2. 具体的按钮交互：

   1. 添加：鼠标单击时，添加行，使用局部变量获取输入框的文字，然后赋值给中继器表格；

      
      
      添加交互.png
   2. 删除

      1. 先给中继器模板中的复选框添加交互（选中时，标记行；取消选中时，取消标记行）。「中继器模版」 → 「复选框」 → 「设置选中状态」；

         
         
         设置标记
         
         

         弄错了，取消标记操作在「复选框取消选中里面设置」

         
         
         取消标记

      2. 鼠标单击时，删除标记的行；

         
         
         删除操作

   3. 修改：鼠标单击时，更新标记的行，注意，使用局部变量获取输入框的文字，然后赋值给中继器，进行输入更新；

      
      
      修改操作

   4. 分页：鼠标单击时，设置中继器的每页显示数量，使用局部变量获取输入框的文字，然后对应的完成分页即可；

      
      
      分页

   5. 上一页、下一页、跳转，都是通过设置中继器的当前显示页面来完成；

      
      
      上一页
      
      
      跳转操作

   6. 全选：鼠标单击时，设置选中，选中中继器模板的“复选框”即可；

      
      
      全选toggle操作
   7. demo待完善的地方
      1. 数据为空，也能添加/修改数据；解决方案=》
         1. 前三个输入框数据为空，「添加」「修改按钮」置灰；（实现有瑕疵）
         2. 若「添加」解决OK，则不用处理「修改」；

         3. 操作按钮设置条件，三个数据有值才能操作；

            
            
            option2
         4. 前三输入框值任一为空，给toast提示，且数据不能添加成功；（未做）
         5. 三输入框都有值，显示「添加」按钮；（未做）

08. Axure实用小技巧

axure使用技巧