网站改版案例分析:印像派首页改版视觉效果分析

文章描述:浅谈印像派首页改版之视觉篇 。


.

.
.
前段时间在做印像派的全站改版,其中包括首页、列表页、详情页、主题页等页面,整个项目历时较久。前段时间新版印像派上线了,首页初稿由葱头同学设计定稿的,后期由我跟进优化,现在正好以印像派首页为切入点做个设计回顾。
.
网易印像派(yxp.163.com)是网易公司推出的个性产品服务平台,在网易印像派可以网上冲印各类数码产品。随着印像派业务不断扩展,几年前设计的首页无论是在交互还是视觉上都已经无法满足现有的业务需求,所以首页的改版是一件迟早要提上议程的事情。
.
.

.
.

首页改版是一项历时较久、参与人员较多的工程,所以必须有一个清晰有效的项目流程。

项目流程:

.

1.项目立项

产品负责人写产品计划书,确定产品的市场需求点和功能需求点,和相关业务部门负责人开会讨论确认需求,随后召集交互、视觉、前端、开发等项目相关人员确定各自的任务时间点。

2.用研、交互

用户研究员根据近一两年的数据走向,重新定义目标用户群,进而细化产品概念。交互根据需求绘制产品原型。

3.视觉设计

视觉设计师前期参与项目会议了解需求后,根据产品原型和产品功能策划书进行视觉设计。视觉设计在整个项目中起到承上启下的作用,既要和产品负责人沟通产品需求又要和前后端工程师沟通页面细节。

4.开发

视觉评审会上确认视觉稿后,接下来到开发阶段。在整个项目中此环节耗时最长,因此视觉稿在交付开发前要做好标注和切图,以免延误开发。

5.测试

前端测试环节也是非常重要的一环,如果你认为视觉设计师的工作止于视觉稿定稿那就错了,不到上线绝不能松懈,测试阶段经常出现的问题有“浅灰色底怎么变成白色了”、“这里怎么偏移了2像素”“图片和文字不对齐”,所以想要做到线上效果和视觉稿100%吻合,经常跑到技术GG那边校稿是必不可少的。

6.上线

刚上线后要密切关注数据变化,根据数据分析、用户反馈做出调整。

7.跟进优化

成功的产品是在优化迭代中产生的,这是一个从设计到用户数据反馈再回到设计的验证过程。

.
.

.

.

1.老版首页的视觉风格过时,需要重新全面包装,提升品牌认知度。

2.版块过多,产品区得不到更好的展示。

3.老版的导航条为二级全展开导航,这种全展开导航的弊端是导航会随着内容的增加而变长,会导致导航条过长,不利于浏览。

4.三栏的页面布局导致信息拥挤。

5.轮播的交互操作不够便捷,视觉样式不够简洁。

.
.

.
.

1.形象色的重新提炼
用户打开一个页面,首先映入眼帘的是色彩,网站形象色的重要性犹如企业的LOGO,一个成功的网站形象色应该能使用户一看到该颜色就联想到该网站。因此视觉改版首先要做的是主色调的提取,只有确定了主色调才能往下展开其他设计。
.
产品设计应该是先理性后感性的。先理性的分析一下用户属性,再感性把握主色调的走向,下面来看看印像派的用户数据分析:

.
.

经过上面的用户数据分析,我们可以看出印像派的主要用户为25-31岁的年轻女性,大学本科的学历,收入为3K-5K。这类年轻女性用户的消费能力属于中上水平,有一定的审美能力,因此主色调的重新提炼的关键词应是:女人、清新、时尚、小资、活力。

老版的红色饱和度太高,这种大红色辨识度太低,品质感也不够。最终选了饱和度稍低,色相偏粉红的红色,搭配大片留白的页面,新的红色看起来既女人又清新,到达了上文数据分析的颜色需求。

2.重新规划版块

摒弃官方动态、微博、买家热评等鸡肋版块,加强力度突出焦点轮播banner、产品促销区等重要版块,让产品区得到更好的展示。

3.导航栏

原导航栏信息混乱、图标简陋。新版导航条以文字信息为主体进行设计,并重新设计ICON,看起来简洁清爽,而且一级导航比原来的二级导航更利于后期维护。

4.页面布局
三栏布局能在一屏内容纳较多的信息量,常见于大型门户网站。印像派本身B2C的定位不同于门户网站,没有浩瀚如海的信息量,因此应在有限的首页空间里将产品更好的展示出来。
.
旧版印像派的三栏布局从视觉上看起来拥挤混乱,在短时间内难以将注意力集中在重点区域,用户无法清晰地跟随页面节奏进行有效浏览。因此我们需要量体裁衣,针对网站的定位和容量进行重新梳理,选择适合的页面布局。

5.banner轮播
通过下图可以看出老版的banner轮播样式的操作不够人性化,当前帧和其他帧距离太远,来回点击成本略高。

以上是前端工程师GG给我看chrome/IE6浏览器下的轮播样式测试效果,发现这2个浏览器都无法完全支持视觉稿的轮播效果,而且高级浏览器和IE6下的样式差异很大,这确实是一件让人郁闷的事情。头疼之余,先让我们看看其他网站的轮播是怎么兼容多种浏览器的:

最后,欢迎大家访问印像派:yxp.163.com

时间: 2024-12-31 14:50:20

网站改版案例分析:印像派首页改版视觉效果分析的相关文章

用户体验:浅谈印像派首页改版之视觉篇

