原型说明咋写-开关

0 评论 1610 浏览 7 收藏 4 分钟
B端产品经理要负责对目标行业和市场进行深入的分析和调研,了解客户的需求、痛点、期望和行为,找到产品的价值主张 🔗

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

步骤一:约定规范

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

步骤二:使用模板

如图,Axure可将带说明的通用组件置入元件库,出原型时使用;开发看到组件,则使用约定规范;墨刀同理。

那么,规范与模板应该怎么写?

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

本期组件:开关‍‍‍‍

组件概述:滑动开关用于在两个互斥对象进行选择,表示两种相互对立的状态间的切换,多用于触发“开/关”。

一、约定规范

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

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

1. 样式规范

  • 不同项目中,可自定义打开、关闭的颜色
  • 默认开启状态为主题色,关闭状态置灰
  • 禁用状态则在原色调下增加50%透明度后颜色

2. 交互规范

  • 热区为整个按钮
  • 单击切换开关状态
  • 显示气泡提示/文字提示,提示内容跟随开关改变
  • 常驻提示一直存在,通过主题色区分开启状态提示内容
  • 气泡提示则鼠标悬停时显示,且禁用状态也需显示

3. 可控参数

  • 状态:说明默认为开启还是关闭(建议通过样式区分),还需说明是可用/禁用
  • 带提示:常驻提示/气泡提示,并说明开启的提示文案、关闭的提示文案
  • 前置影响:如什么情况会导致按钮切换为开/关,或禁用
  • 后置影响:如打开/关闭时,显示/隐藏输入框、按钮等控件,或启用某一类特定的算法‍

二、产出模板

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

组件名称:规范-开关‍‍

  • 状态:开启,可用
  • 带提示:气泡提示,开启:XX功能可用;关闭:XX功能不可用
  • 前置影响:暂无
  • 后置影响:打开/关闭时,显示/隐藏XXX输入框

结语

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

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

题图来自Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!
专题
12487人已学习19篇文章
机器人行业是一个新兴的行业,国内做的公司不多。本专题的文章对整个机器人赛道进行完整的梳理,在输入输出的同时,体验时代带给我们的冲击感。
专题
20025人已学习13篇文章
本专题的文章分享了产品经理面试题和解答思路。
专题
15514人已学习12篇文章
逻辑图是用图标符号、说明文字以及连接线等,形象化地表达复数要素之间的相互作用关系。本专题的文章分享了如何绘制逻辑图。
专题
12469人已学习12篇文章
瑞幸咖啡和茅台的这次联名合作,无疑让联名营销这类营销方式又掀起了热度。本专题的文章分享了联名营销指南。
专题
11874人已学习12篇文章
金融产品的流程与常见策略规则类型是从事相关行业人员需要了解的重要内容。本专题的文章分享了消费金融APP流程详解。
专题
11818人已学习12篇文章
对着互联网行业的不断发展,如今很多传统行业都与互联网想结合,医药行业也不例外。本文作者分享了关于互联网医疗的运营知识。