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

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

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

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

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

+完成样式可定义：

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

• 显示最后一级：

产品可控参数

+完成样式：显示完整路径/ 显示最后一级

+有选项时悬停，右侧图标切换为“清空”状态，点击清空选项。

• 其中，点击清空图标之外，为选择器基础交互

+无选项时悬停，不做调整

产品可控参数

+带清除：是/否

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

• 内容排布：按选项级别从左往右排列

• 子菜单触发方式：

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

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

  • 展开方向：默认向下向右，当选择器与窗口边缘距离不够放下面板时，需往距离够方向展开

• 路径记忆：收起面板，记忆上次路径

+悬停与选中：都有对应交互

产品可控参数

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

• 父级一

  • 子集一

• 父级二

  • 子集一

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

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

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

5.选项显示

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

产品可控参数

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

默认选最后一级，支持选择任意层级的选项

• 选任意级别交互：面板交互与普通选择框一致；选项样式切换为“单选框”，并继承其交互

  ‍

产品可控参数

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

7.面板滚动

面板滚动：内容过多，则面板需要滚动显示

• 无特殊要求，默认最多显示5个选项，超出滚动显示

  • 注意：第6选项需显示一半，以提示用户可向下滚动

• 展开时，保留上次停留位置；无法保留（如页面重新载入）则：

  • 已选，默认定位已选项

  • 未选，回到第一个

‍

8.异常样式‍‍‍‍

+超出显示范围

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

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

+待选项为空：面板提示“无匹配数据”

+禁用：分为选择框禁用、选项禁用，都要有对应样式。一般要什么什么原因导致的禁用

产品可控参数

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

9.其他

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

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

产品可控参数

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

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

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

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

+选项清单：

• 父级一

  • 子集一

• 父级二

  • 子集一

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

+默认选项：无

+子菜单触发：悬停

+选择方式：最后一级

+完成样式：显示完整路径

+带清除：是

+禁用：无

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

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