原型说明咋写-卡片

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

    对原型规范&说明模板不明白朋友，可查看：如何解决原型说明写不全？

    对往期内容感兴趣朋友，可查看：PCWEB端基础组件

---

本期组件：卡片

组件概述：基础的卡片容器，可承载文字、列表、图片、段落、操作，常用于页面内容展示

一、约定基础规范

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

1.  基础样式

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

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

• 标题+内容概述+操作

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

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

2. 异常样式

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

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

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

3. 基础交互

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

二、约定可控参数

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

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

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

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

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

三、输出说明模板

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

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

• 组件名称：规范-卡片
• 数据来源：请看卡片内容说明
• 内容超出方案：滚动

---

结语

本系列持续更新，喜欢的朋友请点个【关注】或【收藏】，您的鼓励是我们持续分享的动力。