扫码阅读
手机扫码阅读

原型说明咋写-开关

124 2024-03-13

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


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



步骤二:使用模板

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


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

=========当前第8篇,剩38篇=========

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

1. 约定规范
本节主要与开发、UI约定默认实现内容,并明确通过哪种形式约束交互;
本节内容可通过一份规范文档维护。
1.1.样式规范
+不同项目中,可自定义打开、关闭的颜色
+默认开启状态为主题色,关闭状态置灰
+禁用状态则在原色调下增加50%透明度后颜色


1.2. 交互规范

+热区为整个按钮

+单击切换开关状态

+显示气泡提示/文字提示,提示内容跟随开关改变

-常驻提示一直存在,通过主题色区分开启状态提示内容

-气泡提示则鼠标悬停时显示,且禁用状态也需显示



1.3. 可控参数

+状态:说明默认为开启还是关闭(建议通过样式区分),还需说明是可用/禁用

+带提示:常驻提示/气泡提示,并说明开启的提示文案、关闭的提示文案

+前置影响:如什么情况会导致按钮切换为开/关,或禁用

+后置影响:如打开/关闭时,显示/隐藏输入框、按钮等控件,或启用某一类特定的算法


2. 产出模板

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

组件名称:规范-开关

+状态:开启,可用

+带提示:气泡提示,开启:XX功能可用;关闭:XX功能不可用

+前置影响:暂无

+后置影响:打开/关闭时,显示/隐藏XXX输入框

原文链接: http://mp.weixin.qq.com/s?__biz=MzI1NTUwODc4OQ==&mid=2247484019&idx=1&sn=005876dcad738dc8f2887ce855156925&chksm=ea35aa29dd42233fe021c9f489c39a3262a6fc0305f6f93bc1cca53f7ded499ba4d23be7cfd5#rd