不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个“大师”帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

动效对产品的可用性体验有多维度的影响。在界面中动效不仅仅是一种视觉装饰，它能够提升产品的参与度并扩展交流的范围。

本文追根溯源，先从动效的起源讲起，一步步推进与产品、体验之间的关系，最后通过案例分析动效设计的原理和应用。一起来看看吧～

一、动效设计的起源

动效与用户体验的结合相对较新，其根源是迪士尼动画设计的十二个条基本原理。迪士尼动画原理是为了讲故事而提炼出的基本的物理运动规律。这些原理能让绘制的卡通角色移动和表演，但不能充分满足现代UI界面的交互需求。

为了弥合这个差距，动效专家Canedo Estrada改编的《动效设计的10条原理》更适合应用到数字产品设计中。

在围绕界面元素建立用户体验时，重新定位动效原理的关键在于：

• 将动效设计与UI动画区分开;
• 阐明动效如何帮助可用性;
• 解开核心动效的内部工作机制。

二、动效设计与用户体验

在讨论动效设计的原理之前，重要的是要强调动效不仅仅是装饰，而是一种用来帮助用户体验的行为。动效设计涉及两种基本的交互类型：实时和非实时。

 实时 

当用户在屏幕上点击UI元素时，实时交互提供即时反馈，会对用户的操作做出即时响应。

 非实时 

非实时交互发生在用户操作后，这意味着用户需要经过短暂的转场才能看到结果，然后再继续。

另外动效设计通过四种不同的方式来提升产品的可用性：

1.期望：当用户与界面交互时，他们期望看到哪些行为？动效是否符合预期或引起混乱？

2.连续性：交互在整个体验中是否发生一致的运动行为？

3.叙述：触发的动作是否与满足用户意图的事件的逻辑进程相关联？

4.关系：UI界面的空间、美学和层级结构如何相互关联并影响用户的决策？动效如何影响各种元素的关系？

三、产品动效设计原理

这里提供12种动效设计原理的解析，每一种对应不同的案例，从更直观的角度来解读抽象的原理。

1、缓动(Easing)

缓动效果模拟了现实世界中对象随时间加速或减速的方式。它适用于所有运动的UI元素。下图中的卡片和对应的椅子移动速度很快，但由于缓动效果它们可以平稳地受到控制。

2、偏移和延迟(Offset & Delay)

当多个UI元素同时快速移动时，用户倾向于将它们组合在一起，而忽略了每个元素自身的功能性。

偏移和延迟会在移动的UI元素之间创建层级结构，并传达它们相关但又不同的消息。元素的时间、速度和间距不是完全同步的，而是交错排列从而产生一种微妙的“一个接一个”的效果。

当用户在屏幕之间穿梭时，偏移和延迟表明存在多个交互选项。

3、父子关系(Parenting)

父子关系将一个元素的属性链接到其他元素中。当父元素中的属性更改时，子元素的链接属性也会更改，同时所有元素的属性都可以相互链接。

在下图中，将父元素(蓝色滑块)的位置与子元素(灯泡发光效果&光照强度)相关联。当父元素左右移动时，子元素的发光效果的范围和光照强度的数值会发生变化。

父子关系在元素间创建关系并建立层级结构，允许多个元素同时与用户交互。因此这种效果非常适用于实时交互中。

4、转换(Transformation)

当一种UI元素变成另一种形式时就会发生转换。例如，转换展示了下载的开始、中间和完成状态——下载按钮转换为进度条，进度条转换为完成图标。

从UX角度看，转换效果告知用户元素的状态发生了变化并将信息传递给用户，提高了用户的认知度。

5、数值变化(Value Change)

数值的变化(数字、文本或图形）在数字界面中非常丰富，从银行APP到日历到电商网站的各种产品中都会出现。

在某种程度上，数据的动态表达和交流可能会对数据的价值产生影响。例如下图中的数值被动态引入，向用户显示他们有能力影响数据，提升了参与活动的意愿。

6、遮罩(Masking)

遮罩是对界面上的部分内容进行战略性的显示和隐藏。通过改变元素的形状和比例，在改变元素效果的同时允许元素本身保持可识别性。因此，照片和插图等视觉形式是理想的选择。

从可用性的角度来看，设计师可以通过遮罩向用户展示产品正在进行一系列的交互。

7、覆盖(Overlay)

二维空间中没有深度，元素只能沿X或Y轴移动，叠加在界面中创造出前景/背景相区分的位置关系。通过模拟深度，覆盖可以根据用户的需要隐藏和显示元素。

在使用覆盖时，信息层级结构是重要的考虑因素。例如，用户在笔记应用中首先应该看到的是笔记列表，然后使用覆盖来显示每个笔记的辅助选项，如删除或归档。

8、克隆(Cloning)

克隆是将现有的对象拆分成新对象,这是一种突出显示重要信息或交互选项的方法。

通过克隆将元素与界面相链接，如果元素只是突然出现或消失没有关联性，那么用户将缺乏信心去交互。

9、模糊(Obscuration)

想象一扇磨砂玻璃门，虽然看不清门后的东西但是我们能察觉到门后事物的存在。

模糊的工作原理是一样的。它为用户提供提示，让用户意识到自己正在操作的界面之后还有其他的层级结构。导航菜单、密码屏幕和文件窗口是常见的示例。

10、视差(Parallax)

当两个(或更多)元素同时以不同的速度移动时会构成视差效果。

视差的主要目的是划分层级结构：

• 可交互的元素移动速度更快，出现在前景中;
• 非交互式元素移动速度较慢，退到背景中。

视差引导用户点击可交互的元素，同时允许非交互的元素保留在屏幕上并保持设计的统一性。

11、维度(Dimensionality)

维度使界面元素具备具多个方向的交互，这种行为是使元素看起来是可折叠、可翻转、浮动的或具有深度。

作为一种叙述性工具，维度意味着元素的不同侧面是相互联系的，并且可以实现无缝的屏幕过渡。

12、平移与缩放(Dolly & Zoom)

平移与缩放通过视角的变化能产生更多空间上的体验，逐级递进显示更高级别的细节。

平移：点击元素后发生距离远近的平移，用户的视点会越来越接近图像。(一个人拿着照相机走到一朵花前面近距离拍摄)

缩放：用户的视角与图像的距离保持不变，但图像在屏幕中的比例会增加。(这个人站在原地不动，只利用相机的变焦功能使花显得更大)

四、总结——动效即交流

互动体验要求动效具备敏捷和微妙的形式。坚持动效设计原理，即使最基本的界面元素也能成为交流的复杂媒介。

动效设计与产品用户体验之间的关系正在迅速成熟，而且动效跨越了二维屏幕上元素的抽象运动和3D世界中对运动的感知之间的鸿沟。

文章来源：UI中国   作者：Clip设计夹

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

你觉得设计系统重要吗？那目前手里的设计系统是在灵活运用？还是落灰、摆设？你对设计系统理解有多深？它在你的设计中有多大的用处？节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范？那怎么避免设计系统带来了统一和便利，但同时失去了变化和新鲜感？

设计系统是今年来热门的话题之一，想要带来良好的用户体验，设计系统就是其中重要的一环，那它和设计规范、设计模式、设计语言、设计原则有什么关系？

设计系统

设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档，在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色，文案，字体等等)，所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的，是需要维护与改进的。

