译者序：当我看到这篇文章的时候，还好发布的时间不算太早，主题很对我的胃口，因为我的Blog已经这么做了。但这篇总结的很全面，提到了一个新的名词“响应式Web设计”，作为Web内容应该去更加灵活的呈现在不同的终端上。这让我想起了之前写的一篇文章《未来我们只需要浏览器》，随着智能手机和各种Pad的发展，内容终端终究会发生改变，Web展现需要去适应这种趋势，并带来优秀的阅读体验。

响 应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。

响应式Web设计与传统的设计方式截然不同，开发人员（特别是新手）必须要理解它的优势和弊端。这篇文章正是为大家揭示一些实例的。（这里介绍一个叫“Media Queries”的网站，里面介绍了更多实例和演示）

数据表格是响应式Web设计的经典使用情景，实现它的想法与传统的设计理念有很大不同。数据表格默认很宽，当你要查看它全貌时，你得缩小表格，但这时字会变 的很小，很难去阅读。然而当你想看清楚上面的字时，就不得不再把表格放大，这时要查看完整表格就得横滚加纵滚。这么阅读表格也太KB了。或许重新格式化表格或以饼图形式展现是种解决方案。再不然，你可以弄一个迷你图，即使在窄屏幕里它也能适应。

响应式Web设计中的图像以流式图像为主，可以被上下文感知的图像所替代，这是一种更好的设计方式。这种技术的真正意义在于，能够让图像适应不同的屏幕分辨率，更大的或更小的。所以它与传统设计的理念和技术都有很大不同，合理使用会让你的网页化腐朽为神奇。

响应式Web设计实例

Simon Collison

Andersson-Wise Architects

Stephen Caver

Sparkbox

Food Sense

The Boston Globe

Think Vitamin

Sasquatch! Music Festival

Internet Images

Staffanstorp

Seminal Responsive Web Design Example

Naomi Atkinson

Forefathers Group

Spigot Design

New Adventures In Web Design Conference 2012

Illy Issimo

Arrrrcamp Conference

Robot or Not?

Earth Hour

Clean Air Commute Challenge

Launch Kit

Teixidó

Ribot

Deren Keskin

Sweet Hat Club

Glitch

dConstruct 2011

Adaptive Web Design

Authentic Jobs

Five Simple Steps

Splendid

Ryan O’Rourke

FlexSlider

El Sendero del Cacao

Do Lectures

St Paul’s School

Naomi Atkinson Design

Ben Handzo Photography

Stunning CSS3 Media Queries Example

Nordic Ruby Conference

Halifax Game Jam

ASU Online

3200 Tigres

Pixelab

Kings Hill Cars

8 Faces

Asbury Agile

Alsacréations

Sleepstreet

相关文章

1. 德国之旅-奥地利萨尔茨堡
2. 德国之旅-新天鹅堡
3. 德国之旅-纽伦堡
4. 德国之旅-法兰克福
5. 德国之旅-贝希特斯加登

每次看到秀工作台的，我的很激动，总愿意多看两眼积累灵感。它们有个共同的特点——简洁、专业。你会发现桌面上都是一水儿的Mac。如果要问Mac给桌面带来了什么，我会说，它让桌面变整洁了。一张简单的大桌＋一台Mac＋一把舒服的椅子，这就是我喜欢的。

我的最爱

It’s the second time I edited this article,  you know. I thought that the draft has been saved, until shot an arrow in my knee… ToT

Via WDL

相关文章

1. 网页设计趋势发展历程之2006
2. 网页设计趋势发展历程之2009下
3. 开发iPhone版校友录
4. 设计的设计观展
5. Web设计师能从游戏中学到些什么

译者序：一直以来我都想写一篇关于游戏与交互设计之间关系的文章，因为我坚信好的设计和游戏一样有魔力，都能为用户带来乐趣。这可能跟我之前在游戏公司任职过有关，潜移默化地受到感染和熏陶。当看到这篇文章时，共鸣了，这就是我想要说的，于是我决定译过来，跟更多设计师产生共鸣，推动 “乐趣设计”，同时也为自己这方面的想法写下第一笔。

好的设计应该是融会贯通的，有相似的细节和处理方法，当然，还要有一个能够吸引人的理由或法宝，如果你有过这方面的零碎念头，而没有能汇总在一起，往下看，这就是了！

游戏越来越Web化，而Web也越来越游戏化。如果你想证明这一点，只需要去看看雅虎问答。有人问，有人答，最终获胜答案还能拿到奖励分（译者注：没玩过雅虎问答的想想百度知道）。这是一个排名系统，可以积聚和解锁系统中越来越多的功能。它的工作原理是因为心理的成就和游戏机制，从而鼓励互动。问题来 了，Web设计师们能从游戏中学到什么？或者更确切的说，是从视频游戏中？

一个好的游戏界面必须高度可用，并且直观，能够用尽可能少的动作完成很多重复的动作。它们需要具有吸引力，并且够可爱。一个好的游戏界面会给用户体验加分的。在游戏中，人们接受内容的同时不希望幻想被打破，所以再伟大的游戏产品都可能败于一个不给力的界面。

即使在像《波斯王子》这样的老游戏里，只有有限的系统功能，也要求设计师们必须做出一些创新。在功能越发丰富的今天，我们不难从现代视频游戏中发掘中更先进的设计技术。

网站的用户以同样的方式，希望其内容交付的方式，是很容易理解，直观，引人入胜，而且不需要过多滚动或点击。事实上，Web设计师可以从视频游戏界面中学到 很多。使用了通用游戏界面思想的网站，可以简化用户操作，同时为站点注入更多个性化。这样能带来更高的流量和回访率，甚至销售额（说白了，就是钱嘛！）

这并不奇怪，我们已经看到，像carousels，lightboxes，accordions和日益复杂的导航，已经通过CSS和JavaScript库大量涌入了浏览器中。无论是好事还是坏事，那都是另一篇文章要讨论的，本文将专注于技术，而不是那些错误的应用。

Web设计师可以从视频游戏中学到的东西不仅限于用户界面。雅虎问答的工作原理在于内置的心理学成就系统。所以，当我们看一些基本的用户界面思路和模式时，其他更高层次的概念也是有益的，同时也值得去探讨。

从大局出发

考虑到游戏界面，Web设计师需要敏锐地意识到项目自身的背景和客户的目标。显然，一个网站往往，但并不总是，有一个目标，这是非常不同于视频游戏的地方。 在大多网站中，对效率的要求要高于娱乐性。一个很酷的鱼眼界面，如果放在提供税务信息或电子商务的网站上，可不是个切合实际的想法。然而，一个互动型的社 会媒体，可能会因一种领先的技术或某种类型的成就系统而从中受益。选择合适的UI组件，事半功倍。

纵观大局，还要考虑结构和方法 – 不只是UI组件。比如，看看菜单是怎么个结构，考虑下为什么要这么做（译者注：作为设计师，每当使用一个产品的时候，都应该考虑一下背后的设计思想）。在 很多游戏里，一些功能设置都放在星状拓扑结构的菜单里。如果你选择“武器”，接下来打开的菜单将展示出所有武器。要选择“地图”得通过导航回到第一屏。这种结构简化了设置选项，否则很快就会被其他选项分散掉注意力而忘记真正要做什么。

