网页版面视觉元素赫芬顿邮报改版：视觉形象重塑显示改革决心(组图)

近来，不少应用都对自己的“脸面”动起了手脚——将Logo重新设计或微调，作为视觉形象重建迈出的第一步。

这些人也许对脸面工程并不在意，甚至嗤之以鼻，“改个Logo能够改革顺利了？”别说，还真能。“改头换面”其实是对行业变化的敏锐察觉，或追寻年轻化，或更加更设计感，这是产品革新内驱力的外显。

在传媒领域，我们发现越来越多的移动阅读产品、社交产品也在渐渐进行形象更新。今天，全媒派（qq_qmp）就来探究小Logo背后的大文章。

赫芬顿邮报改版：视觉形象塑造显示改革决心

成为互联网媒体的第一个探索者，赫芬顿邮报曾借助其力推的公民新闻、博客评论体、UGC等新事物在本世纪初的第一个五年里迎来它的黄金时代，然而，当Buzzfeed等后起之秀崛起，赫芬顿邮报网站流量持续下降，其年轻读者正在以惊人的速度流失。

然而，我们便发现，亟待转型的赫芬顿邮报在其形象整形上大刀阔斧地开工了。

首先，一出来看看赫芬顿邮报这次改版，在视觉形象上都动了这些手术：

将当时的官方名称“HuffingtonPost”替换为由读者所取的更短、更时尚也更紧凑的昵称“HuffPost”；

将有衬线细体字logo重新设计为底色更浅的薄荷绿无衬线粗体字logo；

将原来的小写字母H两条横条之间的横杠变成向右倾斜的斜杠，以象征公司的不断前行，并致敬第一份“互联网报纸”的身份；

将原先的静态logo改为可以插入HuffPost字样的动态图标或者可以与视频内容相切换的标识；

对于赫芬顿邮报12年来的首次视觉形象大手术，BrandUnion的CEOSamBecker这样评论道：“倾斜的无衬线风格和粗硬的几何图案看起来好像是把这个品牌走向了小报的领域，但是针对赫芬顿邮报而言，它有足够的妨碍力和历史来再次定义这种形状差异的内在含义。”此外，Becker还觉得，从logo的设计中，很显著能看出赫芬顿邮报想要成为数字化品牌的野心，“新的名称和新的视觉形象，是赫芬顿邮报为公司的下一阶段发展铺路的工具。”

不不过赫芬顿邮报网页版面视觉元素，对于许多媒体而言，视觉形象的塑造常常都是其转型的第一步。在美国数字媒体和变革媒体的视觉设计之中，都有什么值得我们注意和借鉴的新趋势？

这一波视觉革新释放什么信号？图案+配色+页面布局，越来越“轻”

今年开始，Instagram推出新logo的消息被炒得沸沸扬扬。它以扁平化设计且形状宽阔明亮的图标，取代了之前的黑色宝丽来相机图标。同时，其家族旗下的其它应用也换上了统一样式的logo，其中包含Hyperlapse、Boomerang和Layout。

Logo：扁平化/渐变色/非衬线字体/动态化

因为跟微软、苹果、谷歌等APP的扁平化logo相似，有不少人都指责道，Instagram的新logo失去了原有的质感感。

比如新logo的扁平化特征，绚丽渐变的“彩虹色”也导致了不小的纠纷，对此，Instagram公司设计负责人IanSpalter表示，此次以彩虹为主题的图标正代表着Instagram的多样化以及各类生活的色彩。

看到Instagram的绚烂彩虹色，让人联想到国外收视率最高的数字电视Freeview的新logo——

这配色，是不是有异曲同工之妙？

实际上，早在2015年，内容系统Medium就曾打造彩色渐变的新logo。在成立前夕，Medium的logo是一个又大又方、白底黑字、Stag字体的小写字母“M”。虽简单有力，却变得更加平静沉闷，缺乏特征。在尝试了诸多“M”造型之后网页版面视觉元素，Medium重磅打造颇具设计感的渐变色新logo。

