不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个“大师”帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛X；老板立马认购了一批橙色盘子，从那以后以后这家餐厅火爆了，王境泽都觉着香的不行…

听完这个故事，自此我幼小的心灵里把橙色和食欲划了等号。这个烙印直到我从业前几年还一直这么觉着。同时间段，在9年义务教育的美术课本上，我得到了有生以来第一次对色彩这门学问的细致输入，了解到了各种颜色对应的含义与情绪：

这种色彩与情绪的映射关系在我的脑袋里根深蒂固 / 无法磨灭，直到有那么一场面试或者汇报，面试官/老板问我，“为什么你要选择这个颜色作为品牌色呢？”

面对着一手塑造出来的社交应用，我解释到：“因为红色代表着热闹，这个颜色会赋予这款产品热闹的氛围”。坦诚的讲，这个解释自信但空洞，颜色本身并无好坏和指向，只看你用在了什么地方，不讲究场景就别轻易定性。

这也侧面反映出来惯性思维的不断吞噬着你我的思路，过往的“经验”可以让人习以为常，也可以让人尴尬不已，取决于是否洞察的到。如果抛弃惯性思维，到底如何去定义一款产品的主色呢？

STEP 1

说实话选取一个颜色作为品牌色是一个战略决策过程，一般来说行业里一定存在一种主流颜色，像旅游行业的携程/去哪儿和途牛，还有以淘宝为代表的电商行业通常是喜庆的大红大橙。

显而易见基于这个逻辑下，有3个做法，一条路是顺势而为，一条是逆向而去，还有一条是另辟蹊径。这块的选择一定程度上并不是设计师可以决定的，需要结合整个业务的方向去判断；在旅游行业里马蜂窝选择了逆向而去，在直播行业里抖音就选择了另辟蹊径。

我们试着揣测下抖音和马蜂窝的想法，在产品的定位和策略的打法上，他们更注重的是差异化，走反方向的路突出品牌，试图在用户的心里站得住。通过这个例子你或许会发现，黑色未必死气沉沉，ta也可以色彩斑斓；黄色未必只象征尊贵，ta也可以代表青春和希望；颜色没有偏向，只看使用在什么场景上。

主色的选择更需要贴合业务战略的发展，也更多的偏向于主观。给业务提供思路和方向，判断不好业务方向的时候，多提供思路帮助其更好的匹配颜色。

STEP 2

以往的面试里，我这种好事的面试官就特别喜欢问侯选人一个问题：“一个色相里有那么多色号，为什么你定了这个色号作为品牌色？”大部分候选人乍一听都是面露难色，心里大概想着这人是个傻X吧，能问这种问题，哈哈哈哈哈哈；废话不多说，我来简单分享下我的方法：

首先以黑白两色（#000000-#FFFFFF）作为起始点设置10个梯度，然后把第一个模块定义的色相扔进去，只需要调整HSB中的H就可以，这样一顿操作下来你就得到了一个完整的色彩序列：

第二步，基于序列主观调整下颜色，确定主色的同时确保其在黑白2种背景上对比度大于4.5：1（wcag色彩可用性标准），理论上来讲梯度中间是最合适的，饱和和亮度足够就可以。

上图是我用到的色彩可用性测试工具-color review（https://color.review/）

STEP 3

当你准备好了以上所有工作，最后一步就是拓展色系了；这里采用负能量补给站小商店的品牌色“叛逆橙” #FF774A（H15 S71 B100） 作为主色并结合下google的方法开始拓展色系。

首先 - 确认同色系辅助色：我们将主色的色相加减 30° （谷歌是以10为梯度，但色相变化不大，为了效果我们以3倍作为最小单位）获得2个新颜色，即同色系辅助色。

其次 - 确认对比色辅助色，将主色的色相加上 180° 获得其互补色，即对比色系辅助色。为了和主色的类似色对应，取互补色的同类色（色相加减 15°）和类似色（色相加减 30°）。从中选取需要的颜色作为最终的对比色系辅助色。

根据色彩需求取同类色2和类似色1作为最终的对比色系辅助色，这样，我们得到了主色和四个辅助色；同理你可以推理出无色彩倾向的中性色系（这里就不展开赘述）。