设计模式

设计模式是一种经常性，可重复使用的解决方案，可用于解决设计问题，我们经常会说解决整个方案我们要运用什么样的设计模式。

设计语言

设计语言是把设计作为一种“沟通的方式”，用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。

设计原则

设计原则可以理解为设计语言中的语法，是构建设计语言系统的起点，用于传达品牌主张或设计理念，它将指引业务设计执行的方向。

比如Airbnb的设计原则可以简单归纳为几点：

设计规范

设计规范对于设计师来说并不陌生，日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准，针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率，同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。

那是不是只要制作一套设计系统，在团队进行扩散就可以了？那平台的统一性就解决了？

我曾经加入一个设计团队，看到平台风格不统一，当时很自豪很坚定的制定了一套平台设计规范，从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系，还有交互方面。当时一心想着有这个规范宝典在手，平台统一性指日可待，没想到这个规范就成了我自己的规范，仅仅是我在自嗨。

为什么已经建立设计规范了，还是没能解决平台统一的问题？这里延伸出另一个问题，为什么其他设计成员不用？协作不起来？是它不够好？我严格按照标准来，为什么推不起来？

那要追溯到设计体系的目的是什么？它的意义何在？

1-建立统一的设计文化体系

2-保证多团队成员共同参与的项目视觉一致性

3-提升品牌调性

4-节省与研发人员的沟通成本

5-将元素组件化，提升设计师和程序员的工作效率

6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。

7-在用户层方面，对某产品的体验一致性得到落实

8-减少设计出错率

……

整体可以归纳为

1-对内统一，对外区分

2-管理与协作变得方便

3-建立设计文化体系，建立品牌感

4-减少、优化错误出现

对内统一，对外区分

规范定义的基础是围绕某种风格或者设计文化。对内统一，一个品牌的设计风格，是要有别于同类竞品的，比如阿里云、腾讯云，他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分，一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站，各个页面的设计差异明显，像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。

管理与协作变得方便

for Designer:

多个设计成员协同一个产品，迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队，如果没有统一设计规范，那网站会变成什么样子。

for Developer:

在UI还原中，设计需要经常与前端进行沟通“这里这里这样做，那里那里这样做”，对于每一块的设计，前端都会询问你，这样大大增加了沟通的成本，把时间花在了无效的事情上。

设计规范统一后，减少了无效沟通，可以更专注创新方向，比如：要改变预先设定的一个辅助色，无论是设计还是开发，修改组件的颜色，全局使用到这个组件的地方都会改动，大大节省了设计时间。

建立设计文化体系，突出品牌感

做品牌的时候需要制定一整套VI规范手册，那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式，更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐，看到界面都可以立马识别出这是哪个app。

你能分出哪个是网易云播放界面，哪个是QQ音乐播放界面吗？

减少、优化错误出现

设计经常碰到设计完后需要修改一个点，然后就要找出设计稿中所有相同的地方进行修改，这样很容易漏，统一规范后只需要修改组件即可。尽可能的避免错误的出现。

设计规范的意义这么强大，对网站及品牌有至关重要的作用，那为什么还会出现没有应用起来的情况呢？

很多设计师会说：“设计不就应该是变化多端的吗？就是要表现创新力呀？制定了设计规范是不是就失去了变化和新鲜感？那设计还有什么意义？开发都可以做设计的事情了。”

这里就要看对设计规范理解的深度—设计规范是分层次的，平台规范归根结底是为了确保产品的易用性，是为了减少用户的学习成本

对无法拆分的底层基础元素做严格规定

底层基础元素也可以说是全局样式，比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素，给用户一种统一的视觉形象，在跨界面、跨端、跨系统间有熟悉感，从而潜移默化地进行品牌的渗透。

增强界面设计的灵活性和可维护性

对组合自由度较低的基础组件做精简的样式变化限定，对组合自由度较高的复合组件减少过于局限的限定条件，考虑各种拓展的可能性。组件在制定过程中要考虑多种状态，多种可能。

设计规范随着业务的发展或技术的变革终究是会过时的，是需要迭代的。

设计规范是需要迭代的，而不是我只要制作出来就放那了，就像女生买衣服，去年的衣服已经配不上今年的我，嘻嘻

~~希望我每天都有新衣服穿，做梦中～

对设计体系的误解

设计体系最大的重要性毋庸置疑就是规范节省人力，设计师可以更多的时间去发挥创造性。

误解1-设计系统限制了设计师的创造力

很多设计师觉得统一了规范，那我的创造性从哪发挥，界面都长的差不多。在设计中，设计目的是解决商业或用户的问题，并不仅仅是为了有创意而引入新的样式或交互方式。

有了设计体系，统一了整体品牌风格，不用把精力花费在比如调整间距、对齐元素等琐碎的事情上，更多的回去关注更全局的设计策略。

误解2-设计系统只关乎设计，可由设计师独立完成

它仅仅是设计软件上可复用的组件，所以可由设计师独立完成，这种想法是错误的，是需要来自不同角色支持和参与的，这里包括前端、品牌、动态设计、 用户研究等。

误解3-设计系统是一劳永逸的

有时候会想只要完成了规范就大功告成了，其实不然，对待设计规范就像对待产品一样，是需要维护和改进的，包括两个方面：一种是对内部使用的开发以及同事，一种是对用户的，应该定期收集用户以及同事的反馈，确保及时更新迭代。

误解4-设计系统的重要性

1-提高设计开发效率，最显而易见的好处就是，组件库的可复用性。

比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。

2-确保设计一致性，为用户提供连贯一致的用户体验，设计的一致性让用户能缩短的学习使用产品的周期，让他们能够预见他们的操作所带来的改变。

网站统一的视觉规范、交互体验，会让用户产生一种掌控感。

3-设计系统促进了公司内部的合作和交流，一个成功的设计系统是需要跨功能团队参与，设计系统因此促进了公司内部不同职位的合作和交流，这种文化的建立也会帮助公司更有效地推出新的产品或服务。

那我们要如何去执行呢？

已经了解了规范的目的/意义，那该怎么去着手呢？

• 对于设计规范的意义要同步给设计人员，提高认知，这是一件提率的规范，规范必须落地。

在制定规范前期，不应该是一个人规定这个规范，设计团队的成员应积极参与，前期先把规范的基调定好，人人都参与进来了，规范也就能更好的运营，当时我就是一个人定了规范，只是单纯把规范发给其他设计人员，他们没有参与，自然不会使用规范，对里面的设计元素没有加深理解。

主导人

这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力，这样能把纰漏降到。

• 应用规范里的界面、交互规范必须得遵循

大家一般说的设计规范是界面的视觉规范，从UI的定义，User Interface—用户界面，用户与界面之间的交互关系，可以归纳规范其实可以包含两大类，一类是视觉规范，一类是交互规范。

视觉规范可以给用户传达统一的品牌形象，确保视觉一致性。后期的设计元素须复合规范的原则。

交互规范可以减少用户的学习成本，让用户有归属感。交互规范在制定的过程中，需要写好交互规则与条件，不然后期维护会混乱。像盖房子一样，地基都没打稳的话，整个楼都是偏的。

那在使用规范时，一定要遵循规范里的要求进行应用，否则会乱套，不仅起不到统一的品牌风格，反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。

设计规范的节点

节点和公司的进度搭边，看当前的产品是应该先独立风格还是先统一基础规范。

1-固定的设计风格规范，比如：google的“扁平”，微软的“磁贴”，可以全局使用，并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队，定好基调，不会走偏。

2-不断优化的设计规范，根据公司的节奏，有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后，进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。

建立规范

·制作原理—利用粒子构成的原理与三维解构

利用粒子构成的原理与三维解构，一个组件被科学的三维解析后由粒子再构成，理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变，高度灵活

·具体过程

建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。

·元素是工具库的必要部分

并不是每个时刻都能够直接使用完整的组件，元素是我们工具库必不可少的部分，它可以更大的方便你修改组件，再造组件以及特殊的排版，方便拖拉拽。

·组件的命名规范化

规范组件命名，方便查找、方便协作。

协作

一键导出/同步组件到Sketch模板。

标注方面，目前我们团队使用的是蓝湖私有化。

那是不是所有的公司都需要创建设计系统？

一般情况下，公司有不同的产品线，且都需要长期的开发与迭代。

公司中，越来越多的设计师加入，设计风格需要统一。

那建立一套设计体系会面临什么挑战？

设计体系里面包含了设计语言、设计规范，需要与前端、品牌、动态设计、 用户研究等沟通，还是需要迭代优化的，这是非常繁琐耗时的项目，初期会非常的艰难，当设计师开始做组件时，也是非常耗时的工作，需要考虑不同场景下的使用情况以及设计的延展性，都需要投入大量的设计人力。

聊了这么多，大家对设计系统有了一定了解，建立好设计系统可以事半功倍，以此提升效率才能提升UED价值。

思考点：

1-对于设计团队只有一两个人的时候，是否需要建立设计系统？

2-你是否愿意把时间花费在前期建立设计系统，后期更多时间用于创造性地东西？

3-建立设计系统前很枯燥，你会怎么坚持，怎么让设计体系价值更大化？

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

排名榜单数据在我们日常生活中经常会遇到：

比如微博、抖、快的热搜榜单、各省份之前的GDP对比、双11的现场的榜单数据等等

都会涉及到，可以说排名数据已经涉及到了我们生活中的方方面面。

那我们应该如何做好榜单排名数据可视化呢？

我们常遇到的榜单排名数据主要分为两种：

↑ 榜单排名数据分类

1. 一种是无数据的排名，也就是只有排名和名称；

2. 另外一种就是有数据的排名，也就是包含了具体的数值；

   
   

那么，本篇文章我将按无数据的排名和有数据的排名，给大家带来，当我们遇到榜单排名数据时，应该如何将图做的更好看！

总共涉及到大于15种可视化表现形式，希望能够对你有所帮助！

---

一 没有数值的排名数据，如何做得好看？

1 基于数字本身去做变化

最简单的方法，我们可以从排名的数字本身去做优化，比如将排名数字1、2、3....去做内容的填充丰富，改为TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...

还可以基于数字本身所处的环境去做优化，比如在其底部加入填充形状垫底，让数字排名更突显出来（如正方形、矩形等等）。

通过这两种形式，可以让单调的排名数字有了更多的细节，内容更丰富，展示更好看。

↑ 基于数字本身去做优化的案例

2 基于整体，通过形状元素去做变化

在数字本身变化的基础上我们还可以加入对文字的变化，比如在文字的底部垫上形状（如圆圈、条形图等等）。这样通过对数字和文字本身的设计强调，就从整体上得到了优化。

↑在文字底部垫上圆圈，在整体上突出设计感

虽然排名没有具体的数值，无法生成条形图，但是依旧可以通过等比缩放的矩形来强调文字，比如倒立金字塔和横向柱状图。

↑通过矩形形成倒立金字塔和条形图，在整体来突出设计感

3 基于内容主题传达，来做变化

3.1借助icon元素，来做变化

如果排名数据内容所传达的主题是品类、物品、或者城市，那么就可以借助icon来丰富可视化。

3.2 借助定制插画，来做变化

排名的数据如果涉及的是品类中的细分物品，比如生活中常见到的吃的、穿的，用的，那么就可以使用定制插画来丰富排名可视化。

3.3 借助头像、品牌LOGO、产品实景图，来做变化

当我们的排名数据中涉及到了人物、品牌、产品之间的排名时，我们可以通过与之对应的头像、品牌LOGO、产品实景图来丰富排名的可视化表现。

3.4借助地图，来做变化

如果排名数据讲的是省份之间的排名对比，那么我们就可以借助地图元素来丰富排名的展示。但是如果要用到中国地图，一定要注意使用中国标准的地图，当然基于设计的风格，你也可以使用简约风格，去掉地图元素，只保留可视化的部分。

4 借助背景设计元素，去做变化

排名数据也可以借助视觉背景模板来做变化，比如在涉及某个主题排名榜单时（如淘榜单、星数榜单等）就可以通过背景视觉元素来突出排名。

其实这种背景视觉模板，对可视化的要求并不高，你只需将排名通过单一表格的形式展示出来，但需要一个很强的视觉背景版来做衬托，这样，做好一个模板，其余的榜单都可以进行复制使用了。

---

二 如果排名数据包含数值，如何做得好看？

1 基础可视化排名数据图

如果数值单一，那么可以通过常规的可视化表现形式进行展示（如基础柱状图、饼图、圆圈大小、直角三角形柱状图、180°变形柱状图等等）。

1.1 横向柱状图展示