你能明白这种结构形式的网站是如何向访问者展示提供大量信息的吗？通过使访问者一次只专注于一个大型在线任务或一个信息块，可能会增加用户的转换率。这种结构也可以有效地被使用在网站上的销售漏斗。下面的例子就展示了一个简单的游戏菜单结构，通过它可以很容易地应用到一个网站的信息体系结构，建立起访问者路径。（如下图）

如果你正在搭建一个会计师事务所的网站，你可能会根据访问者类型的相关性来 划分标题下的菜单信息。一个有钱的个体与一个小企业的需求不尽相同，但都可能有意聘请同一公司。你可以自上而下的开展，用两个切入点作为漏斗，一个为个体 和家庭，另一个为企业和组织，每个按钮用来为他的用户分流。这个分流页面可以提供内容和相关工具，并为不同的用户提供相关服务，从而简化他们的操作，提升体验。（如下图）

此外，视频游戏中的提示是用看的而不是用说，试着去了解一下它们是怎么工作的。成功的游戏里都有一个为“小白”提供训练和学习的地方。一个角色一上来都要通 过完成一些任务，达到一定等级，从而熟悉操作也了解游戏的故事情节。探险家学会拿起剑摆动，然后杀死一只老鼠，然后学会捡宝贝。用户希望通过界面体验到身临其境的感觉。

在《上古卷轴IV》中：Oblivion，你开始在监狱里，必须通过一个地下洞穴逃脱，沿途会跟大老鼠和偶尔出现的小妖精战斗，通过这种方式来学习游戏的基本控制。

它们为什么有关联？你可能不必为一个复杂的界面提供完整的交互教学，但可以通过智能图形或图表，让用户更迅速地了解内容。你可以抛出一个大概念，然后拆分成小块。用小提示和实例要比长篇大论好的多。通过研究游戏中是怎么用看替代说的，就可以在一些棘手的问题上获得突破了。

战斗场面未必要华丽

游戏设计奇才Jesse Schell说，“游戏，为满足你的好奇心提供了成功的可能性和机会——一个解决问题的机会，做正确的选择，并让人感到自由。” 即使是最平凡的网站也能问出最吸引人的问题——游戏的哪些要素能给人们带去欢乐？

游戏通常在用户输入时给出清晰的反馈。这些元素可以融入界面，不仅仅是通过carousels或accordions的形式。问个简单的问题“你希望学到更多关于此话题的东西吗？” 确定提交表单之后会发现，提升用户交互体验还有很长的路要走哇。

一些Web设计师们已经实现了UI组件的简单化。如今，悬停菜单和提示层已经不是什么新鲜玩意了。这些在游戏中已经成型的套路，如何能为普通UI元素带来更多的创意和乐趣，让我们拭目以待吧。

来点实例

让我们进入正题，来看看如何在下个项目中使用这些UI元素。接下来会展示一些实例，还有一些资源便于之后的扩展学习。

异步加载的信息

这是《辐射》里的加载截图：上面的《辐射：新维加斯》和下面的《辐射3》都有帮助信息和提示，并随主题背景图一起在游戏中展开。相比老套生硬的加载图像，它使用轮盘赌或绿屏变换到指定界面，从而让这个无聊的等待过程成为游戏乐趣的一部分。

Web设计师能从中获得什么：

个性化你的图像，把用户拉入你所创造的屏幕“世界”中。即使你在企业网站工作，你也可以设计信息位用以显示提示和其他帮助信息。那搭建一个零售体育用品网站呢？也许你可以用一个旋转的篮球作为加载动画。还没想好怎么开始？点开本教程学习如何预载内容。

加 载一整屏背景图或许太慢了，但你可以给一个div设定彩色背景，然后利用JavaScript去载入提示和信息。为保证效果，加载文件大小最好控制在 30KB以下；当然，越小越好。可以用一个简单的AJAX每几秒就抓取一次内容，或者当然也可以为每次抓取提交一个请求。怎么做完全取决于加载内容的多少 和你有多少时间。看一个这种方式的实例，Website Grader。提交一个链接后，你期待的结果就来了。

自定义光标样式

在《神鬼寓言3》里，当地区靠近玩家时，光标就会替换成放大镜。

在《上古卷轴IV》中：Oblivion，一个简单的手型光标就代表玩家可以拾起。红色的手型则表示该物件被偷，而且士兵可能会追来。

Web设计师能从中获得什么：

或许最容易识别的自定义光标就属谷歌地图的“抓抓手”了。但自定义光标在Web应用上已经不是什么新鲜事儿了。大多数浏览器已经内置了这个功能。

使用以下光标时需要谨慎行事：提供帮助时，让内容看上去可点，同时突出显示。一个特定的信息是否绝对需要被访问者看到呢？试试这个自定义光标（如下图）的演示。看到了，真的需要这么强化显示吗？试想一下，一个合理的JavaScript运用在儿童网站上，能够吸引注意力！但很显然，对于企业网站来说就未必适合。

图标，图标，还是图标

视频游戏和网站的最大不同在于，使用在复杂游戏菜单中的图标要比使用在网站导航中的多的多，没错，就是这样。用户通常在游戏上花费的时间都比浏览网站要多。但图标也一直被网站所用，而且网站跟Web应用之间的界线也越来越模糊。

那么，如何有效地在游戏导航中使用图标呢？它们必须易读，并且与环境相符。在上面《Halo Reach》的例子中，用户依赖图标进行导航和武器选择，但菜单类似于一个“平视智能显示”（HUD），就像在现实世界里透过车窗看东西一样。在《上古卷轴》中，图标装饰了“滚动条”。网站的图标同样应当容易被理解。添加文字标签以获得更好的可用性。

图标可以大大加快复杂的菜单的通过速度，前提是它们都经过精心的选择，对需要花费长时间浏览网站的用户来说尤为有效。使用固定颜色、高对比度的轮廓并且形状简单的图标，更容易辨认，也更容易理解。

游戏说白了就是你在一堆复杂的图片里穿梭，如《Halo Reach》和《使命召唤》，同时大图也都具有形状鲜明的轮廓，就像下面这张。即使你没仔细看细节，也能认出手、圆圈和脸的轮廓。用相似的颜色，减少视觉干扰，让它们更容易被识别。越多的去使用图标，就越要注意它们的简单易识别。

你还可以利用图标作为线索，来吸引对主题的注意力。在内容框和重复的主题中使用“头”图，而不是按钮，以加强概念的快速认知。让复杂的图更大些，并保持一致。使用图标把兴趣添加到清单里，并分解成易消化的内容，突出需要注意的重要部分，Treemo就是这样做的。使用与导航和分组有联系的图标。你也可以使用与标题一致的形状，或用引号表明哪些内容具有相关性。利用图标使内容易于扫描，突出兴趣点，这样用户就能很快的找到想要的内容了。

图标不必非得是静态的。Pattern Tap 上虽然使用的是传统的缩略图，但它们的形状看起来像是图标一样，能突出兴趣点不说，还可以加强品牌效应：

用你自己的产品做图标如何？就像DonQ那样，菜单设计很聪明，就是用产品本身当图标，对哪个感兴趣就直接点哪个。更妙的方法是，菜单出现时其余内容变暗，让你的选择脱颖而出。

Full-Page Carousels

像《龙腾世纪：起源》里的选项卡式的屏幕淡出效果，应用已经有段时间了：

在下面《Halo Reach》中的“屠杀报告”中，这种思路到达了一个新的水平。屏幕水平滚动，每个页面上都有多个选项卡。游戏中，玩家可以接受这样的界面，但要是放在Web上，人们非疯了不可。

你得为这种界面设计合理的交互。

