• 我的订阅
  • 科技

原型说明咋写-单选框

类别:科技 发布时间:2023-11-03 13:02:00 来源:人人都是产品经理

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

原型说明咋写-单选框

步骤一:约定规范

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

原型说明咋写-单选框

步骤二:使用模板

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

原型说明咋写-单选框

那么,规范与模板应该怎么写?本系列将通过“通用、输入、输出、反馈”四类约43个常用组件及3篇页面(表单页、列表页、详情页)写法,将规范与模板分享予您。强烈建议点个【关注】或【收藏】不迷路。

以下,enjoy~ 当前为本系列第6篇,剩40篇。

单选框,适用于在多个互斥的选项中选择的场景,所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。由于选项默认可见,不宜过多。若选择项超过5项,建议使用下拉选择器。

一、约定规范 本节为开发与设计师默认要实现的内容;以及产品会通过哪种形式约束哪些参数,通过一份规范文档维护。 1. 交互规范

基础状态及操作+ 鼠标移入选项,对应选项呈悬停状态+ 鼠标点击选项,对应选项切换为选中,点击范围为图标与文字区域– 再次点击已选中选项,无法取消选中– 已有选中基础上,点击其他选项则切换选中+ 禁用状态下,无悬停效果,也无法选中

原型说明咋写-单选框

排版说明+选项之间会随着选项文字数调整间距,使选项间距始终一致。+在有限横向范围内,一行放不下所有选项,则换行显示。(注:非文字换行)2. 设计规范 +可根据页面要求,定义选项间距参数等,未定义则使用默认值+可定义样式有“带边框样式”、“组合按钮样式”,未定义则使用默认样式

原型说明咋写-单选框

3. 可控参数 +状态:默认,可选禁用+可选项:如果可选项数量是固定的,则直接标明,不建议在原型维护选项,因为要照顾排版,比较浪费时间;+默认值:根据实际业务需求来确定,原型说明中需写明。+操作后置结果:选择后,将影响关联数据表数据及关联控件的使用状态。二、产出模板 组件名称前加个“规范”,便于通过此标识让团队知道此组件已编制规范。 组件名称:单选框+状态:可用+可选项:选项名1、选项名2+默认值:选项名1+操作后置结果:暂无

本文由 @产品工具库 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于 CC0 协议返回搜狐,查看更多

责任编辑:

以上内容为资讯信息快照,由td.fyun.cc爬虫进行采集并收录,本站未对信息做任何修改,信息内容不代表本站立场。

快照生成时间:2023-11-03 15:45:01

本站信息快照查询为非营利公共服务,如有侵权请联系我们进行删除。

信息原文地址:

即时设计的优势和优化体验
原型设计是每个产品经理必备的基本技能。在实际应用中,原型设计提前测试了产品与用户互动中遇到的问题,从而提高了设计效率,节约了设计成本。对于移动应用程序,原型是产品说明书,可以帮助
2024-01-18 12:15:00
Axure高保真原型:购票选座模板
...。今天作者就教大家在Axure中如何制作高保真购票选座的原型模板。一、效果展示 选择座位:点击可选座位,可以选择对应座位;再次点击已选座位,可以取消选择该座位购票限制:可以规
2023-07-20 18:00:00
好玩的B端组件丨数据穿梭框
...更好地应用与产品设计当中,希望对你有所帮助。大家做原型的时候,肯定用过Axure软件。这个软件功能强大,上手快。大多数公司都是使用这个软件来写需求、做交互。高保真原型,大家工
2023-04-25 15:00:00
SW-LIMS V14低代码平台让项目快速高质量交付
...呢?三维天地总结了以下三个步骤:1第一步,挑选成熟行业原型做前提。在开始使用低代码平台之前,我们需要先确定项目属于哪个行业或领域,是石化还是ADC,以及要满足哪些业务需求和用
2024-01-11 11:00:00
Axure高保真原型:多选下拉列表(自动生成标签)
...制作一个多选下拉列表,并且根据已选项自动生成标签的原型模板。一、效果展示1、点击下拉列表框可以弹出选项,点击选项可以选中选项或者取消选中2、根据已选内容自动显示对应的标签,并
2023-06-15 20:00:00
Axure高保真教程:在PPT里演示原型模板
产品经理在介绍、售前、培训等场合经常会运用到PPT和原型展示,来回切换的过程会比较麻烦。本文作者分享了在PPT中直接演示做好的原型的方法,一起来学习一下吧。产品经理在介绍、售前、
2023-04-20 20:00:00
Axure高保真教程:轮盘滑动控制元件移动
...者分享了在Axure中,制作一个能通过轮盘控制元件移动的原型模板,一起来看一下吧。轮盘控制元件移动是一种通过轮盘来控制元件位置或参数的方式。轮盘通常是一个圆形或半圆形的旋转控
2023-05-18 21:00:00
Axure高保真原型:多选树穿梭选择器
...位案例为例,分析如何在Axure中制作多选树穿梭选择器的原型模板,一起来看看吧。多选树在有分层的领域是经常用到的,例如不同城市下的门店、不同部门的员工等等,用多选树就可以让我
2023-07-07 13:00:00
优惠券系统从入门到精通(二)
...于某个数时自动给活动创建人发通知。告警机制详见后续原型图。库存数等于营销预算除以单个优惠券成本,打折券、满减券、赠品券、代金券单个成本的计算方式后续分享。活动时间:优惠券模板
2024-02-06 13:00:00
更多关于科技的资讯: