the daily mail的成功之路：从用户体验出发的反传统网页设计

　　前几天收到《环球企业家》一位记者朋友的电话，说能否从设计和用户体验的角度说说为什么《The Daily Mail》(每日邮报)会迅速超越《纽约时报》，成为世界上点击量最高的报纸网媒。从其官网我们能看到，现在它们有每月 4000 万独立 IP 访问，更有意思的是，其中三分之二的流量并不来自报纸的发行地的英国。在这个凡事都需要被归纳成模式，似乎成功人士都修练了某种心经，而爆棚的网站一定是遵循了某些市场和设计原则的时代，The Daily Mail 的网站设计可以用非常“简陋”来形容。

　　2013 年 3 月 19 日晚上 8：20 分左右的首页截屏

　　在问答网站知乎和 Quora 上，已经有不少人在讨论为什么《每日邮报》会这么成功?由于本人非常不喜欢看长篇大论的 1，2，3，4，差不多就是鼠标滚到底，粗略看了几条最短的评价，比较有说服力的包括：

　　首页没有广告，让用户专注于内容;

　　抓住刚需内容，如“性”和“绯闻爆料”;

　　高清无码大图，让你一次看个够;

　　瀑布流，无刷新提示，引导用户长时间停留;

　　为了深刻感受《每日邮报》的强大吸引力，我高频率的使用了 3 天，从内容、用户心理、搜索引擎优化、网页设计、背后的设计团队几个方面说说我的理解。(之所以只用 3 天就仓促发言，缘于我给自己看产品的“直觉原则” - 真正吸引人的产品不需要过度“脑补”，直观感受即是核心价值)

　　内容

　　我将新闻内容分成三大类：

　　精华(值得深度反复品位的评论员文章);

　　专业(与用户工作与兴趣相关的知识和信息类内容);

　　无聊(填满用户的碎片时间的八卦、萌系、敏感、搞笑、惊悚、雷人等内容)。

　　对于一般用户，无关阅读优先级，对三种内容都有需求，而前两类属于压力阅读，因为潜意识中必须从内容中抽取“关键词条”混合用户的“认知模型”进行信息构架。简言之，这是一个用脑过程。对于无聊类内容，通常用户用来刺激和替换脑中的非必要信息，简言之，这是空脑过程。《每日邮报》的主体内容由科技版块的轻内容——“轻用脑过程”，和各种重口、高清和刺激的“重空脑过程”构成，这就为用户构建了一个愉悦的体验，适度压力加上放松，这种极致体验咱们可以类比“洗脚按摩”——痛并快乐着。

　　一级界面无广告，而次级界面开始加入大量广告。这是一个简单的策略。对于大多数信息浅层索取用户，看到主页的长标题和大图，以及巨量丰富的相关信息(界面被设计得在单位面积内挤入了超负荷的快速更新信息)，已经满足了其用脑和放脑过程。如果用户被图片内容吸引，可以进入次级页面浏览大量高清图片(通常 5-10 张)，由于图片的视觉吸引，用户不太在乎旁边的广告干扰。

　　特色的“femail”女性内容模块，“据说”在内容贡献和吸引用户方面居功至伟。我并没有看到《每日邮报》的直接数据，因而无法判定这个内容模块的流量。但是从逻辑上分析，《每日邮报》的整体内容呈现至少到目前为止是全面导向“女性”、“刚需”的，因此每一个内容模块用户一定程度上都可以当八卦和猛料来浏览。femail 模块反而是里面口味最清淡的，主要以女性用户的直接需求，如美妆、购物、饮食和母婴为主。我不认为这是网站点击的主要来源，但这个模块可以为其合作商家直接倒流量，从宣传上大力推介是可以理解的。

　　粉色主题的 femail 模块

　　用户阅读心理

　　关于用户心理，总是和网站设计和内容分不开的，这里只提出几个有意思的点来说。

　　关于文章内容深度的把握

