如何在WordPress文章或页面中加入Tab标签页

微信公众平台下方的选项卡是通过“自定义菜单”功能实现的。方法如下：

1. 开通自定义菜单，点击进入并开启，进行菜单的编辑；

2. 菜单最多可以设计为两级，二级菜单对应一级菜单的跳转和响应；

3. 发送信息 可以选择文字、图片、语音、视频，素材库中的图文消息等。

移动端产品最难的地方就是在很小的屏幕上展示出所有的业务。有了屏幕的限制，加上移动端的客户碎片化阅读的习惯和高流失率。特别是电商类移动页面，更难展示出来。所以才有了像列表式小ICON展示方式。电商的标准配置的首页都会将banner保留下来了，作为运营推广最重要的手段之一。而电商app是要展示内容最多也是最难做的一类app。既要保证业务首页展示完整性，还要保证用户体验。所以在每一个页面设计时都要讲究一些技巧和思考维度。

移动页面设计方法：

一、首屏页面需要展示的内容

首先进入app，移动页面的时候，首页首屏就要把业务给说清楚。拿电商app为例子，首先统一的banner。因为电商促销活动是拉动消费最大的源泉。而banner是很好展示活动页面的地方。4到6个banner就能牢牢抓住用户贪便宜的心理。而且banner作为运营位也可以作为销售的广告位进行出售。所以一开始就要看见banner是很好的展示。接下来电商会展示1排或者2排小icon。这些icon相当于web端的分类类目列表作用。起到了让用户知道有哪些卖的东西和哪些服务可以做。当然像淘宝和京东这类的就是一个大业务，类目也多。而小电商网站的ICON往往是一个分类。再往下面的页面展示内容也都不同了。淘宝和京东会有秒杀品，秒杀品起到的作用就是流量品的作用。流量品是电商带动流量的基础。有了流量品才有了盈利品一说。大量流量进入app，才会盈利产生。之后的往下的页面都是超出一个屏幕的，用来展示电商每个细分类别中最好的商品进行展示。用大量的品类和优惠价格打动用户进入进行消费。

小结：电商首页设计思路，从上往下思路是：通过banner活动拉动流量（产品拉新活跃用户，让用户进来），展示全部服务类别（用户知道产品有哪些商品和服务），秒杀用流量品带动购买量（让用户知道该商品和服务在我这里很便宜），首屏后的页面展示各大类别（方便用户进入沉浸式浏览方式）。

二、底部导航栏怎么展示

底部导航一般性分为4个到5个。拿电商最基本的底部导航栏设置是首页，分类，购物车，我的页面。首页已经说过了。底部导航这样安排的用意依次是首页，起到作用是告诉用户，这里是卖什么的，用户可以在这里找到什么、得到什么。然后通过第2屏幕到第6屏幕左右的浏览让用户彻底明白这里的能买到什么，顺便让用户进入心智模型里。彻底进行逛街浏览的心理。分类页，用户已经知道你是卖什么的了，那用户就要找到自己最需要的东西了。分类页面起到搜索的作用。但这里的搜索与首页顶部的搜索框还不一样。因为分类的搜索带有比价心理和一定不确定性，但是却是让用户导流进入的商品页面最好且更直接的方式。这里顺便说一下三种基本搜索方式：搜索框式搜索，分类类目式搜索和推荐式的搜索方式。接下去购物车，作为电商现在最基本的tab类目。当用户把想要买的东西都扔到购物车里的时候，符合用户在逛超市时想要付钱的心理。购物车不仅仅起到提示的用户想要购买的心理。也是不断提醒用户要付钱的过程。最后一个的个人页面，起到个人后台的作用，管理自己够后的一系列状态。所以整个tab底部导航从左到右就是用户购买过程一个心理写照。

三、快速抓住用户心理

