APP标签设计：三问Tap的标签布局设计.docVIP

APP标签设计：三问Tap的标签布局设计 　　为什么主流资讯应用都选择4Tab的标签布局？这个看似理所当然的功能设计背后有哪些前潜在的逻辑？看完文章后你可能会有个解答。 　　 　　为什么主流资讯应用都选择4Tab的标签布局？ 　　为什么它们的主Tab Menu都放置在屏幕底部？ 　　为什么放置在底部的Tab Menu不支持左右滑动切换？ 　　 　　不难发现上图中列举的三款应用都使用了放置在底部的4Tab模式，并且在Tab样式上都选择了图标+文字的信息展示。 　　1.为什么都选择4Tab的界面模式？ 　　我印象中页面布局要选用Tab时，应该遵循“5±2“的原则，即Tab的数量应该维持在这个数量区间内。下图显示了2016年12月份和2017年1月份市场主流安卓手机型号，根据数据：当前用户使用手机的屏幕尺寸维持在5.0-5.5寸之间。在这个先提条件下，Tab的数量维持在3到5个之间无疑使最好的选择。 　　 　　在网络直播和短视频还没有现在这么火热的时候，这类资讯应用大多是选择3Tab的设计，随着视频形式媒体受到用户的热捧，它们迅速跟进升级，形成现在的4Tab格局，看上去整体比较和谐，没有拥簇的突兀感。 　　Tab的信息提示以扁平化处理的小图标+文字标题的形式展示，选中的Tab与其它Tab之间以颜色高亮区分显示清晰明了，极大降低了用户进行选择的成本。 　　我个人感觉「腾讯新闻」底部Tab的布局较其它两款应用要略微紧凑一点，但是没有过分拥挤的感觉，反而迎合了整体白色的色调显得优雅大气，保持了新闻类信息传递的严肃紧凑性（之所以使用「严肃」一词，是与下文要提到的「天天快报」形成比对）。 　　2.为什么Tab Menu要放置在屏幕底部？ 　　资讯应用大都将Tab Menu放置在屏幕底部，在屏幕顶部大都选择沉浸式设计，紧跟二级Tab：按照信息特征进行标签化分类的小标题。这些二级Tab从根本上讲是隶属于底部Tab的，是对信息的进一步整合，方便用户对信息进行选择甄别。 　　按照我们平时的阅读习惯，是不是喜好先着眼于手机屏幕（信息媒介，如书本、报纸等）左上方呢？作为资讯应用，它对用户的核心价值在于媒介性，因此要保证用户以最低的时间成本获取到最新资讯，设置在顶部的二级Tab无疑帮助用户减轻了阅读压力，使得用户很快认识到产品的核心功能与自我需求。 　　而主Tab显然只是应用的扩展功能，在保证基本的信息媒介作用基础上深层次发掘用户潜在需求，是对产品基本功能的补充和扩展。二级Tab对信息进行分类，按照理解从左向右的顺序，其信息类别权重大体呈现逐级递减（不完全保证），但是最重要的是一定是默认选择的Tab。上述的三款应用中对应的则是「要闻」、「推荐」、「头条」，是面向主流用户的权重最高的信息类别。 　　当用户在最短的时间成本内获取到满意的信息后，他可以有两种选择：一是离开应用，二是探索应用更深层次的功能。底部的主Tab就发挥出它的功能，它是用户在使用完基础功能（信息获取）之后目光停留的最后区域，对发掘潜在的用户粘性和延长用户停留在产品上的时间具有特殊意义。 　　3.为什么底部的Tab Menu不支持左右滑动切换呢？ 　　在使用过程中，进行横向滑动操作你会发现此时应用进行二级Tab，即信息分类之间的切换，而不是位于底部的主Tab响应。为什么主要Tab在响应这一操作的优先级输给了二级Tab呢？ 　　同样是因为应用基础功能的需求，底部的主Tab是应用潜在功能，而横向滑动响应应该以满足应用的主体功能为主，方便用户对于信息的快速选择，这样可以进一步降低用户获取资讯的成本。 　　此外，在一些场景用户需要单手操作手机，而单手操作时用户一般握持手机下半部机身，拇指的操作受到目前主流屏幕大小的限制。将主Tab放置在屏幕底部保证用户单手握持可操作性的同时，保证更受用户青睐的滑动操作被产品的基本诉求所响应。 　　联想到更多的去验证它 　　基于这样的想法，我特意去搜索了国内主流安卓OS，小米的MIUI、魅族的Flyme以及华为的EMUI，基本上都选择在主屏幕底部设置四个基础的快速访问图标（电话、信息、联系人+其它）。微信底部有4个Tab，手Q系列是3个Tab，基本上维持了“5±2“的设计原则。 　　可不是所有的资讯应用都是4Tab 　　首先来看一组数据： 　　 　　可以看出，同样主打资讯传播的「天天快报」在同类应用的安装规模甚至超过了资深门户网易、新浪和搜狐，虽然在2017年2月份的统计区间段内呈下滑趋势，但总体规模仍然位列前三。打开这款产品，不难发现它与其它应用最大的不同之处： 　　 　　「天天快报」没有遵循其它同类产品的设计思路，它选择了更加简洁的无底部Tab Menu的设计思路，完全舍弃主流路线，仅仅保留基本的资讯诉求功能，产品的结构更加扁平化，独具产品特色。同时作为腾讯系产品，