快好知 kuaihz

Protopie实战教程:radio单选框

如何实现radio单选框在任何Web和APP应用中的效果,一起来文中看看~

radio单选框在任何Web和APP应用中都非常常见,效果如下:

操作步骤:

(1)从Sketch或Adobe XD导入设计内容,内容中应分别包含已选中和未选中效果的图层。

(2)我们复制一个radio-active图层“radio-active副本”,并按照箭头的方向,将其移动至“Français”radio框的位置,并记录其位置为146,98。

再次将“radio-active副本”图层依次移动至其他未选中radio框的位置并记录其XY坐标

小知识:如下图中“eclipse”的位置显示为0,0,是因为该坐标为其相对于“radio-inactive-fra”这个容器层的位置,需要特别注意。

(3)为radio-inactive-fra图层添加触发器:点击“添加触发器” – 选择“单击” – 选择“radio-active-fra”(可输入关键词搜索并选择;如果在图层栏内已选中该图层,则无需再搜索) – 点击“单击”下方的“+”号选择“移动”效果 – 在默认的“移动至”选项下方输入坐标“146,98”。

小技巧:如果只是向X轴或Y轴单向移动的话(即所有radio框的X轴坐标或Y轴坐标都相同),则可以不填写X轴坐标或Y轴坐标。但本案例中所有radio框分两排,故不适用该技巧。

(4)按照步骤3依次为其他4个inactive图层设置触发器效果,同时也别忘了为初始已选中的“English”添加同样的触发器效果

(5)在预览窗内预览效果

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:实战  实战词条  Protopie  Protopie词条  教程  教程词条  radio  radio词条  
原型

 Axure制作PRD(产品需求文...

首先这里要感谢一下@臻龙 老师,当年看的他的一篇《Word产品需求文档,已经过时了》文章,那时候我也刚刚入产品1年左右,顿时被这种PRD文档框架风格深...(展开)

原型

 B端产品原型进化录

本文作者从设计原则、色彩、图标这3个角度对产品原型设计进行了拆解。关于B端Web产品前期从流程上进行了复盘,这次从原型设计的角度来进行梳理。原型设计是产品经理的...(展开)

原型

 Axure教程:如何实现计时

一般来说,我们的手机里都自带了一个计时小工具。于是前不久,笔者突发奇想,能不能用Axure做出这个小工具,实现计时效果呢?因此,笔者将以此为案例讲讲具体怎么做。...(展开)