最后你可以通过编码的方式，赋予每个颜色一个token（密钥），方便团队的配合和使用。

以上就是我在选取色彩的大概思路，市面上也有很多讲颜色的好文，分享大家去找找。

总结一下

随着工作经验/时长的不多增加，我们往往会对事物的存在习以为常，思维的惯性会困住我们追根溯源的想法，但需求和场景是千变万化的，所有的方法也都针对的是通用场景，标准化的解决方案未必适用你当下的处境；试着在熟悉的环境用敏锐的洞察和科学的方法突围也许是最好的办法。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

背景

经常使用或者关注资讯类产品的同学可能会留意到，在信息流中，有的标题在左图片在右，而有的是图片在左标题在右，这两种形式看似区别不大，但又似乎存在很大差异。设计师在设计时是如何考虑的？我认为这是一个很有意思的话题，所以今天就和大家聊一聊在资讯流中，左文右图和左图右文的差异。

左文右图

左文右图的样式普遍出现在新闻资讯产品中，其中包括今日头条、腾讯新闻、UC浏览器信息流以及我们的vivo浏览器信息流等等，现在就让我们从资讯平台作为切入点，对左文右图的形式进行分析

1. 左文右图符合人们长久以来的阅读习惯

按照已知经过验证的理论，即F阅读顺序（尼尔森的用户阅读视线模型），用户浏览页面的顺序是从左往右自上而下，因此左上角的信息最早触达用户。然而至文字诞生以来，多数情况下，人类普遍通过文字来获取信息，我们不否定，通常情况下图片的易识别性远优于文字，但是从信息传递的准确性以及丰富性上来说，文字的优势是远大于图片的。

所以在资讯类产品中我们更倾向于优先通过文字来识别内容，而将图片作为辅助信息，因此根据我们从左往右自上而下阅读习惯，将文字放在左边更有利于用户获取信息。我们通过一个案例来分别了解一下左图右文与左文右图的用户阅读路径是什么样的。

在上面的案例中，左图右文用户的阅读路径偏长，并且常常出现视线的折返

左文右图用户的阅读路径较短，不会有视线的折反。因此，基于效率和阅读习惯的角度来说，左文右图优势更明显。

但或许这里就会有人提出疑问 “在资讯类信息流中很大一部分用户都是因为受图片的吸引才会对该则新闻感兴趣的呀” 。的确，这是一个普遍场景，但是在前面我们也提到，图片的易识别性是远高于文字的，因此哪怕是将图片放在文字后面，对于图片的“魅力”的影响是在可接受范围内的。

2. 左文右图更有利于为用户提供统一的阅读基准位置

在资讯信息流中，为了信息展示的多样性，避免单一的信息流结构使用户感到单调，在样式上除了左文右图的样式，往往还会搭配三图、大图及视频的样式出现，而在这样多种穿插样式的情况下，左文右图能够为用户的双眼提供了一个扫读时候的基准位置，在大量、长时间阅读的过程中，极大地减小了阅读压力

3. 尽可能保持整体信息流图文阅读先后顺序的一致性

资讯流中除了左文右图的样式，还会搭配三图、大图及视频的样式出现，因此我们不仅仅要考虑单个信息流样式的阅读体验，更要保持整体信息流阅读先后顺序的一致性，这能够为用户提供较好的沉浸式体验。

4. 在视觉上更符合格式塔闭合原理

左图右文的的形式在标题文字较短的情况下，右上角就会出现视觉上的缺角，这会破坏页面整体的工整性，而左文右图的形式就很好的避免了这个问题。格式塔原理对闭合的研究中提到，人的大脑无论看见什么东西，都喜欢去将它们想象成为一个整体，如果元素太过杂乱大脑无法将其归类成为一个整体，那么视觉感受就是非常不佳的。

小结：左图右文基于它在信息获取效率和人们阅读习惯上的优势得到各大新闻资讯类产品的青睐，是较为通用的形式。那是不是就没有“左图右文”什么事了？其实不然，左图右文仍是有其优势的，并且在特定场景下，左图右文的形式的优势会更明显。