Jax Vineyards 采用了一种相似结构的布局，不用选项卡：

为每个轮换的屏幕加上选项卡，你的网站就又上了一个台阶。

Magento 在这个思路上提供了另一种简单的方式：

如今我们在手机和平板电脑中也能看到这种类型的界面，它们有很多的背景图。在各式各样的游戏中也不难找到。这种方式不是单纯的选项卡和简单的横滚：想想iPad中切换多个桌面时的情景。Think for a Living 在页面右上角提供了一个地图（非常游戏化的做法），旨在把用户传送到一个不寻常的页面。

Web设计师能从中获得什么：

如果你有大量的内容，那这个大胆的想法可以帮助提升友好性，增进了解。还记得老式单页面网站中的锚点吗？这只不过是老酒装新瓶。通过触摸屏，很容易完成一个屏幕的移入，这是一个重要的因素。

由于屏幕尺寸不同，这种布局需要仔细规划，可以到CSS3 media queries进行查询，以确保内容可以适应不同的屏幕尺寸。你需要让你的布局易响应。你可以用一个屏幕大小的div，将overflow设置成hidden，然后把各个屏幕放置在一个定宽的无序列表中（<ul>）

随着用户对平板电脑的使用，会越来越熟悉这种界面。采用简单的横滚屏设计，会让你的客户端脱颖而出哦。

滑块菜单

《寓言3》出了，其身临其境的菜单系统与《寓言2》截然不同，如上图。但《寓言2》中美丽的滑块菜单，我们也把它列了出来。

滑动滑块，内容在右侧屏幕中随之变化。按钮下面还有相应的下拉菜单。不可用的内容会暗掉。上面那张图是顶级分类“服装”。接下来的内容显示为“大衣”，然后是特定的衣物。这是在给你的电子商务网站提供灵感吗？

Web设计师能从中获得什么：

你的网站上曾出现过一个菜单飞出来占满整个屏幕的情况吗？然后当你在上面划过时，还能在展出子菜单……还TM四级！看到这么惊悚的菜单，谁不想马上离开啊。把菜单设计的小一点，在容易看到的范围内，而且便于操作，这是让用户不会远离你的王道啊。

现在已经有一些能在任何div容器里自定义滚动条的滑块脚本了。 为什么不把按钮放到div里？因为可能某些类型的菜单设置（如娱乐或时尚网站中的），可用性和可扩展性要比下拉或弹出菜单更强。为onClick事件加一 个AJAX loader，你会得到一个用户更容易识别的界面。目标就是当菜单展开时，用户能够在一屏里对它们进行操作。既然有必要往菜单里加东西，就别让它们看起来很笨拙。

屏幕透视

先来看段视频

必须承认，当第一眼看到《Halo Reach》屏幕时我心跳不已。当你进入主菜单时，会发现文字都是斜的。《Halo Reach》整个游戏使用的都是菜单屏幕右边缘透视的角度。这是一种视觉暗示。当你把控制器往右推会发生什么呢？屏幕跳动、横滚、模糊，然后切换到下一 屏，这时内容和图像看上去就是向左倾斜的了。在一个tab下就是你的角色了，在那动来动去的。棒极了，对吗。我坐在那玩了一会儿。当然，我的直觉告诉我， 我想这么做。

Web设计师能从中获得什么：

其实在Photoshop里很容易就能模仿出这样的菜单效果。准备一张足够大的、能涵盖两屏的全景背景图片，利用倾斜的CSS3版式，再搞一个处理快速水平滚动的JavaScript脚本的水平滚动，你就可以拥有像游戏中一样的效果了。

把它放在一个更小的屏幕里，使用在一个两帧动画的banner或按钮上，你会得到惊喜的（你的客户也会哦）。我从没见人在Web上使用它，但我做了一个小示例，希望能成为你实现它的起点。

此外，注意到了吗，在《Halo Reach》里，它将很平凡的菜单屏幕与游戏世界中的景观巧妙地结合在一起。帅呆了。它传递了一种感受方式，就像飞机降落前透过窗户看城市一样。刺激并诱 惑着你成为更深层次互动和行动的一部分。这种集成方式并不适合所有网站的体验，但它有存在的意义，在适当的时候，值得去尝试。千万不要低估了喜悦的力量。

关联菜单

视频游戏中的关联菜单跟网页中的子菜单如出一辙。像《刺客信条：兄弟会》中的关联菜单（上图），玩家所选择的行动的具体方案完全取决于他们的位置。如果你选 择要施魔法，那菜单中就会出现火球或雷击供你选择。如果你选择移动，就会出现跑、攀爬、躲避，这些都呈现在一个星状菜单中。带有图标的星状菜单非常受欢 迎，但这种关联菜单只能应用于简单，并且文本比较少的垂直短列表中。

Web设计师能从中获得什么：

当你邀请一位用户执行特殊操作时，关联菜单可以提升体验。与单纯的链接列表相比，它更有趣。现在我们已经可以在一些Web应用和小型社会化媒体分享工具中见到此类用法了。

当你在设计关联菜单时，至少要考虑它的路径。星状菜单可以为用户提供3-8个选项，这样的界面可以增添视觉兴趣。要尽可能地保持它的简洁和清晰。因为它们可以在用户要做出选择时提供相关参考，从而提高转换率。同时别忘了它们要易于点击，但别设计的太重。

想体验一下星状菜单有多有趣吗？来试试 TuneGlue’s musicmap

这个使用Flash实现的，当然，你完全可以用JavaScript建立一个简单的星状菜单。更复杂的也不是不行，在菜单中嵌套菜单，就像这个：

星状菜单不局限于关联菜单。对弹出式面板菜单同样有效，而且开发和测试上也花不了太多时间。

现在，轮到你了

很多出色的设计想法都可以从视频游戏中收集、借鉴而来。游戏可以为设计提供灵感，帮助你奖励和取悦用户，让界面既直观又富有乐趣。

你正在建立一个非营利性的募捐网站吗？可以考虑使用捐款跟踪排行榜。列出访问你博客排名前10位的读者，给他们更大的动力参与到评论中。

研究如何使用图标，思考实现方法，它会让你的网站使用起来友好且有趣。让提示变得有爱，或考虑添加些可供下载的内容作为奖励或激励（为玩家提供“DLC”。 译者注：“DLC”一般指在游戏发售后，厂商又推出的下载包，对游戏内容进行扩展，如增加新地图，新游戏模式等）。通过观察和有创造性地实践，你的网站将 会更具吸引力，并且更易使用。不要忘了，勤做研究，其乐无穷哦！

更多资源

• Introduction to Design Patterns
  学习如何设计模型（适合初学者）
• Art of Game Design
  这本书讲授游戏设计的基本原则。其中示例章节可供下载
• Interaction Design Pattern Library
  一个集思广益，满足用户需求的好工具。附有模型和详细的说明清单
• Yahoo Design Pattern Library
  设计模型库的鼻祖
• Vertical Custom Scrollbars/Sliders
  垂直滑块菜单学习的起点
• Patternry
  一个很棒的UI资源，有示例和教学
• Gamification.org
  这个wiki致力于探索如何把游戏机制应用于非游戏环境，以增强用户参与度

我不是这篇文章的创造者，只是思想的搬运工。我一直坚持着这样的设计理念，所以当读完这篇文章时，我坚持要把它译完，分享给更多设计师，希望能与更多人产生共鸣。

相关文章

