原型说明咋写-标签

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

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

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

---

本期组件：标签

组件概述：通过一个个标签内容，形成标签组。可标记事物的属性、维度，便于后期的分类与检索

1. 约定基础样式

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

分为可编辑、不可编辑两种，对其要求如下：

1.1. 样式

1、尺寸边距：一般组件库会提供大中小尺寸，及文字边距，UI可依据此情况设计UI库

2、样式说明：标签尾部有虚线“新增”，则表示此标签组可编辑（增删改）。对颜色有要求，可单独说明。

3、排版范围：通过红色线框，框定标签组显示范围

1.2. 异常

1、空标签：为空情况需约定方案

• 不可编辑：有文案提示
• 可编辑：显示添加按钮

2、标签溢出：标签内容、数量超出显示范围需约定方案

• 标签内容溢出：标签宽度需根据内容长短自适应，宽度达到排版范围，则超出部分省略。
• 标签溢出：最后一个标签为超出标签数量，鼠标悬停显示超出标签的内容，并通过“、”隔开

2. 约定基础交互

2.1. 不可编辑标签

1、鼠标悬停：气泡显示标签完整内容

2.2. 可编辑标签

在“不可编辑标签”基础上，还有如下：

1、增加：无论是输入新增还是从备选框新增，都新增在尾部

2、删除：删除后，后续标签回退一格补齐

3、修改：在原标签位置修改，不动到整体排序

• 鼠标悬停：呈“可编辑样式”

4、拖动：支持按住标签拖动排序

• 鼠标悬停：呈“可拖拽”样式

3. 约定可控参数

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

不在原型中编辑标签内容，原型仅控制红框调整标签组范围。标签组分为不可编辑及可编辑，分别对应不同场景。

3.1. 不可编辑标签

1、数据来源：说明标签数据来源

2、显示范围：原型中拖动范围进行设置

3、点击事件：即点击标签触发的事件，分单击、双击

3.2. 可编辑标签

在“不可编辑标签”基础上，还有如下：

1、固定标签：即不可移动、编辑、删除的几个标签，样式会有区别

2、最大数量：可最多存在几个标签（含固定标签）

3、新增方式：可选手动编辑新增/从备选框选择（则不可修改标签内容）

• 手动编辑：即使用约定交互的新增逻辑
• 从备选框选择：需衔接到另一个原型

4、标签内容限制：需限制输入长度、输入内容等，否则易不可控

5、关闭事件：即移除标签触发的事件

4. 输出说明模板

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

4.1. 不可编辑标签

• 组件名称：规范-不可编辑标签
• 数据来源：
• 显示范围：原型中拖动范围设置
• 点击事件：单击/双击

4.2. 可编辑标签

• 组件名称：规范-可编辑标签
• 数据来源：
• 显示范围：原型中拖动范围设置
• 固定标签：
• 最大数量：10
• 新增方式：手动编辑
• 标签内容限制：
  • 输入长度：5字符
  • 输入内容：中文、数字、字母
• 点击事件：单击/双击
• 关闭事件：暂无

---

结语

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