产品设计

1. 需求交付

产品/项目经理应将产品原型及文档说明,交付设计师,并说明产品功能及应注意的问题,确保设计图的设计方向及风格的正确性

2. 需求沟通/分析

需求沟通

  1. 设计师接收到分配的新任务后,应在正确理解产品需求之后,再进行设计;
  2. 设计的需求不明确或者不理解时,应及时与产品负责人沟通;
  3. 设计师应参与项目组的产品需求会议,并针对产品设计问题提出建议

    需求分析

    背景分析

    产品的定位及价值是什么,它的现状如何,是否有既往的数据沉淀或经验总结

    用户分析

    用户分析是为了让我们更好地了解产品,并拥有对整个产品的宏观思路。通过用户分析,能为我们的视觉设计提供方向,并为我们做出决策提供实际落点

    竞品分析

  4. 获得行业内的优秀经验,减少我们的思维盲区,同时还为我们提供了一份可被量化的标准,使我们可以基于竞品去反推现有产品

  5. 可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析

    需求评估

    需求类型通常可以分为三种:全新产品类、产品改版类、功能新增或优化类。
    对不同类型的需求,我们都可以用5个问题去评估:

  6. 是否可被证伪?

  7. 目标是否明确?
  8. 投产比如何?
  9. 是否有更优解法?
  10. 是否有可预见风险?

基于以上问题,我们可以去协同交互、产品做相应调整和策略制定,甚至发现新的机会点并进行推动。

3. 需求设计

基于分析确定视觉方向、定义设计语言,输出完整且高质量的视觉页面

设计情绪

  1. 设计情绪可以为设计语言的构建提供可视化参考,也有助于我们前期快速与各方达成共识。
  2. 我们通常基于分析,去确定设计关键词,并基于关键词去衍生映射物、建立图形情绪板,最终分析和确定设计方向。

    设计语言

    在明确设计方向后,我们就要基于情绪去定义设计语言,主要包括主视觉、色彩、字体、图标、图形、动效等

    典型页面

  3. 典型页面是设计语言在场景中直观体现,这有助于我们制定设计规范,并为其他页面的设计提供参考

  4. 我们通常需要设计首页、频道页或其他具有示例作用的典型页面,在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等,以此为视觉规范夯实基础

4. 设计交付

  1. 设计师应在deadline之前一个工作日交付设计初稿,设计主管审核无误后可通知产品负责人;
  2. 设计师应与制作页面的前端/后端工程师沟通页面布局、交互以及注意细节,确保对方正确理解设计意图及功能
  3. 设计图确认上传蓝湖之后
    • banner素材等需要切图整理,切图在压缩的同时保证显示效果;
    • 图标需要在本地做修改之后,上传iconfont,不能将iconfont上别人的图标直接加入项目
  4. 产品设计中出现的问题
    • 初稿有问题,应在剩余的一个工作日内尽快处理,确保按时交付;
    • 如设计需要大的改动无法按时交付时,设计主管应在deadline之前,及时联系产品负责人沟通协调,告知未能按时交付的原因,并给出新的交付时间;
  5. 周期长的产品设计工作完成之后需做设计复盘,总结产品设计时出现的问题,在设计沟通会上提出,设计师讨论商议,提出有效的解决方案

    5. 设计走查

  6. 产品开发过程中,前端写好页面之后,应沟通设计师查看页面效果,有问题及时修改,确保页面的高还原度

  7. 产品测试时,设计师应参与产品的体验以及页面测试,页面问题提交对应项目组的TAPD中,并跟进开发的处理情况

    设计规范

    基础规范

  8. 商城整体页面风格需保持一致性

    1. 色彩
    2. 字体
    3. 间距
    4. 布局
    5. 断点
    6. 层级
    7. 圆角
    8. 透明度
    9. 阴影
  9. 页面保存的文件格式需为XD或Sketch

    字体规范

  10. 制定产品的字体大小,包括大标题、小标题、正文、注释等

  11. 制定产品使用的字体,UI设计默认使用苹方字体,使用特殊字体时,必须确保为免费可商用字体;如有特殊需要必须使用商用字体时,必须告知设计主管,审批通过后向财务人员提交申请

    图标规范

  12. 所有图标需要自己手动编辑或制作,不能直接使用iconfont上的图标

  13. 同一个项目/模块,图标的风格必须保持一致

    1. 大小
    2. 笔画粗细
    3. 圆角

      色彩规范

      制定产品的主色、辅色
      制定产品的字体颜色规范

      组件库

      组件库是对常用控件进行设计规范、开发、封装的可被复用的集合,组件分而治之,可被自由组合,能保证设计品质、统一用户体验、提升产研效率。
      一般包括:
  14. 通用样式

  15. 布局
  16. 导航
  17. 列表
  18. 反馈
  19. 弹窗
  20. 提醒
  21. 按钮