火星网校
躺在家里睡大觉，不如花5分钟学个交互技能
发布时间：2024-01-18 10:47:03 浏览量：185次
标签页的定义与应用
标签页是一种选项卡切换组件，分隔内容上有关联但属于不同类别的数据集合，提供平级的区域将大块内容进行收纳和展现，保持界面整洁。各选项卡下面的内容从物理上都从属于一个页面的大容器当中，他们都对应同一个页面访问地址。
table标签页的应用场景非常广泛，无论是将复杂的信息进行分类处理，还是不同类别的功能进行分类设计，都可以使用标签页组件。如果我们细心观察，会发现很多互联网产品都使用了标签页设计，无论是传统的PC网页还是移动端的界面设计都在使用标签设计。头条号的PC后台和知乎App的首页都使用标签页的设计方式。
观察交互效果
演示地址：AxureShop原型演示
点击上方链接，打开页面后从左侧目录找到“标签页Tabs”页面
在制作table标签切换效果之前，我们先来观察标签页切换过程中的交互效果，点击选项卡后，有以下3个交互效果：
- 选项卡被选中，选中的选项卡呈现出不同的视觉效果，一般为选项卡颜色发生改变，也有一些大小发生变化的
- 选项卡下方的直线水平移动到选中项的下方
- 切换页面内容，切换页面时会有一些动画效果
交互分析与制作
线框图的绘制和准备工作假设我们已经都做好了（线框图效果如下图所示），这里就不再赘述，下面重点讲解利用Axure制作交互的思路与方法。刚才，我们已经分析了切换过程中的的交互效果，下面就需要思考如何分别实现这3个效果。
效果1：我们可以将这一组选项设置为同一个组，并且为这一组的几个选项设置相同的选中样式，这里我们设置选中后文字的颜色都变为蓝色。为第一个选项添加鼠标单击事件，添加“设置选中”动作，将当前的选项进行选中。将第一个选项的鼠标单击事件复制到其他两个选项。
选中样式
“选中”动作配置
效果2：为选项一的鼠标单击事件添加动作“移动”，移动直线到达选项一左侧的某一个位置，这里我们设置距离选项一左侧23像素的位置，垂直方向上保持不变。水平方向上的位置可灵活调整，只要保持这条直线和选项内容保持水平居中对齐即可。如果直线的宽度与选项的宽度相等，那么这里的水平位置可以设置成选项的横坐标。以我们现在做的案例说明，动作配置上选择到达（[[This.x-23]]，[[Target.y]]），动画效果选择线性，动画时间设置为200毫秒。将这个移动的动作配置，复制到另外两个选项当中。
“移动”动作配置
效果3：利用动态面板的多状态特征，来分别放置选项卡对应的几个页面。
为选项一的鼠标单击事件添加动作“设置面板状态”，将动态面板的状态切换到选项一对应的页面。进入动画和退出动画设置为向右滑动，动画时间均设置为200毫秒。注意这里的动画时间和效果2当中的直线移动的时间保持一致，否则会造成不同步，视觉上感觉突兀。
选项一切换面板
为选项二的鼠标单击事件添加动作“设置面板状态”，添加动作之前我们需要分析下，用户操作的动作轨迹。用户既可以从选项一切换到选项二，也可以从选项三切换到选项二。这两种情况下，切换页面时的动画效果是不同的，从不同的方向滑动切换。所以，在添加动作之前，首先要添加假设条件，假设在此之前选项一处于选中状态，添加动作“设置面板状态”，切换至选项二对应页面的状态，进入和退出动画效果为向左滑动，动画时间均为200毫秒。为选项2添加第二个情形用例，将之前的交互配置再复制一遍，修改假设条件为选项三处于选中状态，切换动态面板状态的动画效果设置为向右滑动，“选中”和“移动”这两个动作的配置保持不变。（选项二的配置如下图所示）
选项二切换面板
为选项三的鼠标单击事件添加动作“设置面板状态”，将动态面板的状态切换到选项三对应的页面。进入动画和退出动画设置为向右滑动，动画时间均设置为200毫秒。
选项三切换面板
好了，到这里所有的交互配置都已经完成了，最后我们再检查一遍所有的交互设置，为了方便大家检查，我们将三个选项的完整交互配置进行了截图，如下所示：
选项一交互配置
选项二交互配置
选项三交互配置
大家可以预览原型，验证我们的交互制作效果。
思考小结
在制作table切换页面的动画效果时，我们还可以设置成逐渐切换或者上下滑动切换，可以根据自己的需要进行灵活设置。在文末给大家留一个思考题，如果标签选项是在页面的下方或者页面的左右两侧，那么该如何制作标签页的切换效果呢？利用Axure制作常见的交互其实很简单，只要大家平时学好Axure原型设计的基础知识，平时多思考多练习，或者借助老司机的点拨与提醒，相信每个人都有成为交互高手的潜力，充分挖掘Axure在交互原型领域的潜力。
关注并转发后，可私信关键字“标签切换”可获取本节课案例的源文件。
【Axure原型设计】专注分享Axure基础教程、交互案例以及经验技巧，并不定期赠送各种资源福利，包含：系统组件库、页面模板、实战案例等。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