上面首页和tab页都说明了用户购买心理过程。电商产品上为了快速抓住用户，往往采取原价多少，抢购多少。因为用户购买心理非常直接，谁便宜就买谁。这是人类的天性，无法改变。这种通过页面展示上，划去原价，标红现价的做法会就是抓住这个心理。还有秒杀品，有时间限制，不简单促使用户快速下单的心理。如果该用户买到该便宜实惠的东西，一定会像朋友进行炫耀。所以他的朋友也会去进行购买。就这样，就形成了线下带动购买的过程。而线上，你往往可能买一个东西，还太少了，所以去购买别的商品凑成满多少减多少。这样让用户觉得买得越多越赚的心理。就这样快速放大用户喜欢买优惠东西的心理。电商还有通过满多少免邮费的策略进行销售。因为邮费是用户付出，总觉的不划算。但当邮费转加到商家那边，用户就会觉得很划算。所以电商的杀手锏一定是对商品价格上的把控，淘宝比京东优势往往就在价格上。但是当用户对于服务感知上升后，就是供应链和物流的比较了。所以从电商产品可以看出产品时抓住一个用户的需求点，然后进行不断放大过程。

四、快速表达自身业务和内容

自身业务就是通过首页和分类页进行展示过程。当用户点击进入页面后，一定要准确知道你所要表达页面信息。从商品列表页开始，就是表达商品内容的一个过程。再进入具体商品页面的时候，就是对商品内容进行详细介绍的过程。在每一个页面转换的过程，一定要牢牢抓住用户心理，进行每一层深入。但也要快速了解业务。比如：从一个女装分类页面进入后，女装列表页，列表页就要对页面做一个筛选功能，筛选功能就是快速让用户找到用户想要的东西。就是快速表达自身业务的过程。进入女装详情页时，我们会把该商品最重要的信息（大小，颜色，尺码等）都按序进行排列展示出来。让用户快速了解该女装的大小，尺码等重要信息后，可以快速进行做出购买决策。在移动端上，一定要让用户快速了解业务和内容，快速做出购买决策的过程。

五、页面布局到第3屏幕牢牢相扣

移动端app多数页面都是设计到3屏幕左右。电商来说，一个页面的上下信息流转的过程是十分流畅的。拿电商详情页来说，首先展示图片。对于用户来说，图片展示比文字更具有感染力。往往好看的图片就能让用户进行下单的过程。然后展示重要的信息。然用户对各种重要的信息进行了解的过程。差不多进入第2屏幕开始，就是用户评论。为什么是用户评论。因为大家都有从众心理，如果该商品购买人数多，而且评论都是好评多的话，购买的转化率就很高了。所以在第一屏幕没有决定购买时候，第二屏幕的用户评论就能很好解决用户这样心理，消除购买的犹豫。第三屏开始，就是商品详细参数进行展示。这个过程中，是增加用户购买商品的决定，保证商品质量一个过程。所以商品详情页上，从用户简单从图片和信息进行了解，此阶段容易搞定的用户已经进行下单了。然后通过用户评论，解决用户购买障碍。然后在商品详细参数，进行一步说明商品值得购买性。页面设计都是牢牢相扣的过程，也是用户心理层层深入的过程。

六、做到移动端产品闭环式沉浸式

电商移动端产品要做到用户进行沉浸式浏览非常难。因为对买东西来说，无非就三种。第一种，我知道我要买什么，买完就走。第二种，我不知道要买什么，瞎逛。第三种，上来就是来看看便宜的东西。对第一种用户，形成浏览很难。第二种，用户就是纯浏览的。针对这类的用户，电商产品绝对不单纯通过通过返回来让用户进行浏览。现在大数据推送的猜你喜欢的功能就是让产品进行闭环沉浸式的过程。包括很多推荐的功能也是让用户不断进行浏览的过程。对于第三种用户，他就是购买流量品带动基数。当他真正产生需求时，他就会转化为真正的第一种购买型用户。上面从用户角度出来，从自身电商角度出发，产品设计内部联系紧密，对流量品带动盈利品是一个很好的设计。关注，收藏商家的功能就是对产品闭环设计的补充。产品设计上从用户需求到业务服务都要形成一个闭环。让用户沉浸式浏览设计才是好的设计。

七、用完即走，用户价值为依归