结合第一节讲到的基础排名样式再加上横向柱状图来进行展示。这样的排名展示形式简单、直观，特别适合单一排名数据之间的对比展示。

1.2 饼图、圆圈大小占比展示

如果排名数据中数值所传达的是占比，那么便可使用饼图或圆圈大小的形式对排名数据进行展示。

1.3 直角三角形柱状图（柱状图变种）展示

通常我们会使用常规的竖向柱状图来表现数值的大小，但其实还可以对其进行一点点变形，比如将柱子的右侧直角边去掉，那么就变身成为了直角三角形柱状图。

这时如果排名的文字比较多，我们还可以将排名和文字置于柱子的上方进行展示，一方面节省了空间，另一方面在视觉上也起到了美观度。

1.4 180°变种柱状图展示

柱状图的变种，在《如何做出比别人好看的柱状图？》系列文章中有讲到，大家对如何实现这种形式感兴趣的可以看下之前的文章，同样的排名数据也可以基于180°的变种柱状图来进行展示。

2 将主题元素和基础可视化排名图进行结合

除了基础的可视化展示和排名数据结合外，如果排名数据所涉及的是一些主题元素（如生活中吃的、穿的、用的等等）。那么就可以将基础的可视化和icon、头像、产品实景图、插画等等去做结合来丰富可视化。

3 使用桑基图来体现排名

当排名的数据中，还多了一列数据涉及到分类， 那么就可以使用桑基图来进行可视化的展示（如国家属于什么地区、公司属于什么行业、城市属于什么省份等等）。对如何实现桑基图感兴趣的可以看看之前发的桑基图教程。

4 排名连线图展示

如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。

4 排名连线图展示

如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。

5 地图展示

和第一节讲到的地图一样，如果排名数据中涉及到了地理位置数据，那么可以结合地图进行排名数据的展示。通常情况下，完成地图可视化后，可将具体的排名信息以表格的形式罗列在地图的空白区域内，这样结合地图和具体的详细排名数据，就会更加的直观和丰富。

6 组合图展示

如果我们的排名数据维度非常的丰富，数据所包含的信息点在3个以上，那么就可以通过将多种可视化的表现来进行结合，通过组合式的可视化来进行展示。

7 动态柱状图、动态折线图展示排名

7.1 动态柱状图

排名数据也可以通过简单的动态柱状图来进行展示。如果只是单一的排名没有涉及年份的变化，那么可以通过柱子从上到下一个一个地出现来进行展示（如下图左),如果涉及到年份的变化， 那么就可以通过柱子随着年份的上升或下降来进行动态的展示（如下图右）。

动态柱状图的实现方法也很多，我在想做出漂亮的图表，这12个网站不能错过！中有讲过，可以通过flourish网站（https://flourish.studio/）来快速的实现。同时如果想自己DIV得到更定制化版本的动态柱状图，也可以使用B站UP主见齐的开源可视化项目（http://r6d.cn/JdYy）进行实现。

7.2 动态折线图

同样的我们还可以通过动态折线图的形式进行展示，这种表现形式主要看的是排名的趋势变化，同样的，借助flourish网站（https://flourish.studio/）就可以实现这种动态折线图的展示效果。

8 3D建模渲染可视化展示

当然，我们的排名数据也可以使用现在市面上很火的3D可视化的表现形式来进行展示，比如随着摄像机移动的3D柱状图、还有基于主题而自定义化的3D场景排名展示等等。

8.1 3D柱状图展示

将基础的柱状图，通过3D立体柱状图的形式进行展示，排名的结果并不是啪的一下直接公布，而是随着镜头慢慢地公开，对观众来说随着镜头的视角观看有一种慢慢揭秘的感觉！

8.2 3D内容场景展示

如果我们的数据，所要传达的信息非常富有主题场景感，那么就可以通过3D场景渲染的形式进行展示，比如下图GIF中，在表现《哪个国家上班族工作时间最长》就可以将各个国家的学生，置于一个教室中，再通过镜头的移动位移来进行展示。

这种展示形式，实际投入成本还是很大的，从建模到渲染至少也需要2-3天的时间。所以最好基于一个好的选题再选择这种形式，要不然就会出现”虽然视频本身展示酷炫，但是由于选题不好，最终播放量不高“的尴尬情况。

三 做好排名数据的一些小事项

1 时间紧急时，一切从简

比如说，当我们在时间非常紧急的时候，排名数据如果是和地理数据相关的，那么我们会尽量避免使用地图元素来丰富可视化，因为这会增加我们审核检查地图正确性的时间成本。我们可采取常规的可视化表现形式进行展示，虽然会丢失掉一些美观度，但是正确性会有更高的保障。

2 强调重点数据

基于文章内容，需要在图中重点强调某些数据时，可通过填充颜色、框选、重点信息丰富(比如展示TOP3)的形式来对排名进行强调.

四 总结

排名数据看似简单，但其实所包含的展示形式和细节还是非常多的。希望当你在遇到排名数据时，这篇文章能够对你有所帮助！

文章来源：站酷   作者：邹磊ZouL

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

用户画像作为一种设计工具，可以很好得帮助设计师跳出“为自己设计”的惯性思维，聚焦目标用户，发现核心价值，赋能产品。

设计源于生活，本文通过生活视角溯源格式塔原理，从生活到界面设计感受格式塔原理应用在方方面面。

一、什么是格式塔原理

格式塔即Gestalt，是德语中“形状”和“图形”的意思。是基于心理学对人类视觉系统的研究，人类的视觉系统自动对视觉输入构建结构。

最重要的格式塔原理有：接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理、共同命运体 原理。

下面将进行详细分述

视觉会把互相靠近的物体看成一组，反之则不是。

下方示意图中A被看作三排，B被看作三列

【 生活中】

无论是在看阅兵还是军训，我们都有所经历，左右间距为一拳，前后间距为一臂。

列与列之间的间距远大于每个人之间的间距，互相靠近的则被看作一列。

（图片来源于网络，仅供交流学习）

【界面设计中】

个人中心中，同一组信息之间的间距远小于不同组，下图中我们明显可以感知到7组由图标和文字组成的信息。

（图片来源于网络，仅供交流学习）

建议

设计过程当中可以控制元素与元素之间的间距，从而对元素进行视觉分组，就像排队一样，有利于元素排列更有规律，主次分明，易于用户获取信息。

视觉会把相似的物体看成一组，反之则不是

下方示意图中颜色相似的被看成一组，颜色较深的两个圆被看作一组

【 生活中】

大家都玩过跳棋，在全部棋子形状相同的情况下，通过颜色进行阵营区分。相同颜色的棋子很容易区分被分为一个阵营。

（图片来源于网络，仅供交流学习）

【界面设计中】

