三言两语:美国雅虎首页改版网页设计

时间:2023-08-30 08:10:43 其他范文 收藏本文 下载本文

三言两语:美国雅虎首页改版网页设计(共9篇)由网友“玫瑰露”投稿提供,下面是小编帮大家整理后的三言两语:美国雅虎首页改版网页设计,希望对大家的学习与工作有所帮助。

三言两语:美国雅虎首页改版网页设计

篇1:三言两语:美国雅虎首页改版网页设计

昨天美国雅虎正式宣布网站首页的新版,这也算互联网一件大事,尤其是对设计的朋友们,而且现在的美国雅虎的情况也不是很好的情况下有大刀阔斧的进行改版,也算是要有一些魄力了。其实这次新版早在几个月前就已经在某位同行的博客中透露出来,不过当时没有过多注意。昨天宣布正式改版以后,上去逛了一圈,才仔细的研究了一下。总体的评价就是这次的改版就相当于Vista到Win7,也就是说内核不变,但是在交互和体验上下功夫。

1.布局

新版的布局和旧版的布局,几乎没有任何区别,顶部搜索框,左侧导航,中间重要新闻资讯。主要是右侧,新版去掉了很鸡肋的个人信息区块,把登录信息放到了顶部右侧一条。把旧版放到右侧最下面的热门搜索关键字替换,放到了右侧上面变成第一区块。

2.搜索

雅虎是一个门户,雅虎是一个搜索引擎。这次新版中,进一步把顶部的搜索框进行了优化。

2.1.提高位置:新版中的一个核心就是更加突出搜索功能的重要性,那么出现的位置就是第一重要的,所以雅虎干脆把一直品牌核心的logo放在了右侧,把搜索功能提到了整个页面的最有优先的位置,这样用户一打开页面一个大大的搜索框经映入眼帘。

2.2.加大面积:要想引起人的注意,一个更直接的处理方式就是让物体看起来更大。所以雅虎为了让用户对搜索框更加注意,就再一次加大了搜索框的大小。

2.3.视觉效果:看得出雅虎的设计师为了这个搜索框可谓是煞费苦心,而新版的设计理念我理解为是让搜索框本身更突出,而不是搜索区域。我们可以对比一下旧版和日本、韩国版的搜索功能设计。这些设计都是为了让搜索功能更加突出,所以加大了整个搜索功能区块的视觉效果。也就是以整体区块效果突出,带动整个功能突出。而新版去掉了浓重的背景色,更加突出了搜索框的视觉效果。也就是用局部关键控件的效果突出,带动整个功能的突出。

2.4.切换:在这个搜索功能区域除了搜索按钮以外,最常用的就要是搜索类型切换了。而切换功能往往是一般设计中不太被重视的。从旧版、日版、韩版都可以看出。切换类型只是用了很简单的文字链接而已。而新的设计中为了让切换点击起来更有手感,不仅加大了文字的尺寸,而且采用了tab的方式与搜索框融为一体。

3.导航

从上一次改版以后,雅虎把原来顶部的导航放到了右侧。而我觉得这一次改版最大的亮点就是左侧导航。我们都知道雅虎是一个门户网站,但是雅虎还是世界上最早的网络目录。如果你要问什么是网络目录?看看hao123.com就知道了。

网络目录(web directory)是网页链接的列表。

门户网站(web protal)是人们上网的起点网站,

电脑资料

所以为了凸显门户网站的搜索特性,所以上面说道搜索部分采用了新的设计。而为了凸显门户网站目录的特性,雅虎这次改版也从新设计了左侧导航。左侧导航不仅可以自定义雅虎本身提供的服务,还可以自定义当下其它站点的服务,譬如ebay,facebook,mysapce等。而这次雅虎最关键的一点不仅是解决定制的问题,而且还试图解决信息问题。就是说不仅希望用户可以自定义网站目录,而且还可以在上面处理这些站点的信息。

我们发现其实这个概念并不新鲜,在美国有好多站点都提供类似的服务,最有代表性的就是Google的IG。IG通过用户自定义一些站点Widget放到首页上,形成自己的个性首页。不过有意思的是所以提供类似服务的网站几乎都是采用widget的方式。也就是说同一种理念和同一样的设计模式。

