原型说明咋写-卡片

开发吐槽原型说明不清晰，领导催促原型要快细节再说，真是夹缝中生存的产品。
今天教大家一个方法，既快又全。【文末提供模板，可直接用】

本节主要与研发约定默认实现内容，通过规范文档维护

1、样式：通过矩形包住信息，矩形可以是线框也可以是色块，具体由UI定义

2、信息：常用于跳转详情页，所以仅需显示关键信息，可根据实际情况设计，如

• 标题+内容概述+操作

• 标题+图像预览+内容概述+操作

3、尺寸：通常配合栅格使用，具体尺寸由UI决定。

页面中每个卡片，UI都需提供以下样式

1、空数据：自带“空数据”方案，对应内容为空时使用

2、预加载：自带“加载中”方案，数据读入前显示此样式

1、浮起：如果点击卡片有交互，则鼠标移过时需浮起

本节主要与研发约定原型中可控制的参数，也通过规范文档维护。文中会提供示例参数，及参数填写说明

1、数据来源：一般卡片内容会详细说明，这边仅做补充

2、内容超出方案：滚动/自适应，未说明默认“滚动”

• 滚动：内容超出显示区域，则纵向滚动显示，UI需提供滚动拉条

• 自适应：内容超出显示区域，则向下拓展尺寸，但会影响页面布局

  ‍

三、输出说明模板

组件名称前加个“规范”，便于团队识别规范组件；模板可直接写入注释，并存为Axure/墨刀元件库

卡片样式在不同场景有不同样式，具体由产品设计原型。

• 组件名称：规范-卡片

• 数据来源：请看卡片内容说明

• 内容超出方案：滚动