下图中01、02、03三个图标区域呈现不同的图标样式，通过样式的相似性进行了合理分组，体现了个人中心图标的强弱层级。

建议

设计过程当中可以通过制造相似性，包括：颜色、形状、格式、质感等，使某些对象在视觉上成组。

视觉倾向于感知连续性，而不是零散的事物

下图中我们更倾向于把图形看作为两条不同颜色的线交叠，甚至是一个X。而不是一条浅色线段，两条深色线段

【 生活中】

被切开的水果我们依然可以感受到完整的样子，一看便知这是一个完整的橙子被切开之后的样子

（图片来源于网络，仅供交流学习）

【界面设计中】

利用连续性原理，我们将上图中的会员等级曲线看成是完整的曲线，而不是两段不同颜色的曲线

利用连续性，下图中依然可以感受到完整的一盘食物

（图片来源于网络，仅供交流学习）

建议

设计中可以利用连续性原理，只露出部分元素暗示完整元素，或用连续性来暗示走向趋势等。

视觉会将敞开的图形封闭起来，从而感知完整的物体

下图中我们不会将其看作三段曲线，而是很容易感知到是一个圆

【 生活中】

划分停车位的时候，即使不画出四面封闭的四边形，我们依然可以感知到完整的四边形车位

（图片来源于网络，仅供交流学习）

【界面设计中】

下图中的断点式icon设计，即使图形没有完全连续，我们依然可以感受到完整的图形

（图片来源于网络，仅供交流学习）

建议

设计中可以利用封闭性原理合理删减、断点等方式增加设计感、丰富度，强化页面趣味感、精细度

视觉会将复杂物体解析为符合对称规律的更简单的物体，从而降低复杂性

我们可以很快感知到下图是两个圆交叠，而不是其他更复杂的图形，因为一对圆的复杂度远小于其他

【 生活中】

河对岸的房子倒影在水面上，我们通常会最快地自动解析出水平的对称线，将其视为上下对称的两组房子

（图片来源于网络，仅供交流学习）

【界面设计中】

下图的网页排版，我们的视觉自动梳理出了左右对称的规律，即使左右的颜色并不一样，也有其他小字信息干扰。但对称的解析方式极大地降低了页面的复杂性

（图片来源于网络，仅供交流学习）

建议

设计中复杂图形可以通过简单图形复用得出，降低视觉理解难度。复杂的排版中可以制造对称性，从而降低页面的理解成本。

视觉将聚焦部分解析为主体其余解析为背景，或改变焦点时呈现不同的主体

大的矩形和圆形交叠时，我们倾向于把小的看作主体，矩形则视为背景。

【 生活中】

下图中将深色区域视为主体时我们看到了建筑，把浅色视为主体时我们看到了五角星，在五角星中我们把美队看作主体，天空看作背景

（图片来源于网络，仅供交流学习）

【界面设计中】

下图中弹窗的出现转移了页面的主体

（图片来源于网络，仅供交流学习）

建议

可以通过控制主体与背景，改变用户视线焦点，从而起到引导用户视觉的目的。

一起运动的物体被感知成一组或彼此关联

下图中三个运动的小球被看作一组

【 生活中】

舞蹈表演中，通向运动的舞蹈演员被我们归位同一组

（资料来源于网络，仅供交流学习）

【界面设计中】

背景的文字拥有一致的运动速度，因此原本零散的文字在动效过程中被我们视为同一层元素

（资料来源于网络，仅供交流学习）

建议

设计中不仅可以通过接近性、相似性，还可以通过同样的动态特征将物体成组，减少视觉凌乱感。

文章来源：UI中国   作者：JuneW

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

无论是罗瑟·瑞夫斯提出的“USP”，还是奥格威所推广的“品牌形象”，又或是里斯和特劳特提出的“定位”……这些都可以看成是一种单一的主张。

而行业中成立时间更早也更大的一批元老级公司，他们并不推崇这些创意先锋们的单一广告主张。他们认为广告公司要根据企业的不同，自由地从所有门派中组合出最有效果的方法。

BBDO一位资深人士自豪地说，“你常常可以看出这是奥格威的广告，那是达彼思的广告，但你无法认出哪个是我们的广告，因为我们会去整合每个人的构想。”麦肯则更加疯狂。他们认为做广告并不是它最重要的工作，他们要处理“整个营销”的问题。

本文便是麦肯的传奇故事。

一、麦肯早期的发展

麦肯的历史最早可以追溯到1902年成立的埃里克森广告公司。在1930年，埃里克森与晚自己九岁的麦肯合并，合并后的新公司名称是这两者的组合。不过不叫埃里克森-麦肯，而叫麦肯-埃里克森广告公司，也就是后来的麦肯世界，一般仍然简称麦肯。

合并后的麦肯迅速发展，最主要是把握住了两大先机。第一个先机是新媒体的兴起。

当时两家公司的合并，正赶上了广告业第一次变革。全行业正新兴起一个新媒体——广播媒体。由于无需识字，广播收听量远远超过报纸的阅读量，当时每个家庭平均每天要收听四个小时的广播节目。在合并的前一年，麦肯就收购了一家广播节目制作公司，得到一批广播创作人才。合并后的麦肯高度重视广播媒体，而公司的规模也直追当时的巨头。

在广播之后，又兴起一种有图像的“广播”——电视。按照人们的习惯，美国的电视台不叫某某电视台，而叫做某某广播公司。尽管当时电视才刚刚起步，而且还只是黑白的，但麦肯认为电视的传播威力有超过传统报刊媒体的趋势，便投入大量精力将已有的广播业务优势发展到电视上。到了1950年代电视占据主导地位，成为媒体之王，麦肯也水涨船高成为电视广告业务量最大的公司。

第二个先机是拓展海外市场。

创始人哈里森·麦肯早在1917年就说，“海外其他国家的生活与生产水平比我们要低，所以他们的产品会以极低的价格在当地销售，我国的制造商在海外市场将面临巨大竞争，我国制造商在海外必须大做广告才能在竞争中站稳脚跟。” 

1927年，麦肯在欧洲建立了分公司。虽然发展得十分艰难，但它还是跟随标准石油公司的脚步，开设各地分公司，这样广告创作可以在当地进行，可以提高服务效率。

第二次世界大战使麦肯在欧洲的分公司受到严重威胁。伦敦分公司有人回忆，在战争激烈的时候，公司员工要冲上屋顶，清除燃烧弹，夜间还要轮流放哨。二战后情况还没有好转，海外业务让哈里森·麦肯很头痛。没有盈利，加上各国反对情绪和高压管制，让海外业务前景不容乐观。不过1947的实施马歇尔计划，西欧各国接收美国包括金融、技术、设备等各种形式的援助合计131.5亿美元。经济的逐渐恢复，让麦肯的海外业务起死回生，并成为海外广告市场的领跑者。

