智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司,宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务,优惠的价格,深的客户信赖。相信有你的加入我们的明天会更有动力!期待与你合作!
  • 宁波智软设计工作室,打造宁波网站制作工作室顶级品牌
  • 智软拥有专业的设计团队
  • 多年网站建设团队为你服务
  • 智软期待与你合作
  • 我们的技能
  • 我们掌握的技能有:dreamweaver,flash,photoshop
  • 宁波高端网站建设服务公司
    2014已经悄然到来,在新的一年我们恭贺所有客户事业蒸蒸日上,同事庆祝智软设计工作室成立5周年,在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务!期待与你合作
  • 企业网站制作建设原因与服务介绍

    智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格,最优质的质量,最突出的设计!得到了客户的一致认可,我们的服务包括:宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!

  • 点击链接网站优化推广介绍

    点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解

  • 2014开幕,宁波网站设计服务全面优惠.

    2014开幕,宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格

  • 链接到网站案例展示平台
    智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新,让新老客户更好的看到我们做的案例,点击查看我们做的网站案例吧!
  • 我们宁波网络公司提供网站一站式解决方案
    智软(宁波网络公司)帮你轻松解决网络问题,网站一站式解决方案
你当前的位置:智软工作室 > 营销与网络 >

总结微软设计师10点错误-让我们避免的网站设计陷阱

2010-06-19 21:02

今天,我们将分析大名鼎鼎的软件公司的网页设计做法和倾向,看看我们是否可以学到一些东西,以避免在我们自己工作的失误。同意或不同意我的看法,随时在下面评论建议。作为专业设计师,你的观点是有价值的,我期待着你的想法。

screenshot

偶尔的数落

如果你讨厌文章充满吹毛求疵般的唠叨,我很抱歉,这个文章偶尔会有点挑剔。我通常喜欢赞扬好的设计而不是批评坏的设计,但是当大卫。阿普尔亚德和我决定写一个微软设计倾向分析的文章后,好像不得不见识一下什么是杂乱,丑陋,甚至(或者)失败的东西。

为了避免评论沦入口舌之争,我在下面的分析中不会提及苹果或者跟苹果单独对比。这并不是因为PC对MAC是最没争论的,而是因为我们只是想看看那些我们认为真的缺乏实践的网站设计和开发。微软是一个很成功的公司,这不会因为有些问题而掩盖。实际上,正如后面指出的,微软在某些站点团队中有一些很优秀的设计师,我们只是提出,应该有一个更高更全面的质量控制。

出于这样的考虑,让我们来分析微软一些缺少设计和开发实践的地方,从中你可以受益于这种知识

1. 谨防某些强制插件

苹果和Adobe之间最近的摩擦让我们认识到,依赖完全封闭的第三方插件创建网站最终会导致一些严重的后果。微软似乎要重蹈这样的错误,网站越来越多的依赖Silverlight。

screenshot

我浏览微软的站点准备这篇文章的资料是,是经常受到弹出窗口的骚扰,通知我系统没有安装Silverlight因此不能用原本的方式浏览这些网页。我的疑问是,“为什么要走这条路呢?” 特别是对于一些简单的幻灯片效果的话,可以用的技术遍地都是。诚然,这是微软自己的Silverlight,所以从良好的商业意识出发要支持它,但这并不意味着加入他们就是最好的选择。

无论你是否是Silverlight的粉丝,我的建议是如果你网站的功能依赖于任何Silverlight或类似技术,要非常谨慎。有关继续采用Flash开发网站是否更加合理的争论还在持续升温,像Silverlight这样的二线系统的采用变得更具赌博性。如有可能,请坚持跨浏览器,符合标准的代码和工具——别要求你的访客额外的操作或者安装。

2. 注意分辨率

这是我对微软最大的抱怨,因为它看起来就像设计得很草率。毫无疑问,尽量减小文件大小而增加实用性和保持图片清晰清楚之间是一条狭窄的路,但我还是不禁觉得,相比那些专业的站点,微软似乎更倾向于显示丑陋的锯齿状的JPG。