中介交易 SEO诊断 淘宝客 云主机 技术大厅 . 前段时间在做印像派的全站改版,其中包括首页.列表页.详情页.主题页等页面,整个项目历时较久.前段时间新版印像派上线了,首页初稿由葱头同学设计定稿的,后期由我跟进优化,现在正好以印像派首页为切入点做个设计回顾. 网易印像派(yxp.163.com)是网易公司推出的个性产品服务平台,在网易印像派可以网上冲印各类数码产品.随着印像派业务不断扩展,几年前设计的首页无论是在交互还是视觉上都已经无法满足现有的业务需求,所以首页的改版是一件迟早要提上议程的事

用户体验分析:Alibaba国际站首页改版小结

中介交易 SEO诊断 淘宝客 云主机 技术大厅 阿里巴巴国际站(Alibaba.com)是全球最大.最有影响力的B2B电子商务平台,是阿里巴巴集团的旗舰公司.长期以来,阿里巴巴国际站视觉风格并未随着业务的突飞猛进而有更富魅力的改变,呈现在用户面前的,依旧是稍显过时的设计风格.随着用户需求和公司业务的压力,对网站的视觉重构就成了迫在眉睫的事情,是时候来一次激动人心变革了! 一. 目前线上版本分析: 改版前Alibaba国际站首页 上图为目前线上版本,较2009年的版本,总体设计风格和信息结构没有太

如何做首页改版(阿里巴巴中国站首页改版经验谈)

同任何网站一样,阿里巴巴首页的每次改版也都是一次纠结和挣扎的洗礼.设计的过程总是痛苦的,因为判断和选择总是艰难的,这里我们并不想叙述改版的整个流程--尽管不同团队的架构和设计团队的职责有所差异,但除了决策过程不同外,大公司抑或小公司在流程上并无本质区别.我们在此是想通过总结我们在改版过程中经验和教训,以及对于首页甚或产品redesign的思考. 以下是我们觉得必要的思考流程以及一些方法和关键点: 一.关于定位的思考 在首页改版之前,结合网站整体的策略变化我们首先思考以下三个问题: 1.改版的目的

化妆品网站Skinstore.com首页改版评价

这篇文章很不错,对于网页设计师或站长来说都有启发意义,我们可以从化妆品网站Skinstore.com 的首页改版中,寻找电子商务网站的设计原则以及特点,对于制作和设计此类电子商务网站有很好的启发作用. Skinstore.com 是一个美国的专营化妆品的站点,经常搞促销活动,折扣比较吸引,做美国代购的或者喜欢国外购物的人士大多都熟悉她. SkinStore.com运营得很成功,而且,她的网站设计.用户体验设计等也是非常的成功的,本文就 以其针对其主页的设计进行分析评价,为读者提供一些设计电子商务

大型门户网站腾讯QQ首页改版流程

对于大型门户网站的改版流程是怎么样的?参与的团队有多少?一般的步骤又是怎么样呢?相信很多网友都想了解,下面就以腾讯首页改版为例子,看看QQ新首页设计过程的酸甜苦辣.本次和大家分享了很多设计上的理念问题,相信看过后大家会对网页设计有不一样的体会. 酝酿了将近一个春夏秋冬的腾讯网首页终于亮剑!反响热烈!让我们来分享它成功背后的酸甜苦辣吧. 腾讯网首页改版终于开花结果.于2008年3月25日6:00准时上线.整整一年的时间,经历了无数次的挫折和挑战,无数次的等待和蜕变,终于破茧化蝶.本次改版完全颠覆性

和信:关于网站首页权重降低分析对策

现在优化的一个网站在百度搜搜中出现了问题,这个网站一直以来首页的目标关键字排名都比较稳定,而且前期也一直在窃喜网站的内页权重有了很大的提高,内页从百度带来的流量增长很大,但是近期出现了首页排名的异常波动,直接掉到第二页最后了,心理甚是纠结,纠结归纠结,面对首页权重丢失这个现象和信从以下几个方面做了分析: 外链建设,这个网站一直是和信本人亲自优化的,所以在一年多来没有发什么垃圾链,所以外链的数量和质量一直相对稳定.这个是自我暗示的结果,但是做优化和信现在更注重的是数据分析来得结论.于是通过在数据统

TOM.COM网站首页改版的体验感受

没有任何征兆的在cnBeta上看到关于TOM.COM网站改版的新闻,说是页面可以自定义了.这给我的第一想法就是:TOM.COM开始像一些Web2.0的网站学习开始走WEB2.0的道路了.于是链接进去体验了一把,下面说说我的体验感受: 1.对于这个自定义页面的功能,新鲜感上没什么好说的,早就有所谓的WEB2.0的网站实现了.现在的互联网上这种网站一抓一大把,可是多数是一些二流的网站,像TOM.COM这样的传统大门户在国内还是没有先河的(国外很早就有了).如果说网易首页的改版只是在WEB2.0的道路

网站首页改版完毕,请大家再来看看!

问题描述 www.51coal.net网站首页改版完毕,请大家再来看看速度是不是提高并且层有没有变形. 解决方案 解决方案二:up解决方案三:友情链接申请为空酒可以提交解决方案四:InternetExplorer无法显示该网页解决方案五:现在测试可以随便提交,后台审核解决方案六:adsl,ie7半天没出完整,有些层叠住了比如"北京四通纵横"加黑的那一层解决方案七:我这里显示正常.解决方案八:html好先哟解决方案九:改正一下,是html好乱,垃圾字符太多了

蘑菇头的网站首页改版啦~~~

问题描述 蘑菇头的网站首页改版啦~~~大家快看看,顺便给点意见哈~~谢谢各位咯网站地址:_______________________________版主语:请不要在技术区发非技术帖这次我帮你转移到非技术区了下次将直接删除,C#版的另外一贴,与此帖内容重复,已删除三次以上,除直接删除外,将封杀ID具体版规请参考置顶的版务帖~_______________________________ 解决方案 本帖最后由 viena 于 2008-04-18 10:47:52 编辑解决方案二:打开速度有点慢.