而雅虎这次采用了全新的交互设计模式来处理这个问题,把目录和信息浏览有基的结合一起。当用户有鼠标悬浮在左侧导航上时,右侧出现这个站点的最新消息和最常用的操作。那这个和上面的widget有什么不同呢?

虽然Widget看上去很好,但是真的要用起来确实不那么爽,不爽的就原因就是虽然我可以琳琅满目的把整个页面布置的很满。但是这个页面最关键的作用就是快速处理最新信息,并且快速操作。也就是监控信息,操作需要处理的信息。而Widget全部扔在一个页面上,如果数量比较多,根本很难进行监控,既然很难监控也无从谈起对信息的操作了。再有一个用户的页面空间是有限的,所以每一个widget的大小都是固定的,而且相对来说都是比较小,这样就更加不容易进行信息的监控和处理了。

那我们看看雅虎的处理方式的特点:拿雅虎信箱为例,当我打开雅虎首页,浏览左侧导航,就可以迅速查看雅虎标签是否有数字提示,如果有就证明是有新的邮件了,如果没有就证明没有新的邮件。然后把鼠标悬浮到标签上右侧上,可以用效大的区域显示最新的邮件标题,然后进行处理。

可见雅虎新的左侧导航,不仅可以让用户自定义收藏常用的网络服务,还可以迅速的筛选那些服务需要有信息处理,并且提供信息处理快捷的操作方式。也就是“快交互”+“信息片段”结合的处理方式。这种设计理念的最经典案例就是Twitter和新版的Facebook登录后首页。

4、视觉风格

新版的视觉风格继承了上一版低调华丽的特质,同时又处理的更加清新。最明显的一个处理方式就是去掉了标题栏的渐变效果,采用最朴实的文字无背景。并且为了更加突出视觉效果,加大了这些标题文字的字号。去掉了左侧导航整体纹理渐变方式,采用一个目录标签一个小按钮的设计。不仅单独一个目录标签做为小按钮很突出,而且整体叠加以后效果也很协调舒服。

总体来说这次美国雅虎改版是否成功,这个还要看正式运行以后的数据,但是我认为总体效果要比上一个版本要好很多。并且对不断努力创新的设计师表示钦佩。

本文来自:blog.d8in.com/posts/515.html

篇2:阿里系的中国雅虎首页浅谈网页设计

自从8月11日阿里巴巴宣布收购雅虎中国的全部资产后,做为阿里巴巴集团的创始人马云心里盘算的事应该是如何把雅虎中虎整合进阿里巴巴这个大家族,而非如外界所传的打造中国互联网最大的搜索平台,事实上只要有Google跟Baidu在,雅虎中国就不可能成为中国互联网最大的搜索平台。所以如何把雅虎中国溶入到阿里巴巴这个大家族中,以达到双方资源的最大化相互利用,成了阿里巴巴收购雅虎中国后最核心的问题。到5月15日,“雅虎中国”正式改名为“中国雅虎”,似乎已经有脱离雅虎总部的倾向,有着更进一下的本地化操作。7月9日,中国雅虎新版上线,中国雅虎开始溶入阿里巴巴大家族,中国雅虎溶入了口碑网的生活服务,携着综合门户的资源优势强势进军生活服务领域。

用户初次访问新版的中国雅虎首页时,所能感受到的最大变化并非是首页结构与栏目的改变,而是首页色调风格的改变。中国雅虎新首页换上了阿里系的橙色风格,这对于一直以来以浅灰色为主色调的中国雅虎来说,无疑是一次巨大的改变。

中国雅虎新首页的结构从原来的三栏改成了两栏结构,栏目分类更加清晰;字体大小也提高了一个型号,更利于阅读,

然而其中栏目之中的大小字号混杂却是一个让人不解之处,这一点与搜狐一样。

中国雅虎旧首页有一些可供用户自定义的设置,诸如窄屏宽屏切换、页面色调更换等在新首页中都未曾保留,对于越来越崇尚个性化的网络时代来说,这又是一个难以理解的地方,但是这却是阿里集团旗下所有网站的一个共同点。