　　以《纽约时报》为例，媒体领域一直对其马首是瞻，其内容的专业深度和社会道德等考量绝对属于业界的顶级水准，其网站和移动端的设计，也是将品质贯彻到底，连字体和内容排列间隙都是极为考究，其“气质”和“品质”无需赘述。国内媒体诸如《中国企业家》，在业界同样有口皆碑，内容深度甚至好于《第一财经周刊》，但销量却无法与其相比。更极端一点的例子：你能说《男人装》的内容很有深度吗?同样，《纽约时报》流量也被《每日邮报》无情超越。

　　也就是说，读者面对高质量内容是有阅读压力的。专业读者只占总体数量的一小部分，大量读者需要的是能快速获取新鲜信息的服务，“新鲜愉悦”和“客观呈现”是重点词。作为英国发行量第二大的报纸，《每日邮报》正在全球几个城市筹建新的网络版内容团队，以使其能迅速向用户提供第一手消息。仔细品位《每日邮报》的文章，虽然有大量的爆料和擦边球内容，但是用图片说话和保持基本的客观立场(编辑们不会明显偏左偏右)一直是一个内容底线。编辑们也不会故作深沉，以降低内容的阅读压力。

　　《纽约时报》的 Chrome 端应用，设计精良，内容品质高

　　关于用户评论

　　《纽约时报》网络端不开放评论，只能做社交分享，言下之意：我的观点不需要你们来评价。《每日邮报》文章下面有丰富的评论区，允许用户进行“顶”和“踢”操作，言下之意：欢迎你们吐槽，说不定内容比我们的正文更有意思哦。分享功能不多赘述，这是网媒的标配，不过登入《每日邮报》的官方 Facebook 账户，其活跃度还是会吓人一跳——原来“吐槽”才是人民群众真正喜闻乐见和亲身参与的健脑活动。

　　《每日邮报》的评论区，经常看得我高潮迭起

　　类似的例子，我们可以参考“豆瓣”。经常玩豆瓣的朋友都有这样的经验，一个好玩的帖子，主贴绝对只是一个导火索和被吐槽对象，真正好玩有才的一定隐藏在后面的评论中。UGC 不止是对于焦点问题的贡献，也同样来源于零散的回复信息之中，而且这会是一个趋势，自生长内容通过有效的算法和适度运营，可能为网站带来意想不到的用户群。

　　豆瓣小组热贴回复数接近 2 万，还在不断刷新中

　　标题一定要长

　　让我们回想诸如新浪、搜狐等门户，由于条块化的分区，很多内容要求必须精简到 8-10 字符内，以至于我们经常无法将标题和内容对应起来，又怎么会点进去继续浏览?《每日邮报》对于标题的要求只有 1 个：长，一定要长，长到用户不浏览具体内容也能抓住关键信息。这样的信息传达才是有效的。

　　这其实也源于中英文不同的语法构成和阅读习惯。中文是高度概括和隐喻的，我们习惯绕圈来说事儿。英文是简单粗暴的，你必须直击爆点，标题中对于同一个事物往往可以用好几个形容词。我们回忆一下乔帮主的演讲 – 无可比拟的，极好的，难以置信的，前所未有的，都是被反复使用的词汇。

　　标题 + 副标题 + 图片，信息传达已经到位，想看更多比基尼大图，请进入次级页面

　　搜索引擎优化

　　这个因素一般是被非技术人员忽略的，作为设计师，我也不是这方面的专业人士，只能蜻蜓点水的说一下。但实际上从网站运营和数据来说，SEO 绝对是一个值得关注的核心点。虽然谷歌不断调整算法，造成以往的很多 SEO 方式不再适用，但总体来说一些关键方式依然重要。

　　还是长标题。

　　长标题包含最多的信息和关键词，至于这样为什么利于 SEO 我就不解释了。我们只需要知道，这样的长标题在满足设计原则基础下，从内容到 SEO 都是很占便宜的。

　　还是清晰无码大图