1. 网页设计趋势发展历程之2009下
2. iPhone应用设计趋势
3. 解决iPhone不能收发短信问题
4. 网页设计趋势发展历程之2009上
5. 设计的设计观展

原研哉 Kenya HARA
平面设计师、日本设计中心代表、武藏野美术大学教授、無印良品艺术总监

展出分为三个部分：展览的展览、無印良品的艺术指导工作和设计的诸相。我几乎阅读了墙上的每段文字，用心去体会他的设计理念，去感悟。

设计理念

“讲述设计本身就是另外一个设计”，这是一种态度。
语言和设计，都是用来讲述、表达生活的方式，记录下来，讲出去，设计的理念便由此传承。其中给我印象最深的是“日本仅用30年的时间便完成了‘传统的当代转换’和‘设计产生生产力’的重要课题”，这就是为什么我们要懂得如何讲述设计。
1F里摆放的都是用来讲述设计的书籍，英文版、日文版还有中文版。

“What happens naturally”
在MUJI展区，有一排小电视，一遍又一遍地播放产品宣传片，每段虽很短小，但重点突出。共同特点就是在结尾处，总要留下这句“What happens naturally”，这就是MUJI的设计理念，或者说是目标。我一直坚持让设计来源于自然、来源于生活，他只用这3个单词就刺探到我心底。(屏幕上方那只可爱的Fly，一直陪我看完所有短片，我真怀疑它已经陶醉其中)

品质，还有生活。门口处有一个由商品挂牌组成的矩阵，非常有规律。其中我记录了这样一段话“文字使用的是最普遍的Helvetica西文字体，以及与之相配的日文字体，整体设计非常简洁”，的确！

顺着楼梯往下走，我被一串水珠吸引了，当看到它第一眼时，我还不确定。

SENSEWARE，这个Water Logo采用的是一种超级防水织物，利用NANO-TEX处理技术。水滴在上面无法驻留，到达一定重量时会顺势滑落。

看段它们的表演

设计的暗示

我最喜欢用的一种设计手法，利用自然规律或既定习惯来暗示用户如何操作，而不是为了创新而创造一种“新”交互，配套再出一本设计精良的说明书，以显示自己的NB。正如利用飞机的方向和自然条件，暗示是出境还是入境，用最简单的方式把这件事情讲述清楚，即使不懂日文和英文的人，也能猜个八九不离十，那你的设计就成功一大半了。

有趣的设计

之所以拍他们，只是因为我觉得右数第二个像慢羊羊……

“坚持创新，给设计多一点乐趣”是我的设计理念，好玩的东西没人会拒绝。如果有一天你伸手也能看到胳膊有个手表印，那要么是你家某某咬的，要么就是这个投影手表。去看展览的话，记得找一找～

感悟设计

屋顶花园——一个很热的地方，呵呵。在设计的殿堂里，留下一个属于我自己的印记。看起来很渺小，但只要一直朝前走，就会变得越来越大……

走出这扇门，我们就又回到现实了，选择回头看？还是继续前行！

关于展览

设计的设计－原研哉2011中国展
展览地点：天安时间当代艺术中心（北京·前门23号）
展览时间：2011年6月13日－7月15日

P.S.展览免费，相机用不上。

相关文章

1. 砧板上的设计
2. Web设计师能从游戏中学到些什么
3. 网页设计趋势发展历程之2006
4. 开发iPhone版校友录
5. 梦想中的工作台

在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展身手。结果虽搞出了成千上万的iPhone应用，但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着（是的，这些都是好用且有创意的界面）。

本文探究了如何让设计师利用图形元素和屏幕交互，制作出易识别又易操控的iPhone应用。目的在于揭示iPhone应用设计的普遍趋势和设计方法——请注意，这些未必是设计和可用性中的最佳观点。

1. 镜像iPhone原生界面元素

“告诉他们你要告诉他们的，去告诉他们，然后告诉他们你告诉过他们。”（译者：作者在表达她当时的感受吧） 在你的应用中创建一套新的OS可能很有趣，但在移动设备上处理时，人们只想简明扼要。简明扼要的意思是，设计师得遵循OS的流程，创建一个无说明的应用，给最终用户去操作。镜像出用户熟悉的布局和界面元素可以节省时间和精力。所以这看起来是设计iPhone应用时的一个便利途径啊。

Facebook (iTunes Link)
在新版Facebook 3.0中，你会发现这样一个栅格布局，用户可以通过左右滑动屏幕进入更多分类。因为它镜像了苹果的原生界面，所以用户根本不用再学如何使用。网页设计中存在类似方法：用户会预料到logo在左上角，导航也在上面，等等。Facebook把这它延续到了移动应用上，用大按钮可以轻松的被识别和点击。

Where (iTunes link)
Where使用了相同的概念，它允许用户通过左右滑动屏幕来获取更多信息。

Tweetdeck (iTunes link)
Tweetdeck是用户界面设计中一个很好的例子。高亮显示的最近更新多吸引注意力啊。此应用能以归类或标签列表形式，在新窗口中显示更新。但不会替换掉一个已显示的对话菜单，它可以作为跳转到具体类目或清掉消息提醒的跳板。

2. 简化界面

也许简化用户界面听起来像是个机械任务，但在用户界面设计背后又隐藏着什么呢？答案很简单：就是用户。用户需要什么？什么令他们感到友好和模糊？你如何提供他们所需的东西，以便不用时刻去关注那些重要的信息？

提到在小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用“跳板”的方式来简化界面，既保持了直观又维护了功能。

Flickr (iTunes link)
Flickr 对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。试想之：Flickr的核心是什么？照片。它的用户或许不希望看到又大又笨的导航；他们想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和该死的导航。事实上，很多导航元素已经在照片本身的交互上实现了。真是个既简单又聪明的办法。

3. 模拟硬件界面

不少应用程序打破了传统iPhone界面的操作，利用它独特的手指手势进行控制。它们中一些是用户熟悉的硬件界面，光鲜亮丽的外表不禁让人回味起那种第一次点击的新鲜感。但应用程序不会因为你玩的多而变脏。

Convertbot (iTunes link)
Convertbot的轮盘让我们想起小学时候，不同的是它更具特色、更新颖、更有创意。

Little Snapper (iTunes Link)
Little Snapper模拟的就是一台普通数码单反的旋钮。

iHandy Level (iTunes Link)
iHandy Level的样子和功能都仿至一个真实好用的水平仪。

Where To? (iTunes Link)
这个应用看起来像是属于奔驰车的。豪华的皮革、磨砂的按钮：上乘的技术。我们可以想象，每个按钮按下去都那么结实，都那么有力道。

4. 丰富、漂亮的列表视图

当你对列表设计的最新趋势感到兴奋时，你已经被确诊为一位“geek designer”了。人们遇到一个列表时会做些什么？当然，只是略读。那怎样把人们决定什么有趣变得更轻松？没错，更多的视觉暗示！

基本上，用户通过寻找下一步的快照，来决定是否需要了解更多。而又大又漂亮的按钮就是途径之一。通过色彩、图标和排版让人感觉这个大按钮背后隐藏着好多信息。

Delivery Status Touch (iTunes Link)
看看Delivery Status是怎样通过不同颜色的大按钮来区分不同品牌的。并用良好的排版建立起信息层次。

Be Happy Now (iTunes Link)
Be Happy Now的大按钮通过柔和的色彩体系与明亮清晰的字体传达“be happy”的主旨。

