2001年12月IBM首页评析

设计部分 作者:moonbus 2001-12-19
http://www.blueidea.com/bbs/archivecontent.asp?id=341520

IBM.com是典型的计算机类产品生产商网站，设计风格和手法有相当强的代表性。我们尝试通过对该网站的分析，找到此类网站设计中的一些惯用方法。

总体色调除黑白外统一在蓝色，与“蓝色巨人”的整体形象相适应。放弃以往相对跳跃的蓝，而使用灰蓝色调，有利于减少对阅读正文时的视觉干扰。色彩选择#006699，#6699CC，标准的WEB安全色，在提高浏览兼容性的同时，有效兼顾了色彩的纯度，使页面不至于显得“灰”、“暗”、“脏”。

上部：

企业Logo是需要重点强调的。IBM.com的手法很有代表性。

在Logo上方没有其它色条的情况下，使用#006699较暗的灰蓝色，配合页面最底部的黑色横条，保证了页面平衡，同时也为Logo提供了妥当的背景。

黑色渐变线条，1、配合logo风格 2、丰富画面，增强动感 3、强调Logo。

更多的此类网站在最上方会有一个深色导航条，IBM网站并没有出现。黑色渐变线条和Logo的存在，使右侧色彩相对单纯、明亮，导致网站上部重心向右倾斜。搜索框的存在和上移的黑色Home横向导航解决了这个问题。事实上，导航条上移也丰富了主要以纯色块构成的画面，不至于显得过分单调。

中部：

由于中央图片为纯白底，相对纵深感较弱，左侧竖栏选择#6699CC配合上方色调的同时，又使得中央图片有效融合，加强了延展性（通常情况下，纵深感强的图片边色会选择较深色彩，以加强效果）。方正的布局，有利于分类与阅读。文字与边框间适当留气，使文本清晰，不会显得拥堵。

下部：

黑色横条配合上部导航，也稳定了根基。色块之前以清爽的白色1像素高横条分割，明快利落。

通常黑色部分面积不宜过大，整个页面需要保证一定的明度，中央图片的彩色圆活跃了整个画面。

用户界面部分 作者:redfall 2001-12-24
http://www.blueidea.com/bbs/archivecontent.asp?id=341502

如果说信息门户网站是以考虑信息量全、快为主，那么商业网站显然就是以如何突出该公司最新商业产品卖点、动向为主。

作为一个设计师，在设计规划网站的时候，首先应该客观的站在普通的用户角度上考虑：如何让用户最直观最需要看到的商品信息及与网站背后商家的意图完美结合起来。

(一)、框架结构

上左下框架结构排版，把中部近占页面三分之一面积的新产品卖点围起衬托出，这是该网站的中心点。中下部为公司最新动向。

(二)、内容规划

IBM在考虑如何更便捷的满足不同客户的需求、同时又能达到迅速推销自己的新产品意图可谓着实下了番功夫。

1、search在右上角鲜明且又方便点击的生理科学位置。
2、上部导航条是围绕着产品、服务、技术支持、实现购买的菜单，体现方便实用、周全服务的特质。
3、左部粗体是IBM针对不同行业的解决方案和相关产品适应范围、良好坚实的权威信誉陈列出来；细字体部分是对不同的用户群，可以选择不同的入口。
4、中部是较直观的新产品图片，中下部放置公司新闻、新产品策略、预出新产品动向，提升在客户心中的可信度心理信息。
5、右边是一些IBM的能提供的主要服务或者说产品、成功范例。
6、下部主要是放置公司各类信息、联系方式等。

从以上内容规划分析，我们很清晰的看到，IBM能够很好的把握住顾客心理，抓住关键视觉部位无不围绕着产品转的主动权。

(三)、颜色

使用标志的标准色为主调，协调统一了整个网站的视觉。

在黑色与深钴蓝色添加左框架的淡蓝色，成稳中又能体现其明快风格，使得整个网站的色调生动起来。

在这里略有点难理解的是首页右下角的产品通道搜索框背景运用了与整个网站较有区别的颜色，是为了更好的引导客户视觉呢还是呼应协调了上部导航栏的“Home”？欢迎大家共同探讨。

(四)、文字

1、主要由“Arial, sans-serif”“Verdana, Arial, sans-serif”这两种网页常用字体构成整个页面，有点象我们中文网页常用的“宋体”“黑体”。
2、运用粗体分别在导航条、主要菜单标题来与其他文字做主次内容上的区别。易于识别。

(五)、图片

我们知道网站的首页主要是考虑信息量和客户浏览速度问题。

1、IBM的图片用得不多，一张面积较大的主图和三张小小图片，所以大大提高了浏览速度。主图在点睛生动了该网站的同时、有效的减少了客户视觉浏览方向点，直接引导到该网站的中心意图点。

2、程序设置的时间分别更替男、女促销员颇赋亲和力热情微笑的图片，体现、暗喻IBM公司内部团体服务周到、热情友好健康的企业文化精神风貌。

再回到整体上来看：简洁明快、主次分明、方便实用是我此次对IBM网页界面部分的综合特征概括。

分析用户界面实质也是在分析用户、商家目的心理。在这个时间、效率高于一切的现代商业社会，有什么能比方便用户更令人欣慰的减压帮助方案呢？我们设计工作者今后要努力规划设计出更简洁实用的“傻瓜式”网站界面。

源码分析的补充 作者:hsx 2002-01-13
http://www.blueidea.com/bbs/archivecontent.asp?id=351973