麦肯把握住了新媒体与海外市场的时代机遇，成为了行业中坚。不过，它带给行业最大的惊喜，是哈珀的到来。

二、哈珀的到来

1939年，耶鲁大学心理学专业毕业生哈珀进入麦肯公司，当时他只有23岁。

一开始，哈珀在邮件收发室工作。心理学专业的学习经历，让哈珀对研究很痴迷。由于他对研究的诸多见解对公司内部有很大启发，三年后哈珀成为文案测试部门主管，四年后哈珀又成为研究部总监。

在研究部，他发起一个名为“因素分析”的关于广告如何吸引读者的研究项目，并在全公司推广，他说服创意部，因素分析不会危及他们的创造性。

在哈珀成为研究部门主任的两年后，也就是1948年，32岁的哈珀被哈里森·麦肯指定为公司新总裁。哈里森·麦肯说，“他在研究领域所取得的成就，使得他对重要事实的了解独特而有见地，而这正是一切策划的基础。我觉得像哈珀一样能把研究做得有生有色的人会成为公司鼓舞人心的总裁。”

成为总裁的哈珀聘请了多位博士加入麦肯传播研究所，不断研究改进广告方法论，使得麦肯公司在广告研究及业务应用等方面处于领先地位。

传播研究所拥有很多研究工具，这些工具仅从名字上就让客户觉得很放心。比如：相对销售倾向测试、感知实验室……这些金光闪闪的名字，让人觉得广告只要通过这些测试，就一定能获得成功。这些测试在当时是十分创新的，比如在分析观众对广告的反应时，引入眼球摄影新技术与广告效果研究结合起来，记录瞳孔对视觉刺激扩张程度。

这些引领时代的研究成果，吸引了大量客户的青睐。而哈珀并未满足，他在多年研究心得的基础上，创造性地提出了他对“未来广告公司”的构想。

哈珀对“未来广告公司”的构想是采用平行子公司的结构组建广告集团。这看似简单的构想，实在是了不起的创想。集团公司在其他行业中虽然已被普遍采用，但广告行业却受到天生的限制，一直无法集团化运作。

主要原因是当时广告公司的客户们不喜欢和竞争对手共用同一家广告公司。这意味着广告公司在每一个行业只能有一家客户，他们只能为一个品牌的汽车、一个品牌的啤酒、一个品牌的计算机做广告。如果一家广告公司收购了另一家，那么两家公司此前可能拥有的同一领域的两家客户就必须放弃一家。

这个问题是致命的，而哈珀构想的“未来广告公司”则解决了这个问题。

三、哈珀发明广告集团

1934年，麦肯公司的大客户标准石油公司，被一家叫马肖尔&普拉特的小型广告公司插了一脚。当时报刊行业利用自身的主流地位阻止新兴的广播媒体进入广告市场，导致企业无法顺利投放广播广告。这家小型广告公司建议标准石油暂不投放广播广告，转而赞助制作一个全新的广播节目，这样可以绕开广告投放的限制，这个全新的节目在全国各大广播上播出。由此，马肖尔&普拉特成为标准石油在美国主要的广播广告代理商，然后又成为电视广告代理商之一。

马肖尔&普拉特公司非常小，却夺走了标准石油的一大块广告资源。这让麦肯创始人哈里森·麦肯对此耿耿于怀，而一直琢磨如何创建“未来广告公司” 的哈珀，却在马肖尔&普拉特公司那里看到一个绝好的机会。

1954年，麦肯收购了马肖尔&普拉特公司。但哈珀并没有简单地把它合并到麦肯，而是让它成为一个单独的公司，让它拥有原来的名称和客户，甚至可以与麦肯的客户之间存在竞争关系的客户。哈珀跳出传统管理方式的藩篱，以平行子公司的结构成立广告集团。让被收购公司独立于收购公司运作，两家公司的财务由集团公司来控制，而业务上则由各自独立经营，无需放弃业务相冲突的客户。

这一大胆的做法震惊业界，受到业界的抨击。也有不认可的客户中止了合作，但最终吸引了更多的客户。

随着质疑的声音渐渐减少，哈珀的广告集团慢慢体现出自身的优势。集团公司拥有大量后台人员同时为旗下所有广告公司提供行政和财务，更重要地的是将媒体采购独立出来，这种集团集中采购媒体的方式大大强化了自己的地位，这就能够实现广告行业的规模经济。在此之前，广告公司被视为创意经济，很难形成规模。不要小看规模优势，列宁有一句名言：“数量本身就是质量。”

麦肯于1954年买下马肖尔&普拉特公司初尝成果之后，陆续又收购了其他一些小型广告公司。1960年，哈珀将集团公司更名为IPG，这原本是旗下一家公关公司的名字。1971年，IPG集团上市，有了资本市场的加持，收购更加大手笔。1990年收购了著名的灵狮广告；2001年更以21亿美元将行业元老FCB纳入旗下（FCB的前身是拉斯克儿和霍普金斯奋斗过的洛德暨托马斯广告公司）。哈珀用极具创想的方式，一手缔造了自己的广告帝国。

哈珀缔造的IPG广告帝国，为全行业集团化发展指明了方向。麦肯这一模式后来也被其他广告集团广泛采用。到1990年代，全行业进入了集团化时代，形成WPP、宏盟、IPG、阳狮、电通、哈瓦斯六大广告集团。

这些广告集团也像IPG一样疯狂并购知名广告公司。比如WPP收购了智威汤逊、奥美、杨罗必凯；宏盟则拥有恒美、天联；阳狮则并购李奥贝纳、盛世长城。

这些广告集团正是用哈珀的平行子公司模式组建的。

四、哈珀的另一个伟大想法

在IPG集团取得成功后，哈珀的视野早就超出广告集团之上。他又想一个新概念，这个概念不仅改变了麦肯，也改变了整个行业。

在1950年代，由于新媒体——电视的强势崛起，大家一致认为进入了“电视为王”的时代。但是哈珀并没有将注意力仅仅局限在电视上，而是十分重视新老媒体的整合运作，乃至营销传播的整合运作。

所以，哈珀另一个伟大的想法，就是“整合营销传播”。麦肯公司认为：哈珀是实事上第一个提出此思想的人，比舒尔茨教授整整早了30年，但是哈珀并没有得到“整合营销传播之父”的荣耀。

哈珀认为整合营销传播的目标是创作过程的核心，它是一种站在战略高度促进创意思维的手段。在1952年，哈珀就强调，应当扩展广告业务范围，建立起一个能够适应营销活动从产品概念、产品设计一直到把产品送到消费者手中的各环节的需求的组织体系。但在传统广告公司结构中，这些重要形式常被广告的风头盖过。它们被认为与广告公司现有业务没有多大关系。