Next Read (iTunes link)
Next Read这个应用允许在朋友间分享图书。在这里所有书都是关于时下某一特定话题的，包括书名、封面、评分以及评论数。注意看每个导航选项的间隙和留白，它让这个区域更容易被点击。

Nike (iTunes link)
Nike为女性开发了这个应用，精致的视觉元素和插画都很符合它的品牌。在设计上打破了传统界面的束缚，充分表达了品牌，不让用户为如何使用它而感到困惑。

Borange (iTunes link)
Borange是一款“社交情况”的应用，它可以帮你统筹与朋友们的约会。列表展示了很多信息：要一起出行的朋友，本地会议，并可以形象的表示哪个朋友有空。

5. 分层的界面

一些应用把界面设计成层，利用iPhone本身独有的特性让其固定，或垂直、水平滚动。这种方法有几个好处：

1. 减少了必要的传统导航元素数量（即更少的按钮有助于避免界面混乱）
2. 为用户获取信息提供了快速通道
3. 有更多屏幕空间承载有用信息

Tweetie (iTunes Link)
Tweetie利用层把具体信息传递给你每位Twitter好友。你看，所有信息都装在这一个屏幕里！

Barnes & Noble (iTunes link)
Barnes & Noble让你可以快速的通过上面的层进入新商品，通过下面的层切换到更多分类。

USA Today (iTunes link)
USA Today在它的图片一栏中对层做了细微改变：利用滑动面板显示信息区块。尽管第一眼看上去很乱，但能很容易跳过它。最有趣的部分在于，在每个面板里，都可以通过左右滑动来查看更多图片。

myPantone (iTunes link)
我们何尝不希望色卡少一点？上面的拾色器就是一个层，你可以通过色彩范围、类别来取色，也可以通过滚动打开/关闭细节窗口。

6. 在列表中使用图标

在小屏幕上，图标可给应用的可用性和导航性带来巨大提升。让我们通过几个应用的例子看看它的优势。

iStudiez (iTunes Link)
这个应用利用各种不同的教学用具图标，清晰地表达了应用的目的。通过这些具象的暗示，学生瞄一眼就知道今天发生了什么。

Top Floor (iTunes Link)
Top Floor利用简单易识别的图标，快速引导用户进入他们选择的类别。

New York Times
应用可以让你想做什么就做什么，是不是很不可思议哦？对于一个像纽约时报样的应用，用户必然有他喜欢的章节。你猜怎么着？纽约时报这样做：它让你自定义标签栏，把你喜欢的章节都加进来。拖动一个图标到标签栏即可。不过这样做也不是十全十美，在视觉呈现上打了折扣。

Filemaker(iTunes link)
另一个漂亮图片的案例，说它好是因为图标的使用上不混乱、不混淆。设计师永远不要为了使用图标而使用图标。作为设计师，我们希望图标能够尽可能的反应出用户所选的内容。Filemaker，干的漂亮。

7. 插图的使用

依赖图形的应用程序越来越受欢迎，因为开发者试图让她们的应用与众不同。偶尔奏效，但不经常。越是传统的设计就越可能存在可用性问题。在推出一个“有创意”界面的产品前一定要进行可用性测试。

Magnetic Personalities (iTunes link)
这是个非常好的例子，看看如何让按钮变得不像标准按钮那么普通。

SugarSync (iTunes link)
这个界面可以轻松地走遵循传统列表视图的路线。但设计师没有这么做，而是通过一个漩涡将视觉连接在一起来传达这个应用。这很不寻常，同时需要花点时间来适应它。

Mom Maps (iTunes link)
另一个使用插图取得成功的例子，它将很多概念都融入了这个应用。

8. 使用手势

经典的线性导航看上去很枯燥：一个按钮连一个按钮，来表现一堆东西的列表，或表现这样那样的交互。事实并非如此壮观，只是比喻一下。在公共事业的应用上使用有创意的交互可能性很大。

Mover (iTunes link)
Mover列举了如何使用手势来分享联系方式、照片和书签。打开两个设备，把文件从这个共享到那个里。

ABC Animals (iTunes link)
这个应用寓教于乐。用手指在屏幕上书写字母是另一个通过触摸iPhone控制的例子。

All Recipes (iTunes link)
此应用可以让你通过手势来混合众多元素，作为你的美餐。

相关文章

1. 开发iPhone版校友录
2. 网页设计趋势发展历程之2009下
3. 十渡试拍婚纱
4. 令人陶醉的光斑（下）
5. 北京植物园微距片

写在前面的话：

1. iPhone屏幕分辨率是320×480（160dpi）
2. 虽然都是safari，但只是名字一样，Mac或PC上的safari不能代替全部测试；
3. <a>标签不用描述hover，点下去就跳转了，想想也知道没法悬停；

项目的一期需求都完成了，总结了几个iPhone定制点，数量不多，也很容易：

1. doctype的设定：
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
   在做发布页面的时候发现一个奇怪的问题，textarea输入框最右边被浏览器吃掉一块显示不全。
2. 屏幕自适应宽度问题：
   <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
   分别指的是：宽度320px；默认比例1.0；最大放大比例1.0；不允许用户放大；
   可按自己需要增加配置。
3. 添加到主屏幕的favcion：
   <link href="/apple-touch-icon.png" rel="apple-touch-icon">
   这个是出彩的地方，可以在主屏幕上显示一个图标，相当于桌面快捷方式。
4. 字体大小
   默认字体建议14px，特别是锁定屏幕缩放不允许放大的。输入框里文字搞大点，建议18px或16px，不然比输入法文字还小，看起来很不爽。
5. 跳过头部到页面某个位置
   可以用window.scrollTo(0, 0)实现。一般都是跳过页头直达操作区，特别在“头大”的时候。手机屏幕上寸土寸金哪~
6. 访问www自动跳转到iPhone站
   Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3
   PHP实现方法：
   if(strstr($_SERVER[HTTP_USER_AGENT],"iPhone")){
header("location:/iphone/");
die();
}JS实现方法：
   <script language="javascript">
<!--
//2007-11-24 hqlulu for iphone
var userAgent=navigator.userAgent;
if(userAgent.indexOf("iPhone")>0)
window.location="/iphone/";
//-->
</script>
   参考阿权的实现方法

另外，Mac用户可以使用iPhone Dev Center里iPhone SDK中的DashCode制作Web App，而且含有不少iPhone特效的JS脚本，比如侧滑屏效果等。

相关文章

1. iPhone应用设计趋势
2. 微博@ anywhere迈出了第一步
3. WordPress重定向漏洞
4. 解决AppleID邮箱无法验证的问题
5. 网页设计趋势发展历程之2009下

译者序：09年快过去一半了，虽然文章早翻译好了，但懒了，一直没上。不过这篇文章有效期不止12个月，它依然可以指导我们在未来的设计中做出更好的页面，值得好好阅读和收藏。

系列文章：网页设计趋势发展历程之2009上

2009年网页设计趋势下

首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中，将带你逐一回顾每个趋势和漂亮的案例，他们将激发你在下个项目中的灵感。

1. 出格布局

2. 单页布局

3. 多栏布局

4. 巨型插图和充满活力的图形

5. 比以往更多的留白

6. 社会设计元素

7. 对话式导航

8. 动态的tab

9. 大搜索框

10. 为分类增加视觉效果

11. 作者头像

12. 图标和视觉提示

13. tag索引（替代tag云）

14. 在blog中使用插图

15. 水彩画

16. 手写体

17. 复古

18. 用有机材质、砖瓦和摄影作品做背景

19. 标记印章

20. 价签