成为一个点睛之笔，他们圆润了“M”字母中的各个尖锐拐角，以保证用户在视觉上不会造成不适感。此外，这个新Logo还应用了众多设计美学，比如是否需要有透视、等距，或者前面能否要有投影等。Medium最终成就了一个覆盖十分多不同长度和视角的范围，以保证这个“M”能够展现出最稳定又最赏心悦目的角度效果。

比如渐变色、扁平化的态势，纵观媒体公司的logo更迭，把衬线字体改为非衬线字体，简洁化logo中的词组和图形，logo是动态化，跨系统、跨屏幕被仔细考量也有几个重要的趋势。除了早已看到赫芬顿邮报，Google的新logo同样是一个极好的举例。

相较于旧版本，采用非衬线字体的新logo俏皮、活泼，4个动态圆点可以表示语音输入中“正在倾听”的状况或是搜索加载的过程，简单的大写字母G可以灵活地用在小屏幕上……这些改变都很容易被用户接受。因此，在Google启用新logo之时，其遭到的口水声远不及Instagram半分。

页面布局：卡片式助力潮流

随着信息碎片化问题的凸显，2014年，新媒体集团Vox曾推行一种新的页面布局方式，即卡片堆（cardstacks）。这种新型布局为用户创建起了一个完整的阅读链条，通过构建标题精炼、易于浏览的索引式卡片堆，读者无法更迅速、更便于地知道整个新闻事件。

一时间，卡片式的页面布局模式风靡了整个媒体界，半岛电视台旗下的数字新闻应用AJ+在启用的第一时间便使用了这一全新的页面布局方案。App界面以不同的资讯卡片方式为主显示各种内容，视讯卡片提供视频新闻，图像卡片采用图形信息公布新闻。此外，还有对话与辩论方式的卡片，方便网友发表评论争论新闻价值。通过卡片堆栈的页面形式，AJ+意图吸引更多的年轻客户，并为其提供一种深入挖掘主题信息的感受。

发现这一新型页面布局的演进潜力，许多特色媒体在再次设计网站页面布局时也对卡片式方案进行了尝试。2015年，《连线》（Wired）周刊宣布对报纸网站进行全新改版。改版后的网站，浏览量与颜值齐飞。而网站上的内容正是以卡片式方式展现，板块被大刀阔斧的精简，分为了Business,Culture,,Design,Gear,Science,Security，Transportation六部分，看起来清楚大方，一目了然。

界面色调：极简or炫彩，满足不同审美

自扁平化设计兴起以后，媒体页面极简化变得受到推崇。在搭配上，黑白优雅风便大为盛行。

在Instagram去年的改版中，除去logo的差异，其外部界面也出现了重大改变：UI元素成为了简洁的黑、白、灰三色，去除了红色，使得视频和图片非常显眼。比起此前霸屏的色调，这样的彩色配色让整体观感也更加更为清新。

这种的彩色极简风逐渐占据了界面配色的风口，众多网站/APP都运用了这些彩色调的设计样式，以彰显页面中的详细内容。

其实，好的搭配绝不止有彩色极简这一种。作为一家技术新媒体网站，TheVerge在建立不到三年后一举拿下了五项被誉为“互联网奥斯卡”的威比奖，它之所以能这么顺利，就离不开其出“色”的网站设计。TheVerge网站首页平均分配4至8篇头条新闻，不同的新闻通过不同的色块进行区别。

文字元素：突出字体和颜色的功能性

在上文提及的TheVerge网站中，其对字体功能性的利用也很值得称道。比如网站的新闻标题会选用单独设计的字体，增加识别度的同时也无法突显文章内容。

TheVerge网站的创始人JoshuaTopolsky离开TheVerge之后，进入了彭博社，而他的下一个作品，BloombergBusiness网站，同样十分重视文字元素的功用性特征。

只是，这一次，除了字体的变化，Topolsky还在文字颜色上进行了大胆的尝试。你看，这迷人的红色和白色文章标题，确实无法较好地与文章内容产生区隔，不过争议也不少，大胆之举遭到不少抨击之声。

虽然，面对社交媒体上暴风般的调侃，Topolsky表示，“有些人发现新网站顿时惊呆了，不过我认为，最好的新闻和最好的设计，在你第一眼看到它的之后就会感到有一点儿不舒服。”