哈珀觉得需要重建广告业务方式本身，广告公司也应该向生产厂家一样，研究和开发自己的产品。1956年哈珀说，“我们为客户所做的并不仅仅是充当版面购买的经纪人或只为那些版面做设计与文案。我们为客户做的更多，我们帮助他们特色营销经理，帮助他们设计新产品，并安排生产。现在我们经常参与他们的销售会议，评估营销方式，参与他们的高层决策。我们还要在许多与广告不相关的领域帮助他们。”

对于提供营销附加服务，麦肯也早有这个传统。早在1933年麦肯就设立了促销部。专门为客户制作各种促销品，包括目录、小册子、挂历等，还提供橱窗设计、柜台、卖场、陈列等服务，并负责直邮广告活动的执行。在哈珀的时代，麦肯除了并购其他广告公司之外，还成立一批专职营销附加服务公司。包括市场研究公司、公关公司、品牌咨询公司、销售渠道拓展公司等。他要在原有的广告公司之外为客户提供全面的营销服务。

1960年，哈珀公开宣讲要“整体性”解决营销问题。他认为做广告并不是他们最重要的工作，麦肯要处理“整个营销”的问题。

麦肯为什么要从做广告变成处理“整个营销”呢？乔治·帕克解释道：“广告公司一定要与客户最高层做经常性联络。然而如果你只带着广告设计稿来，你就无法接触那个阶层。要接触客户最高层，你必须提出营销咨询意见。”

哈珀是第一个将广告描述为营销传播的人，等到30年后“整合营销传播”才被广泛使用，到1990年代，哈珀首创的理念仍然是广告行业讨论的重点。他几乎以一人之力完成了行业管理模式与业务模式的升级。“广告集团+整合营销传播”也成为下一个阶段行业大发展的两大引擎。

五、哈珀拿下可口可乐全球广告业务

哈珀的努力没有白费，麦肯在1955年成功接下可口可乐的全球广告业务。

此时的可口可乐正面临百事可乐日益强劲的挑战。可口可乐营业收入下降，新任总裁比尔·鲁滨逊终止与达美高长达50的合作，因为他意识到有必要进一步统筹其海外和美国本土广告。而此时麦肯由于哈珀的前瞻性布局，已经建立起跨国业务体系，差不多是当时唯一的选择。

哈珀带领团队克服重重困难，全力以赴，汇报提案长达6小时，充分展示麦肯全球服务能力以及“整合营销传播”思维与市场调研强度结合起来所能达到效果的大好机会。最终赢得了可口可乐的全球广告业务。麦肯随即组建的可口可乐工作组，一开始就有121名职员，涵盖了麦肯公司各个部门的职能。此外，还有20人的推销小组被派往18个重要的食品分销中心城市。像可口可乐这种跨国广告业务，需要协调进行，又要适应不同的市场条件。麦肯的原则是“分散行动，集中策划”，由一批分公司在世界各地分别运作，而总部则负责协调整个组织在全球范围的活动。

可口可乐在品牌史上占有重要地位，全球各大品牌排行榜，只有可口可乐一家公司从来没有跌出过前10名。因此，我们简单回顾一下它的历史。

1885年，美国颁布禁酒令，禁止销售各类酒水，关闭各地酒馆，这给酒业带来灭顶之灾。一个叫彭伯顿的药剂师，手下拥有一家古柯酒厂。为了减少禁酒令带来的损失，他改进当时古柯酒的配方，仍以古柯为原料，加入可乐果，经过不断实验，终于在1886年研制出一种不含酒精的全新饮料。

这种冒着气泡的饮料被鲁滨逊取名为“Coca-Cola”。这个名字包含饮料的两种主要成分，还十分押韵，得到了彭伯顿和其他股东的认可。（Coca-Cola最早的中文译名是——蝌蚪啃蜡，导致当时进入中国的产品无人问津。后来由蒋彝重新译为——可口可乐，这个新译名在音译的基础上还具有实际含义，成为品牌中文译名的典范。）

鲁滨逊早些年通过推销印刷机认识了彭伯顿，入伙了彭伯顿的公司。鲁滨逊不但为产品取名，还手写了延用至今的斯宾赛体可口可乐标志，同时他策划从零起步的广告宣传。1886年3月29日，鲁滨逊发布了第一个报纸广告，上写着“可口可乐，美味、清爽”。可口可乐从此开始了万里长征第一步。

六、可口可乐成为美国文化象征

最早的可口可乐是在药房及店铺的冷饮柜中以5美分的价格出售，由售卖者将可口可乐糖浆加冰水现场制作。

到1899年，有两位律师向当时的负责人阿萨·坎德勒提出建议采用瓶装生产。这样在没有冷饮柜的乡村地区，瓶装可口可乐的销售前景会跟城市的冷饮铺现做的一样好。

但阿萨·坎德勒怕力不从心，因为“瓶装项目有太多细节需要处理”。为了打消阿萨·坎德勒的顾虑，两位律师做出承诺：保证瓶装可乐不会争抢冷饮柜的生意，而且可以扩大糖浆的销量，还不用花公司一分钱，广告都由瓶装厂自己投放。最终双方签订了合同，公司以每加仑1美元的价格卖给他们糖浆，允许对方使用可口可乐品牌。这个合同没有约定有效期，也没有约定价格是否可以浮动。这为后面双方长期纠缠埋下隐患，但也正由于各地瓶装厂的加盟，真正让可口可乐全国畅销。

随着瓶装可口可乐的畅销，各地纷纷出现仿冒品。仿冒品采用相同的笔直的瓶子，采用相同的钻石形标签，装着同样焦糖色的饮品。普通不认字的消费者常常无法分辨谁是可口可乐。

可口可乐公司的赫希认为，应该抛弃现有大家都在用的瓶子，另外生产一种特征鲜明的新瓶子。他劝说瓶装厂不要将眼光局限在换用新瓶的短期花费上，要生产一眼就消费者被看出的瓶子，“在黑暗中仅凭触觉即能辨认，甚至摔碎在地上也能一眼识别”，这瓶子根本不用贴纸质商标，商标要直接印在瓶子上。

1915年，设计师迪安以当时流行的一种裙子为灵感，设计出弧形瓶。这个瓶子手感很好，拿取非常方便，而且十分独特，人们一眼就能看出这是可口可乐。弧形瓶很快被申请了外观专利，其他厂家不能仿制这种瓶子，这让仿冒者们纷纷陷入绝境。此后40多年，可口可乐坚持以弧形瓶作为唯一的产品包装。最终，弧形瓶就像手写体的商标一样，成了可口可乐的品牌“视觉锤”。

