淘宝首页新版面设计分析

...

  今天在Taobao.com UED Team的blog上看到《我变胖了…》,才知道淘宝首页改版了。于是就去瞅瞅了,本来想找个改版前的首页做对比,看看变化,可惜只找到比较早的一个,所以索性就改版后的首页来侃几句。

对于一个内容极其丰富的站点首页,其设计难点并不是外观设计上,而是如何通过首页既满足用户的所需,又要体现公司的策略、迎合商务需求,这个平衡实现的基石是信息构架,而信息构架往往建立在站点的服务、用户的需求、公司的商务、用户的历史数据以及调查等等基础上,并且还牵涉到领导者的意愿,所以一个改版往往在学习中反复中争吵中妥协中完成,所以每一个勇于创新的改版都值得支持和赞扬。

赞扬的话就不多说,现在列列个人感觉:

首屏

外型上最大的改变就是页面宽度变成了950px,这个改变应该是可以反应出访问淘宝的用户屏幕分辨率绝大部分在1024*768以上,这种变化无疑让一屏之内内容的容量大了起来,让人的视野更开阔。就淘宝的情况,一屏的大小应该为1005*600(《网页一屏有多大?》),所以其首屏是:

网页制作实例分析:淘宝首页变胖了?

这是一个如此饱满的首屏,似乎颜色和图形抢走了文字所体现内容的光芒,特别是有些刺眼的蓝,还有“品牌商城”右侧的那个黄色的斜线,或者文字和图片拥挤在一起,莫非这就是一个拥挤热闹的集市感觉?

搜索

1.上图页面首屏中,有两个搜索框,有两个“高级搜索”链接,似乎不一样,但是我看不出两者区别,尝试性搜索一下,发现在默认情况下搜索结果页面完全一样。

2.当我输入“笔记本 dell”后,去选择搜索分类的时候发现:

网页制作实例分析:淘宝首页变胖了?

* 搜索分类中已经有”笔记本电脑”,为啥不学习一下amazon.com,把分类放在前面呢?好看和好用哪个重要呢?

* 如果我采用默认的“所有分类”,那我输入完关键字,到点击搜索按钮是否鼠标运动的距离远点呢?当然如果知道直接用Enter或许方便点,但是那个分类的下拉列表怎么看都像一个干扰。

* 如果“搜索宝贝”那个下拉列表很重要,是否可以考虑用单选按钮或者tab页的形式来方便快速直接选择呢?

* “所有分类”那个下拉列表有”———-”项和空白项,这是为了区分吗?为啥不 考虑optgroup

3.高级搜索的拥挤,和预留下太多的空白下拉列表,这个应该修改成按需显示吧?

网页制作实例分析:淘宝首页变胖了?

类Tab页设计

现在似乎对页面内容的这种Tab页形成一种定势了,当点击到集市调转到一个变化很大的页面时,感觉很不适应。

网页制作实例分析:淘宝首页变胖了?

通过背景对相同形式的大片内容的区分,这点挺好的,但是似乎在Firefox下还有一些小问题。

继续阅读
C#设计模式学习之一:开篇
C#设计模式学习之二:Singleton
C#设计模式学习之三:Abstract Factory
C#设计模式学习之四:Factory Method
C#设计模式学习之八:Facade
提升网页设计效果的方法和诀窍
网站设计的主要方面
学网页设计与网页制作,你该做些什么?
优秀首页设计应该达到的四个目标
发表评论

昵称:
最新评论
暂时没有评论!