screenshot

拨号上网用户数量已经逐年减少,可接受的图像尺寸已经越来越大。不过这也不意味着你可以不用再注意尽量把有必要小尺寸的图片尺寸弄小,但现在这里,设计的分量变得这么重,分辨率过小会大大降低了网站的外观质量,图片变得弄巧成拙!

这会是很讽刺的,本来你希望使用图片让你的网站更好看,但在这个过程中,最终降低了你的美感。如果可能,在不同的显示器预览你处理的图片,要注意有多少失真,多少人工痕迹你可以接受的。

3.组织凌乱

有时你按照常规的设计规则,到最后还是有些东西似乎视觉欠佳。浏览微软的网站我就遇到很多这样的页面,例如下面这个,尽管尝试使用了基于排列的组织,看起来还是那么凌乱。

screenshot

那么问题在哪里呢?简单地说,在于这里一个相对狭小的空间里要放一大堆东西。即使他们肯定的已经试图对内容排版,还通过图标增强视觉可读性,最终结果仍然是相当失衡。

如果你仔细看看,你会发现这页面的四个栏目似乎是由四个不同的人来设计的,只是把它们都挤在一起。左边的图片相对于右边看起来真的的沉重,文字颜色有点断断续续,内容是笨拙交错,各列之间缺乏足够的空白喘息空间,难看出它们的版面独立性。

这里得到的教训是要包装你页面的栏目信息时,小心内容信息过于庞杂。毫无疑问,有很多情况下都会要求增加更多的内容,但应在统一和谐且有吸引力的方式组织处理,比如下面这个漂亮的例子(来自非微软的网站)。

screenshot

screenshot

4. 矛盾

从Microsoft.com开始,打开了庞大的导航下拉菜单,选择站点不同地方访问,你会发现,无论哪个链接,你点击出来的页面相比主页是相当不同,即使在同一个下拉菜单出来的页面都是如此大差别。

screenshot

浏览微软的网站就像玩一个旋转的轮盘赌。你已几乎猜不到你要去的地方和所期待的下一个页面。部分页面有swooshy(优美风格的曲线)背景,而其它页面则是渐变的背景,甚至是发散的圆环。大多数网页似乎倾向于蓝色,但又不是相同的蓝,也有一些网页完全忽略了蓝色倾向。

问题是,不管你网站是2页或者200页,一致性还是必需的。在有限的时间内对一个网站的运作方式和界面变得熟悉时,用户会感到更加舒适。每隔几页就给一些截然不同的东西会使浏览更加混乱,用户体验也变得很低效。

除此之外,创造一个强有力的统一的品牌就是一个良好的业务,因为它帮助客户以更独立的方式去联想你公司。当然了,微软有许多不同的品牌,这些分站都是从主页延伸出来的,但即使是Microsoft.com核心的网页中,图片风格和导航方法似乎大大不同。

5. 剪贴画中心的设计

看看剪贴画在微软Office很无可避免的存在,这个建议会显然是有点荒谬。但是,ICON设计自1995年以来已经走了很长的路,是时候放弃图片中你看到的那种特定风格了。

screenshot

上面这些从微软网页拿来的例子让我感到鸡皮疙瘩,尤其是那个丑陋的“Beginner Developer” 标志。我搞不懂一个回力标为什么要攻击一个神奇的植物,悬浮着显示器是协助攻击还是逃离现场?我所知道的是,视觉传达在这里是一团糟。

这就是为什么CSS画廊像我们自己一样存在世上的主要原因。不这样的话你就可以窃取别人的设计,但这样你就可以一瞥你正在开发的设计十年来的发展状况。浏览这些CSS画廊,就像在商场流行服饰店一样去,以显示给你的疯狂姑姑她没必要穿得好像要去参加Sunny和Cher的表演。

