WEB界面设计

WEB界面设计WEB界面设计WEB界面设计WEB界面设计WEB界面设计译者序年,一组前端技术的组合由于被命名为而广为人知。此后,随着应用的迅速普及,新时代的帷幕也徐徐拉开。仅几年间,各种“桌面般的”应用程序和新应用平台层出不穷。从到再到。在世纪第一个年临近尾声之际,现代发展的成果已经蔚为大观。界面,不仅是现代应用程序与传统应用程序的分水岭,也是曾经横亘于传统应用程序与桌面应用程序之间的一道难以逾越的“鸿沟”。然而及其框架技术突飞猛进的发展,不仅让一个或少数几个页面中容纳整个应用程序(或复杂功能组件)成为可能,而且也让现代应用程序的界面展示了堪与桌面应用程序媲美的耀眼风姿。读者手中拿的这本书,是两位出色的设计专家和在他们多年潜心硏究、深入实践的基础上,结合现代认知心理学的最新发展成果和流行应用程序的界面设计实例,以六大设计原理为依托,以最佳设计实践为着眼点,奉献给我们的一本精彩绝伦的现代界面设计权威指南从译者的角度来看,本书既是一本界面设计手册,又是一本界面实例参考,它基本上涵盖了现代界面设计的普遍规则和最佳实践。界面设计人员通过阅读本书,可以迅速在当前或将来的项目中发现最合适的应用场景;开发人员通过阅读本书,能够轻松地将丰富的示例映射为自己头脑中的编码要点;项目的管理人员通过阅读本书,就有了在与客户商讨界面设计方案时的“共同语言”。哪怕你购买本书只是出于对其中漂亮界面的好奇,甚或只是想通过本书了解目前最流行的站点,相信在阅读本书之后,你会发现本书为你揭开了现代应用程序为什么如此令人着迷的奥秘。感谢金照林、柳安意对夲书中耕时付出的努力,感谢徐定翔为译者翻译本书提供支持,感谢本书编辑陈元玉指出或纠正本书译稿中存在的问题。翻译本书的过程中,译者尽最大努力确保术语统一、准确,也尽最大努力以简洁、地道的中文为读者重现原书的意境和风貌。但是,囿于个人的水平,书中的问题和疏漏之处在所难免,敬请读者朋友给予批评指正。译者邮箱是个人网站是ht. cn-cuckoo, com李松峰年月于北京序Foreword构想()是建筑学中的一个基础性概念(注)。它指的是要建造一组与跨学科协作趋势契合的学院派建筑,还是要建造一座足以适应各类观众审美取向的大剧院?为了把特定的构想变为现实,建筑师不仅要规划好建筑的基本功能,还必须懂得如何协调最终会影响建筑进程的种种复杂因素。设计原理是建筑师提出构想的指导方针,它定义了建筑物的关键特征,能够在建筑相关各方(包括委托人、承建方、城市规划部门和工程师)之间起到沟通的作用。设计原理清晰地表达了基本目标,是作任何决定的依据,也有助于保证工程的各个组成部分最终合成为一个整体。但是,要完成一幢建筑物,只有设计原理还是不够的。无论是修筑小小的阁楼,还是建造禅宗花园,建筑的主题思想或构想随时都可能面临修改,或者遇到无法逾越的障碍。可能的因素包括标准尺寸()、空间容量、审美观、物料限制,等等。希望把头脑中的构想变为现实的建筑师,必须全面深入地掌握设计过程中的诸多因素,唯有如此,才能根据现实的条件作岀最佳选择在这个组合中,上方是设计原理,下方是设计注意事项,而中间则是建筑师构思的各种用途的、能够满足人们或组织交流、通信及工作需要的具体结构(译注对于读者来说,你们想把自己的构想变成活力四射的富应用程序()。同样,由设计原理和种种注意事项组合成的框架,也将是迷雾中为你引航的灯塔。本书作者和是这座灯塔的建造者。长达年的软件设计开发经历,成就了和这样跨越多个领域的顶尖专家。不管是对术语的命名还是对例子的阐述,乃至对细节的剖析,无一不映射出他们对成功及失败的富交互设计的深切体悟。注:“构想”这个术语源自的书《译注:关于“这个组合”,请读者参考htp:0.ke. om/ff/entry.asp:?75中的内容及插图1序两位作者经历过的不计其数的案例为他们提供了独一无二的视角,让他们能够洞悉当今最成功的富交互站点背后的设计原理。本书第至第部分给出的原理,是用来衡量富交互能否为你的应用程序带来价值的圭臬。和为每个原理提炼的注意事项和最佳实践,是作岀可靠决策的重要依据。工程师、项目经理、市场营销人员,当然还有设计人员,应该反复领会并时常参照这些原理和注意事项,以确保毎个人都能基于同一套标准来评估设计决策的影响。在富交互的组合中,上方是设计原理,下方是设计注意事项,而中间则是设计师构思的各种用途的、能够满足人们或组织交流、通信及工作需要的应用程序。正如殊途同归的建筑设计。想把活力四射的富应用程序的大胆构想变为现实吗?那么从现在开始,先通过本书迅速掌握界面设计必备的知识和技巧吧!公司产品构思及设计部门高级总监著有畅销书《》()年月刊言Preface历史回眸What Happened我()的第一台个人计算机是(年前后),配有芝克莱特(译注)式键盘。最初几个月,我面对的主用户界面是命令行,即每天都要在操作系统中输入代码。后来,升级的让我用上了更好的键盘,而且机器里还预装了很多游戏。但是,界面基本上没有任何变化,仍然是命令行和基于文本的菜单一统天下。即使是登上历史舞台,类同的地方照样居多。是当时顶尖水平的电子制表软件,它通过一组简短的键盘命令来控制;不过,即使是这种级别的应用程序也谈不上什么用户体验不久,界面革命开始了。年问世,这种新机型刚推出时间不长,我就买了一台回家。配备的鼠标打开了崭新的交互世界的大门。用户摆脱了只有学习古文一般的命令才能在基于文本的菜单中导航的命运,取而代之的是另一种自然而然的、更符合人类直觉的方式嗯,读者可能会想,这有什么值得大惊小怪的?别忘了那是年,不是现在。那么,这跟一本设计界面的书有什么关系吗?关系无处不在。在有史以来的大部分时间内,站点和应用程序都以界面作为分水岭—与早期的桌面电脑时代很相似。多数站点都基于以下两个事件:单击超链接提交表单试一试,就通过这两个事件能创造出什么吸引人的用户体验?而且,问题不止如此每次单击或提交都会伴随一次页面刷新,创造流畅的用户体验几乎只是一句空话。译注:芝克莱特)是一种口香糖的品牌。所谓芝克莱特式键盘(是对键盘的一种别称,指按键像一块块口香糖的键盘。参见ht1::peti.orgwiki/ Chiclet keyboardⅣ前言说来很有意思,解决这些问题的技术其实很多年前就已经存在了。只不过必须等到常用的浏览器普遍支持这些技术之后,开发人员才敢在日常开发中放心大胆地使用年发布了和,这两个应用程序使用了后被称为的一组技术。差别的确非常之大。基于的支持实时平移、缩放,无需任何页面刷新,其交互性丝毫不亚于桌面应用程序。而当时的则亦如其他应用程序,必须在每次移动或缩放地图后刷新页面。的应用,使过去的和现在的有了非常明显的差别。写作本书的动机Why We Wrote This Book我虽然有幸亲身经历了桌面电脑时代的第一次界面革命(甚至还赶在第一批编写了一款游戏(注)),但我的合著者则亲身经历了的第二次革命几年前,我们俩在的母公司)成为同事。在那里,我们共同创立用户体验设计团队、改进大量产品、完成启发式评估,共同参与了重新设计应用程序的整个过程。在这些工作的基础上,我们提炼出很多种用户界面设计模式和反模式(须要避免的常见错误)。此后,我加入了并在见证为界面带来革命的过程中开始活跃起来。我在期间做出的贡献之一就是公开发布了设计模式库)。作为的技术推广专家,我结识了很多的顶尖人物,并与他们就如何看待这些新的交互形式,以及如何在独特的环境中应用它们展开了头脑风暴。结果就是在过去的几年中,我就界面设计这一主题演讲了无数场次,跟世界各地的开发和设计人员分享了最佳实践与此同时,作为设计师的也在其咨询事业上取得了辉煌的成绩。她在自己的工作中不断改进和修正最初的设计模式及原理,并先后领导了多个鲜活的富用项目——有企业级应用程序,也有面向公众的网站。这些设计模式已经成为与客户沟通时最常用的词汇,也是设计新应用程序和重新设计已有系统的一套标准。本书是我们两个人经验积累的结果,或者说,是和我多年相同工作经验的升华。在出版方多次盛情邀请之下,我们也认同与更多人分享这些知识的最佳方式就是出本书。游戏名叫由当时著名的游戏公司于年发布。前言V本书读者对象What this book s about本书的主题并非信息架构(译注),但字里行间可能会渗透出信息架构的基本原理本书的主题也并非视觉设计,但全书各章都将以良好的视觉设计为基调讨论问题。本书的主题是交互设计,具体而言是基于的交互设计;更确切地讲,是基于的富交互设计。本书内容涵盖了基于独一无二的环境,在创建丰富体验过程中提炼出来的最佳实践、模式和原理。所谓独一无二,即具有独特的自身环境;它不同于桌面环境。尽管时过境迁,桌面与的界限已经变得越来越模糊,但基于创造富交互依旧有着强烈的针对性。直接在页面上编辑内容(例如,第章讨论的页内编辑)很大程度上源自桌面应用—一而旦落实于网页,则又体现出其自身所独有的风格。本书将以几个重要的设计原理为依托,通过一组设计模式来探讨这些独一无二的富交互形式设计模式Design Patterns到底什么是设计模式呢?在他的开创性著作《)中,首次使用了术语“模式”来划分针对人类活动的常见建筑设计方案。他对模式的定义是当遇到某个反复出现的问题时,就相应解决方案的核心内容给出的描述随后,在大名鼎鼎的“四人帮和)合著的《书中,把模式这个术语引入了软件领域。又过了几年,设计模式出现在了用户界面设计领域(注)本书探讨的模式属于后一种——交互设计模式。粗略算来下,全书介绍了超过种适用于富交互设计的模式。在解释每种模式时,将会以各种各样的网站作为示例。由于模式描述的是交互设计,为清晰地阐明相关概念,书中会使用大量的插图作为辅助。而且,在展示给定方案之间细微差别的同时,也将指出应该避免的模式(反模式)。每一节最后的最佳实践部分则包含了对读者的一些重要建议本书将要介绍的模式依托于个设计原理,后者构成了本书的框架译注:有关信息架构()的更多内容,请参考ht: machina.org/ikiindexphpsihttp:/en.wikipediaorg/wiki/information-arChitecture读者可以参考的《》(的交互设计模式库(htt.eiom)。Ⅵ前言原理一:直截了当恰如所言:“需要在哪里输出,就要允许在哪里输亼”。这就是直接操作的原理。例如,不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。第至第章遵循这个原理分别按照“页內编辑”、“利用拖放”和“直接选择”归类介绍了相应的模式。原理二:简化交互设计师在重新设计时,曾用“少费事”这个字来描述减少与站点交互操作的需求。而实现少费事的主要途径就是利用上下文工具。第章上下文工具”基于这个原理探索了几种不同的模式。原理三:足不出户用户心流会因刷新页面而被打断。为避免毎个操作都刷新一次页面的情况,可以返璞归真,采用根据用户自然操作流程建模的方式。可以根据需要决定什么情况下让用户留在当前页面。第章“覆盖层”和第章“嵌入层”,分别讨论了在覆盖层和页面流中显示信息的模式。第章“虚拟页面”讲解了如何动态展示内容。本部分最后一章,第章“流程处理”,展示了拋开页面切换,转而在页内创建流程的模式原理四:提供邀请中的富交互设计面临的一个主要挑战就是易发现性。再好的功能,如果用户发现不了,结果仍然等于零。提供邀请是改善易发现性的重要途径。邀请可以提示用户下一步交互操作是什么。由第和第章构成的这一部分,将分别从“静态邀请”和“动态邀请”的角度,探讨那些始终在页面上显示邀请和响应用户操作显示邀请的模式。原理五:使用变换动画、电影转场效果,以及各种形式的视觉变换,都是极为有用的技术。第章在介绍最常用的“变换模式”时,探讨了吸引用户与增进沟通的模式;第章则深入分析了“变换的目的”,同时,还向读者介绍了一些反模式。原理六:即时反应智能界面的特点是具有良好的反应能力。这个原理探讨了怎样通过响应操作为用户提供丰富的体验。第章介绍了一组“査找模式”,包括实时搜索、实时建议、微调搜索和自动完成。第章介绍了一组“反馈模式”,包括实时预览、渐进展现进度指示和定时刷新。前言Ⅶl本书读者对象Who should read this book本书适合定义、设计及构建界面的任何人设计人员在为设计精妙的富交互而勾勒草图、奠定基调时,会发现本书介绍的原理特别有指导作用。同时,书中的大量模式能够丰富你们的设计工具箱,数百个示例也提供了直观的参考。当然,书中列出的最佳实践应该是一个备忘录,针对各种交互应用场景给出了提示。产品(项目)经理在思考新的业务问题时,可以将书中的模式和示例作为拓展思路的良好起点。虽然本书没有给出编程实现方案,但开发人员仍然会受益于其中总结的设计模式,因为这些模式可以直接映射到具体的编码方案。对于相关的每个项目成员而言,这些模式会成为贯穿产品(项目)管理、设计和实施过程的词汇表,从而为团队间明确、清晰地沟通和协作铺平道路。另外,无论你是刚刚入行的设计开发新兵,还是拥有丰富经验的老手,本书依托设计原理和模式给出的丰富而真实的示例,也将为你的日常工作吹入一股清新的空气本书配套站点What comes with this book本书有一个专事拾遗补缺的配套站点(htt:designingwebinterfaces.com),其中包含最新示例,对原理、模式及最佳实践进一步思考的结果,以及界面设计方面有价值的文章和资源的链接在遵守创意共享许可()的条件下,读者可下载本书所有图表及插图并在自己的演示中使用。下载站点位于(ht:o: flickr. com/photos/designingwebinterfaces本书排版约定Conventions used in this book本书使用下列排版约定斜体)或汉仪中黑简体表示目录、文件名、选项和模式名称,偶尔也用于强调。提示表示提示、建议或一般备注。