相较于其他综合门户的首页改版缩短整个页面的高度而言,中国雅虎新首页的高度不但没有缩短,反而比旧首页的高度更高,在1024*768分辨率有着将近5屏之高!加上上一点提到的去掉自定义设置,中国雅虎新首页的设计有种逆向而行的感觉。

在中国雅虎正式推出新首页之前,曾放出过一个测试版的新首页,这个测试首页在没有更改整体风格色调的前提下对栏目结构进行了优化,并且整合进了口碑网的生活服务。相较于新首页而言,这个测试版的首页应该更接近用户心中中国雅虎新首页的形像。

曾经的中国雅虎首页,左侧的“雅虎服务”导航是我很喜欢的一个设计,现在已经成为历史,放个图纪念一下。

来自:www.prower.cn/interaction/232

篇3:大网站改版网页设计

今天看到淘宝首页有新版体验信息,点进去,看到最新的淘宝首页,我个人不太习惯,不知道数千万淘宝会员觉得如何,暂且不评论罢。

就大网站改版这个话题,说说我的看法。

改版干吗?

一个网站,一段时间总要进行改版,这似乎成了行规。就我的了解,在这几种情况下比较容易催生改版:

用户习惯发生明显变化

用户体验需要大幅优化

组织结构调整

大老板说要改

逢年过节或有象征意义的改版(如我们说过的apple改版)

可是回过头来,只有前两条是真正站在客户角度考虑的结果。不过,大多数网站改版都是为了改而改。

应该潜移默化做改变

我们说网站的形象维护,就像经营一个品牌。当客户足够多的时候,尤其是有很多黏性客户的时候,用户跟你成了老朋友,在他们心中你是原来的样子,可是突然做了很大变化,那用户就不好接受了。

比如SONY的logo,几十年来发生了很大的变化,但是是一点一点改过来的,普通人一点都没察觉,SONY还是那个时尚的SONY。

再比如新浪网,去年进行了很大的变化,从800像素宽变到了1024宽,可是用户完全在不知不觉中完成了切换。因为,数千万用户已经习惯在右边点新闻,在中间看广告了,改了,人家找不到。之后,新浪首页经常在做微调,几乎每个月都有新变化,我一直注意这个,用户慢慢接受。所以新浪网在客户心中的形象,十分一贯也十分稳定。

反面的情况呢?Yahoo中国当年突然从一个门户网站变成了仅有搜索条,用户找不到原先的东西了,

电脑资料

这会让用户觉得,你出什么事了,为什么这样。这就叫做:客户感情危机,我们应该避免这种东西。

别让客户跟着你拥抱变化

有个很有意思的说法,叫“拥抱变化”,叫“唯一不变的是变化”。我呸!这说的是态度,不是事情。我们没有道理让客户跟着我们一起拥抱变化。损失客户感情,风险真的很大。

变化是用来回头看的,不是给惊喜

刚才说了,变化应该潜移默化,可是有人会说了,那改版有什么意思。我说,改变,尤其是有很多客户基础的改变,不要给客户惊喜。

因为,你认为是惊喜的东西,别人看上去没准是惊愕。

因为,变化给人的感动,是慢慢形成的,变化是用来回头看的。当我们发现自己这5年来的变化,从不在网上买东西到什么都在网上买的时候,我们会感叹自己的变化,这个过程没法太快。

要真心做测试

我相信无数网站改版,做A/B Test,都是象征性的,因为大老板已经说了,要改成B的样子,于是装模作样做一下测试,试图证明B是好的。

真正的测试是从概念阶段就开始的,每一步去测试用户的反应,向着好的方向改动。绝对不是都要切换了,临时做一下测试,那是象征性的,你都决定要改了还问人家干啥!

==============

这就是我的想法,不针对任何人任何事。

本文来自:www.panghufei.com/?p=10068

篇4:为什么首页最后设计网页设计

在我做过的N多项目中,基本都有个跑不开的怪圈——首页很难设计,根据进度安排,首页必须按时出来,不然没法review,也没法测试。于是,首页只能在后续工作中不断的redesign。而且我发现,往往都是必须整个产品结束之后,首页调整才算完成。

仔细思考,为什么网站需要首页?因为内容需要索引,任务需要入口。在任何角度,首页都是贯穿整个体系的中心点,牵一发而动全身。或许,此话题得放大到改版来看。