21. 丝带

出格布局

正如在几个月前所做的40个创新设计布局：出格布局的展示那样，我们正在观察一种向更具个性和创新性布局发展的强大趋势。与使用传统四四方方的盒状布局不同，设计师们正在尝试新的信息结构、呈现和表达方式。

在这些出格布局设计中，整体创意往往比具体内容更重要，也更令人难忘。尽管如此，可用性、版式和视觉设计也很少被忽视，并被谨慎地执行。创新布局在大项目、网站设计机构和宣传网站（如大公司的商业活动）中尤为流行，但它也同样流行于blog中。

提到创意，可用和不可用设计之间的界限就非常模糊了；因此，可用性测试就显得尤为重要，因为一项新的创意能打破网站故有的东西。通常，折中考虑创意、经典和传统设计是一个不错的主意，也就是说要设法去取得一个“坚不可摧”（甚至最终很单调）的可用设计与一个有创意但不可用设计之间的平衡。记住，创意需要时间来成长：重新思考、修改、调整、优化，最终整合到你的设计当中。

我们强烈鼓励设计师打破传统盒状布局的惯例，去尝试新方式和你大胆疯狂的想法。施展你的才华吧！

单页布局

另一种设计师经常使用的、给访问者留下深刻印象的方式，就是所谓的单页布局：这种布局使用一个单独的页面来呈现网站的内容。它并不一定意味着这些设计就是极简的（遵循“少即是多”原则）。而刚好相反，这种设计往往十分复杂，它包含了丰富的图像和生动的动画效果，因此需要加载一段时间。

当用户点击了一个导航选项，页面随之改变（部分变化），新的内容就出现在了显示先前内容的区域里。这种布局中导航滑动和滚动的效果，由公共JavaScript库来支持。

对用户来说最主要的优势来自于一个简单的事实，即通过更少的鼠标移动和点击，来获得用户想要的信息。由于这个方法非常新，对那些使用非传统导航就会感到困惑的用户来说是个好机会。有些种情况下，一个“静态”版本可能会派上用场，甚至是有必要的；比如你将不得不为搜索引擎，和禁用了JavaScript的用户提供另一版本。

多栏布局

多栏（3栏以上）不一定就是复杂的设计。从反面看，如果设计得当，多栏对访问者会十分有帮助，因为它们为可见的导航选项提供了更好的综览，从而使得用户可以快速地找到他们想要的信息。

过去几年里，我们见证了网站内容的爆炸，这降低了用户在网站上所投入的注意力和时间（详情查看ReadWriteWeb）。所以，难怪设计师们都开始尝试寻找更简洁的信息呈现方式，既能让访问者在网站上停留的时间尽可能的长，又能更简单的找到内容。

实现这一目的的方法之一，就是使用多栏相邻的布局。这个想法十分合理。屏幕分辨率在最近几年里不断增加（然而，像华硕Eee PC这样的上网本得以广泛使用的话，情况可能会有所改变），从而可以为用户提供更多横向空间，也能给设计师提供额外空间去填充内容。

结果表明：现在越来越多的设计师，采用越来越多的栏在设计中。我们研究发现有向这些所谓多栏布局发展的强大趋势，通常在1000像素的屏幕中，宽度固定为850像素。多栏常被用在杂志布局和大项目中。在这些布局里，栅格常被用来保证结构平衡、层级和次序。

使用多栏布局，主动留白以及各自内部栏之间的重要性不能被夸大。（主动留白是故意留出空白，以更好地表现页面结构，强调内容的不同区域。）

为此，设计师常利用“Shneiderman的真言”（“首先表达大局，随后显示细节”），先为用户提供一个功能概况，然后按需提供细节——稍后，当某个链接被点击时（Mozilla Labs就是个最好的例子）。

巨型插图和充满活力的图形

如同巨型版式主宰当今网页设计一样，无论是专业还是个人网站项目中，巨型插图似乎都越来越受欢迎。设计师正试图用互动元素（植入式视频区）和视觉元素（导言区和插图）来传达网站的信息。在近来的设计中，插图比原来占据更大的空间，通常作为巨型版式的补充。它们更具吸引力，并且更加生动，因此更容易被访问者记住。

另外，设计师也运用一些充满活力的图形，尤其是为背景，也为其他设计元素。不同的风格和图形均被使用：如陈旧物、拼贴画、剪贴册、饰品、复古样式、水彩、有机材质和摄影背景等。

比以往更多的留白

或许最可预知、也最为有益的事情之一，就是在过去几年的网页设计中，留白日益突出。它在许多设计中处于首要位置，并被广泛用于改善网站的文章流和结构。

事实上，我从未见过内容区和导航菜单上有这么多内边距。外框和内容区的内边距在20至25像素正逐渐成为一种约定俗成的法则，甚至更大的内边距也被普遍接受。希望，这一趋势继续发展下去。

社会设计元素

纵观blog圈，你几乎找不到一个不使用社会性图标或区块，让读者通过知名社会性媒体网站去推广它们内容的blog。每个作者都希望得到可观的流量和认可，这也是为什么在当今设计中，社会性元素变得更大、更具吸引力。

社会性图标到处可见，但多出现于文章的右上角或底部。社会性区块经常被放在文章下面，有时也出现在相关文章列表旁边。Twitter，Flickr和Last.FM的混合仍然是blog和项目中常见的组合。

对话式导航

去年我们曾写过一篇名叫“对话式导航”的文章，在现在的很多网站中，貌似这个元素依然流行。导航所要完成的最大任务，是清晰地引导用户到达网站的不同地方。然而，要通过一两个关键字来表达内容是极其困难的，特别是使用横向导航。

这就是为什么通常导航没法用适当的关键字一个接一个简单列出的原因（即使用“无对话的”导航）。取而代之，设计师正在试图具体解释什么选项可用，什么是访问者点击网站链接后所期望的。

因为设计师正尝试开展与访问者之间的更多对话，所以我们愿意称这种方案为“对话式”导航，相对于那种建立在关键字列表基础上的“无对话的”导航。

导航区通常都是具有相同高度和宽度的区块，因此访问者感觉内容能被轻松引导。大图标也使用的很频繁，但在大多数情况下，它们是否适用取决于网站的内容和总体布局。导航设计中的鼠标悬停效果会让浏览变得更愉快。

动态的tab

作为交互设计中最流行的趋势之一，tab可以动态地改变内容区域。活动tab背后的想法是，当页面被加载时，所有tab的内容也被加载，但一次只显示一个tab部分的内容（属性展示被用来实现这种效果）。你可以参照教程动态的tab 和tab在jQuery中的视觉控制 来创建动态的tab。

系列文章：网页设计趋势发展历程之2009上

相关文章

1. 网页设计趋势发展历程之2009上
2. iPhone应用设计趋势
3. 网页设计趋势发展历程之2006
4. Web设计师能从游戏中学到些什么
5. 开发iPhone版校友录

网页设计师是变幻无常的。我们喜欢拿东西做试验，喜欢观察人们如何与我们的产品进行交互。我们喜欢尝试与众不同的设计方法，这些在将来可能会成为主流和经典。因此，随着新设计方法的兴起，越来越多的设计师关注他们、使用他们，新的趋势也就诞生了。

在过去的几个月，我们分析了很多网页设计，观察新趋势，权衡设计决策和代码解决方案的优点。在这篇文章里，我们将展示2009年网页设计趋势：动态、新的设计元素和新的图形表现形式。接着还讨论了这些趋势被使用的情况和现有的一些漂亮的案例。在这篇概述中我们还遗漏了哪些动态吗？发表评论吧，好让我们知道！

