Axure教程:移动端的页内tab如何设计

5 评论 7551 浏览 31 收藏 6 分钟
找到工作只是第一步。我们的核心目标是,通过系统的学习和实战训练,不仅让你成功入职,更能让你具备快速胜任工作的能力,在团队中站稳脚跟。

本文分享如何用Axure做移动端常见的页内tab设计,一起来看看~

先看看效果

为什么要用tab

(1)用于区分不同类别

将不同类别的内容划分的不同的版块,使用户可以只关注想要关注的部分,对于不关注的部分隐藏起来,避免对用户造成干扰。

(2)用于分类并列类别

将同一大类下的多个并列小类分开展示,避免页面呈现内容过多,也方便用户快速找到想要查看的内容。

先看看优秀的参考,这是抖音首页上的tab切换,简洁、无任何多余的东西,现在来看下用Axure如何实现。

步骤

第一步

将APP截图拖到Axure作为参考,这样能让你看到尺寸大小,并且可以参考原图要素的位置来设置设计图要素的位置。

  1. 拖入“矩形2”,调整尺寸360*612,填充#434343;
  2. 拖入“标题三”,修改内容为推荐,调整字体大小18,颜色#FFFFFF;复制一份修改内容为同城,字体大小16,颜色#D7D7D7;
  3. 拖入垂直线,长度8px,颜色#D7D7D7;
  4. 拖入状态栏素材statebar(自行找素材);
  5. 调整好位置,调整位置有个技巧,可以使用分布中的水平分布功能。

完成后的样子:

第二步

(1)选中推荐、同城右键选中组合、再次选中设置选项组,名字为tab,然后右键转换为动态面板。

(2)将矩形也转换为动态面板,点击动态面板后的+添加state2,将state1中的  矩形复制粘贴到state2,为了区分分别在state1、state2的矩形中输入1、2。

(3)选中推荐,右键选择交互样式,设置选中下字体大小18,颜色#FFFFFF,也将同城做相同操作。

(4)然后将推荐字体大小16,颜色#D7D7D7;在属性中将选中打钩,表示默认  选中。

第三步

(1)选中推荐,在属性中双击单击事件,弹出框中选择添加条件,设置选中状态,值为false。

(2)然后设置选中状态,选择推荐值为true。

(3)选择设置面板状态,在配置动作中选中动态面板,状态选择state1。

(4)对同城做同样的操作,将向左滑动改为向右滑动。

OK神功已成。

最后展示一个更复杂一点tab原型图,小红书的高保真原型设计,虽复杂一些但原理都是一样的。

如有更好的方法和建议,欢迎在下方留言讨论。

 

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

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 请问高保真原型设计是怎么判断的呢?

    来自广东 回复
  2. 第一次学习,推荐和同城都转换成动态面板了,是如何单独选中推荐和同城来做交互,求解

    来自重庆 回复
    1. 双击转换后的要素就可以进入state1的编辑状态,然后就可以单独选中了

      来自四川 回复
  3. 我比较好奇,你这个高保真的 图是怎么来的?

    来自上海 回复
    1. 用Axure自己做的呀

      来自四川 回复
专题
13359人已学习12篇文章
产品立项,对于产品来说是其生命周期中最基础的和最重要的阶段。产品立项都有哪些主要工作?本专题的文章分享了产品立项指南。
专题
14731人已学习12篇文章
4P指产品(Product)、定价(Price)、渠道(Place)、宣传(Promotion)。本专题的文章分享了解读4P营销理论。
专题
15677人已学习12篇文章
服务设计在流程性和系统性的问题解决方面提供很好的思路和方法。本专题的文章分享了如何做好服务设计。
专题
126106人已学习18篇文章
你说你会竞品分析,我信!但是肯定写的不好,不服看看别人的。
专题
16499人已学习12篇文章
对于产品经理来说,做用户调研是一项很重要的过程。本专题的文章分享了如何做好用户调研。