网页频道页面的改版过程

南红妮

南红妮

2016-02-17 04:09

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享网页频道页面的改版过程的教程,热爱PS的朋友们快点看过来吧!

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

频道首页改版背景

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

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

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

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

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

1.频道首页布局的确定

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

网页频道页面的改版过程,PS教程,图老师教程网

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

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

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

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

网页频道页面的改版过程,PS教程,图老师教程网

顶部导航上通讯证登陆

网页频道页面的改版过程,PS教程,图老师教程网

2-2页尾导航

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

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

网页频道页面的改版过程,PS教程,图老师教程网

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

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

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

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

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

网页频道页面的改版过程,PS教程,图老师教程网

3.2头图处理和图片规范

同广告尺寸一样,各个频道页面中的图片和控件也都做了统一规范改版,防止过多的随意使用不同的图片尺寸,造成页面上的杂乱。

大头图尺寸只保留4种,除旅游、探索、读书使用特殊尺寸以外,其他频道首页只有2种头图尺寸(横图300X225,竖图300X400)且头图统一放在页面的左栏。如下图所示:

网页频道页面的改版过程,PS教程,图老师教程网

4.关于二级频道

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

网页频道页面的改版过程,PS教程,图老师教程网

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

网页频道页面的改版过程,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

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

最后要说的

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

展开更多 50%)
分享

猜你喜欢

网页频道页面的改版过程

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页频道页面的改版过程

40多款精美的网页改版中页面设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
40多款精美的网页改版中页面设计欣赏

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

网页技巧:网站页面的均衡规划与选择

Web开发
网页技巧:网站页面的均衡规划与选择

探究网页HTML5页面的不同表现手法

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
探究网页HTML5页面的不同表现手法

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

直接将HTML页面打印页面的设计

Web开发
直接将HTML页面打印页面的设计

代码与页面的分离

Web开发
代码与页面的分离

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

能猜测用户行为的界面设计

能猜测用户行为的界面设计

以蓝色色调为主的标志与网页设计

以蓝色色调为主的标志与网页设计
下拉加载更多内容 ↓