本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。

2009年网页设计趋势

首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中，将带你逐一回顾每个趋势和漂亮的案例，他们将激发你在下个项目中的灵感。

1. 凸版印刷

2. 富UI

3. 透明的PNG

4. 大字号(版面)

5. 自定义字体（sIFR 等）

6. 模式化对话盒/会话窗

7. 多媒体区

8. 杂志外观

9. 旋转木马（幻灯片）

10. 导言模块

好，现在就让我们到具体内容中去仔细看看上面提到的每个趋势。

1. 凸版印刷

在过去几个月的观察中，最出人意料的趋势，是凸版印刷样式（实际上压上去的字）出现在网页设计中。可能这种趋势产生的最重要的原因是因为，这种印刷术到现 今已经很少被使用了。凸版印刷以各式各样的风格被用在网站和主题上；尤其是，已经被频繁使用于产品设计和网站的在线服务中。

2. 富UI

我们欣喜的看到，用户界面在现代网站和网页应用中已经变得越来越漂亮、越来越实用了。在过去的一年里，这些网站应用的用户体验已得到大大改善，从而使得用户界面的丰富性和响应度都非常接近经典的桌面应用程序。AJAX和Flash在为用户提供动态交互的广泛应用上，已经有了先进、成熟并且专业的解决方案。

特别值得一提的是，过去一年里我们看到在设计元素中使用了更多的留白，更多的填充以及更大的空间。我们还注意到，许多现代用户界面用直观的视觉提示来表现用户与系统间的交互情况。比如，当按钮被按下时，它的外观就由“正常”变为“按压”（就像Newspond.com和Quicksnapper.com上这样），确认并对用户与系统的交互给予及时反馈。除此之外，越来越多的服务能够进行用户个性化：对我们而言，这清晰的表明，更适用的用户界面将在2009年到来。

上述两个例子表明，网页应用的设计师们在功能介绍和改善交互性、响应度等用户体验问题上投入了更多的精力。

3. 透明的PNG

透明的PNG，尽管不被IE6支持，但从去年来看似乎已经得到了很好的普及。显然，设计师们试图更好地把背景图片融入到实际内容中，并打算形成一种风格，这在印刷媒体中很常见，比如在杂志中。在多数情况下，半透明背景从页面整体背景中脱颖而出，其目的是为了突出一个重要的设计元素，例如头条和公告。有时透明PNG也作为模式化对话盒(会话窗)的背景。

去年，我们描述了许多可以利用透明度发挥网页设计创意的方法，很多设计师似乎也在他们的工作中尝试着这些技术。有趣的是，透明经常被使用在设计的头部或底部，但也有些设计 超越了这种定式。

4. 大字号(版面)

在之前的文章（1，2 ）中，我们列举过一些大字号(版面)的杰出案例。2009年，大字号(版面)将成为主流。特别是设计机构，开发大型项目，做产品网站和在线服务的，他们会使用大字号(版面)来传达自己网站最重要的信息。

这些设计元素的字体大小通常都要超过36px，在很多情况下，为迎合观众都会使用非常漂亮的字体。总的来说，设计师投入更多精力在排版的细节方面，如主次关系，行高和字体的选择。其结果是：网站更漂亮，风格更一致，看起来可靠且值得信赖。

5. 自定义字体

就像设计师花费了更多精力在排版上一样，他们也更注重用来作网站正文副本的字体。尽管有像Helvetica, Arial, Georgia和Verdana这些毋庸置疑地占据统治地位的经典字体存在，我们仍观察到有一股向自定义字体发展的微弱趋势（例如使用sIFR）。

有趣的是，这些字体往往无缝结合于网站设计中；它们几乎从不需要网站因它而“更新”排版。设计师们试图融合漂亮的版式和炫目的视觉设计，以此来改善网站的外观和用户体验。

6. 模式化对话盒/会话窗

模式化对话盒（会话窗）其本质上就是一个改进型的弹出窗。它们以友好的界面替代了传统JavaScript弹出窗口，并且使用户的注意力始终集中在网站最重要的区域内。状态窗通常是被用户的动作所触发（如注册或登录），并且出现于主内容之上，就像桌面应用中的一个窗口。会话窗往往以一个非常微妙的方式出现：它们通常采用半透明，并且有一个“关闭”按钮。

7. 多媒体区

随着更多宽带网络的接入，相比两三年前，用户已经可以浏览更丰富的内容，设计师可以借此机会，用更具吸引力和值得回忆的方式来呈现内容。怪不得一些产品网站用多媒体区（录像和视频）来展示他们的内容。这类元素的主要优势还在于，它们可以快捷有效地表达内容，并使用户更易于消化这些信息。

用户要做的只是靠在椅背上欣赏；它们会把每件事按部就班地展示出来，不需要用户点击，搜索说明，或是学习导航如何使用。影片通常都简明扼要；它们大多正式，但也不乏娱乐。

但请明白，视频只是网站内容的一种替代形式（而不是主体和唯一！）。不是所有人都通过宽带上网，也不是所有人都愿意看视频（因为他/她可能正在听广播或音乐），更不是所有人的机器上都安装了Flash和JavaScript.

8. 杂志外观

在Blog的设计中有一个非常有趣的现象，许多手法通常来自于传统（印刷）媒体。从页面文章的排列、排版的运用、插图，甚至到文字对齐方式都与传统印刷技术的手法相似。栅格化设计变得日益普及，但多用于大型项目，产品页面和大型的Blog；它们几乎不在公司网站或网上商城中出现。

9. 旋转木马（幻灯片）

旋转木马其实就是幻灯导航，它的内容垂直或水平轮转（因此得名“旋转木马”）。要达到轮转导航的目的，用户需要点击其中某一个切换元素（通常是左/右或者上/下箭头）。当进行切换时，内容就向所选的方向轮换了。

过去用户为寻找他们所喜爱的内容需要点击网站中的很多章节，取而代之，现在可以快速浏览可见的内容，省去了滚屏和不必要的鼠标移动。这样做的好处是：用户不但节省了时间，而且使他们的注意力更加集中到内容中，而不是被分散到浏览器窗口上。这类幻灯导航经常被使用在娱乐网站和大型Blog上，但设计师也可以把它用在大型项目中，以更互动的方式来展示自己的工作。

10. 导言模块

网站的左上部是页面中最重要的区域，因为它最能吸引访问者的注意力。因此，把网站最重要的信息放在那里是再明智不过的了，这样就能确保访问者尽可能快的看到信息。

事实上，这也是许多设计师正在做的事情。不管是为网站应用、公司设计、在线服务还是大型项目，设计师们都会把他们的标语和简要导言放在页面顶部，通过使用粗体和生动的排版，给用户留下一个好的第一印象。一些导言是简短的，也有一些够啰嗦的；无论哪种，它们都会占一大块区域；与布局等宽，高度在 250-400px之间，已成为这些导言模块的通用尺寸。值得注意的是，这些模块几乎从不出现在Blog中，网上商城中也很少出现。

敬请期待！

本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。

相关文章

1. 网页设计趋势发展历程之2009下
2. iPhone应用设计趋势
3. 网页设计趋势发展历程之2006
4. 开发iPhone版校友录
5. 从中关村的购物体验侃起