左图右文

1. 图片在左侧，第一时间吸引用户视线

在内容形式的吸引力上，视频>图片>文字，并且前面我们提到，图片的易识别性是高于文字的，因此一张高质量的图片往往能够在第一时间触达用户并形成转化。但前提要求是我们能够把控图片的质量，否则效果将适得其反，所以我们说左图右文的样式一般更适合用来承载PGC的内容。例如主打品质时政新闻的资讯产品澎湃新闻以及垂类游戏资讯社区平台篝火营地，其推荐的内容都来自专业团队的输出，对内容图片的质量有较好的掌控力，因此采用了左图右文的形式优先给用户展示图片信息，以提升用户对内容的兴趣。

2. 在带有明确目的阅读场景下，例如查找历史内容、搜索等，左图右文的形式效率更高

在用户带有明确目的场景进行信息阅读时，用户往往对内容已经有了一个大致的预期，所以这个时候如果我们能让用户第一时间识别图片，能够大大的提升用户的操作效率。例如用户在查找一篇曾经看过的文章时，当曾经阅读过那篇文章的封面出现在屏幕中时，用户便能立刻作出判断，这会比在众多文字标题中查找更为便捷。

总结

左文右图

• 通常情况下，我们优先通过文字来获取讯息，因此在一般的信息流中，更青睐采用左文右图的方式，以提升效率
• 左文右图能够为用户提供统一的阅读基准位置，在用户长时间浏览时减少阅读压力
• 更好的满足格式塔闭合原理，使信息流整体的页面更加工整

左图右文

• 左图右文常被用来承载PGC的内容。在能够确保图片质量的情况下，图片在左侧，更容易引起用户对帖子的兴趣
• 在带有明确目的阅读场景下，例如查找历史内容、搜索等，左图右文的形式效率更高

#Tips

无论是左文右图还是左图右文都各有其优势及适用的场景，但当我们在设计信息流时，我们要注意为用户提供图文阅读顺序一致的体验。

以上是个人对资讯流左文右图&左图右文的一些思考和心得，感谢大家的阅读，假设通过本次阅读能够给大家今后的工作带来一些启发和思考，那就实在是再好不过的事了:)

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

 

 

1) 数据查看

 

让我们先来回顾一下表格的基本构成，最上面的为表头，横为行，纵为列，内容区每一组展示数据区域为单元格。

 

表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加。

 

这里我推荐表格的"四维自检法“，对我们设计的表格是否合理，做出一个标准的判断。

分别是：信息降噪、呼吸适中、易读、详情查看。

 

信息降噪：分别对表格内容和视觉层面进行重要性梳理，剥离不重要的元素，使表格轻量化；

呼吸适中：保持内容和元素之间合适的间距，使表格页拥有一个好的呼吸感，将给用户营造一个舒适的操作环境；

易读：通过对需求内容的解读，对内容形式加以分类辨别，做出可读性最强的样式；

详情查看：b端系统往往伴随着表格数据类目庞大的问题，通常会采用另一种形式去展示全部信息。

 

1.1  信息降噪

 

1.1.1 精简表格内容

当表格的字段非常重要时，一定要将字段全部展示出来让用户更清晰的了解数据。

如果你的用户只需要了解部分字段，那么全部展示是没有必要的，只需在展示最重要的字段即可。

 

 

1.1.2 自定义字段展示

不同用户想看的的信息侧重不同，有时候我们无法准确判断用户看重哪些字段，还可以让用户自定义展示字段。

 

 

1.1.3 精简字段名称

当我们去设计表格的时候，通常会发现表格需要承载的信息量是非常大的，有时候为了表现出字段的准确含义，在定义字段名称时往往会非常的长。但是当这些字段同时出现在一个表格里时，过长的字段名称，又会显得冗余，让本就不大的页面空间更加杂乱。

所以当我们设计表格的时候，我们可以分析字段名称，对字段名称做精简，看看是不是少一个字用户就无法理解字段的含义。

 

 

1.1.4 添加字段说明

