512地震一周年专题页面分析----图文并茂

馨元

网站的专题是对某一事件或人物的相关内容的集中展现。

即时性的专题制作要求效率，保证时效，而重大事件的专题还要有广度的拓展和深度的挖掘，准备和策划的时间也更充裕，设计制作的精致不亚于频道。512地震一周年是一个典型的重大事件，通过对全国几大门户网站对此专题的组织与设计的分析，可以学到很多。

从以下几个部分进行分析：

• 专题入口，
• 头图&标识物（toppicture），
• 导航，主色调，版式，
• 共同版块（计时，祭奠区，大事记，灾区一周年现状）
  

选取的网站：网易，搜狐，新浪，腾讯，人民网，凤凰网（页面皆为512当天下午所截。）

馨元

专题入口：

■从各个网站新闻中心的首页来看，网易和搜狐是常规做法-----醒目位放置banner，点击进入；
■新浪腾讯和人民网则是在第一屏开辟了专区；
■人民网较简单，主要是头条+现场图片，侧重直播信息；
■新浪和腾讯则很全面，头条+现场图片+回顾+重访+祭奠。腾讯在专区上方设计的一幅专题导航给页面增添了特殊氛围，本来很见功力，但是头条的下面却加入了与抗震主题无关的一组流感新闻，削弱了整体性。
■凤凰网只在头条部分组织了几个标题，并不太重视。

故此，以重视程度和展现内容来看，新浪最佳，腾讯较好。

尹广磊

顶！！！

馨元

昨天网速太慢了。今天继续。:victory:

馨元

头图&标识物

■网易的标识物用了心形+川字，在头图和首页banner上都用了；
■搜狐没有明确的标识物，头图和banner上都用了解放军的形象，色彩都是黑白，风格较统一；
■新浪，腾讯，人民网都选择了“新生的绿芽“做为标识物，新浪和腾讯在banner和导航以及页面的配色上都始终贯彻着标识物的使用，人民网只在头图里用了绿芽，页面下面居然用了三种配色，极不协调；
■凤凰网的书法感的整体设计非常好，黑白的肃穆配粉色小花的希望，下面的标题栏也沿用了这种感觉。

这样看来，新浪腾讯都是很好的，凤凰网的有新意和美感。

标题栏&色彩
这几年网页设计做下来，我发现最困难的居然是标题栏的设计，每次做专题或者频道改版，布局和头图的设计要么沿用总体风格，要么通过变化色彩和底图来出新，标题栏却总是到最后还是不能太满意，按钮式的，线框式的，大字+图片式的等等。设计标题栏要考虑多个的重复效果，还有扩展性，又不能直通通的太死板，小小的一条有无限的可能，选择是个问题。


■网易的设计很有意思，它的页面设计极简单，色彩也极简，全是里面的子专题的图片撑起来，效果很好。子专题的图片排列左边的图清淡，右边的图浓烈，有章法。网易的设计部门一定有一套规范而强力的设计标准，这几年看下来它们的页面从来没出过那种杂乱糊涂的设计。
■搜狐的主色调就是黑白灰，标题栏也是中规中矩的。
■新浪也是黑白灰，但加强了点缀色的运用，比搜狐的感觉好很多。标题栏上贯彻了头图上512+绿芽标识物的使用。根据不同版块内容，一个群组一种标题栏，和谐而富有变化。
■其实以前不大关注腾讯的页面，但这次的专题真让人惊喜。色彩的运用很适合主题的氛围，萧肃中的坚强与希望。围绕着主色“绿”进行明度变化，分出层次，又加入对比色红，黄点缀，整体用色不多，却不单调。标题栏的设计在文字上做了一些变化，不同的字体，大小，色彩，底图，都是常规手法，但是很好的融合在整体风格中。
■人民网的这个我截图时没给气死，各个部分，每一块单提出来都没问题，可是之间毫无联系，接凑的杂乱无章。色彩上，三原色都给用上了，黑白灰也没省着，还分出几个小明度，总体一看，就像是画完水粉的涮笔桶，一团混浊。
■凤凰网入口上没用功，可是专题本身还是相当出彩的，上面说了标识物它用了一朵粉色小花，与黑白灰的主色调形成对比，深重的灾难与稚嫩顽强的希望。头图上的书法字加强了画面的力量。标题栏有两种，一种有书法字有底图，一种用点缀色和主色的对比。

搜狐，新浪，凤凰都用的黑白灰主色调，新浪的搭配清新平静，个人喜欢凤凰的搭配更鲜明有力量，搜狐就显得太温吞了，没有感觉 。
综上，腾讯，凤凰较佳，新浪，网易次之。（我实在不想说人民网那个是垃圾）

馨元

版式：

这些红线线挺吓人，这是一个粗略的概括，简要的栅格系统。
尺寸单位为px（像素）

■网易的版式，极简，一目了然。

■搜狐的三列，从左至右分别是335,385,225，它们没有共同的单位，显然不是按栅格系统理论来设计的，不过看上去还算舒服。要闻区下面的三块从三列到二列到通栏，这样也许是受到内容的限制。接下来是图片区，175*125，一行五张。下面的捐款区是三列，但尺寸和上面不一致。地震总结的列表可以不用管它。最后部分终于要闻区呼应起来，总体较规矩。