六年前为赚零花钱,经常接到类似“重新设计XX网站首页”的私活。能做的事情,无非就是根据已有内容调调布局、板块,优化字体、行距等现在看来纯属“信息设计”范畴的小问题。虽然没受过专业训练,自己专业知识结合个人审美,但也比很多“设计师”做的出色。

四年前做业内某互动娱乐门户网站,三个月之内进行了三次大改版。结果是一次不如一次,究其原因,我认为关键在于不应该先改首页。改首页的确容易出“政绩”,但改动频繁对用户来说却是场灾难,搞不好还以为走错、或者网站出啥事儿了。

任何改版都会产生数据震荡,这是因为受用户习惯的影响,短暂周期内用户有点不适合。但如果是好的改版,数据应该在两周内恢复,并且能看到逐步提升的趋势。首页所放内容应该保证宁缺勿滥,慢慢补充总比来回折腾好,切忌先入为主制定“规范”。具体原因,可参考对比暗示中的观点“大改时,用户会重点看哪些改的不错;小改时,用户会更关注哪些还需要再改。”

因此,改版是动作越轻、动静越小对用户影响越少。全站改版应该遵从“自下而上”原则,先从结构最基础的功能开始,首页最后;单页改版应该遵从“由内而外”原则,先从结构最里边的小模块开始,页面布局最后,

如下观点大家都不陌生,但陈旧思路也不是完全错误:

“首页风格定下来,全站就好做了。”

是这样么?完全不是。但这个出发点犯了“以风格为中心”的错误。因为用户首先要的并不是风格,而是信息和内容。首页需要放的内容一定提取自各下级组织单元,在整个信息结构基础不牢靠前提下诞生的首页,生命周期可想而知。

“首页是用户看到的第一个页面,马虎不得。”

是这样么?不一定是。得根据不同类型产品来具体分析,比如走媒体路线的新闻资讯网站,走商务路线的百货卖场网站,首页都很重要,但大多访问量肯定来自最底层的内容和商品信息页面。提供服务的产品不同,比如有隐私性质的邮箱,最重要肯定就只有首页的登录。

“首页设计最能反映web设计师的水准。”

是这样么?的确是。因为做好首页的前提是做好全站,同时,设计师必须精准把握传达点,引导不同任务行为流。首页只是默认进入页面的代称,与叫index,default的传统一样,但不同类型产品需要突出不同侧重点。比如,登录框直接放首页,还是只链接引导?具体情况需要具体分析。再比如,我固执的认为直接介绍就是个人网站最好的首页,没必要再“关于”自己。

本文来自:blog.rexsong.com/?p=6132

篇5:Alibaba国际站首页改版小结 交互设计

阿里巴巴国际站(Alibaba.com)是全球最大、最有影响力的B2B电子商务平台,是阿里巴巴集团的旗舰公司,长期以来,阿里巴巴国际站视觉风格并未随着业务的突飞猛进而有更富魅力的改变,呈现在用户面前的,依旧是稍显过时的设计风格。随着用户需求和公司业务的压力,对网站的视觉重构就成了迫在眉睫的事情,是时候来一次激动人心变革了!

一. 目前线上版本分析:

改版前Alibaba国际站首页

上图为目前线上版本,较的版本,总体设计风格和信息结构没有太多的变化:

首页没有传递出Alibaba.com的业务方向和核心价值;

随着业务方向发展,不能满足业务需求;

设计风格过时,设计风格不统一。

-

二. 用户需求分析:

分析用户需求之前,一起来看一下外贸B2B生意从工厂到发货的重要环节有哪些,Alibaba对应这些环节有哪些相关配套服务。

通过用户调研分析,目前网站用户对Alibaba.com提供的这几个核心服务的认知度较低,所以这次首页改版的首要目标就是要进行用户教育并传递网站的核心服务。

三. 信息推导——框架结构

大牛William Strunk和E. B. White的《The Elements of Style》里写到:”越精简的文字越有力。一句话里不应该有多余的词儿,一段话里不应该有多余的句子。同样,一幅画里不应该有多余的线条,一台机器也不应该有多余的零件。”对首页信息进行重新梳理,去掉长期没人运营的冗余信息;重新调整信息结构,核心位置传递网站核心价值信息;只专注那些用户最需要的功能,用20%的基本功能去满足80%用户的需求。