当字段名称过长，又必须展示，才能有效的理解字段含义时。我们可以定义一个专有名词代替，并且在字段名称后使用添加字段说明的形式，来对字段加以说明。

这样一来用户既可以清晰的理解字段含义，又可以在有限的页面空间下获取到更多的数据信息。

 

 

1.1.5 简化表格样式

早期表格的设计，出发点主要以拟物形式，以最接近现实表格的样式去设计。

但是随着互联网的普及度加深，极简的表格设计，使界面更加轻盈，让用户更加专注于数据内容。

去除纵向列的分割线，仅以浅色的横向分割线区分行，但是要注意分割的颜色不能过于浅而缺乏辨识度，部分人群对颜色的辨识度会偏低，显示器的硬件性能也会影响颜色的可辨识性。

 

 

1.1.6 减少不必要的颜色区分

表格设计中一定不要使用过多的颜色区做状态或操作的区分，过多的颜色细分会使表格变得更加混乱，影响用户体验。

对状态的区分，仅用轻量的颜色区分即可，操作栏保持主色按钮色。

 

 

1.2  呼吸适中

 

1.2.1 如何定义单元格的高度

了解单元格的结构，以及实现单元格的基本逻辑，有助于我们更好的去把控我们的设计。

单元格内的可控尺寸包含：单元格高度、文字字号、文字/段落行高、文字上下间距。

我们基于视觉呼吸感，赋予各个元素合适的尺寸，我在这里给出一套参考方案：

文字字号 = N  

文字行高 = 1.5N

上下间距 = 1.2N

单元格高度 = 内容高度 + 上间距 +下间距

 

 

1.2.2如何定义列的间距

 

首先我们要了解列的两种类型，第一种是定宽列，第二种是自适应列。

 

a.定宽列

顾名思义就是它的宽度是固定的，比如：第一列我们设置宽度为200px，第二列我们设置为300px，五六七列分别设为100px，那么我们这个列表就的宽度就等于200 + 300 + 100*3 = 1100px，在任何分辨率尺寸下你的这个列表都会保持这个宽度不变。

 

 

b.自适应列

就是列会随着分辨率变化而产生宽度的变化，比如：列表有五列，我们定义列表的宽度为界面宽度的50%，假定界面宽度为1200px，那么列表宽度就为600px，而每一列的宽度则为120px。此时我们将界面的宽度缩小到600px时，那么列表的宽度就为300px，而每一列的宽度则为60px。

 

在实际设计案例中，我们往往会面临由于每一列的内容不同，所需要的宽度也就不同，我们希望在列不多时可以保持宽度自适应，但是如果每一列都做成自适应列的话，内容多的列无法展示全内容，内容少的列空间又会很大。

所以，固定列 + 自适应列的综合运用，可以让我们更好的实现我们想要的设计方案。

 

c.列的结构

然后，我们一起来了解列的结构。每一列分为内容区和左右间距区，在固定列里面内容区和左右间距区都是保持不变的。但是在自适应列却不同，它的内容区是随界面分辨率变化而变化的，左右间距区的宽度是保持不变的(在代码里间距区被叫做Padding)。

 

 

d.固定列

当表格字段数量不确定时，通常我们会为自定义列的内容区写一个最小值(min-width),以确保字段很少时可以自适应宽度，字段较多时仍然能保证完整展示表格数据，不影响对内容的阅读。

当表格的列过多又必须全部展示时，固定必需固定的列(如姓名、任务名称、操作项等)，其他字段横向滚动。

 

 

1.3  呼吸适中

 

1.3.1 列的对齐方式

基于人的惯性浏览顺序，设计每列合理的对齐方式，能够辅助用户更的完成工作。

a.标题和内容：一般采用左对齐，更的浏览顺序；

b.有长短不一的数字时(序号除外)：右对齐，方便比较 ;

c.操作项一般放在尾列：右对齐；

 

 

1.3.2 不留空白格

从心理学的角度讲，人对未知事物会产出恐惧情绪。我们在设计表格的时候，要考虑到表格的各种展示情况，非特殊情况不出现单元格空白。