　　如果我们需要找观点，可以去《纽约时报》，想和奥巴马侃大山，可以去 Google+，我们的选择很多，对于入口我们几乎没有粘性。就像我们并不在乎去哪个地方给手机充话费，而是看哪边的折扣更加吸引人，在这点上，门户并没有任何优势。

　　但是如果我们想看八卦消息的高清大图，《每日邮报》几乎是我们唯一、最佳选择。这就是“刚需”，从它们自己披露的数据来看，其 60% 的流量甚至不来自 Google 和 Facebook 这样的平台门户，而是用户直接访问。这是相当厉害的，也就是说《每日邮报》和 Facebook 一样，由于主要是独立访问，几乎可以不卖 Google 的面子，用户的黏度非常高。同样，当我们在 Google 用关键热词搜图，大量的结果也导向《每日邮报》，这也给网站带来丰富的流量。

　　网页设计

　　终于可以说设计，其实我看来，《每日邮报》不仅没有违背设计原则，而且它还符合很多新近的设计趋势。

　　网页无主次设计

　　在传统的网页设计中，我们经常提到“F”区的概念，即标题栏和左侧导航栏以及第一屏的显要位置需要特别设计，甚至精确到像素。对于《每日邮报》来说，这样的网页内容主次是模糊的，因为全页面都是无刷新的超长信息流。用户可以一直下滚到 30 屏左右。这样的“瀑布流”式的新布局，其实就是在引导用户将阅读习惯从“标题 - 内容页”模式转向“平行信息区块”模式。每一个信息模块都是独立存在，用户不是必须进入次级页面才能浏览详情。

　　一个典型的“平行信息模块”设计

　　这种信息设计风格，最典型的是微软的 Metro UI 设计。虽然在操作系统层面还不成熟，但是在内容呈现上的优势已经很明显了。只不过在系统层面可以加上一个实时更新功能，在网站端应用的还不广泛。

　　另一个值得注意的趋势，我们称为 parallax scrolling (视差滚动)，这是利用 html5 技术的一种新的信息呈现方式，相信也会在越来越多的强内容网媒上频繁使用。

　　采用视差滚动制作的 Spotify 主页，为用户带来丰富的感官体验

　　利用主次内容排列，引导用户形成网页位置依赖和主次页面间的内容高度交换浏览

　　这个比较拗口，需要着重说明一下。我们仔细观察《每日邮报》主界面的设计，每个主体内容都有 A(主体内容)、B(辅助内容)和 C(相关内容)构成，在首页的比例大约是 1：2-4：5-7。

　　《每日邮报》首页的内容分布情况

　　这个比例在次级页面就比较夸张了，一个分页中除了大量的辅助高清图片，还有超过 200 个 C 类相关内容的图文链接，保证用户在任何时候，只要分心就能通过右侧的链接回到某一个内容的一级页面，从而形成一个用户在“一级页面 - 二级页面 - 一级页面”的循环阅读情境。我认为这是《每日邮报》一个非常核心的内容引导模式和设计创新。虽然从网页美感角度，特别是次级界面会很凌乱，但是却非常有效。网页设计师需要考虑的绝不仅仅是美感，还有页面的可用性。

　　在这点上，不得不提一下 360 导航。在我看来，360 的产品迭代和用户需求的转化率是同行里面极高的。特别是在 360 导航这个产品上，短短时间做到了市场老二，且逐渐将更多的文字静态链接替换成了“基于用户个性定制的图文侧边栏”。

　　当然，这里还会遇到一个算法问题，比如用户经常浏览一些比较刺激的视频，如果导航将此类的标题和大图置于用户首页，可能会让用户尴尬和愤怒，如何适度的做内容露出也是需要仔细考虑的。

　　虽然还是免不了刺激的文字和图片信息，但是 360 导航的个性化引导已经做得很好

　　一切为了便于点击

　　只拿几个数据来说明：《每日邮报》的图片平均大小超过 636pix，标题长度大于 20 个字符，一个主体内容旁边的“小故事”超过 260 则，所有的图片内容均免费。

