扫码阅读
手机扫码阅读

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

71 2024-03-13

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


步骤一:约定规范
    如图,与开发、UI约定组件规范,并维护在独立文档中。



步骤二:使用模板

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


那么,规范与模板应该怎么写?
本系列将通过“通用、输入、输出、反馈四类约43个常用组件及3篇页面(表单页、列表页、详情页)写法,将规范与模板分享予您。

=========强烈建议点个【关注】【收藏】不迷路=========

本期组件:级联单选器
组件概述:当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。
一、 约定规范
本节主要与开发、UI约定默认实现内容,并明确通过哪种形式约束交互;
本节内容可通过一份规范文档维护。
1.基础样式
默认、悬停、完成样式与常规输入框一致。

2. 完成样式

+完成样式可定义:

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

  • 显示最后一级:


产品可控参数

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

3.一键清除

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

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

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

产品可控参数

+带清除:是/否

4. 展开面板

+展开收起:单击输入框,展开面板;点击输入框之外则收起

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

  • 子菜单触发方式:

    • 点击触发:点击父级,切换子集内容

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

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

  • 路径记忆:收起面板,记忆上次路径

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


产品可控参数

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

  • 父级一

    • 子集一

  • 父级二

    • 子集一

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

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

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


5.选项显示

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

产品可控参数

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

6.选择方式

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

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

产品可控参数

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

7.面板滚动

面板滚动:内容过多,则面板需要滚动显示

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

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

  • 展开时,保留上次停留位置;无法保留(如页面重新载入)则:

    • 已选,默认定位已选项

    • 未选,回到第一个

8.异常样式

+超出显示范围

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

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


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

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

产品可控参数

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

9.其他

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

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

产品可控参数

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

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

2. 产出模板

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

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

+组件名称:规范-级联单选器
+提示文案:请选择

+选项清单:

  • 父级一

    • 子集一

  • 父级二

    • 子集一

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

+默认选项:无

+子菜单触发:悬停

+选择方式:最后一级

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

+带清除:是

+禁用:无

+可搜索:支持,搜索方式默认为半匹配

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

原文链接: http://mp.weixin.qq.com/s?__biz=MzI1NTUwODc4OQ==&mid=2247484074&idx=1&sn=836d8fe815f0ecd5d613ceb442dfe066&chksm=ea35aaf0dd4223e6bfed1f4e4923e5bcb0f7efe08543cfecb618bd31483e895548a3b3bab27d#rd