新首页最终线框图

Alibaba.com主要功能区,全站性买家主功能入口(顶部导航,类目,搜索);

核心服务,网站服务以及用户教育,对新买家的初步教育以及价值展示,老买家的流程引导和网站服务介绍;

网站运营区域(次banner运营活动,Bargain Buys,GSD产品区域);

推送热门产品,展示和买家浏览行为相关的产品;网站Site Map以及应用拓展。

-

四. 视觉推导——风格、色彩

新视觉风格探索主要从以下几个维度考虑

1. 色调,感受,明亮的,柔和的,还是暗沉的;

2. Icon,字体,统一性,传达的感觉,Icon和字体要有连续;

3. 松紧度,留白,行间距,字间距,宽松度;

4. 结构,整齐的,流式的,开放的,还是闭合的,

设计趋势

近几年来,随着Metro风格的简洁与直观、Goole全新的UI体验、Android 4.0系统的平面化,各大主流界面的风格都趋向于简洁,结构清晰,信息突出,减少噪音。

新首页视觉关键字

新首页视觉关键字

寻找新色彩

通过视觉关键字寻找新色域

确定配色

确定配色

蓝色是灵性知性兼具的色彩,在色彩心理学的测试中发现几乎没有人对蓝色反感。明亮的天空蓝,象征希望、理性、理想、独立等。ColourLovers.com公布了一项调查结果,美国前100大网站的Logo,主要使用12种颜色。其中,采用蓝色的网站最多,红色排在第二种。

五. 设计展示

我们把用户需求转化成信息结构,并在用户群体的生活空间里寻找到网站的颜色趋向,接下来,我们把理论转化为交互和视觉的表现方式,新的国际站设计风格从而顺利诞生了。

Alibaba国际站新首页

一致性和标准化

一致性意味着产品界面的不同模块要有相似的外观、感觉和行为。这次改版,我们对网站核心页面同时进行了优化,为用户提供无缝而舒服的浏览体验。

Alibaba国际站新首页_2

Icon重绘

老版本的Icon一是样式不统一;二是原来的Icon质感太重。在新版设计中,我们对新Icon全部采用扁平化处理,用实色填充新绘制的Icon更加能体现出新版本的简洁、清新。

Icon重绘

重新绘制UI组件

简单和统一是体验的关键。新绘制的UI组件,尽可能的去减低UI元素的强度;新绘制的Button采用CSS3实现圆角和渐变;每个组件有2-3个不同的尺寸,尽最大可能为用户带来统一的体验。

重新绘制UI组件

六. 效果反馈

由于考虑到时间和篇幅问题,这次小结还有很多细节没有分析到,比如首页为什么采用990px网格系统,布局上采用怎样的逻辑路径是合理而有效的等。后续会继续给大家分享。新首页发布后,做了A/B测试,做了针对新首页的用户调研,新的视觉风格也得到了多数用户的肯定。引用一位归国华侨对阿里巴巴国际站改版的评论。新首页改版只是我们跨出优化阿里巴巴国际站体验的第一步,后续还会对整站其他页面继续分期进行优化。

感谢大家长期以来对阿里巴巴国际站UED的关注和支持,有任何建议和意见欢迎在此跟帖回复,您的参与和支持将是阿里巴巴国际站UED进步的动力!

篇6:网站首页设计诠释网页首页制作

网站首页设计,需开宗明义突出主题.开宗明义,无论是对于一篇文章、一场会议或一部

【三言两语:美国雅虎首页改版网页设计(共9篇)】相关文章:

exo 语录2022-09-01

揭开企业文化神秘的面纱2022-07-08

个人网站做到被收购的一些建议2022-10-20

网络信息部工作计划书2023-02-26

浅议物流配送中仓储经营模式和信息管理2022-04-30

网络营销工作以“细”取胜2022-08-15

谷歌SEO相关动态年终总结2022-05-08

网络推广策划方案2023-04-10

阿里巴巴非技术类笔经2022-09-23

网络营销策划详解2022-05-07

点击下载本文文档