为啥微信保证只有4个底部TAB？

Posted 2023-04-26

参考技术A 张小龙的分享说到：设计就是分类，分类是人类大脑的识别模式，分类是化繁为简的方法之一，微信保证只有4个底部TAB。

限制数量好理解，但为什么是4个？5个不行吗？

再一想，发现很多移动APP的底部Tab，以及android原生系统的底部Dock上的条目，数目基本都是4个，少数5个或3个。

开个矫情的闹洞——为什么？某种规范？仿照沿袭？共同认识？

没有查到明确的说法，试着从以下几个点分析原因：

导航即属于框架，也属于“门面”，受用户频繁感知和使用，特别是常驻的TAB导航。如果TAB数目多，多少会增加用户的视觉负担。

另外，导航栏上的TAB不止那个按钮和标签，而是代表那整个页面以及下层的信息。从用户心理感受来讲，同一个层级的页面心理距离是一样的，顶层页面的距离是最近的，距离越近感受越强烈。导航栏上的TAB越多，意味着顶层页面越多、信息越多，给用户的心理感受越 “重” ，越有压迫感。对于手机这种近身、小型的移动设备，是宜少不宜繁，所以，要尽量少。

乔治·A·米勒神奇的数字7±2 ：年轻人短时记忆的处理容量是7±2个单元。

Cowan：年轻人短时记忆以及感知的处理容量是4个单元（小孩和老人更少）。

具体该是多少还是个有争议的话题，但不管怎样，少一些总是没错，加上要照顾不同年龄层次的人，4个或更少是更稳妥的。

参考： Wikipedia - The Magical Number Seven, Plus or Minus Two  

先说一个体验设计的前提：按钮要足够宽——不会误触旁边的按钮，用户才能放心大胆的按下去，否则用户操作时难免要揪着心。最好是有手指宽，甚至更宽——“闭着眼”都不会按错，这会让用户感觉轻松。导航是常用的操作，必须保证简单轻松的体验。按钮太大又限制了数量，所以这需要平衡。

回到问题：为了保证顺利持握，智能手机屏幕宽度大约是4-5指宽。（可以一只手抓另一手掌感觉一下，像鼓掌的姿势）

所以为了保证体验，横向导航TAB数目不超过5为宜。而屏幕有大有小，为了兼容小屏手机，又按小的宽度算合适，所以是4个。

屏幕宽度限制，实质是手的限制，有点马屁股决定铁轨宽度的意思。

信息结构有多种，典型的是层级结构，TAB导航属于这类应用。

层级信息结构的设计本来就要讲求广度和深度的平衡。顶层是访问其他信息的“必经之路”，选项太多、选择太多，会造成认知负担，需要慎重考虑。

除了当前需求，还要考虑未来扩展，虽说基础的信息结构搭建好之后就不该轻易改变，但信息结构设计毕竟是服务于产品表达的，考虑了未来的设计才更能保证不轻易改变。

如果顶层信息分类很少，比如1个，那跟本不需要TAB导航。

如果顶层信息分类很多，比如多于6个，也许底部TAB也不是最适合的导航（侧边抽屉，网格等更合适）。

所以，底部TAB导航 这种设计本身就是一种过滤——只有顶层信息分类较少的情况下才会被选择。

a、归根究底，不管哪个因素，都有来自人本身的“约束”——或生理或心理或大脑。

b、这个数字，是既考虑了产品的表达需要，也考虑了用户的需要和约束，权衡而得的。越少越好，不超过5个为宜，具体还得看产品。平衡，人与机才能良好地结合，才能高效能地解决问题。如唐纳德·A·诺曼所说：人加上人造物才是智慧。我们和工具一起，这才是一个强大的组合。

微信小程序自定义tabbar底部菜单

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

在自定义 tabBar 模式下，为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

app.json 中添加 tabBar 字段：

"tabBar": 
  "custom": true,
  "color": "#666666",
  "selectedColor": "#FF5F15",
  "backgroundColor": "#ffffff",
  "borderStyle": "white",
  "list": [
    
      "pagePath": "pages/index/index",
      "text": "首页"
    ,
    
      "pagePath": "pages/service/service",
      "text": "服务"
    ,
    
      "pagePath": "pages/order/order",
      "text": "订单"
    ,
    
      "pagePath": "pages/user/user",
      "text": "我的"
    
  ]

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

添加自定义 tabBar 代码文件，在项目根目录添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

这里我使用了 vant-weapp 的tabbar组件，所以需要先安装下vant：

npm install @vant/weapp

文件代码：

// custom-tab-bar/index.js
Component(
  data: 
    active: 0,
    list: [
	  
	    text: '首页',
	    url: 'pages/index/index',
	    icon: 'home',
	    activeIcon: 'home-select'
	  ,
	  
	    text: '服务',
	    url: 'pages/service/service',
	    icon: 'service',
	    activeIcon: 'service-select'
	  ,
	  
	    text: '订单',
	    url: 'pages/order/order',
	    icon: 'order',
	    activeIcon: 'order-select'
	  ,
	  
	    text: '我的',
	    url: 'pages/user/user',
	    icon: 'user',
	    activeIcon: 'user-select'
	  ,
	];
  ,
  methods: 
    onChange(event)  // 切换tab页面
      this.setData( active: event.detail );
      wx.switchTab(
        url: this.data.list[event.detail].url.startsWith('/')
          ? this.data.list[event.detail].url
          : `/$this.data.list[event.detail].url`,
      );
    ,

    init()  // 设置tab的active下标（icon）
      const page = getCurrentPages().pop();
      const route = page ? page.route.split('?')[0] : '';
      const active = this.data.list.findIndex(
        (item) =>
          (item.url.startsWith('/') ? item.url.substr(1) : item.url) ===
          `$route`,
      );
      this.setData( active );
    ,
  ,
);

// custom-tab-bar/index.json

  "component": true,
  "usingComponents": 
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  

<!-- custom-tab-bar/index.wxml -->
<van-tabbar 
  active=" active " 
  bind:change="onChange"
  inactive-color="#999999"
  active-color="#f35000"
>
  <van-tabbar-item class="custom-tab-bar-wrapper" custom-class="custom-tabbar-item" wx:for="list" wx:key="index">
    <iconfont slot="icon" name="item.icon" size="36"/>
    <iconfont slot="icon-active" name="item.activeIcon" size="36"/>
    <view class="text"> item.text </view>
  </van-tabbar-item>
</van-tabbar>

/* custom-tab-bar/index.wxss */
.custom-tab-bar-wrapper 
  display: flex;
  flex-direction: column;
  align-items: center;


.custom-tab-bar-wrapper .text 
  font-size: 24rpx;


.custom-tab-bar-wrapper .tab-icon 
  width: 40rpx;
  height: 40rpx;


.custom-tabbar-item 
  width: 100% !important;

在tabbar的page js中的onShow方法中加入：

// pages/service/service.js
onShow() 
  this.getTabBar().init() // 设置tabbar active状态
,

然后在微信开发者工具，【工具】-> 【构建npm】，重新编译。

tabbar中的图标是用的 iconfont 全局组件，详细使用参考另一篇博客：微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)