没有数量用“0”表示，没有该项内容用“-”表示。

 

 

1.3.3 选择合适的分页器

表格是一种可以承载大量数据的组件，当数据行数很多时我们通常会选择分页器，使用分页器有哪些优点：

a.快速查看：通过分页数据加载缓解服务器压力；

b.清晰易读：由于界面的空间是有限的，通过分页展示数据，有助于缓解用户的阅读压力；

c.灵活便捷：如果客户想在一页展示很多数据，可以通过分页器自行选择，还可以了解到数据的总数目。

 

 

1.3.4 收起低频的操作项

当界面空间有限、表格列数很多时，如果表格的操作项过多，会占用很多页面空间，需要有选择的展示，将低频操作项收起，用点击更多按钮去触发选择。

如果是1.0的产品，我们可以和产品经理沟通，分析每个功能按钮的优先级。

如果是上线的产品，我们还可以通过按钮点击PV(页面成功访问次数)，来了解按钮的使用频率，做出按钮优化。

 

 

1.3.5 行的排序

如果产品没有特殊需求，那么默认最近创建的在最上面。

可以用带有排序的表头，让用户自定义排序。

 

 

1.4  查看详情

 

1.4.1 详情入口

如果表格的内容项很多，我们通常会在表格上只展示部分重要数据，而其余数据放在详情页面展示。

作为详情页面的入口，通常会有两种设计方式：

a.将详情按钮放在操作项里

b.将首行的名称做成可点击样式，点击跳转至详情

 

 

1.4.2 详情页的展开形式

如果详情内容不多，没有新开页面的必要，我们可以采用展开行、弹窗、抽屉的形式，但是要注意尽量减少过多的样式，给用户增加疑惑感。

如果详情的内容很多，而且编辑的需求，建议采用新开页的形式。

建议根据详情页信息量的多少，以此采用展开行、弹窗、抽屉、新开页的形式。

 

 

2) 数据过滤

 

数据过滤是表格页很重要的组成部分，包含搜索、筛选、标签页。

这一部分的主要作用是帮助用户，梳理表格数据信息，精准定位所需的数据项。

 

 

2.1  搜索

 

2.1.1 模糊搜索

模糊搜索是指在用户搜索意图不明确时，搜索引擎将用户的查询与待检索的内容进行模糊匹配，找出与查询相关的内容。模糊搜索无法理解用户的查询意图，返回的结果中可能包括了一大批用户不想要的信息，所以在使用模糊搜索时一定要结合自己的实际场景，慎重使用。

优点：只要有相关的内容都会被检索出来，减少了精准搜索带了的记忆负担

缺点：容易把相关的信息也带出来，例如检索手机号，把相关编码也匹配出来

 

 

2.1.2 搜索

搜索是指用户在搜索时，针对某一数据字段搜索，来查找所需要的数据。根据业务场景不同，我们会查找某一字段，或者是用标签切换不同字段来查找。

优点：搜索匹配精准度高

缺点：每次只能对单一条件进行搜索

 

 

2.2  筛选

 

筛选器主要是针对内容较少的字段进行查找的一种方式， 通过筛选器的选择可以快速定位所需的数据，取消用户输入的过程，提升查找效率。一般筛选有两种形式，第一种是下拉筛选，第二种是平铺式筛选。

 

2.2.1 下拉筛选

下拉筛选就是将需要筛选的内容放置于选择器当中，通过点击选择器下拉，来选择需要筛选的内容。

优点：空间利用率高，起到了很好的收纳作用

缺点：无法直观看到所有的筛选项

 

 

2.2.2 平铺筛选

平铺筛选就是将筛选项的内容，直接展示于页面之上，通过点击选择的方式直接进行筛选。或者可以通过自定义内容的筛选。

优点：操作效率高，筛选项一目了然，支持输入更多筛选条件

缺点：空间利用率低，不适合选项太多的情况

 

 

2.2.3 如何合理的使用筛选项

当数据内容需要的筛选类目过多时，如何合理的摆放，才能提高用户的使用效率。

a.信息排序：基于用户使用场景，以目标导向为依据，将高频的筛选项排列到前面，低频的筛选项置于后面

