2012搜狐焦点首页改版心得
2012-10-18 21:59
513 查看
三季度,焦点房产首页进行了一次大的改版,这次我负责了页面视觉设计。
这次改版的方向和目的是:”以用户为中心,帮大家找好房”,提高用户通过首页进入楼盘详情页的到达率。
改版项目启动后先和产品同学做了沟通,针对改版需求做了分析,对于布局也参与了讨论。
![](http://images.lusongsong.com/upload/info/270-1.gif)
讨论结果,上一版在首屏更多突出的资讯,占了首屏的主要位置,这样用户进入首页后不便于找到搜索,另外楼盘的信息也相对靠下,用户需要翻过首屏才能看到。针对主要问题,产品在出UE时,做了多种尝试,同期我考虑风格,并按不同的UE做尝试。
在风格上,明确了需要保持继承性,要保留焦点的立体风格元素,同时根据页面设计发展趋势,去掉过多的装饰,采用简洁的风格进行设计。期间对近期主流网站都做了分析和研究,同时也重点关注了对手首页,比较优缺点。
![](http://images.lusongsong.com/upload/info/270-2.gif)
讲过尝试,在产品UE的基础上,推出了两个尝试方案:
方案A:相对保守,对搜索区域加宽至通栏,右侧摆放工具,方便用户找房。
方案B:这个大胆一些,相对上一版,是一个突破,将搜索置于顶部,导航之上,更符合用户找房的目的。
![](http://images.lusongsong.com/upload/info/270-4.gif)
另外在设计过程中得到了数据同学针对运行中的首页,进行了热力分布图记录,对布局调整给予了有力支持。
最终确定了B方案。
之后产品出完整UE,然后一气呵成,期间我们交互设计师子轩同学也积极参与,提出各种改进想法和建议。
![](http://images.lusongsong.com/upload/info/270-5.jpg)
另外说一下关于首页宽度。
在最初的讨论中就涉及到是否加宽页面宽度。
最近一年有多家网站的宽度做了变宽调整,例如腾讯首页的宽度改成了1000PX,和产品一起做了内部讨论,基本确定加宽页面宽度。
加多宽呢,但如果用1000px,就要出新的尺寸(焦点现有尺寸包括950、980、1002。如果要变宽,可以选择到1000,这样在1024下能够正常显示。),当然也有好处,更便于建立栅格体系。
最终讨论结果,采用1002,不出新的尺寸,更好满足广告系统,关于栅格系统,有一单列间隙定位12px给予解决。
本文来源:搜狐焦点UED
相关阅读:
网站改版的SEO注意事项
如何恰当地进行网站改版?
网站应该什么时候进行改版?
这才叫改版:阿里巴巴资讯站升级项目总结
这次改版的方向和目的是:”以用户为中心,帮大家找好房”,提高用户通过首页进入楼盘详情页的到达率。
改版项目启动后先和产品同学做了沟通,针对改版需求做了分析,对于布局也参与了讨论。
![](http://images.lusongsong.com/upload/info/270-1.gif)
讨论结果,上一版在首屏更多突出的资讯,占了首屏的主要位置,这样用户进入首页后不便于找到搜索,另外楼盘的信息也相对靠下,用户需要翻过首屏才能看到。针对主要问题,产品在出UE时,做了多种尝试,同期我考虑风格,并按不同的UE做尝试。
在风格上,明确了需要保持继承性,要保留焦点的立体风格元素,同时根据页面设计发展趋势,去掉过多的装饰,采用简洁的风格进行设计。期间对近期主流网站都做了分析和研究,同时也重点关注了对手首页,比较优缺点。
![](http://images.lusongsong.com/upload/info/270-2.gif)
讲过尝试,在产品UE的基础上,推出了两个尝试方案:
方案A:相对保守,对搜索区域加宽至通栏,右侧摆放工具,方便用户找房。
方案B:这个大胆一些,相对上一版,是一个突破,将搜索置于顶部,导航之上,更符合用户找房的目的。
![](http://images.lusongsong.com/upload/info/270-4.gif)
另外在设计过程中得到了数据同学针对运行中的首页,进行了热力分布图记录,对布局调整给予了有力支持。
最终确定了B方案。
之后产品出完整UE,然后一气呵成,期间我们交互设计师子轩同学也积极参与,提出各种改进想法和建议。
![](http://images.lusongsong.com/upload/info/270-5.jpg)
另外说一下关于首页宽度。
在最初的讨论中就涉及到是否加宽页面宽度。
最近一年有多家网站的宽度做了变宽调整,例如腾讯首页的宽度改成了1000PX,和产品一起做了内部讨论,基本确定加宽页面宽度。
加多宽呢,但如果用1000px,就要出新的尺寸(焦点现有尺寸包括950、980、1002。如果要变宽,可以选择到1000,这样在1024下能够正常显示。),当然也有好处,更便于建立栅格体系。
最终讨论结果,采用1002,不出新的尺寸,更好满足广告系统,关于栅格系统,有一单列间隙定位12px给予解决。
本文来源:搜狐焦点UED
相关阅读:
网站改版的SEO注意事项
如何恰当地进行网站改版?
网站应该什么时候进行改版?
这才叫改版:阿里巴巴资讯站升级项目总结
相关文章推荐
- 从腾讯网站首页改版学到的几点体会心得
- 腾讯CDC分享:与众不同易,精益求精难 ― QQ导航改版设计心得
- 谷歌酝酿入华最大首页改版动作 对抗竞争对手
- 腾讯新闻中心首页改版啦
- 网易改版-网易首页2011新版随想
- 你发现了博客园首页顶部改版了吗?
- 2016淘宝首页今日改版,细说淘宝首页设计变化史
- 腾讯新闻中心首页改版啦
- 博客首页规则改版公告
- 山东轻工业学院CSDN高校俱乐部参加“新一代语音云发布暨语音开发者大会”与“2012百度开发者大会”体会心得
- CityEngine 2012与ArcGIS 10.2破解心得
- 51CTO博客将于2017年7月完成首页改版(7月11日下午上线啦)
- Linux中国网站首页改版啦
- 2016淘宝首页今日改版,细说淘宝首页设计变化史
- 博客园首页优化心得
- JD2016版首页改版前端总结(转载整理)
- 中文Google首页改版
- 51CTO首页改版上线 欢迎大家拍砖!
- 如何做首页改版(阿里巴巴中国站首页改版经验谈)
- 博客园首页优化心得(转)