弧形瓶让可口可乐大获成功。使得公司越来越重视品牌形象，在1931年，邀请艺术家海顿·珊布为可口可乐创造了一个全新的圣诞老人形象。他一改之前严肃的精灵形象，成为一个永远乐呵呵、胖乎乎的圣诞老人。他红色的外衣，白白的胡子，与可口可乐红白形象一脉相承。

圣诞老人的推广，大大增加了冬季的销量。此后，可口可乐的广告不断强化红白衣服打扮的圣诞老人形象，圣诞老人派发可口可乐成为小孩子们的最爱。随着强大的营销攻势，“可口可乐版”圣诞老人渐渐定格在了人们的脑海中，并流传至今。

1942年，美国参加第二次世界大战。董事长伍德拉夫希望将可口可乐列入军需品的行列，这样可以随着军队的步伐征战世界，但军方一开始并不同意。伍德拉夫召开多次新闻发布会。将可口可乐抬到“战时休息”、“鼓舞士气”至关重要的地位，宣讲可口可乐对调整士兵状态的意义。伍德拉夫还宣布“不管我国军队在什么地方，也不管公司的代价有多大，我们一定保证每个军人只花5分钱就能买到一瓶可口可乐。”一时民意沸腾，最终军方同意让可口可乐走向前线，并帮助可口可乐在当地建厂。

道格拉斯·霍尔特在《品牌如何成为偶像》中说，这是有史以来最成功的公关。

可口可乐不惜工本，满世界送可乐，无论是欧洲小镇，还是亚洲孤岛，只要5美分，驻扎美军都能买到。可口可乐不仅缓解着战争之痛，更成为士兵们对家乡的寄托。在前线，可口可乐被送到每一位士兵手中；在后方，它又印刷大量广告来庆祝每一场战斗的胜利。当战争结束时，人们对可口可乐怀有宗教般的虔诚，喝出一种民族自豪感，成为美国文化的象征。

七、“给世界来瓶可口可乐”

在麦肯与可口可乐合作期间最经典的作品，当属1971年推出的“山顶”广告。

这支广告教全世界唱一首广告歌，成为前所未有的、最为流行的广告歌曲。也是电视广告史上巅峰杰作之一。广告内容如下：

在意大利的某座小山顶，两名短发的青春少女在歌唱：“我想给世界一个家，用爱来灌溉它……”随着歌声悠扬，镜头拉远，越来越多不同国家、不同种族的年轻人加入歌唱队伍。歌声越来越洪亮，汇成美妙的合唱：“我想让世界学会歌唱，人们和谐欢畅……”最后成百上千不同种族的年轻人齐聚山顶，每个人手里捧可口可乐，仿佛手擎着一面旗帜，高声歌唱：“我想给世界来瓶可口可乐，让它永远陪伴我的快乐！” 

这个广告先在欧洲播出，不温不火。但在美国一播出，迅速引起巨大轰动，没有人对可口可乐誓志拯救世界感到荒谬，人们纷纷点播这首广告歌曲，寄来超过10万封信函索取乐谱，可口可乐公司将歌曲唱片赠送给索取者们。这首广告歌去掉了中间的商品信息后，被重新录制成一首单曲，在各大电台播出，最终登上一些音乐排行榜冠军宝座。《纽约周刊》写道：“这是肯定会红火的潜意识广告。”虽然歌词中没有提及可口可乐，但是每个人只要听到这首歌，都自然会想起可口可乐。

这个创意据说源自麦肯创意总监比尔·巴克尔。他乘坐的航班，因为重雾而在香农机场迫降。原本要乘坐飞机的旅客们，不得不挤在条件简陋的旅馆房间里熬过一晚。人群中到处弥漫着愤怒与不满。第二天早晨，在等待航班放行时，令人意外的一幕出现了，前天晚上情绪最激动的那些旅客，正一起边吃着零食喝着可口可乐，边“吐槽”开着玩笑，怒火似乎已被手中的可口可乐浇灭，平静放松下来了。比尔·巴克尔回忆道：“那一刻，可口可乐的意义早已超越了一瓶饮料。它是把人们联结在一起的纽带，是提供陪伴的一剂良方。”之后就创作出“我想给世界来瓶可口可乐”的广告歌曲。

不过，提出“文化品牌战略”的道格拉斯·霍尔特认为“山顶”广告巨大成功的关键，并不是广告公司所说普通人的陪伴良方，而是可口可乐缓解当时激烈的种族文化冲突。

在二战后很长的时间内，可口可乐一直拥有美国文化象征的这份殊荣。然而到了20世纪60年代，美国爆发民权运动，美国黑人民众为获得平等权利而进行斗争达到高峰，引起强烈的文化冲突。民权运动的呐喊，撕碎了原有的民族团结，可口可乐原有的品牌力量随之消减。

在这个背景下，“山顶”广告吸收了嬉皮士反文化的形象与和平运动的内容，认识到当时充满冲突的社会现实，呼唤对人性的理解和容忍。广告中温暖人心的歌词和朗朗上口的旋律，以及一群不同肤色、不同国籍的年轻人共唱“给世界来瓶可口可乐”，这一“世界大合唱”告诉人们：想平息看上去十分激烈的社会冲突，最简单的方法莫过于拿起一瓶可口可乐。

麦肯公司的李·塔利认同道格拉斯·霍尔特的观点，他说：“百事可乐更擅长定位，只瞄准一个市场——二战结束后的婴儿潮一代年轻人。而我们努力使可口可乐成为适合所有人的东西，这样做反而使我们迷失了方向，并且不记得自己本该有的形象。” 百事可乐保持与充满活力的年轻人市场同步前进的策略让可口可乐一度十分被动。麦肯公司连续三年进行深入调查，最终确认可口可乐的主要作用是作为社会催化剂，联结人们情感的纽带。

可口可乐作为联结情感的纽带，通过象征性地化解美国社会中尖锐的文化冲突，增加了人们的凝聚力，也增加了人们与可口可乐之间的情感纽带。难怪有人说：“无论肤色是白是黑，也无论是总统还是平民，我们喝的都是相同的可口可乐。”

可口可乐这种“平等”性，捍卫了自身作为美国文化象征的殊荣，这一超然地位，让可口可乐在大多数的时间里，始终压住百事可乐一头。

八、可口可乐引发的危机

时间来到1985年，可口可乐发生了史上最大危机。

此次危机让人们发现：尽管可口可乐是一个超级品牌，但却没有一个成体系的品牌理论来指导实践，以至发生此次危机。

从这次危机后，品牌理论成为全行业关注的焦点，迅速构建起品牌理论的大厦。

文章来源：站酷  作者：赵义