浅谈印像派首页改版之视觉篇
首页改版是一项历时较久、参与人员较多的工程,所以必须有一个清晰有效的项目流程。
项目流程:
1.项目立项
产品负责人写产品计划书,确定产品的市场需求点和功能需求点,和相关业务部门负责人开会讨论确认需求,随后召集交互、视觉、前端、开发等项目相关人员确定各自的任务时间点。
2.用研、交互
用户研究员根据近一两年的数据走向,重新定义目标用户群,进而细化产品概念。交互根据需求绘制产品原型。
3.视觉设计
视觉设计师前期参与项目会议了解需求后,根据产品原型和产品功能策划书进行视觉设计。视觉设计在整个项目中起到承上启下的作用,既要和产品负责人沟通产品需求又要和前后端工程师沟通页面细节。
4.开发
视觉评审会上确认视觉稿后,接下来到开发阶段。在整个项目中此环节耗时最长,因此视觉稿在交付开发前要做好标注和切图,以免延误开发。
5.测试
前端测试环节也是非常重要的一环,如果你认为视觉设计师的工作止于视觉稿定稿那就错了,不到上线绝不能松懈,测试阶段经常出现的问题有“浅灰色底怎么变成白色了”、“这里怎么偏移了2像素”“图片和文字不对齐”,所以想要做到线上效果和视觉稿100%吻合,经常跑到技术GG那边校稿是必不可少的。
6.上线
刚上线后要密切关注数据变化,根据数据分析、用户反馈做出调整。
7.跟进优化
成功的产品是在优化迭代中产生的,这是一个从设计到用户数据反馈再回到设计的验证过程。
1.老版首页的视觉风格过时,需要重新全面包装,提升品牌认知度。
2.版块过多,产品区得不到更好的展示。
3.老版的导航条为二级全展开导航,这种全展开导航的弊端是导航会随着内容的增加而变长,会导致导航条过长,不利于浏览。
4.三栏的页面布局导致信息拥挤。
5.轮播的交互操作不够便捷,视觉样式不够简洁。
老版的红色饱和度太高,这种大红色辨识度太低,品质感也不够。最终选了饱和度稍低,色相偏粉红的红色,搭配大片留白的页面,新的红色看起来既女人又清新,到达了上文数据分析的颜色需求。
2.重新规划版块
摒弃官方动态、微博、买家热评等鸡肋版块,加强力度突出焦点轮播banner、产品促销区等重要版块,让产品区得到更好的展示。
3.导航栏
原导航栏信息混乱、图标简陋。新版导航条以文字信息为主体进行设计,并重新设计ICON,看起来简洁清爽,而且一级导航比原来的二级导航更利于后期维护。
以上是前端工程师GG给我看chrome/IE6浏览器下的轮播样式测试效果,发现这2个浏览器都无法完全支持视觉稿的轮播效果,而且高级浏览器和IE6下的样式差异很大,这确实是一件让人郁闷的事情。头疼之余,先让我们看看其他网站的轮播是怎么兼容多种浏览器的:
最后,欢迎大家访问印像派:yxp.163.com
很给力,看完之后很有收获。果然是大刀阔斧。
前排支持。现在很流行这个风格。顺便说下第二个图裂了
新版让人眼前一亮
一句话,新版具有Metro风格。
banner部分第二处天猫应该是QQ团购吧。写的好详细。是不是现在的设计风格都趋向于传递信息本身而非加比较多的修饰效果?
今日抢购那个倒数的时钟,特别的闹心
关于热卖推荐:
1.结构上更变相于左边结构,风格上偏向右方。
感谢分享!
你们提炼的用户群特点:25-31岁的年轻女性,大学本科的学历,收入为3K-5K。这类年轻女性用户的消费能力属于中上水平,有一定的审美能力,因此主色调的重新提炼的关键词应是:女人、清新、时尚、小资、活力。
能对照适用很多产品。是不是可以这么认为:当前,对于女人或者更广泛的用户,视觉上更“轻”更柔和,平面化小清新是趋势?
我想知道对男性用户群来说,他们的主色调提炼的关键词有哪些?
学习了,从理性到感性的设计,改版很成功。
但是济南地区网通加载速度很慢,特别是图片,有的在好几秒后才显示。
分析得太细致了 赞一个
一直觉得印象派是小清新~
123
很想知道,用什么方法获取的这些用户数据?尤其是用户收入、学历数据?
还有如何根据这些数据推断出改版的关键词,自己内部讨论还是用户调查?
banner 的轮播圆圈怎么就不能描边?!?!
border:2px solid #555;border-radius:10px;
太帅了!我学习了!!!
不错啊,分析的很透彻,学习了~!
2处小笔误:
1、各网站轮播效果对比图片的第三张图片是QQ网购,图片下的提示文字却是上一幅图的天猫;
2、文末,印象派首页最终版图片,轮播效果还是之前的有描边的。
图片链接hover的时候加上一些的变化效果可能会好些,因为版面图片很多,有利于用户视线聚焦,特别是宝宝精品、旅行纪念全横幅图片;
可以在图片鼠标悬停时,highlight边框或者在图片下部load下标题。
个人意见 :)
1,秒以后的框跑得让人看得很累,也没有实际意义,建议取消;2,i潮品需要登录,很突兀,可以放导航最后
问一个问题:为什么现在的网页设计的越来越【平面化】
网页设计是不是也是这样一个过程:平面->立体->平面???
其实我觉得2栏的感觉不是很明显,更像是无栏。有人有这种感觉吗?
看完了觉得自己跟sb一样,目前在公司没人带,创业公司,什么都靠自己,我在问自己什么时候才能达到这种水平
想问下,你的字体宋体更微软雅黑结合使用,当初设计的想法是怎样。特别是全部商品分类那一栏用微软雅黑很漂亮
我也觉得像是无栏,感觉不好
全是优点,期待运营一段时间后的改版缺陷分析。
小的不才,对于高级浏览器用到了圆形,而在ie6下成方形了,如果你用的是border-radius属性去做的放,网上有一个文件是可以达到也让ie6支持这个属性的:http://css3pie.com/
用了不少Tmall的结构,不过改完的确好很多。
同学们做的很不错!不知照片书的后台制作优化何时上线!
最后一句,为什么IE6和谷歌浏览器要表现成一致的效果,明明是两款不同的浏览器。他们的表现存在差异是必然的,关键是怎么不影响网站的可用性,以及用户的体验。关于上文中提到的,显示方形和圆形这种不影响体验的完全可以忽略。
轮播不描边,你在放Banner的图片如果是白色和灰色的话,你看看还能不能看到?
和天猫有几分像..
页面较长,没有回到顶部的快捷方式,就像这个页面一样。