■新浪的页面太长了。很多内容本来子专题里都有的，还非要放到专题首页上。
新浪要闻区的三列是按栅格来做的，分隔单位是40px，从左到右分别是320px,360px,250px,右列本应该是240px,但是列间距是10，总宽度是950，为了弥补少的那10px，就加到了右列上。下面的子专题区的三列是360/335/255，搜狐的分列中也有个335，335只能分解成5*67，实在不知道这个335是怎么分隔来的。接下来是两个通栏，承上启下。接下来的五个版块，四个三列，一个四列，三列的分隔全不一样，但井然有序，图文并茂，都用了背景图来表明版块主题。视频区缩略图外框是个小播放器，和图片区的缩略图区分看来，细节见用心。再下面四个版块充分显示了新浪对图片块的各种大小的分隔组合能力。最后一长串新闻链接。最后在佩服一下这个页面的设计者，这么长的页面，做到了风格统一，形式多变，不容易。

写文章常以“凤头，猪肚，豹尾“来评，页面设计也是如此。新浪的头图简洁，喻意明确，中段的版式多样，内容充实；下半部分以图片为主，托得住底；尾部不太好，一大串新闻链接，也算工整。

■腾讯的要闻区的三列是205/375/330，列间距是25，总宽度960，这种分隔算了算不是栅格来的，但不知是基于什么原理出来的，请大家指教。
“书诗歌思像励“这部分不仅用了背景图，还加入了纸纹肌理，效果相当不错，但是有点夺里面文字内容的感觉。
’穿越地震带“的废墟背景和上面左侧的蓝天连接融合起来，呈现出空间感,甚至某种镜头感。
下面就百花齐放了，腾讯真能整，尝试了各种图文组合，四列，三列，对开，滑动门，上下，左右，学习了。
最下面文字列表和友情链接，整齐清楚。
整个页面风格统一中有变化，版式灵活，最可贵是长度适中，收得好，和做人一样，要知道适可而止。

■人民网，唉，说什么好啊，人家的美编忒有创造力，哪个版块都能给整出个新样式，眼花了。

■凤凰网，宽1005px，要闻区的三列是425/245/335，不是基于栅格，但也挺舒服的。视频区是400/430/135，间距为20px，左侧的视频大图还好，中间的视频小图其实看不清什么，从形式上来说还好，是大图和中间文字列表之间的一个过渡，可是作为内容来说，并非有效的传达，易被忽略。
“重生”区左右为665/335，主要用图片+标题+简介的形式，从形式上看是不错的，有图和标题的图文对比，有标题和简介的字体与大小色彩浓淡的对比；但是，我一直怀疑简介的作用，通常标题和图片做的好的话，足以说明了，感兴趣的会点进去看，没兴趣的看了简介也就足够了。“重生地方”的伤城部分也用了背景图片，灰度的，剪影的，比腾讯的更简练了。
整体还是线框，有节制的丰富背景和细节，标题栏设计值得学习，长度适中，但是内容比较单薄，整体的密度不够。

这个部分是新浪和腾讯的较好了，一个是对大量内容的有序掌控，一个质感上进行了很好的设计。

馨元

共同版块

对共同版块的分析有两点，对相同内容的不同设计，不同比例安排。
其中“重访“”重建“等都等同于展示一年后的状况。



■网易没做。

■从搜狐说起，计时和致祭没什么特别的。大事记的日历易于查询，下面的日期+事件关键字概括又简练。好的设计必须和技术结合，哪怕是很小的技术应用。

■新浪的把计时和致祭做到一起，四张黑白图选得精心。大事记没有罗列，抓住几个“第一”，中间结合网友互动，右侧再用三个小专题从不同角度总结，有点有面，相当好的设计。又引出一句，好的设计必须要有质量的内容支撑。
“重访进行时”这一整块装了很多内容，井然有序的安排，亮点在路线图的设计，直线+圆点形成图形化的细节，调和单调的图文展示，绿白的配色和整体是协调的。

■腾讯的致祭和导航连在一起，和要闻与新闻图片幻灯构成第一屏。
“穿越地震带”的路线图用了滑动门，虽然没有明确统计但是我总怀疑滑动门的效果，滑动去看后面内容的比率是多少呢？左边的大图部分相对中右的小图形成稍微上浮一些的效果。但是再次怀疑标题下面加几句简介文字的形式，能展示多少有效的阅读内容。
“那天那月那年”里面的几项相当于小专题，比起单纯的罗列时间更见用心。

■人民网的大事记标准的大事记，日期+事件。
“重建家园”又是一种布局，本来可以做得规矩好看，结果文字超出，标题折行，变得惨不忍睹。

■凤凰的致祭做的相当细致，还配上了遇难者照片，下面还有具体的物品可供选用，是能激起人感情的设计。
“重生那些地方“和整体其它版块设计一致，左边前言+三图+地点，右边两张长图。值得注意的是，左边图高110px，右边图高120px,，在视觉上相差不多，只是图的比例有变化，给人一种和谐的等距感。即感觉内容是处于同一平面的。

综上，新浪和凤凰这部分的设计为优。

馨元

结语


好了，至此，整个分析写完了，我以为会写一年呢，还好。

看了很多视觉效果非常棒的页面，但是并不是所有的页面都能那样去做的，要分主题和内容去看待。我个人平时用的最多的还是这种需要放置很多内容的设计样式，所以并不是靠效果就能把这些东西组织好的。于是自己收集页面做一些最基础的分析，做些笨工夫，希望也对大家有用。

尹广磊

:victory:

董建文

很细致，顶了。

馨元

:loveliness:

董珊珊

:victory:

bbc123

感谢！！

刘坤

分析很透彻，学习了。

434745236

:funk:厉害

张3伟

页面设计主要还要看具体团队的实力和制作周期。
有些你设计出来，但是还要编程或工作量大的原因，导致做不成。
还是结合手中现有资源合理展示吧

jacbor

:victory:  有章有法 条例分析~ 顶了

小企鹅

顶！非常受启发。

晚语

这样研究专题，还真得花点功夫，效果很不错，很佩服

googshow

分析很细致、很详细