首页 | 新闻资讯 | 软件应用 | 图形图像 | 网络应用 | 硬件学堂 | 程序开发 | 安全中心 | 素材下载 | 作者专区 | 学院论坛
精选专题 | 精美壁纸 | 专家答疑 | Flash剧场 | Photoshop | 名词解释 | 梦幻桌面 | PS高手进阶 | QQ区 | 图书 | 黑客教材
Flash教程| 卡通制作 | AutoCAD | 3DMax实例 | PS视频教程| 网页制作 | CorelDRAW| Firework | 滤镜与实例 | 全部视频教程
当前位置:eNet硅谷动力 > 学院频道 > Dreamweaver

WEB设计经验谈
2004-11-29 15:52 来源:eNet论坛
【简 介】
作为设计主管,Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具,这些工具被用于下载中心、产品目录、配置文件中心、 搜索 和注册等联机功能。 他为几个内部工具设计了用户界面,并且正致力于创建将于今年晚些时候发布的下一代主页。
    
加入收藏  设为首页

  作为设计主管,Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具,这些工具被用于下载中心、产品目录、配置文件中心、 搜索 和注册等联机功能。 他为几个内部工具设计了用户界面,并且正致力于创建将于今年晚些时候发布的下一代主页。

  从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确,这些确实是我所关注的。视觉上的吸引力是重要的,但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。

  我的意思是,人们通常在访问 microsoft.com 时,并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息,或者有一些技术问题需要咨询,或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理,以便他们能够容易地找到所需信息。

  设计站点

  在进行 Web 设计时--在设计过程中--形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然,我们有最新的 Web 工具,并且能够将各种可视的小配件上载到网页上。但是我们认为这样做将不利于为访问者提供有效的服务。

  事实上,我经常发现一些站点未将重点放在功能上。常见的错误包括:

  用户界面元素不一致.例如,同一个控件在不同的页面上功能不同,或者同一个功能对应几个用户界面控件。

  导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。

  不太注意或根本不注意基本的图形设计原则,例如排版式样、色彩和版面的设计。

  相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。

  使网页过于庞大,以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形,但是您需要对它们进行精挑细选,然后用适当的压缩和颜色索引优化它们。

  现在的 Web 站点仍然存在很多问题,这并不奇怪。毕竟,Web 设计“艺术”相对来说还是个新生事物。在四、五年以前,Web 页甚至是普通的。那时,人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在--并且,可能在某些情况下这种方法确实有效。但是这些站点一般很难看,并且更重要的是,它们真的难以使用。接下来便进入“看看我们能做些什么”阶段,在网页中加入了大量的动画、声音文件以及其它附加件,导致访问者需要长时间地进行下载,但是并未获得多少实实在在的内容。 如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速,同时在功能上有所提高。这是 Microsoft 的目标,而且我们最先承认自己所犯的错误(参阅“Microsoft 的 Web 简史”看一看以前的主页设计)。

  设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是,在其它情况下,它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西,那就是小的改动会使 Web 页的运行方式有很大的不同。

  明确的流程

  若要避免类似问题,我们为新服务(例如“搜索”)的创建或关键的 Web 页(如主页)设计了一个明确的流程。 每个项目都是在一定的基础上开始的,即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段(第 1 阶段),我被要求设计一些初级模型:大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议,看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。

  如果答案是“可以”,那么此项目会获得批准,我们开始写项目说明书(第 2 阶段)。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时,我们一般还会开始可用性测试(一般会有书面的模型)以了解潜在用户将对计划中的设计做出何种反应。 在最后开发阶段(第 3 阶段),我们创建运行计划服务的 Web 原型,并且进行全面的可用性测试以及内部复查。然后完成站点的代码,修改程序错误,最后站点通过实际运转的 Web 站点向客户发布。

  正如您所见到的,可用性在整个流程中扮演着重要的角色(参阅“创建有效的 Web 界面需要认真计划”)。我们可以为用户运行某项任务计时,这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量,以确定一个功能的重新设计是否为客户带来任何真正的价值。 还有,我们将仔细地观察以了解可用性对象是否可以计算出如何正确使用新功能--我们称为“可发现性”的方法。有时这为我们提供了一些挑战。例如:在我们的站点上,在 搜索引擎 中键入一个词组或字会产生一列结果。然后我们请用户选择在这些结果中进行搜索,以便进行更细的搜索并且导向某一页或资源。但是即使“在结果范围内搜索”被明显地标记在深色标签上,很少有人熟悉它。一些用户认为他们正开始新的搜索,并且可能毫无结果。我们正在解决这个问题以确保客户可以利用 microsoft.com 上所有丰富的功能来提高他们对此站点的认识。

  选项“在结果范围内搜索”看上去很直观,但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。

热门推荐:
href="http://www.enet.com.cn/eschool/inforcenter/A20041129366519.html" target="_blank">
手把手教你DIY网站论坛
 

小程序大作用,让你的网页酷到底





[1] [2]下一页
关键字: Web  网页设计 
您对这篇文章的看法是:    喜欢 反感 支持 反对 加油 鄙视 学习 打击 佩服 漂亮 路过 发表评论
视频教程】 【专题汇总】 【不懂就问我关闭窗口

安全:设置防御小流量DDOS攻击
Photoshop给艳丽美女照片简单润色
第一张Google Chrome OS泄漏(多图)
Fagarazzi女性人物CG插画设计欣赏
iOcean数字海洋 中国版Google Ocean
相关文章
 本栏目最新文章
·DW扩展:Web开发jQuery UI接口框架
·Dreamweaver套用源格式命令应用
·DW制作网页时使用CSS的注意事项
·DW CS3中Spry详细区域功能的解说
·DW CS4 JavaScript的部分新特性
 精彩回放
·3DSMAX打造书本翻开效果
·共享上网技巧应用四则
·陪酒女浸泡在酒里的青春
·美女的性感靓丽婚纱设计
·妖冶身姿 死或生3壁纸
·剿灭Win XP下的29个烦恼
·黑客必备 NET命令大全
·用PS制作精致绝伦的红酒
 精彩推荐
 今日软件下载
杀毒软件免费随便用
瑞星全功能安全软件2009 基于“云安全”策略和“智能主动防御”技术开发.
www.rising.com.cn
 往日推荐
·推荐“美图秀秀”就能赚Q币
·五大搜索引擎横向评测
·防御计算机病毒十大步骤

论坛精华
·photoshop完美扣图教 
·Photoshop将美女照片 
·史上最强最多 photo 
·Photoshop给多斑的人 
·精灵女孩白夜 
·PhotoShop实例精选电 
热点推荐
绘制逼真金蛋
浪漫婚纱照片
Flash视频编程
Ulead GIF教程
热点关注
·Flash CS4 制作经典小游戏
·C语言程序设计视频教程
·PHP+MYSQL开发视频教程
·Flash CS4从入门到精通教程
·服装设计与效果图绘制教程
·21视频之Fireworks8网页制作
·Vray高级实例应用视频教程
·CorelDRAW14入门到高级教程
·Vray高级实例应用视频教程
全国计算机等级考试二级(VB语言)
往日推荐
网站重构设计
鹏哥C#教程
服装设计教程
PS唯美风景
焦点关注