网页设计心得:网易频道的改版实例

网页频道页面进行了改版,布局仍然是传统三栏目模式,但是这次改版把中栏调整为主题内容栏,比较符合国内网络用户的中栏浏览、阅读习惯。三栏从上至下通栏整齐,方便阅读,在阅读中栏的同时可以兼顾左右边栏的内容。

频道首页改版背景

先说明一下,在此次改版之前的上半年,已经进行过一次对网易首页和频道首页的整体改版,这次改版为上次改版的优化设计。主要针对:

1.保留了传统三栏目模式,但是三栏布局上做了调整。    

2.头部导航区域进行了重新设计。

3.新年后各首页将上线新的广告,对频道首页的广告尺寸做了优化统一。

4.对频道页面的图片控件等都做了优化统一。

1.频道首页布局的确定

布局仍然是传统三栏目模式,但是这次改版把中栏调整为主题内容栏,比较符合国内网络用户的中栏浏览、阅读习惯。三栏从上至下通栏整齐,方便阅读,在阅读中栏的同时可以兼顾左右边栏的内容。而改版前的左栏为主题内容栏,用户阅读时最多只能延伸到中栏,右栏的阅读点击非常低。

2.头部导航区域改版设计

2.1 顶部导航条将搜索框取消,下移整合至频道导航的上方右侧,不同的频道自动默认搜  索本频道关键词内容,合理用户体验。增加了顶部导航条上的频道入口数量。

2.2 调整了头部通栏广告的尺寸和高度,广告尺寸具体再下面内容介绍。

2.3 频道LOGO取消域名变小尺寸统一为107×24. 旁边增加热点关键词。

2.4 频道导航条取消了之前右面的归类内容,统一整合在导航条上,导航区域的内容精简明确。有主次2级导航,次级导航可以根据频道内容需求取消或使用。将新闻日历等功能与搜索功能放在一起。

2.5 导航上前面页采用滑动标签设计,频道首页默认为首页。点击进入不同的二级页面后滑动到相应的二级页标签,二级页下属的2级3级则默认为最上级二级切换标签。这种设计可以提高编辑对频道二三级页面的规划归类要求。

顶部导航上通讯证登陆

2-2页尾导航

页面底部导航取消了搜索,之前保留此搜索时,使用率极低。

页脚编辑和公司版权信息等文字颜色均为#4d4d4d

3.广告和图片尺寸的统一改版

3.1 新年后各首页将上线新的广告,销售和设计中心对频道首页的广告尺寸做了优化统一。

首先,销售提出需要修改的广告尺寸初稿。

然后,设计中心根据页面的布局,美观,合理性方面进行建议调整这些尺寸。

最后,经过无数次的多方面讨论和协商制定出了最新的广告尺寸规范,这也是网易所有的页面:首页,二级三级页都统一使用的广告尺寸。

3.2头图处理和图片规范

同广告尺寸一样,各个频道页面中的图片和控件也都做了统一规范改版,防止过多的随意使用不同的图片尺寸,造成页面上的杂乱。
大头图尺寸只保留4种,除旅游、探索、读书使用特殊尺寸以外,其他频道首页只有2种头图尺寸(横图300X225,竖图300X400)——且头图统一放在页面的左栏。如下图所示:

4.关于二级频道

二级频道在整体大规范上的改版与首页基本一致,频道导航上采用滑动的标签设计,点击进入不同的二级频道,滑动到相应的标签上。频道LOGO后面热点换成二级频道的频道名+面包屑路径。

二级页面的布局是主要在首页标准布局上,可以根据不同的情况需求延伸到几种变化。如图:

这些延伸的布局样式基本涵盖了所有网易二级页面的需求,二级页面可以比比首页灵活一点,如排行页、列表页等都可以根本不同的情况需求,在使用这些延伸的布局。这些也可以严格控制编辑胡乱编排布局。

最后要说的

这次改版主要是优化之前的版本,更加清晰、条理、整洁,更多的注重统一性和规范性。成功与否,关键还是在于用户使用后的数据反馈。而且在这次改版中也发现了问题,这次的统一性规范性基本做到了位,但是一些频道的频道个性味道并不突出。这也许应该就是下次改版我们需要思考和注意的地方,在保持统一性规范性的同时,怎么来加强频道之间的个性化。

时间: 2024-09-01 07:22:11

网页设计心得:网易频道的改版实例的相关文章

网易频道首页改版分享

频道首页改版背景 先说明一下,在此次改版之前的上半年,已经进行过一次对网易首页和频道首页的整体改版,这次改版为上次改版的优化设计.主要针对: 1.保留了传统三栏目模式,但是三栏布局上做了调整. 2.头部导航区域进行了重新设计. 3.新年后各首页将上线新的广告,对频道首页的广告尺寸做了优化统一. 4.对频道页面的图片控件等都做了优化统一. 1.频道首页布局的确定 布局仍然是传统三栏目模式 ,但是这次改版把中栏调整为主题内容栏,比较符合国内网络用户的中栏浏览.http://www.aliyun.co

设计参考:网页设计中的渐变文字应用实例