记得时刻保持自由无疆界,从自我开始超越于流行设计。世界都在变化,小心过于固执保守。

6.文本对齐与溢出

微软网站的另一个不容忽视的倾向就是文本总是不断的破坏行列,很明显的溢出边界。

screenshot

这是一个相当容易解决的问题,仅仅需要一点努力和注意。只是一定要会利用免费工具像Adobe的浏览器实验室,以确保你的布局在主流浏览器都不会被破坏。

在谈到跨浏览器的一致性时,无可否认的CSS布局像一个棘手的野兽,不过那样的小错会让你网站的品质下降,所以还是很值得你花时间去解决的。

7. 缺乏对齐

有时,一个给定页面交给我,要我指出设计的毛病来是一个挑战。例如,在下面的网页,原本我想找这个小窗口使用的碴——点击时不会变大,但我看页面越久,我就对这个页面的布局的用意感到困惑。

screenshot

如果你熟悉基本的设计理论,你知道,学习贯彻稳固一致的路线是优秀的网页布局的关键。如上图所示网站的左,中,右的视觉对齐奇怪的混合,联结顶部留出的不尴不尬的空白,为内容信息呈现了一个怪异视觉流。

此外,如果浏览上面这个页面,你会看到整个内容似乎试图在页面居中,但由于中间横穿过一个区带,使得页面似乎中心偏右了。

8.广告杂乱

如下图,免费设计博客喜欢放大量的广告,这是给我们的收入方式,以支持继续提供内容服务。不过如果你运行的是一个专业商务网站,你想减少内容消息并专业化广告,你就必须仔细考虑了。

screenshot

Microsoft.com的页面充满了各种广告,实实在在的降低了网页上的美感。有时,这些广告是直接指向到其他微软的网页,有时是指向其他公司或合作伙伴。导航你的网站到其他下属站点这种概念是无可厚非的,但如何去实现这就有很大的区别了。

有一个事实就是,现在大多数网民都学会了辨认,忽略甚至可能反感横幅广告。这并不是说,这种类型的广告在适当的目标和设计下也没有效果,更不是说微软用户根本不去点击,我实在觉得可疑的是,就没有更好的处理办法了么?

如你所见,微软网站如果要导航用户到他们的移动电话和其他项目,简单的方法就是设置了一个混乱,非标准(智能设计)的广告系统贯穿整个网站。不过,似乎将广告内容整合到网站一体,随着用户的关注,会有一个很不错的点击率。

另外,这种整合将使设计更加统一和谐。因为他们更宁愿增加一个单元而不是分割一个栏目。对了,这也许是我可以理解的微软“效率成本”做法的方案,但我要告诫一下别让他们误导你。大部分情况下,你设计的网站不会是像微软一样的兆级网络,因此更适于踏实的统筹的设计,可避免过多广告造成的视觉混乱。

显然,有很多类型的网站这并不适合出现广告。你要考虑清楚你网站是销售产品或服务,还是需要额外的收入和广告的骚扰。

9.缺少留白的喘息空间

在印刷设计,设计师在每一页都安排“生息区”,通常的做法是在页面边缘加入矩形区域,定义出放置内容的安全范围,避免页面太挤逼或页边拥挤。大多数网页设计师都会直觉上这样做,很明显的你不希望内容太散,因而挤到了浏览器侧边。

screenshot

然而,正如上面截图显示,微软的一些网页似乎并没有看重这方面的意见。相反,页面的内容总是不在任何空白或者边缘就开始(至少在我使用的浏览器上是这样)。

左边的导航版,让人感觉不是内置在这个页面的,感觉好像截断了(是了,这样的情况还可能是由于一个事实:我没有IE)。这个例子的教训就是:永远要留意浏览器窗口的边缘。除非你是为了某种明显的视觉效果而打破规则。将你的内容,尤其是交互和链接,放在有边缘的安全范围,这样用户使用的时候不会感到很挤。

