吖真拙见之腾讯首页改版

标签:
腾讯首页改版引导动画板块调整空间间隙行高颜色隔行换色侧重点it |
分类: 吖真拙见 |
刚开了个部门会议,回来看到QQ有老基友发了留言给我,说:
“
.原来是flash
”
然后我就点上去看,是html5还是flash暂不讨论,发现一些我看到的关于前端的东西,分享出来...
1、引导动画
以纸飞机的形式:“是你 一直驱动我们前行”、“新版腾讯网 为你而来”、过去的就如同纸一般飞走,而迎来的是一架具有新内容的灰机,过渡和谐,创意十足,有新旧迭代的层面,又不乏“用户”的体验,因为它是“为你而来”...
2、板块/细节
板块调换增删,其实我不是一个爱看新闻的人,看也只是看美眉写真图片相册,对于满是文字的东西很枯燥,当然除非是我感兴趣的文字...这一块我也是在飞机折叠的瞬间截图,再跟新版对比的,就我看到的不同有以下几个小点:
1)头部导航topNav
topNav左侧如图:

更新icon,保留手机/ipad,次要化“设为首页”一项,“帮助”整理成下拉菜单形式
topNav右侧如图:

增加新版介绍,引导用户了解新版新增板块功能,罗列TX旗下主要品牌产品,而不是单单微博,删除注册多余项,因为在弹出的登录框里面,有注册引导。
topNav设置为自适应屏幕宽度,而不是固定宽度

2)主体导航mainnav

将mainnav从普通青年变成文艺青年,增加背景与普通文本区分开,以strong包裹小标题,突出分类
logo与soso整合,提取到上方凸显。删除2B功能换肤,一直都觉得换肤其实没多大作用,不知道有多少人会去用它。
3)简化模块
简化“天气”功能并与下侧“要闻”“XX新闻”模块整合:

4)减少边框,提高可读性

通过字体颜色,粗细,行高的调整(测量比较了下,行高从24px调整到26px),达到划分板块的作用,减少模块边框,让信息条理明朗,提高信息可读性。
5)快捷产品导航pronav

原来只是用隔行换色的方式区分行,而新版还通过增加文字行距,让文字条理清晰,小分类用浅蓝色标志凸显,不过位置在左在右,这个没多大关系吧...
6)大家爱看
其实我不是很爱看,对于捞针式的浏览我没多大兴趣,毕竟没那么多空闲时间,需要的文章百度下就可以了...

这个分割标签是不是参考facebook的设计? 前几天不知道为什么能上facebook,然后我对它那个设计很感兴趣,所以印象比较深...
7)栏目板块标题

基本所有板块栏目标题都是以2像素实线存在,但是下面这个确实1像素点线存在,是不是有点穿越了...
因为我最近也在做改版工作,所以发现相关的题材也就研究一下,由于本人能力有限,有误导乱侃的话,就直接无视吧...
“
.腾讯首页改版动画
http://www.qq.com/
.我以为是html5.原来是flash
”
然后我就点上去看,是html5还是flash暂不讨论,发现一些我看到的关于前端的东西,分享出来...
1、引导动画
以纸飞机的形式:“是你 一直驱动我们前行”、“新版腾讯网 为你而来”、过去的就如同纸一般飞走,而迎来的是一架具有新内容的灰机,过渡和谐,创意十足,有新旧迭代的层面,又不乏“用户”的体验,因为它是“为你而来”...
2、板块/细节
板块调换增删,其实我不是一个爱看新闻的人,看也只是看美眉写真图片相册,对于满是文字的东西很枯燥,当然除非是我感兴趣的文字...这一块我也是在飞机折叠的瞬间截图,再跟新版对比的,就我看到的不同有以下几个小点:
1)头部导航topNav
topNav左侧如图:

更新icon,保留手机/ipad,次要化“设为首页”一项,“帮助”整理成下拉菜单形式
topNav右侧如图:

增加新版介绍,引导用户了解新版新增板块功能,罗列TX旗下主要品牌产品,而不是单单微博,删除注册多余项,因为在弹出的登录框里面,有注册引导。
topNav设置为自适应屏幕宽度,而不是固定宽度

2)主体导航mainnav

将mainnav从普通青年变成文艺青年,增加背景与普通文本区分开,以strong包裹小标题,突出分类
logo与soso整合,提取到上方凸显。删除2B功能换肤,一直都觉得换肤其实没多大作用,不知道有多少人会去用它。
3)简化模块
简化“天气”功能并与下侧“要闻”“XX新闻”模块整合:

4)减少边框,提高可读性

通过字体颜色,粗细,行高的调整(测量比较了下,行高从24px调整到26px),达到划分板块的作用,减少模块边框,让信息条理明朗,提高信息可读性。
5)快捷产品导航pronav

原来只是用隔行换色的方式区分行,而新版还通过增加文字行距,让文字条理清晰,小分类用浅蓝色标志凸显,不过位置在左在右,这个没多大关系吧...
6)大家爱看
其实我不是很爱看,对于捞针式的浏览我没多大兴趣,毕竟没那么多空闲时间,需要的文章百度下就可以了...

这个分割标签是不是参考facebook的设计? 前几天不知道为什么能上facebook,然后我对它那个设计很感兴趣,所以印象比较深...
7)栏目板块标题

基本所有板块栏目标题都是以2像素实线存在,但是下面这个确实1像素点线存在,是不是有点穿越了...
因为我最近也在做改版工作,所以发现相关的题材也就研究一下,由于本人能力有限,有误导乱侃的话,就直接无视吧...
前一篇:四叶草、水母与玻璃瓶
后一篇:CSS3 创意PPT