网页频道页面的改版过程

2016-02-17 04:09 28 1 收藏

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

【 tulaoshi.com - 平面设计 】

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

频道首页改版背景

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

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

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

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

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

1.频道首页布局的确定

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

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

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

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

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

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

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

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

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

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

顶部导航上通讯证登陆

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

2-2页尾导航

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

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

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

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

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

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

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

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

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

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

3.2头图处理和图片规范

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

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

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

4.关于二级频道

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

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

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

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

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

最后要说的

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

来源:https://www.tulaoshi.com/n/20160217/1578361.html

延伸阅读
互联网行业,几乎每天都有新的网站上线,旧的网站改版,但不论是新站还是改版都有一个共同的特征就是’全新’,全新的产品结构,全新的视觉风格带来全新的用户体验,这样的创新和调整多多少少都会给用户带来些许茫然。 最近关注一些大型站点改版设计,如七月末淘宝的改版2013淘宝新详情页改版出炉以及针对京东改版谈网页设计趋势,...
iSpeak频道怎么创建频道怎么管理   登录IS后再界面右下角点击第二个图标 在弹出窗口(1)填写频道信息 在窗口(2)自主选择号码 成功创建频道 建立二级频道:1.建立频道,右击顶级频道创建频道,建立二级频道 2.编辑频道,右击需要编辑的频道选择编辑频道。在基本信息中可以修改频道名称,颜色。...
标签: ASP
  在ASP中我们为完成说到页面的减肥就要先说说HTML语言了,这是一种解释性的角本语言,那怎样可以“减肥”呢,因 为在HTML语言里本来是不用换行,不用大量的空格的,但各种用编辑器写出来的HTML为了便于作者查看程序所以都用上了 很多的空格和和换行,好像FP2000这个软件会产生相当多的空格使你网页的内空变得很大。还有一些可以减去的内...
一、需求分析 众所周知这是设计的第一步,个人认为这也是最重要的一步;因为整个活动的风格走向都是在这一步确定的。首先需要弄清楚需求方想要什么,可能这个需求方不止一个人,关键是谁来做决定;通过直接或间接的方式收集到的关键词是热闹、抢;因为是为3月21日的促销做预热,所以整个预热页面的重点就是促销气氛的烘托,以及3月21日当天活动告...
标签: Web开发
为了避免ASP程序和HTML代码混写造成维护困难的情况,本文介绍了一种方法,利用模板来分离程序和页面,使程序设计更加轻松。    在使用ASP制作一个站点的时候,常常会出现一个ASP文件中,程序代码和HTML代码混合的情况。这样子做有许多缺点:    1. 且不说编程时就要对页面布局进行设计和编排,造成代码混...

经验教程

609

收藏

5
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部