b.默认折叠低频筛选项：当筛选项过多时，会极大的占用界面空间，使用户在阅读数据时产生非常不好的用户体验，通过展示高频筛选项、隐藏低频筛选项，将更好的提升用户体验。

c.所有筛选项都很低频：以点击高级筛选按钮的形式触发，将全部筛选项置于气泡或者弹窗之中。

 

如何判定筛选项的使用频率呢？

通常会有两种方式：

第一种是给筛选项增加数据埋点，这样一来就可以通过对用户点击行为的分析了解到筛选项的使用频率；

第二种是用户调研，通过问卷或者面谈，了解到用户的真实使用需求。

 

2.3  标签页

 标签页又叫选项卡，在组件中我们通常叫Tabs，指的是分隔内容上有关联但属于不同类别的数据集合。

 

2.3.1 默认展示常用项

在使用标签页时，有一点我们要特别注意，通常在B端设计中，我们会把标签页的位置定位在最常用的一个选项。

 

2.3.2 增加数据条目

如果是订单一类的分页，我们还可以将数据条数，展示在标签右侧，用来帮助用户快速了解到待办数据量。

 

 

3) 数据操作

 

3.1 分类

数据操作即对表格的数据进行操作，首先我们对数据操作进行分类。

 

按控制范围分:

a.单行操作

b.批量操作

c.全局操作

 

按操作属性分：

a.新增数据

b.编辑数据

c.删除数据

d.业务处理

 

3.2 如何合理的设计数据操作

 

第一步，先判断控制范围

 

 

第二步，判断摆放位置

 

第三步，优化信息层级

 

 

以上是操作项和筛选项较多的情况，那么不多时，我们还是要合理利用空间，灵活设计

 

 

以上就是《如何设计表格？》的全部内容了，后续还会努力更新更多B端设计分享！

 

与君共勉

 

转自：站酷

作者：三斤饺子 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

你一定知道“摩尔定理”，对许多IT人而言那是这个行业最基础法则，然而，在我看来，另一个和摩尔定理齐名的“梅特卡夫定律”被严重地低估了。

和摩尔定理指出硬件性能进化逻辑不同，“梅特卡夫定律”在业务层面对互联网时代的发展规律进行了高度概括的总结，这个抽象总结在过去、现在和未来都会继续指引互联网的发展方向。

什么是“梅特卡夫定律”

“梅特卡夫定律”的表述非常简单——一个网络的价值和这个网络节点数的平方成正比，用公式表述就是：V=K×N²，其中V代表一个网络的价值，N代表这个网络的节点数，K代表价值系数。

那么，这个看似极其简单的公式为什么会受到互联网人如此高度的推崇呢？

在回答这个问题之前，我们还是简单来了解一下“奇人”梅特卡夫：

罗伯特·梅特卡夫1946年出生于纽约布鲁克林，年轻时的梅特卡夫是一个标准的学霸，在麻省理工获得了工程学和管理学的双学位，之后又在哈佛获得了博士学位，毕业后他迅速加入了当时的科技巨头施乐。

在施乐工作期间，他发明了当今局域网使用最广泛的协议之一——以太网，这让他年纪轻轻就一跃成为“计算机先驱”。

△ 梅特卡夫于1973年绘制的以太网草图

然而年轻的梅特卡夫并没有躺在这一成果上坐吃山空，而是在人生33岁的时候决定把自己掌握的技术转变成商业产品，1979年，他创办了著名的3Com公司。

3Com公司是做什么呢？通讯基础设施，你可以理解为美国的华为（事实上3Com后来还和华为成立过合资公司）。在管理3Com公司销售团队的时候，梅特卡夫发现当时客户对他们的主力网卡兴趣不大，这时候他展示了自己作为技术人超强的逻辑说服能力，他亲自制作了一张幻灯片，画了一张图，列出了网络价值和成本之间的关系。

他想通过这张简单的图清楚地说服客户——买网卡的成本随着时间是线性增长的（N），但网卡构成的网络价值则是呈指数级增长的（N²）。言外之意就是你们现在买网卡会觉得不划算，但随着买的人越来越多，它的回报将是指数级的。

