header_v1.7.40

web前端经典教程之选项卡经典

82天前发布

原创文章 / 多领域 / 教程
鬼谷魂 原创,如需商业用途或转载请与鬼谷魂联系,谢谢配合。

讲解网页中常用的交互特效——选项卡动画,用5个精彩的案例来剖析,相信会对选项卡有一个深刻的认识。

      在网页中,有些区域就好像是一个可以选择的按钮,当你点击这些区域的时候,有些区域的内容会做出一定的改变,我们称这些可选择的部分为“选项”,内容改变的区域成为“卡”,合起来就叫做“选项卡”。当然这是我个人的理解,百度百科对“选项卡”的解读有点抽象。“选项卡”的一个非常直观的作用就是——可让单位面积显示的内容翻几番,尤其是对于电商网站来说,能够让用户在不滚动滚动条的情况下看到更多的商品,是多么好的用户体验啊!


《一》

1. 相较于平常的选项卡,要多了两个可以控制左右切换的按钮,相较于轮播,则少了定时切换。三个圆形头像则是选项,上面文字和人像则是响应改变的内容。设计师经常会把左右两个切换按钮设置的特别细,以显得精致,相信这个设计还是能够满足各大设计师的品味的。不想侵犯别人的肖像权,所以我自拍了一些照片和文字,头发抠得还行吧?



2. 下面就是切出来的小图了,然后用这些图就可以完成上面这设计的重构了。这里的图片名称跟下方代码中的图片一一对应。



3. 下面的两块代码,分别对应着选项卡的内容区域。除了display显示不同以外,结构都是相同的,只不过局部文字和图片的名称有所变坏而已。基本上把第一个结构写出来后,都是复制粘贴,再稍微改改内容而已。



《二》

1. 该案例的选项不在同一排,设计的非常具有个性,尤其是那刻度尺,显得特别有逼格。大家也可以把这样的设计结构用到自己的在线简历或者个人网站上,这个模块可以设置为自己的职场经历,文案可以改成工作时间、公司名称、岗位内容之类的。



2. 本例素材图片就仅用到如下4张就好,其中滑过前后的选项图片整合成一张以减少http请求。



3. 部分css样式如下,因为整合成一张图片的缘故,所以在把一张图片拆分到具体区块中的时候,会用到很多背景位置这个参数来精准调节,如下所示。



《三》

1. 下面这种较为常见,选项在上、内容在下,并且都在一排。但是一个箭头和火热图标又让整个选项卡不至于太过规矩而显得死板,也是一款非常不错的设计了,常见于大型互联网商城搞大活动时的专题页。对设计师来说,那个箭头用图片会方便一点,如果对css属性比较了解,可以用border写出来。



2. 下面就是本次切出来的图片素材了,其中商品部分的图片我用了两款灰度不一样的图片来代替,到时替换成自己图片的就好,我那样命名也是为了更好的替换,如1_1,1_2,1_3,1_4,1_5变成2_1,2_2,2_3,2_4,2_5就方便些。



3. 原网页的选项卡JS内容如下,这种对设计师来说,看起来有点多了,不太适合理解,所以在实际的操作过程中,我会换成简单一点的写法,两三行就够了,毕竟选项卡的原理就是,触发哪个选项就激活哪个选项,并且该选项对应序列号的内容也做改变。

《四》

1. 跟上例的结构差不多,只是选项和卡之间没有空隙,而是用颜色块来区分,而且选项本身有一定的上滑动画效果,让激活的区块显示的更加直观。



2. 图片素材如下,未展示完。在实际做教程的过程中,就不一一替换图片名称了,我们学的是原理,文案和图片的改动那是再简单不过的事了。



3. 下面这个结构就对应着上面动图的一个商品区块,其他的商品区块复制粘贴就好。因为商品数目比较多,这些代码复制和粘贴的次数就多,但是核心结构就是这样一个而已,在企业的实战过程中,也就只用写这样一个结构,其他的都是循环出来的,开发人员只要负责开发出模版就好,具体商品的上下架、价格的更换都是负责管商品的PM在系统后台操作的。



《五》

1. 动图效果如下,但是在网页中其实很好看的。人物不用被限制在固定的盒子里,犹如打破桎梏,有一种脱颖而出的感觉。激活的选项部分跟内容区块又能组合成一个特殊的结构,设计的很是巧妙,不得不佩服这样的设计师,脑洞真的不是一般的大。



2. 切出来的素材如下所示。这里超出部分的人物的切图被单独切出来,这是一种方式,当然也可以把人物切成完整的一张,考虑到有文字内容压在人物上面,所以如果切完整的人物,最好把文案跟人物放在一起切,不然还得加多一个结构。



3. 商品部分的代码如下所示,这些小区块的位置都比较率性,基本上都有通过定位来控制了,这样的话,css代码部分会有很多关于位置的设置。



上面五个案例都是围绕选项卡来讲的,出成教程可以说非常系统和全面了,这放在市面上的培训机构还是网络课堂,都是很少见的。企业不太欢迎培训机构出来的原因之一,就是因为培训机构讲的不够系统,一般学会这个效果就只会这个效果,不能把这些效果的知识点串联在一起,导致学员的知识体系就像空中楼阁一样。而我曾经在做执行层的时候,有过多方面的积累,我讲课可以旁征博引、厚积薄发,这也是为什么有那么多培训机构存在,而我还敢出来做个事情的原因,因为我自信可以比他们做的更好。相信大家看我各个案例的来源就知道,有的来自电商、有的来自旅游、有的来自教育,有的来自游戏,这一点一滴来自于从2015年开始的积累,要知道一些大型互联网商城像京东,当时要是没收藏,他们的专题下了就再也看不到了。



上面的两个和下面的两个,我就不录成视频教程了,一个知识点如果讲得太多,难免有共同的部分而显得啰嗦,在此给大家增添点设计灵感就好。



上面的选项卡效果,都非常的精致,学会上面5个的话,我相信你可以驾驭各种款式的选项卡开发了,但是目前视频教程还没有录出来,主要是我的这种讲课风格讲求旁征博引、厚积薄发,我自己都有点驾驭不了了,非常的耗时耗力。我从收藏的网页中获得属于该效果的源码,其中的层次结构和语法难度其实都不太适合做教程,我要精简到最容易让人接受的程度,也方便我讲。为了能够让这样的课程被人发现,我还得绞尽脑汁写文章,为了便于理解还得做动画。今天也到了十一月份了,我如果按照这样一个知识点讲4~5个视频教程的话,那我展示出来的文章数量势必很少,而流量大都累积在那些早期的设计师手里,没有流量对我自主创业也好,还是明年找工作,都极为不利,所以只好在下面给大家解说一下课程的大纲,不然按我前几期的写作风格,势必要放上其中一个案例的全部教程。



1

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功