其实，坚持缤纷的文字元素的媒体不止BloombergBusiness一个。由雅虎发布的基于Summly的新闻APPYahooNewsDigest，其针对文字颜色的设定相同追求功能性。例如，每条新闻之上会用不同形状的文字来区别该新闻详细属于哪一个特定领域，在每条新闻中，采访对象的直接引语则用白色字体进行呈现。正是那些别具心意的设计，使其一举夺得2014年苹果设计奖。

图像+影音：一直在尝试可视化

实际上，追求信息的可视化对于欧美媒体而言，并不是这几年才追上去的风。由于人类头脑处理文字只能根据线性排序，速度较慢，许多美国媒体经常将视觉化传播方式视为提高影响力并且于开创市场的利器。

HuffPost启动图像讲述并展现当天最重要的新闻；

《洛杉矶时报》引入“视觉浏览”模式，让读者可以借助滚动图片浏览新闻；

YahooNewsDigest的每篇新闻都由照片+标题+新闻摘要构成，用最直接的方法告诉读者今天出现了一件什么事情；

《卫报》设计出“收纳箱”模式，将文字、图片、视频、表格和数据都集中在一起，形成一个个像“收纳箱”一样的信息模块；

《时代》杂志改版后“影音”成重头戏，网页左侧栏滚动播放最新资讯，中间部分修改要闻，而后面则降低了视频和专栏；

YahooNewsDigest页面

这种媒体公司的信息可视化方法各不相似，但实际上都离不开对于影/像/音的精准把控——在这个时代，以文字为主的特色传播模式已经过时了。

视觉形象改造这股风怎么刮出来？以用户为转移+跨屏体验整合

在媒体生态逐渐变动的现今，出生于1980至2000年间的“千禧一代”成为最受传媒产业青睐的“利基市场”。这些听腻了传统媒体陈词滥调的年轻人，是新闻媒体想要稳住脚跟必须得攻下的高地。

新形象能吸引千禧一代吗？

成为堪称“全球青年文化之声”的全媒体公司，ViceMedia在进军年轻人行业上很有发言权。打开Vice中国的网站，黑白灰的版面样式，“一些看法”“你是吃货行了吧”“他们无法不独行”“NOISEY”“这是历史”这些符合年轻人描述方法的标签，都无法第一时间戳中年轻人的G点

当媒体们大举而来接连入局年轻人市场，也有不少摔了跟头。2015年，《纽约日报》发布了题为《我们一路前进》（OurPathForward）的外部报告，试图推行数字媒体品牌来获得行业，却恰巧这一举措竟被网民们评价为像发现了“夜店里的奶奶”。看来，想要真正攻占“千禧一代”的心，像《纽约日报》这类顶级媒体可得跟Vice与Buzzfeed等新媒体多取取经了。

移动端阅读与跨终端融合

随着手机和平板电脑的普及，“移动为先”以及统一不同系统阅读感受的原逐渐变成新闻媒体视觉设计中的重要法则。

《连线》网站参考了其印刷版的排版方式。“印刷版杂志给人‘高端’的觉得，我们认为网站也需要超过这些效果，”主编ScottDadich如是说，“设计完全从相机屏出发，再依次兼容桌面、平板。”在《连线》的各个系统上，色调、字体、版式和各类新功能的设定都大同小异。

而声称要实现电脑、平板、PC端跨设备无缝对接呈现的《洛杉矶日报》，其新版网站的网页设计则与iPad等平板设备的厚实方框外观相契合，打破了特色博客网站的束缚。由此，我们似乎听到，若干年前许多杂志放弃老一套的版面设计，按照电视观众的口味重新设计自身版面的历史，似乎又一次再现了

分析媒体视觉设计新变化背后的深层动机，除了是要吸引千禧一代的年轻读者，以及要追求移动端阅读和跨系统展现的最优化，还离不开其在互联网时代追求商业变现和内容整合进化的目的。在这种动力的一同作用之下，一场浩浩荡荡的外媒视觉设计改革正在全面展开。