　　这一切都保证读者来到网站，便会不停地点来点去，并且发现不管怎样总是会回到首页，并且因此发现更多有意思的内容。网站的用户平均停留时间超过 10 分钟。

　　背后的设计团队

　　《每日邮报》的设计团队是来自伦敦的 Brand42，他们的客户主要是全球大品牌以及一些亟待转型的传统媒体。《每日邮报》的网页整体设计获得了 2012 年的最佳设计大奖。

　　Brand42 的客户

　　关于这家公司可以说的很多，我只说两点：

　　1. 他们同样遵循一般的设计公司的规范设计流程。他们为时下的网站、移动端和品牌做设计与咨询，这与国内的由平面设计转型的品牌设计公司类似。

　　视觉设计和不同内容区块的整体色调设计也是他们为《每日邮报》设计的一个特征

　　只是他们的名字——42 的来由有点意思。在道格拉斯•亚当斯的《银河系漫游指南》中，超级计算机关于生命、宇宙、万物的终极问题的答案正是数字“42”。有了这样的愿景和追求，也难怪他们可以做出这么别具一格的设计。

　　非常俏皮的公司介绍，整个环境是复古 + 轻松 + 无厘头

　　2. 关于定量研究在设计中的重要地位。作为设计研究员，我会经常头痛于向客户和其它专业的同仁解释设计价值。因为设计的很多方面大量依赖直觉和感性以及长期工作的经验，这是不可能用数学模型来定量分析的。但是网页设计稍有不同，由于可以从用户那里获得大量的信息，我们可以通过诸如眼球追踪和网页热区捕捉等技术来从数据角度分析用户行为。所幸我在伦敦游学期间和不少的设计工作室进行了交流，虽然没有直接与 Brand42 的设计师聊到定量分析的话题，却也学习了一些技术和交互的融合方式。不难想象，Brand42 在《每日邮报》的设计过程中，做了大量的眼动实验和 AB test。最终的呈现形式虽然是“杂乱”的，但排版同样是精确到像素的。

　　国内同行可能对我的说法嗤之以鼻，“哪家互联网公司不注重数据?”。的确如此，但是《每日邮报》的逻辑是“设计驱动数据”，即首先确定了用户逻辑，怎样的内容和设计是引人入胜的，然后用代码和数据做迭代和改进，在这里设计创新和内容和合理呈现始终是核心。我们国内大量的网站则是先扔一个原型上来，买流量跑用户数据，然后依赖数据进行网页调整，按照运营来安放广告位。最终的结果就是：网站没有设计，毫无美感且大量趋同(你买的数据能和别家的有多大区别?)

　　小结

　　人们容易有一个思维惯性：给成功者建模。因此，在 Facebook 成功后，有大量的解析扎克伯格和 Facebook 设计的文章和书籍。对于已经逝去的乔帮主则更甚，正所谓脑补无止境。

　　实际上，互联网产品的成功大量依赖特定时空下的特定机遇，就像今天的《每日邮报》，我并不觉得这值得网页设计师和互联网分析师去大书特书，我在这里写写，你们转载或者批一批也就行了。在 AOL、Google、Twitter、Tumblr 和 Facebook 等的狙击下，我并不觉得它的流量还会这样无节操攀升下去，其内容本身的限制以及盈利方式的单一等都对其接下来的发展不利。反观 Facebook 等社交平台，运营内容只是其非常小的一个模块，社交关系和 UGC 以及第三方应用的空间都极大，这是暂时还无法摆脱“媒体属性”的《每日邮报》所无可比拟的。

　　我更加期待的是 Google Reader 关闭之后，佩奇对于 Google 产品线的进一步精简和整合;Facebook 不断调整其交互细节和用户时间线的尝试下的社交属性的变异;Twitter 作为时代脉搏，更好的内容算法和大数据运营的新盈利模式出现。