作为3Com公司的头号推销员，梅特卡夫在美国科技界的各个场合都在宣传他的这一理念，这引起了一位叫乔治·吉尔德的科技专栏作者的注意，吉尔德长期在科技界浸润，直觉告诉他这页其貌不扬的PPT里可能藏着一个极具价值的判断。

1993年，乔治·吉尔德在《福布斯》杂志上系统地阐述了梅特卡夫的关于网络价值指数增长的理念，即幻灯片里那条指数增长的曲线，并把它命名为“梅特卡夫定律”。

当时美国互联网刚刚萌芽，各类网站都在快速增长，吉尔德的总结让“梅特卡夫定律”被科技界和互联网圈逐渐接受。不久之后，美国联邦通信委员会主席的里德·洪特（Reed E. Hundt）说：“摩尔定律和梅特卡夫定律”为我们提供了理解互联网的最佳角度。

而之后马克·安德森创立了Netscape，发布了网景浏览器，用户数一路狂奔，安德森在总结网景的飞速发展时，称“梅特卡夫定律是一盏明灯”。随着互联网在美国强势崛起，这个起初描述硬件网络价值的定律被外延到了整个互联网领域。

无数网站的创始人将梅特卡夫定律写进了他们的商业计划书，它在一定程度上成为无数互联网创业者和从业者的信念灯塔。

△ 3COM公司曾用于销售推广的幻灯片（梅特卡夫展示原稿）

“梅特卡夫定律”的意义

事实上，“梅特卡夫定律”在数学上是有意义的，一个N个节点的网络，它的总连接数为N（N-1），当N足够大，它接近于N²，如果把网络里的连接数直接看成是网络的价值衡量指标，则“梅特卡夫定律”是一个完全成立的等式。

那么，在现实中是否是真的这样呢？

2013年，梅特卡夫本人在《IEEE计算机》上发表了一篇文章，用Facebook从10年的实际数据证明了自己的定律符合Facebook现实中的成长轨迹。

有趣的是，同样在2013年，来自中国科学院的三位作者张兴洲、刘景洁、徐志伟也在著名的《计算机科学与技术》杂志上也发表了一篇名为《Tencent and Facebook Data Validate Metcalfe’s Law》的论文。论文中用腾讯和Facebook两个公司的数据验证了它们的月活数据和它们各自的估值（市值）是符合“梅特卡夫定律”的。

正是由于“梅特卡夫定律”的存在，让无数互联网人对规模和增长前仆后继，因为他们深刻地理解，规模能带来指数级的回报，这一回报通常会超出正常的预期。

事实上，梅特卡夫定律的确在解释无数互联网案例时都有着极强的说服力，举一个简单的例子：为什么5G成为科技竞争博弈中关键中的关键？

原因是其背后指数级的价值——第一代互联网接入的PC存量设备数大约是10亿台，第二代移动互联网接入的智能手机存量设备数大约为30亿台，而5G成熟之后的IoT物联网时代，接入的数据保守估计将达到500亿台，根据梅特卡夫定律由此产生的指数级价值是极其惊人的，某种意义上，这也是美国一定要封杀华为背后的重要逻辑。

• 为什么滴滴、快的、Uber的打车战争会如此惨烈？
• 为什么近些年流行行业老大合并行业老二？
• 为什么自媒体的头部玩家会享受到这个行业最的回报？
• 为什么操作系统市场通常很能容下二个以上的玩家？…..

这些问题都可以隐约在梅特卡夫定律中找到答案。

“梅特卡夫定律”的争议

尽管“梅特卡夫定律”对互联网的影响巨大，但业界依然对这个定理本身提出了不同的看法。

2006年7月一位名为鲍勃·布里斯科的研究员就在《IEEE》上发表了一篇态度鲜明的文章——《梅特卡夫定律是错误的》，他旗帜鲜明地指出梅特卡夫定律根本缺陷在于对网络中的所有连接都赋予了相同的价值。

“梅特卡夫定律”其实背后有两个隐藏的假设——第一，网络的机制取决于网络之间互相连接数的价值之和；第二，每一个连接的价值是相同的。