用户价值就是通过流量带动各种业务扩展盈利的过程。用完即走对电商app来说，就是用户从进入app到下单离开。这才是电商app用完即走的模式。只有满足的用户需求后，用完即走才是有意义的。产品依托于用户带来价值，没有用户没有产品，电商app也就无法盈利了。如果用户体验上和产品业务展示形成冲突后，该怎么办？一定是用户体验先行，然后产品业务展示进行合理的调整，然后一定能融入产品中。以用户需求为产品设计基准点，以服务和内容满足用户需求的全过程，最后通过付费让用户感受到愉快。

最后总结：

其实移动端产品有三个重：重场景、重碎片化、重速度。移动端产品重在满足碎片化用户场景，通过更小的屏幕更快展示产品内容，和用户需求完成快速对接的过程。这是移动端产品设计最核心的用户需求满足。

测试关注点：首次无缓存情况的测试、有缓存二次请求时的测试、资源文件变更时是否会更新重新下载资源。 

在手机端里面，导航尤为重要。因为手机的尺寸问题，在设计手机网站或APP的时候，比起web端的需要考虑的更周全，尽量保持简约和易用性高。

选项卡式（tab）导航可以说是最常见的导航了，尤其是APP。大部分的APP都采用这种导航模式作为主导航，有时也会将tab导航和其他的导航模式配合，作为次级导航使用。

你现在要实现这个功能，那么也可以看看tab的JS代码，看是否有加载完成的事件处理，有的话，直接在该事件处理（添加加载下一tab页的代码），如果没有的话，自己想去实现这个效果。就相对麻烦点

选项卡式（tab）导航 可以说是最常见的导航了，尤其是APP。大部分的APP都采用这种导航模式作为主导航，有时也会将tab导航和其他的导航模式配合，作为次级导航使用。下面我们就一起来看看选项卡式（tab）导航具体是怎样的。

（1） 底部选项卡导航

底部导航是最常见的主导航模式，且这是符合拇指热区操作的一种导航模式。当在这个APP中有几个模块信息对用户来说是 功能性和使用频率相似， 并且支持使用者第一时间获取重要性最高、频率最大的信息或任务 ，同时用户可以在不同模块、信息或者任务之间进行快速的切换。

在使用这种导航时要注意，由于尺寸的限制，tab的数量最多不要超过 5个 。如果超过5个的话，而且实在不能做出取舍的话，一般的做法是最后一个标签是 “更多” ，将其他的tab放在“更多”中。

2） 顶 部选项卡导航

  顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循上至下的阅读习惯。但是顶部导航比较难进行单手操作，毕竟我们的手指没有那么长。

（3） 固定选项卡

  固定选项卡，顾名思义， 选项卡的位置和数量 是固定的，这个大家可以看一下上面的例子，例如网易云音乐。它的tab数量是4个，每个tab的位置都会固定的。

固定选项卡是安卓系统提供的三种顶级导航方式之一。它能够扁平化整个信息结构，并且支持左右滑动切换到不同的视图。 如果 需要经常切换视图 ， 内容视图有限 或者需要 让用户清楚地知道可供选择的视图 ，这几种情况下可以使用固定选项卡。

（4）滚动选项卡

  一般滚动选项卡要比固定选项卡要 窄 ，一个模块中可以显示多个（超过5个）类别的视图，并且还可以进行扩展以及自定义展示（多用在频道/模块定制中），同样可以左右滑动切换不同类别的视图。

滚动选项卡比固定选项卡使用上 更灵活 。它可以显示更多的选项，可以更多重要性和使用频率处于同一级别的功能模块、信息或者任务。同时用户可以通过左右滑动切换，展示更多的选项，这也是它为什么叫滚动选项卡的原因。

我们对选项卡式（tab）导航做了一个简单的分类。 我们在实际使用中经常是不同的导航配合使用 ，比如一直播（上方的图片），就将底部选项卡式导航和滚动选项卡式导航结合使用。知道了每种类型的使用场景之后，就可以根据自己的需要使用其中的一种或者几种，同时也可以与除选项卡式导航的其它导航共同使用。一切为了自己的产品！

转自，作者陪学；

要在你调用的地方构造:MyWidget widget = new MyWidget(this)然后在通过insertTab去添加这个widget。