本来答应 donger 写这个分析，但因故一直未能完成。看了嘿嘿写的，觉的有必要予以补充，因没写过这类分析，有些地方不知说的对不对，所以先贴在版主区，请大家指正。

1.其是 XHTML 文档，这可通过第一行的文档类型定义获知：

这里对 XHTML 规范多说几句，简单地说，XHTML 就是 HTML 元素 + XML 语法，HTML 元素包括 HTML 4.01 规范中的所有元素，XML 语法则包括文档必须是良好格式（元素必须正确嵌套）、标记和属性名必须小写、属性值必须加引号、所有元素都必须封闭（非空元素的结束标记必须写全，空元素必须有结束标记或起始标记必须以/结束），这些语法规则可在查看文档源码仔细留意。

2.源文档 head 部分的代码比较乱，比如象离散的三处内置 CSS 样式定义，并未在文档中用到以及重复的<noscript>定义，这主要是由于网页是由程序生成（合成）的，文档结尾的注释证明了这一点：

说明文档是由 make_hp 合成（生成）的。

3.元(meta)标记用于提供文档的元信息，便于维护和管理文档，可用于向浏览器及搜索引擎提供相关信息以及特定信息的描述说明。有些 meta 标记是已成为通用的标准，有些则是各网站根据需要自已定义的。

下面是所用 meta 标记浅析：

<meta http-equiv="Pragma" content="no-cache"/> 不缓存页面
<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.icra.org/ratingsv02.html"
l gen true r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html"
l gen true r (n 0 s 0 v 0 l 0) "http://www.classify.org/safesurf/"
l gen true r (SS~~000 1))' /> 网站内容级别（IE：工具 > 内容 > 分级审查），网站若想应用本 meta 标记，应向 www.rsac.org/ 申请获得。
<meta name="Security" content="public"/> 页面安全性，公开的
<meta name="Source" content="Franklin/IPC"/> 原作者、出处？（不太清楚）
<meta name="Copyright" content="Copyright (c) 2001 by IBM Corporation"/> 版权声明
<meta name="Robots" content="index,follow"/> 页面可被采用网络机器人技术的搜索引擎索引并从该页面跟踪下去
<meta scheme="rfc1766" name="DC.Language" content="en-us"/> 文档所用语言，美国英语
<meta scheme="iso8601" name="DC.Date" content="2001-08-09"/> 新版开始使用日期，2001年8月9日
<meta name="IBM.Country" content="us"/> 国家标识，美国
<meta name="Description" content="The IBM corporate home page, entry point to information about IBM products and services"/> 供搜索引擎用来描述页面的文字
<meta name="Abstract" content="The IBM corporate home page, entry point to information about IBM products and services"/> 文档摘要
<meta name="Owner" content="webmaster@www.ibm.com"/> 所有者（email）
<meta name="Keywords" content="ibm,international business machines,internet,e-business,ebusiness,personal computer,personal system,e-commerce,ecommerce,pc,workstation,mainframe,unix,technical support,homepage,home page"/> 供搜索引擎用来索引页面的关键字

对 meta 标记的应用，感觉国外网站比国内网站要重视的多。

4.出于兼容性考虑，不仅为不同平台、不同版本、不同厂商的浏览器准备了不同 CSS 文件。同时采用了垫片图像技术，因为对表格单元格处理，各个浏览器不尽相同，比如 IE 即使表格单元不含内容，其背景颜色等属性依然有效，而在 Netscape 中，如果不含内容，背景颜色属性不起作用。但如果内容是文字，IE中单元格高度属性又不起作用（高度值小于文本行高度），这就需要用到垫片图像（通常为 1×1 的透明 GIF 图像，可根据需要强制设定高度、宽度为特定值，起支撑作用）。

r1.css 适用于：

IE
Macintosh 系统平台上的 4.0 及其以后版本
其它平台上的 4.0 以前版本

Netscape
Macintosh 系统平台上的 4.0 及其以后版本
其它平台上的 4.0 以前版本

所有其它浏览器

ie1.css 适用于非 Macintosh 系统平台上的版本号在 4.0 ～ 5.5 间的 IE 浏览器
ie6.css 适用于非 Macintosh 系统平台上的 IE 6 浏览器
ns1.css 适用于非 Macintosh 系统平台上的版本号不小于 4.0 的 Netscape 浏览器

分析四个文件的不同，主要在于字体大小所用单位的不同。IE1、IE6 基本上是用 % 为单位，NS 为 pt 单位，R1 为 PX 单位。

包含的 ibm.css 将四个 CSS 文件予以合并，并去除了相同的定义部分，大家可看看不同之处。

5.绝对链接，某些绝对链接省略 了http: 前缀，这到是第一次见（ 孤陋寡闻 ）

<script type="text/javascript" src="//www.ibm.com/data/js/v11/ejsmsp.js"></script>

6.采用传统的表格排版，如界面所示，分成上中下三个大表，在三个大表中根据需要再嵌套一（上表）至二层（中表）表格，充分利用表格的排版能力对版面进行控制，至于字体、颜色、底色、底图等样式全部用 CSS 来设定。

7. ejsmsp.js 的作用是利用 cookie 实现用户在 IBM 网站行为的跟踪，弹出相应的内容的窗口。

8. 附编排成良好格式的脚本文件。

© 一叶千鸟（转载请留原文链接，更新于2008年01月01日2点）

转载时务必以超链接形式标明文章原始出处和作者信息及版权声明。
您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论 ，或者在您自己的网站中 引用(Trackback) 它。