原型说明咋写-级联复选器

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

如图，Axure可将带说明的通用组件置入元件库，出原型时使用；开发看到组件，则使用约定规范；墨刀同理。【PS：想了解word如何使用，请评论留言哈】

本节主要与开发、UI约定默认实现内容，并明确通过哪种形式约束交互；

本节内容可通过一份规范文档维护。

1.输入框规范

默认、悬停、完成：需有对应样式

输入框完成样式

• 平铺展示：框内以标签形式展示选中项，排版为响应式布局

  • 标签按选择顺序排序

  • 标签带删除按钮，点击直接删除，下个标签自动补位

• 合并展示：再起一个标签，按已选标签之外计数，如：已选2个为+1，已选3个为+2

产品可控参数

• 完成样式：平铺展示/合并展示

标签完成样式

• 显示完整路径：不同级别选项通过“/”区分

• 显示最后一级：即只显示最后一级

产品可控参数

• 标签样式：显示完整路径/ 显示最后一级

一键清除

• 无选项时悬停，不做改变

• 有选项时悬停，右侧图标切换为“清空”状态，点击清空选项。（注：点击清空图标之外，为选择器基础交互）

产品可控参数

• 带清除：是/否

• 展开收起：单击输入框，展开面板；点击输入框之外则收起

• 展开方向：默认向下向右，当空间不够时，需往空间足够方向展开

• 路径记忆：收起面板，记忆上次路径；重新载入页面，则回到第一个

3.面板说明

默认、悬停、选中

• 需有对应样式

• 选项按级别从左往右排列，一般到第三层级

• 子菜单触发

  • 点击触发：点击父级内容区域，切换子集内容

  • 悬停触发：鼠标悬停哪个父级，则切换哪个子集

• 选中交互说明

  • 点击可切换选中

  • 选中子集，父级路径选项有对应样式

  • 选中父级，则全选子集

产品可控参数

• 选项清单：建议通过说明维护选项，可通过序号区隔方式列出选项

• 选项排序：默认按清单顺序排序

• 默认选项：即默认选中哪个选项

• 子菜单触发：点击/悬停

选项说明

• 可自定备选项显示内容，一般用于显示子集数量

产品可控参数

• 选项显示：显示一级子集数量

选择方式

• 通过点击多选框完成选择，方式区分如下：

  • 选最后一级：可勾选任意级别选项，但勾选父节点真正选中的是末子节点

  • 选任意一级：可勾选任意级别选项，而不关联子节点

产品可控参数

• 选择方式：最后一级/任意层级

面板滚动

选项超过5个，则滚动显示（注：首个超出选项显示一半，以引导用户可滚动）

4.异常样式

超出显示范围

• 选项个数超出：超出一行，则输入框向下响应式拓展

• 已选项超长：超出部分省略

• 选项长度超长：拓展面板宽度，但不超出窗口边界

待选项为空

• 整体无数据：面板提示“无匹配数据”

• 个别选项无数据：此选项不显示“向右箭头”

禁用

• 分为选择框禁用、选项禁用，需有对应样式。一般要说明什么原因导致的禁用

产品可控参数

• 禁用：XXX事件会导致选择器禁用 / 导致某选项禁用

5.其他

• 可搜索：支持通过输入关键字，从待选项中搜索结果

• 影响事件：获取焦点、失去焦点、选中选项都可以产生影响其他组件的事件

产品可控参数

• 可搜索：无需/支持，搜索方式默认为半匹配

• 影响事件：选中选项，如果是XXX，则显示XXX组件

组件名称前加个“规范”，便于团队识别规范组件

模板可直接写入注释，并存为Axure/墨刀元件库

• 组件名称：规范-级联复选器

• 选项清单：

• 选项排序：默认按清单顺序排序

• 默认选项：

• 子菜单触发：悬停

• 标签样式：显示完整路径/

• 完成样式：平铺展示

• 带清除：是

• 选项显示：无需

• 选择方式：选最后一级

• 禁用：无

• 可搜索：支持，搜索方式默认为半匹配

• 影响事件：选中选项，如果是XXX，则显示XXX组件