您可以在火狐官方网站下载火狐浏览器，在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。

         将入口放在页面的底部，形成标签导航。目前这种导航的设计方式在app设计中非常常见，其优点十分明显，即用户可以非常直接的看到该app的功能结构。而缺点是这些功能并没有非常清晰的主次关系，同时扩展性差。因此目前标签导航建议底部的标签不超过5个，如果超过5个建议使用其他方式。

        该类导航与标签导航相似，不同的是中间的导航标签会蕴含更多的操作选项，即该标签中包含了更多的二级导航。以小红书为例，其底部导航就是典型的舵式导航，点击“+”标签会直接唤醒相机并可以导入图片/视频等内容

        对于舵式导航里的扩展二级标签，这些二级标签可以形成一种单独的导航- 点聚导航 ，从Bilibili的底部导航可以看出，点击中间的导航会弹出4个二级标签：开直播、拍摄、上传和模板创作。舵式和点聚导航的方式往往适用于产品需要特殊引导或者是凸显核心功能的场景。其缺点是功能之间无主次，扩展性差，不利于后期的功能拓展。

       将标签放到界面的上方，就会形成tab标签导航，这种导航适用于类目较多的APP作为二级导航梳理页面逻辑，布局清晰。作为一个二级导航，顶部标签导航应用于多种情境下，可以固定数量，展示有限的几个标签。也可以扩大一定的数量，变成向左滑动展现更多标签，十分灵活，但是因为在手机中左右滑动不如上下滑动方便，因此，个人认为还是不要展开太多标签。以微博和下厨房为例，这两个APP都采用了Tab页导航。

        抽屉导航是将菜单隐藏在当前页面后，点击导航入口即可像拉抽屉一样拉出菜单。抽屉导航一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，优点是可以节省页面空间，比较适合于不那么需要频繁切换内容的应用，例如对设置、关于、个人信息等内容的隐藏。以网易云音乐为例，其采用了非常标准的抽屉式导航，目前更多APP会采用抽屉导航的变式，即点击导航入口以后，以向右滑动的方式，整个抽屉页将滑动出现并且占据整个屏幕，例如小红书app的抽屉导航。

        一般位于产品顶部，通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层，可通过点击导航菜单以外的区域使其收起。下拉导航的菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置。但由于是位于屏幕上方，相对隐蔽而且不能结合手势操作，所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容。下拉导航还有一种变式，就是下来菜单中展示两级甚至多级，一般在电商产品中比较常见，因为品类和筛选条件众多。

       主要功能入口全部聚合在页面，让用户做出选择。这样的组织方式虽然无法让用户第一时间看到内容或执行操作，用户的选择压力也比较大。但却能够让用户整体上了解APP提供的服务，从而选择自己所需要的那个服务。这种导航于一些提供的服务较多或者类目较多的APP，例如支付宝、淘宝等。

       宫格导航的应用很广泛，也产生了很多变种，以百度贴吧为例，其在应用宫格导航的时候，将功能进行了分类并且用标题加以区分，使用户更容易从众多功能中找到需要使用的功能。

       还有一种变式，是可滑动的宫格，这种设计适合于宫格内容较多，但是不想占用太多屏幕空间，于是用户可以左右滑动来查看功能内容。以小米app为例，由于功能较多，但是不希望占用较多屏幕面积，因此导航只放了两行功能，但是用户可以向右滑动找到更多的功能。在宫格区域下方采用了指示器来告知客户滑动的范围。

通过列表指示类目，在右侧显示箭头表示有二级内容，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。

同样可以对列表进行分类产生变式，这样逻辑会更清晰，不知道如何确定分类名称。把分类名称去掉也是可以的。只是用间距将每一组列表隔开也能起到梳理逻辑的作用。

每一个页面就代表一个导航入口，这就是轮播导航，适用于比较简单或者结构比较扁平的APP。轮播导航能够最大程度的保证应用的页面简洁性，操作也是最方便的，只需要手指左右滑动。缺点也很明显：承载入口的数量有限，超过10个可能就多了。这种导航常见于查看图片，也经常与其他导航模式结合，作为banner广告呈现。