APP分段控件功能如何用Axure画出来

产品经理就业班,12周特训,测、练、实战,22位导师全程带班,200+名企内推,保障就业!了解详情

分段控件是指一组分段按钮,点击之后切换到相应视图。俗称分段器、标签页。

典型应用场景

原型画法(无交互)

分段控件通常由多个分段组成,每个分段由按钮和图标组成。位于导航栏内部或者下方。

(1)先画第一个分段。从“默认元件库”拖动“矩形3”到工作区,修改尺寸为125*30,移动到导航栏下方。代表该分段处于选中状态并显示选中样式。

(2)再画第二个分段。从“默认元件库”拖动“矩形1”到工作区,修改尺寸为125*30,移动到第一个分段后面,代表该分段处于未选中状态并显示未选中样式。

(3)再画第三个分段。复制第二个分段,然后移动到后面。

(4)生成原型HTML并在浏览器中查看效果。

原型画法(有交互)

分段控件的常见交互效果:

  • 默认展示第一个分段的选中样式。
  • 点击任一分段,则该分段被选中且显示选中样式,同时显示对应的内容。
  • 同一时间,有且只有一个分段被选中且显示选中样式。

接下来详细讲解分段控件的交互如何画出来。

(5)按照上述的方法,重新画出三个分段。

(6)选中3个分段,然后在“属性-交互样式设置”中,点击“选中”弹出框。

(7)设置选中的样式:文本颜色为白色#00000,填充颜色为#A1A1A1。

(8)继续选中这3个分段,设置选项组名称为“分段”或者其他任意名称。

(9)选中第一个分段,设置事件“鼠标单击时”,添加动作“选中”,组织动作“选择当前元件”。

(10)同理设置其他分段的交互事件,可以复制交互事件。

(11)选中第一个分段,勾选“选中”,这样查看原型的时候默认选中该分段并展示选中交互样式。

(12)生成原型HTML并在浏览器中查看效果。

添加到APP功能库

不同场景下的分段控件功能,内容不一样,样式相对固定。

作者根据多年PM经验,总结出2种常用的“搜索”,添加到APP功能库。

分段控件(按钮)

分段控件(下划线)

注意事项

建议结合标签栏的原型画法进行对比学习差异点和相同点。

  • Android中类似的控件为固定选项卡以及滚动选项卡,可以左滑或右滑在不同的视图之间进行切换。
  • iOS中也大量采用这种交互方式,在视图之间可以左滑右滑切换视图,用户操作上更加地便捷。

分段控件可以使用文字按钮或图片按钮,但是不建议在一个分段中混用。

提供源文件下载学习https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g

相关阅读

APP工具栏如何用Axure画出来

APP单选功能如何用Axure画出来

APP开关功能怎么用Axure画出来

APP九宫格如何用Axure画出来

APP上导航如何用Axure画出来

APP下导航如何通过Axure画出来

常见的列表页如何用Axure画出来

#专栏作家#

浪子,公众号:浪子画原型。擅长于APP原型设计和产品架构。

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

题图来自 Pexels ,基于 CC0 协议

评论
欢迎留言讨论~!
  1. hi,抱歉打扰了。
    给大家推荐腾讯课堂&起点学院联合打造的6周Axure实战班,已有3000多位同学学习提升 :smile:
    在Axure实战班,你可以学到最新最全的Axure9.0,更快做出Axure高保真,同时写出规范注释

    现在报名,认真学习,下个月做出高保真。点击此处了解&报名Axure实战班→http://996.pm/7Wr3m
    :idea: 也可以加班主任微信:qidiancc520,QQ 1636629734详细了解喔

    回复
  2. 写不出有水准的内容了吗

    回复
    1. 欢迎你写出好文章给大家学习哈。
      让大家能够看懂并能够快速学会,是我写文章的宗旨。

      回复
  3. 回复
  4. 这难道不叫tab吗

    回复
    1. 也可以这样叫,文章最上面写了它的俗称。

      回复
  5. 尊重别人的分享成果,评论真是·········

    回复
  6. ·········

    回复
  7. – – 写不出新东西了吗🤦‍

    回复
    1. 欢迎你写出更好的文章,供大家学习。

      回复
  8. 你管tab页叫分段吗?

    回复
  9. 这也能水一章……………………

    回复
    1. 觉得水,欢迎写一篇diss哈,给人人都是产品经理贡献更好的内容。

      回复