布里斯科的这篇文章并没有质疑第一个假设，而是质疑了第二个假设，在他看来，网络中的连接的价值并不是同等重要的，连接也分强连接和弱连接，弱连接的价值显然就没有强连接那么大。甚至他还引用了作家梭罗《瓦尔登湖》里的一段话作为论据——“我们急于建造从缅因州到德克萨斯州的磁电报，但是缅因州和得克萨斯州之间和其他人口更多的州相比可能没有什么重要的交流。”

没错，上述对梅特卡夫定律质疑从理论的角度是合理的，从现实中观察，我们也看到了和梅特卡夫定律相悖的现实，我随便举一个例子：一所精英大学本来一年招1000人，如果它扩充到2000人，它的价值和影响力会不会变成原来的4倍呢？

大概率不会，这是很容易理解的，因为这个实际例子和梅特卡夫定律的理想设定显然有不相符的地方——

• 第一：大学的价值和影响力并不直接由网络中的连接数决定。
• 第二：多一倍的学生并不意味着他们会自动跟所有学生建立联系。
• 第三：扩招之后的学生质量大概率也会下降，因此连接的价值本身也可能下降。

很显然，梅特卡夫定律在具体的情况中并不能直接生搬套用，但我们又的确观察到了腾讯和Facebook的数据完美地证实了梅特卡夫定律。

那么，应该如何理解这种悖论呢？

在我看来，Facebook人数的增多，很显然连接的质量是不同的，同时新加入的人也不可能和所有人建立连接，但我们可能忽略了规模带来的其他外部效应——比如人数足够多之后的边际成本降低，再比如人数足够多之后的数据积累也会提高一个量级等。

所以，“梅特卡夫定律”更多的是对一种现象的抽象，直接在任何互联网产品中生搬硬套都是教条的。正如经济学的基础建立在“理性人”这一假设之上，但实际中人却不总是理性的，事实上对于“理性人”假设的质疑诞生了许多有价值的新经济理论。

另一个非线性增长的模型——齐普夫法则

有趣的是，鲍勃·布里斯科在论述“梅特卡夫定律”可能漏洞的同时，提出了一个新的描述网络价值和网络成员的法则——齐普夫法则。

它以语言学家齐普夫命名，齐普夫在20世纪早期发现英文中词频的规律——最常用的”The”占所有英文文本的7％，第二常用的单词”of”占比则3.5％，第三位的”and”占比为2.8％…….符合7%的1 倍、1 / 2倍、1 / 3倍……这一规律。

这一规律用数学公式抽象为V=k*n log（n），既价值和数量呈对数关系。

齐普夫法则是描述价值和数量更温和的模型，举个例子——假如一个网络10万人的时候价值100万，如果增加到20万人，根据梅特卡夫定律，它的价值增长到400万，但根据齐普夫法则的计算，它的价值则只增长到210万，注意，210万依然比200万这一线性增长的价值要更高。

所以，尽管鲍勃·布里斯科指出了“梅特卡夫定律”可能存在的缺陷，但他却承认一个网络的价值和成员之间的关系并不是线性增长的，齐普夫法则也是一个非线性增长的模型。

这两个模型都指向了一个原则——网络的连接规模的提升带来的回报是超预期的。

那么现实世界中哪个模型是对呢？或许这个问题并没有答案，但它们却从不同的层面给了我们理解这个真实世界的角度。

这正是商业世界有趣的地方，和严格的数学、物理学不同，商业世界的规律的适用受无数约束条件的控制，我们只能尽可能掌握在大多数情况下都适用的规律，一定要拿出一个反例去反驳一条在大部分场景都普遍适用的商业规律其实没有意义。

所以，总结一下，梅特卡夫定律是对网络指数增长的普遍规律的一种抽象，它告诉我们一个简单的道理——规模的意义比你想象的更加的重要。

作为互联网人，我们需要深刻理解梅特卡夫定律所代表的一种指数级增长逻辑，尽可能建立更多的连接，从而在这个不确定的世界更好地生存。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务