Day2 黑马产品微课笔记

day2课堂笔记

01.产品功能结构图/信息结构图/结构图

产品功能结构图

  1. 专注在功能模块，再逐级延展；
  2. 制作方法：
    1. 先根据产品的一级页面，找到产品的主要功能模块；
    2. 根据主要功能模块，逐级拓展；
  3. 适用场景：

    1. 在产品规划初期，考虑产品功能和细节时使用；


      功能结构图demo

产品信息结构图

  1. 强调脱离实际页面，主要体现产品某种类型的信息字段；


    产品信息结构图demo

产品结构图

  1. 功能与信息的集合，将功能和信息呈现在不同的页面；
  2. 制作方法
    1. 根据页面层级制作；
      1. 从上到下，从左到右；
    2. 重点功能重点制作，层级尽量深；

  3. pm一定要会制作产品结构图；信息结构图以了解为主，如果需要制作，更多的是考虑产品中的信息字段（方便后端建表）；


    产品结构图demo

02.微信产品结构图示例

\color{red}{TODO}

  1. 以微信为例，制作部分内容的产品结构图；
    1. 根据页面层级进行制作；
    2. 返回等不重要的功能可以不写；

03.结构图和原型的关系

  1. 产品结构图的使用场景：
    1. 做产品规划时使用。通过结构图梳理产品框架，再进行产品设计；
    2. 竞品分析。
  2. Xmind使用：

    1. 记住常用快捷键；
      现在Xmind展开关闭快捷键为：cmd+/


      Xmind8常用快捷键

      Xmind软件使用键
    2. 可做结构图/工作汇报；

04.Axure常用元件

日常工作中使用频率较高的元件。
不知道元件怎么操作的时候，选择双击看看有没有什么提示。

  1. 矩形的圆角设置：
    1. 拖动矩形元件左上方的黄色小三角；
    2. 在“检视 - 样式 - 圆角半径”中进行设置；
  2. 图片的导入：
    1. 原尺寸导入图片：当图片元件的四角为黄色的小正方形时，导入图片为原尺寸；
    2. 根据给定尺寸导入图片：当图片元件的四角为白色的小正方形时，导入的图片会根据给定尺寸进行压缩；
  3. 动态面板
    1. 元件在axure内显示为透明，在预览的时候是不可见的
    2. 蓝色区域是动态面板内的可视区域
    3. 具体动态面板（eg:轮播效果）怎么做，在后面的案例讲解TODO
  4. 文本框
    1. 位置：「表单元件」 → 「文本框」；
    2. 注意，可以设置文本类型，以及边框的可见性、提示文字的隐藏触发；
    3. demo：简单的手机框 + 验证码输入；
      TODO:demo内的前面文字对齐不知道怎么实现的，元素拉过去的时候，axure可能会实现自动对齐
  5. 下拉框
    1. 可以批量设置选项；
  6. 单选框/复选框：
    1. 如果要制作单选的效果，需要设置单选按钮组（选中全部的选项，右键，选择“设置单选按钮组”）；

05.Axure常用交互

元件右上角有数字代表有交互效果。

  1. 鼠标悬停、鼠标按下、选中、禁用：
    1. 效果路径：检视 - 属性 - 形状 - 交互样式设置；
    2. 当我们需要给某个元件添加交互动作时，需要给元件命名；
    3. 选中：
      1. 要先设置选中的效果；
      2. 再添加选中的交互事件；
    4. 禁用：
      交互效果内选择了禁用，选中效果内就不选择了（等级更高）
    5. 页面载入时
    6. toggle效果
      1. 设置选中效果；
      2. 设置交互 → 选中 → 值为toggle；
    7. 动态面板
  2. 添加说明
    1. 位置：「检视」→「页面」→「说明」；
    2. 预览效果，元件右上方有蓝色文字图标，代表有说明文字；
    3. 有些公司要求说明写在元件说明内，有些写在元件旁边；

06.Axure元件库/母版

  1. 作用：极大提高原型制作效率
  2. 新建元件库：自己制作的原型，常用满意的元件可以保留，方便以后快捷使用；
    1. 刚编辑/导入的元件库，回到页面左边，刷新元件库即可继续使用
  3. 母版：可以复用，简单修改的东西（类似前端的组件封装）
    1. 创建模板
    2. 修改目标：「选中模板」→ 右键 →「脱离模版」→ 继续编辑
  4. 好用的元件库都是自己编辑的，适配度更高。eg:选中合适的做模板，下载使用的元件库等

07.常见的原型规范

  1. 在企业中制作原型时，只制作iOS端原型（安卓手机品牌过多，展示效果不同，不考虑）；
  2. 产品经理在制作原型时，需要遵循的规范（移动端）：
    1. 手机框大小：375*667px；
      1. 某些页面比较长，比如说淘宝首页，这个时候，可以忽略667的限制；
      2. 页面过长，需要滚动效果可以把内容放进动态面板内，并设置动态面板为垂直滚动，需要在滚动区域内注释内容就不要放进动态面板
    2. 状态栏，高度20px；
    3. 导航栏，高度44px；
    4. 标签栏，高度49px；字体大小10，图标大小25*25；
    5. 一级按钮，高度40px；
    6. 推荐材料《iOS交互设计规范》；

08. Axure更多功能

页面流程图、泳道图

  1. 可以实现页面流程图（流程图不用精准匹配设计规范）
  2. 可以做泳道图。建议使用processon等工具实现，axure实现耗时间且没那么美观

09.day2小节

Day2产品微课小节.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容