译者序：虽然说不是权威的设计趋势报告，但作者依然收集了很多有代表性的案例对2006年的网页风格变化加以很好的演示和说明。网页设计风格每年都在发生着新的变化，与此同时也会涌现出许多新的风格和优秀的作品，作为网页设计的从业者，应当从中学习好的思想和创作灵感，应用到自己的设计中来。

我访问过许多网站，比如CSS Zen Garden或者其他什么的，并坚持每天浏览网页，我认为这是一篇高质量的文章，因为它涵盖了很多当代设计趋势。

即使如此，我也会简明扼要地切入要点。

♣ 网页桌面风格 ———-———-———-———-———-———-

www.yahoo.com
mail.yahoo.com
www.live.com

优点：样子看起来很高端
缺点：成本太高（根据作者回复的解释，是指可能需要很多专业的设计师为此工作，需要用到某些软件，比如Photoshop，要反复设计达到完美，并且需要花大力气在细节上等等）

这是最精致的风格，尽可能的试图去接近图形桌面的感观和感觉。因此，这种风格看起来很漂亮，但需要花费很大工夫，耗费很大的流量。
简而言之，桌面风格以渐变、丰富的图形、阴影和其他桌面应用模拟为特征。

与众不同的网页桌面元素案例：

区块。通常，它是屏幕上一个拥有边框、头部、底部的区域，用来聚集逻辑上相关的元素：链接、文本、记分卡和文章预览。区块可以伴随有阴影。

迷你区块。区块中的区块：通常包含小图片和少量的文本。

按钮。这些网页设计元素伴随着渐变、有反差的边框、和可选择的阴影。按钮可以有镜面效果，有从下打光的倒影。通常当鼠标悬停时按钮有反应（当用户把鼠标移到按钮上时，做一些视觉效果）。

Tabs.它们也用渐变、有反差的边框、和可选择的阴影。当鼠标悬停时做出反应。

♣ Silver Orange风格 ———-———-———-———-———-———-

mozilla.com/firefox
www.digg.com
www.silverorange.com

优点：可用性好，轻量级，简单
缺点：模式化，追随者，成本稍微有点高

稍微简单一点儿的感观和感觉，在样式和轻量级创作之间有着很好的平衡。Silver Orange的网页设计风格相对于丰富的界面来说，更侧重于可用性。
它并不会在第一时间震住用户（与桌面风格不同），相反是为他提供更好的可用性体验。
正如你所料，silverorange.com正是Silver Orange设计风格的缔造者。

与众不同的Silver Orange风格元素案例：

顶部菜单。通常是暗底配亮颜色的文字；背景伴有彩色渐变和反差分隔。

Logo和指导线。指导线与顶部菜单背景相比，更多渐变，文字颜色用灰色。

渐变和文字分隔。更多渐变，并不明显的分隔。

♣ 苹果风格 ———-———-———-———-———-———-

www.apple.com

优点：高端，优质，奢华
缺点：非常有特色，成本高

这个风格中的水晶tabs和按钮是整个设计的精髓。不是很实用，由于大量使用小型或微型字体，但依然很舒服，前提是你不是经常与小字文本打交道。
成本高，工作量大。与众不同，所以非常难做到和原版一样，使用苹果风格来设计网页，几乎不可能。

与众不同的苹果风格案例：

苹果菜单。苹果菜单是苹果网页设计风格的精髓。每个东西都有几乎一样漂亮的样式：水晶按钮，渐变，圆角区块等等。

♣ 微软风格 ———-———-———-———-———-———-

www.microsoft.com
www.msn.com
www.rsdn.ru

优点：功能型，简单，成本低
缺点：第一感知: 你跟微软是一伙的

让一个网站看上去像微软风格，最主要的一点就是用在左栏使用灰色的、有浮动菜单的导航面板。简单，干净并且方法普通。
是工程师为工程师创造的。

与众不同的微软风格案例：

微软菜单。微软网页设计风格中的主菜单是灰色的，实用并且简单。有边框，有”mouseover”事件，有浮动的子菜单等等。通常它都占据左栏位置。

微软网页设计风格的另一个与众不同之处，是头部从左到右逐渐加深的渐变，它一直延伸到右上角的搜索框。

所有区块都被清晰的灰线分隔。我想，这来自于可用性观点。人们可能对微软的商业模式有很宽泛的看法，但有一件事是无疑的：微软设计风格是简单、功能性强并且有着很好的可用性的。

与苹果风格相比，它不那么丰富或奢华。但它依然玩得转。

♣ 杂志风格 ———-———-———-———-———-———-

www.style.com
www.drive.ru

优点：吸引人，简单，精炼
缺点：需要很多文本和照片，太依赖内容质量

杂志网页设计风格就是…没错，就是杂志的样子。它试图为你带来高质量的视觉效果，所以你会感激杂志设计者为此所完成的所有工作。
你可以通过混合有大量文章链接的照片和图片识别它。

与众不同的杂志风格案例：

杂志风格的目标读者是阅读杂志的人们。不是工程师，不是网页设计师，更不是有经验的网站用户。

这确实是个高端的东西，由专业设计师创作，他们十分喜爱自己的工作。为了把这件事做好,你最好再找一份报酬可观的工作.

♣ 圆角朴素风格 ———-———-———-———-———-———-

www.youtube.com

优点：简单，轻巧，让内容成为重点
缺点：有点单调，不新颖，无法给人留下深刻印象

设计成这样并不全是坏事。它的意图是让注意力更集中于内容。它产生的流量也非常小。
有代表性的站点(www.youtube.com)有带圆角的顶部导航菜单，元素也故意设计的很简单。

与众不同的圆角朴素风格案例：

♣ Web 2.0 设计风格 ———-———-———-———-———-———-

blogger.com
netflix.com
target.com
ruby-lang.org
yelp.com
blubolt.com

优点：现代，被普遍认同，新潮
缺点：可用性争论，宽度固定

Web 2.0 设计风格可被归纳于

• 宽度固定
• 主要（圆角）外形有阴影
• 大量渐变和容积
• 大字体
• 头部，用鲜亮的颜色突出
• 大量暗调文本
• 文本大小随意
• 圆角的外形和按钮
• 阴影，水晶效果，更多渐变

♣ Adobe / Macromedia 风格 ———-———-———-———-———-———-

adobe.com
macromedia.com

优点：干净，简单，均衡，高端
缺点：成本高，与众不同，可用性较差

这个风格很像苹果的：你看到它时，会认为很多地方都是效仿苹果。成本很高的设计，从图形效果方面来说非常强大，总体非常均衡。追溯到几年前，起初这是由Macromedia公司创造的，现在这种网页设计风格依然是最好之一。

与众不同的Macromedia网页设计风格元素案例：
复杂的阴影渐变菜单，带阴影的圆角区块，菜单下的圆角banner，宽度固定，居中。

♣ 这篇文章不是…

这篇文章不是试图给出网页设计风格趋势的完整描述；我仅仅是把一些事物（我个人喜欢的）放在一起并解释它们与众不同的特点。
其他一些网页设计风格（尤其是出自“艺术设计”分类的）没有被解释。绝不是因为我觉得它们没价值或是不漂亮，而多半是因为可用性的原因。你不会在日常生活中使用艺术品。也没有人会这么做。
我也没有特别强调”风格”，从可用性到美感，我都没有找到他们吸引我的地方。

相关文章

1. 网页设计趋势发展历程之2009上
2. 网页设计趋势发展历程之2009下
3. iPhone应用设计趋势
4. 2009互联网产品盘点
5. Web设计师能从游戏中学到些什么