使用色彩渐变作为一种处理类型是在网站设计中制作迷人的文字的一种非常流行的技术.它们用于多种情况:网站logo.介绍性文字.视觉元素等等.但是请特别小心:造成时尚或俗气的只是在Photoshop设置里面的一些小错误,一点细微的差别就可能适得其反. 如果你正好在寻找网页设计中的渐变文字类的实例和灵感,这里是一些很不错的例子.希望能为你的设计提供些参考. 虽然用Photoshop/Fireworks等制图软件可以很容易的创建漂亮的文字渐变效果,但是我们同样也可以用CSS创建漂亮的文字渐变效果,而用CS

网页设计心得:网页设计中的包容原则

让我们来探索 包含原则 奥妙.它允许我们忘记在我们的社交行为中根深蒂固的那种"他们"和"我们"之间的对立.聚焦包含原则将无障碍/通用设计的争论从上述利益冲突中解放出来,让我们拥抱一种更宽阔.更接近自然的设计哲学.最重要的一点,聚焦包含原则也帮助我们了解到,我们不仅是为了别人才重视可访问性,也是为我们自己好. 设计师的工作一直与"可视性(affordance)"有着密切的利害关系.这个词自唐纳德·诺曼(Donald Norman)的名著<设计

网页设计心得:高效编写网页代码

本来这第七章应该是针对设计中的层次.空间的技法及深层次的探讨.但今天暖暖跟我哭诉她事情总是处理不完.加上今年3·4月份公司的一大堆生意的顺利完成.以及那时候总结出的一些经验.觉得效率这个问题还是很有必要跟大家分享分享的.时间仓促,分类不明确,还请见谅! 本文从三个方面着手,一个是企业网站的建设(教育政府类也归纳到企业站点里),二是小型门户站点的建设,三呢,我把平面广告设计也顺带提一点.主要还是网站. 其实企业站点的工作量并不大,相信很多有经验的同仁能够把普通企业站可能用到的栏目一口报出来.在这里

网页设计心得:网页设计中的细节表达

     天下难事,必做于易;天下大事,必做于细.--老子    设计中的细节表达,能够体现一个人的创新意识和能力.注重细节,能够让你去挖掘出更深层次的内涵.从而在侧面大幅度提升作品的影响力.让设计更具说服力. 细致入微    在写作中,使用细节来渲染.突出人物的形象.性格,是一种很常见同时很有效的方法.细节贵在传神,传神而突出.可以用来烘托气氛.衬托环境.突出人物性格:在产品中可以提升用户舒适度,提升用户的安全感:在生活中,细节可以让人感动.    这里并不是把细节给神化了.无论你是大开大合,

网页设计心得:设计师理解搜索结果页SERP

一直很想就搜索结果页写一些心得文章出来,甚至连目录都整理好了可是就是一直没有动手. 因为总是觉得还差很多东西需要研究需要分析需要验证.最近也组织了一下公司集团在这条线上的设计师交流分享,发现大家想交流的点也非常多. 所以鼓起勇气,逐步去写一些东西出来.很多时候这里不是解决方案也不是经过验证的道理,而仅仅是一种思路,或者翻译的一些文章借此与大家探讨. 前言 什么是SERP,随便你怎么叫它,list页面?搜索结果页?列表页?反正都是指经过搜索引擎搜索后见到的结果列表页. 主体结构大致如此 页面虽然简

网页设计心得:网页搜索框更像搜索框

1.搜索框的意义       用户总是和你想的不一样,用户很多时候是不会按照你设定的导航走的,他们更多的时候是上来就直接输入关键字进行搜索.对于购物者而言,如果清楚的知道想要什么,他们会很明确的使用搜索框,这种情况下购物者显示出了明确的购物意图,因此搜索框能够把该意图转变为真实的购买行为.来自Fast Search的数据显示,30%的购物者进入电子商务网站后会立刻使用搜索框,超过30%的人通过导航没有找到需要的物品后转而使用搜索框.       如果一个网站没有足够合理的信息架构体系,那么搜索引

网页设计心得:把导航系统做薄

和朋友讨论时,我提到过一个观点,所有框架层设计中,最核心的是导航设计.最近更看到有国外同行提出"80%的可用性是导航!"因为良好的导航可以保证用户找到任何信息.也就是说,提供到达的可能,远比如何到达的可用重要. 我习惯把导航分为一维.二维.多维来简单理解,一维对应线性结构,二维对应分层结构,多维对应无序结构.这么说可能比较抽象,其实都已经是耳熟能详的应用,分别举例阐述设计意图: 最原始仅限于一二三级的,单对多树状应用就是"分层导航",基本属于必要元素. 跟踪用户行为

网页设计中针对中文排版CSS心得

css|设计|网页|网页设计|心得|中文 数月来学习web标准,并遵循标准设计和制作web页面.一直想写点什么,整理一下自己的心得体会.写这篇文章,主要是针对中文排版设计,英文排版因为很少做,所以不涉及. 先介绍如何设定字体.颜色.大小.段落空白等比较简单的应用,后面再介绍下比如首字下沉.首行缩进.最后讲一些常用的web页面中文排版,比如中文字的截断.固定宽度词内折行(word-wrap和word-break)等等.因为只是写一些应用方面的心得,如果需要完整的CSS属性介绍,请参考CSS手册.