如果你细看一下上面的截图,你可以看到微软的设计师一些失败例子,他们根本没有考虑到这些页面的文本块在主流浏览器是否浮动正常。这是微软很有趣的倾向,许多网页设计师,终日挖空心思的为IE浏览器而作特别的适应,但一家微软这样的大公司显然不能这么无所谓的,不去在其他系统情况下检查他们自己的工作。

8.广告杂乱

如下图,免费设计博客喜欢放大量的广告,这是给我们的收入方式,以支持继续提供内容服务。不过如果你运行的是一个专业商务网站,你想减少内容消息并专业化广告,你就必须仔细考虑了。

screenshot

Microsoft.com的页面充满了各种广告,实实在在的降低了网页上的美感。有时,这些广告是直接指向到其他微软的网页,有时是指向其他公司或合作伙伴。导航你的网站到其他下属站点这种概念是无可厚非的,但如何去实现这就有很大的区别了。

有一个事实就是,现在大多数网民都学会了辨认,忽略甚至可能反感横幅广告。这并不是说,这种类型的广告在适当的目标和设计下也没有效果,更不是说微软用户根本不去点击,我实在觉得可疑的是,就没有更好的处理办法了么?

如你所见,微软网站如果要导航用户到他们的移动电话和其他项目,简单的方法就是设置了一个混乱,非标准(智能设计)的广告系统贯穿整个网站。不过,似乎将广告内容整合到网站一体,随着用户的关注,会有一个很不错的点击率。

另外,这种整合将使设计更加统一和谐。因为他们更宁愿增加一个单元而不是分割一个栏目。对了,这也许是我可以理解的微软“效率成本”做法的方案,但我要告诫一下别让他们误导你。大部分情况下,你设计的网站不会是像微软一样的兆级网络,因此更适于踏实的统筹的设计,可避免过多广告造成的视觉混乱。

显然,有很多类型的网站这并不适合出现广告。你要考虑清楚你网站是销售产品或服务,还是需要额外的收入和广告的骚扰。

9.缺少留白的喘息空间

在印刷设计,设计师在每一页都安排“生息区”,通常的做法是在页面边缘加入矩形区域,定义出放置内容的安全范围,避免页面太挤逼或页边拥挤。大多数网页设计师都会直觉上这样做,很明显的你不希望内容太散,因而挤到了浏览器侧边。

screenshot

然而,正如上面截图显示,微软的一些网页似乎并没有看重这方面的意见。相反,页面的内容总是不在任何空白或者边缘就开始(至少在我使用的浏览器上是这样)。

左边的导航版,让人感觉不是内置在这个页面的,感觉好像截断了(是了,这样的情况还可能是由于一个事实:我没有IE)。这个例子的教训就是:永远要留意浏览器窗口的边缘。除非你是为了某种明显的视觉效果而打破规则。将你的内容,尤其是交互和链接,放在有边缘的安全范围,这样用户使用的时候不会感到很挤。

如果你细看一下上面的截图,你可以看到微软的设计师一些失败例子,他们根本没有考虑到这些页面的文本块在主流浏览器是否浮动正常。这是微软很有趣的倾向,许多网页设计师,终日挖空心思的为IE浏览器而作特别的适应,但一家微软这样的大公司显然不能这么无所谓的,不去在其他系统情况下检查他们自己的工作。

更多

【责任编辑:小戴工程师】

上一篇:带你了解SEOer,其实SEOer真的是个累工作 下一篇:新手站长做网站如何省钱-省钱攻略

最新文章

2010-06-19 21:02

相关文章

2010-06-19 21:02
网站制作咨询:
QQ:277728291
电话:18668277799
邮箱:277728291@qq.com
期待你来电咨询
回顶部
Copyright 2010 智软工作室 版权所有    智软为宁波公司提供最优惠的网络服务【宁波网站建设,宁波网站制作公司,宁波做网站公司,宁波外贸网站建设公司】我们竭诚为你服务!