为未来网络世界来设计

这是个大而杂的话题。在还没开始面对前，我们该从哪说起呢？

本文中，我们将着眼于什么是未来的网站，我们怎样让技术能跟得上形势，和怎样在保持惯有的风格的同时去创造移动网站，去适应不同使用者带来的设备功能和局限性问题。我们也要考虑接近理想化网站的改变：尽可能多的从简约的角度去设计，减少复杂的设计。

在得到答案之前，让我们从什么是未来的网站，这个问题提开始吧。

什么是未来的网站？

（在过去，Google需要30天的搜索）

听到那么多声音，第一个让我想到的词就是“移动”。移动网站、移动设备、移动应用：这些一系列的词汇。事实上，普罗大众的观点是，未来的网站就是移动的。
尽管说这么说，但答案未必是移动。

我们确信我们的上网方式正在发生改变，从短期看，更多的移动设备诞生。长远看，我们不得不想到更广泛的应用。Forrester的高级分析师Thomas Husson，在他的2011移动趋势报告中提到：Mobile(移动)这个词，更意味着是移动电话。长远来看，这个词应该被Portable(便携)所替代。Portable(指一些设备，偏向硬件，偏于携带的)?? Mobile(强调移动上网等等)

为什么会有便携这个词，互联网的发展带来什么结果？

首先，随着上网基础设施的不断完善，我们无论在哪都可以连接网络。在过去的10年里，网民增长了444.8%，占全球人口的28.7%,接近2亿人。其中大部分来自亚洲。这种增长取决对上网硬件的投入及完善程度。千千万万的电脑、数万英里的电缆、成百上千的无线应用及最广泛的3G对全球的覆盖。（2010年底已经覆盖21%）

其次，我们上网的习惯也在发生改变。我们渐渐接受和使用在线服务多于搜索引擎。这些服务有，Facebook、Twitter、Linkedin等这些都是组成网上生活的一部分，构成了一个独一无二的网络：服务于社交网络的Facebook、针对专业社区的Linkedin、致力于音乐的Spotify、致力于电视电影的Netflix。在这里我们看到了很多不同的信息索取形式，我们可以通过社交圈获得值得信任的信息。

我们正远离旧的信息检索规范，取而代之的是我们希望通过搜索引擎和在线服务来获取信息。其中有一些服务依赖于单一的设备，但是他们逐渐得到更多平台的支持，包括桌面的、手机移动应用、网络电视等。就在上个月，三星推出了第一款全自动带提醒功能的冰箱。OK，或许她不是互联网应用方面最棒的，但却是把桌面的应用带入我们生活中的先例。对于为平台服务的任何存在的形式尚处于测试阶段，让互联网成为在任何地方都能做任何事的一个有效的载体。

考虑到这些变化,不要太确信新发布的网站内容，这点是很重要的。我们必须允许自己有时间思考判断。现在我们开发很多移动应用和通过网站来推广服务，但是在几年的时间内，我们可能会看到不同的情形，要知道哪个是明确的，哪个是不可能实现的。鉴于在任何地方都要可以显示的话，我们的内容必须简短。

（媒体销售商已经对此做出回应,手机媒体得到日益广泛的应用）

我们应该审视自己是否应牺牲用户数和针对性的解决方案或广泛的应用性来专注于特别的设备和渠道。

不管我们采取怎样的路线，有能力整合所有渠道的资源是极其重要的，并让我们的设计师和研发统一思想，让我们的客户得到帮助。

这就是未来的网站，由各种设备和平台组成的一个多元化混乱的网络，听起来不错，其实呢？ 再让我们回到“便携”一词。

我们怎样为便携式网络来设计？

问问你自己，你最新的项目将如何应付接下来的情景:

1 用户在家观看最新的互联网电视。电视里却没有看到休·劳瑞，因此用户决定收查电子邮件。发现已有人在你网站的侧边栏上发布了一个可与程序同步观看链接。

2 用户在下班的火车上，某处可能会延迟在iPad上通过3G来访问你的网站。

3 用户在客户的网站上。他们需要访问你的网站来阅读相关信息，但是他们公司只有索尼爱立信的Opera迷你浏览器。

每一个场景都给出了一个不同的问题解决方案：1 特殊屏幕和浏览器的结合 2 一个美观的界面，但是速度缓慢 3 小屏幕显示，但可以看到很多细节。首个来自大品牌商家的网络电视。迷你Opera在全球很多地方拥有超过8550万用户。事实上在亚洲，Opera和诺基亚（两者拥有66.3%的市场份额）浏览器排列前茅（黑莓就分享了9.81%）根据Deloitte 2011全年平板电脑预测中，有50%售出的电脑设备不是捆绑PC销出的。

鉴于那么多可能性，你的网站将很难满足所有需求。除非你认为可以满足（如果你是这么想，可能你不需要看这篇文章）当我们为便携网络设计时，需要注意三件事：设计、内容、统一。以正确的方式，我们能创造基于统一资源的方式来创建移动网络。

如何统一？

当面临各种不同规格设备设计的时候，最终目的要确保认识上的统一。我们应该为了这个目标而努力，不是在设计上，是在体验上。从概念上讲，我们应该从两层意义上来思考：核心内容或服务及显示层。我们网站的核心不会从设备另一设备而产生变化，应该传递一个一致的体验。我们马上会看到，这意味着我们必须确保那些元素，比如内容和导航模式总有相同的工作方式。

（网站的未来很广阔，考虑到不能满足所有人，所以这就是为什么我们需要统一标准）

比如说，用户在工作的时候用iPad浏览我们的网站，他们通过从设计精美的导航上获取想要阅读的区块，但这时被一个打进的电话打扰而停止了浏览。一会后他们上车回家，这时再通过他们的电话继续访问网站。设计的视觉元素变得不同但是关键。通过电话所阅读到的内容与之前的应该完全相同。这种统一的体验,将使我们能够创造出伟大的便携网站和一个完整的用户体验。

我从哪儿开始呢? 我怎么知道我何时到达那？

如果统一所有用户体验是我们的目标，那就引发了一个问题，我们应该创建一个移动网站来扩展这一块从而减少桌面网站的使用率？答案是否定的，我们应该建设一个不用修改并可以在所有设备上运行的网站。但实际操作上，至少目前，我们应该建设一个简单的网站。

为什么？ 在便携网络里，我们不能控制哪些内容能被使用和浏览，我们得为了特别的设备或屏幕尺寸来放弃一些想法。我们必须以内容和服务第一的原则，用不同的方法去进行我们的设计。毕竟，最终决定我们网站的不是视觉元素。一开始这些看起来很困难，但是很多桌面网站开发的经验也适用于便携式网站，尤其是内容结构方面。

综上所述，这里列了一些为便携式网络设计很关键的条例：

1?? 网站应该做到允许访问的人越多越好

2?? 无论在哪里网站应该包含相同内容

3?? 无论在什么情况下观看，网站结构应该相同

4?? 网站的内容应该在符合自身习惯下被显示

所有这些标准都适合未来的网站，我们改怎么让我们的网站去适应呢？为便携式网络来设计

为便携化的网络去设计

设计使用网络标准 HTML5

好消息是，两个最常用的浏览器引擎都支持移动设备，Webkit和Opera，两者对HTML5的支持都很好。Webkit 早在2007年11月就部分支持HTML5。使用标准结构，对于输出的网站在大多数设备上可以得到支持有好处。HTML5扩展能力涉及媒体、动画和局部存储器给移动应用更好的选择。

有三种功能允许HTML5在本地移动应用上有再生能力。通过HTML5的视频标签，视屏可以在本地播放，而动画可以被HTML5播放。最终，局部存储器允许类似数据库的信息管理器，允许网站脱机使用。

YouTube、Netflix和Gmail 都有各自为移动用户设计的HTML5版网站。这种可见即所得，对于研发人员是个好开端。

为了发展HTML5已经准备好了，没有理由不马上开始应用。很多优质的资源和教程可以帮助你开始：

Dive into HTML5
HTML5的标准是一个好的起点资源

HTML5 Demos and Examples
一系列展示HTML5能力的范例，和源代码

HTML5 Gallery
HTML5网站案例展示

在你的项目上应用HTML5，你可以在任何一个开发环境上得到HTML的优势。已经在Adobe的Dreamweaver CSS5上全面实施。HTML5支持压缩包可以在内置编辑器里下载。
在Aptana Studio3测试版里也支持HTML5

开始简单的工作

思维简单意思是 简约的思考。屏幕尺寸的发展差异很大，从运行在40英寸显示器上的1920X1080像素显示到小屏幕320X240显示，意味着我们必须创造

更具扩展性和适应强的网站。
我们必须知道很多人通过远程控制或者用粗粗的手指直接触屏来进行互动。

（自下而上有男性感觉，聚焦基本元素，让文字围绕其中）

对于所有设备和设计，基于你网站的结构来做你的设计是第一步。从本质上来说，我们从最基本的体验开始，来适应哪怕最小的移动设备，让其适应更多的浏览器吧。

用CSS的@media标签，能够让你的网站识别额外的浏览器和延展你的使用环境，尽可能多的得到互动体验。

一个字的警告和：从传统到移动的另一个方面看，@media标签不支持每一个移动设备。
雷切尔·安德鲁斯在Smashing Magazine提供了@media标签的概述，应该从传统到移动的方向发展，而非通过其他方向。

忘记专利

不管你做什么，请远离专利技术，因为这是保证用户体验统一性的方法。以Flash和Silverlight为开发平台的产品将持续一段时间。Microsoft已经明确停止对Silverlight的开发，转而专注HTML5.而FLASH被用于游戏的开发，和视频传输机制。如果我们要开发一个跨平台都能显示的网站，那么Flash和Silverlight不是最佳选择，因为我们不能确保每个用户的设备都支持。不是说FLASH不好，而他作为游戏开发的确是当前最佳的技术。

目前暂时请谨慎使用JavaScript

有一个不好的就是，我们不得不牺牲一些事情。我们必须学会在尺寸和内容未知的前提下来设计。不用过多关注设计、页面布局，而要更多关注内容架构方面的东西。

在用户体验方面，我们不得不舍弃使用JavaScript和AJAX,因为一些较低端的硬件设备无法处理复杂的元件库。页面的宽度也很重要，因为我们不能确定用户都使用宽带上网，所以一些大型库不能被使用。

对于返工的网站，以hash bang为趋势的观点尤其重要。这些网站（包括including Gizmodo, Lifehacker and Gawker）在用户体验上有更多应用，但他们都基于JavaScript技术。实际上，这些网站由一个单独读取动态内容的页面组成，并可替代早前的多个页面，一些不支持JavaScript的用户将无法访问，他们只能看到一个空白页。

不管怎样，有很多为便携设备开发的轻巧可用的插件。jQuery是一个可供测试的插件。这个项目支持一些工业商家，比如黑莓，Mozilla和Adobe ，所以这些是值得保留的。

JavaScript支持运用成熟和更现代的平台，较老的设备将推出服务范畴。不过暂时使用这种保守的方式，意味着有更多潜在的人为你工作。

测试、测试，在测试

对于移动的网络，我们不能在每个平台进行测试，但是不能不测试，测试是必须做的。

(模拟Opera迷你浏览器上进行仿真测试 )

对于大多数设计师而言，为每个平台购置一台设备的代价太高了。但二选一是有可取的。对于大多数平台，设备模拟器可以模拟浏览体验。

在另一系统上，有来自DeviceAnywhere的付款服务，为你的网站提供在超过200个手机上进行测试。

不幸的是，迄今为止还没有网络电视模拟器。但Google发布了一个为Google电视设计的指南。

最后，当然我们不能忘记我们还要要在桌面浏览器上进行测试。为移动网络设计的目标是尽可能创建一个有统一用户体验的网站。因为用户是通过多种渠道浏览网站，但并不意味着他们会停止使用他们的电脑，笔记本。在不同设备上测试时，模拟器会提供你精确的效果。

丑小鸭？

对于移动网络，美观的设计是关键？ 当然不是，好的设计不仅有视觉感，而且通过革新及深思熟虑设计出的字体、布局、导航来传达清晰的内容。

为便携化的网站设计内容

内容为王，就连热门的Quora也足以让人信服，这些都是基于内容为基础。在便携式网络，值得信任。通过减少一些设计元素，可以让你吧注意力放在内容上。

知道什么是重要的？

当你开发移动网站的时候，要确定对于用户来说什么是最关键的。在小屏幕上没有地方在显示复杂的导航，所以要保持简洁。
来比较一下YouTube在移动和桌面的显示效果：

YouTube首页


基于HTML5在小屏幕上显示的YouTube

建一个实在的信息结构

在可读性和SEO好的前提下建设好内容是很重要的。理解和分清内容的层级来引导用户浏览。地图化用户对你网站的体验，和信息结构，顶层分类清晰表达了每一个内容的入口。

（John Lewis移动网站在导航清晰展现了内容）

John Lewis的总部在英国的，是一个很好的移动网站案例。你可以很容易看到各种产品的每一类别。也意味着所有信息很容易被显示，你也总能精确的知道自己所处的位置。

保证内容的高质量

即使用户不使用桌面电脑，别把他们视为二等公民。提供更多可行性的内容。

对于合适的内容应舍弃下面几条：

多余的图片
如果这个图片对于内容没必要，移除

不支持文件格式化
不要放FLASH，如果这个文件看起来不能被使用。

不必要的文字
传统桌面网站对文字的复制，对于移动网站是没什么必要的，对于用户是一定需要吗？如果不是 删除。

我们要删除不必要的内容，我们也不太想删太多。
在下面的例子里，我们可以很容易访问这个网站，但是不会访问太深。第一画面的信息表现的很好，但是页面底部公司服务的标题
应该链接到下一个信息画面，按照这样的方法，如果我想看更多，我将被迫体验这种不佳的表现。

用户体验很糟糕，因为我要找我需要的东西很困难。


（Sapient Nitro移动网站很不错，但是很多信息被截断了）

保持模块化

服务变来变去，所以保持你的设计模块化。融合新的服务，确保你的内容可以针对更多用户。目的是让你的内容可以渗入各种服务里，因此要统一你内容的标准。最起码他要能穿梭于搜索引擎和社会化网络中。

让你的内容对搜索引擎友好

而现在人们社交方式变得更加社会化而非搜索，搜索引擎仍是大量信息的来源。
保持你的内容格式化为了易于检索。Quora就很好，在搜索引擎里排名高，为下一代问答服务产生信息。对于这些SEO可能老套，但是让你的内容成为主导将变得越来越重要。将开启新纪元。

(Quora对于搜索引擎较好的搜索排名)

让分享更容易

SEO很重要，但是其通过OAuth来连接服务。OpenGraph和 OpenID。如果你没有选择，起码有一些方法让用户分享你的内容。类似AddThis和ShareThis这样的服务都可以轻松分享。一条用户发到Twitter上的信息也可以带来很多信息。当然还有很多现代开发的内容发布平台，诸如WordPress这样的功能性平台。

这三点结合在一起将完成一个可见的 可连接和可用的网站。

什么是应用？他们的路在哪里？

App应用大有钱途，Gartner预测，移动应用商店的收税在2011年将达到150亿美金。这对谷歌、微软、诺基亚和类似规模的公司看来并不算什么。但正因为应用商店在商业上的成功，意味着他们应用将成为未来网站设计的第一个突破口。

让我们看看为什么要开发设计应用
容易购买、安装、卸载

应用简单易用，甚至你的奶奶都可以轻松驾驭。用户只需要花很少的精力在智能电话上安装。当你不想用时，删除也很简单并不留下痕迹。这是同期很好的用户体验。这是为什么苹果积极推动在苹果机和苹果应用商店上运用相同的理念。在大多数情况下，好的用户体验和他们自身控制和设计模式有关。

品牌联系与纠结

应用只做一件事，且会做得很出色。大部分成功的应用都是于商家有息息相关的： 我想找网站，因此我用谷歌的应用，或者我想找朋友。所以我将使用Facebook应用。你体验了相关商家的应用。我可以很容易的在iPhone的Safari浏览器上浏览Facebook和谷歌，应用对于我很容易。我纠结于哪一个是适合公司的应用，因为他们的商标就在我屏幕的中央，好比这个案例里，的F和G两个字母一样。

钱

应用最大吸引力就是给很多公司带来利益，苹果应用商店已经表明，对于深度开发，在相对的时间内赚很多钱是有可能的。

一个值得注意的是，以上这些和消费信息无关。那些都是关于品牌和用户体验。然而你有理由三思而行。

App应用是信息载体

App会演绎自身最好的一面，但也不能尽善尽美。想再加一个链接？你自己或许可以在App里浏览页面，但这样做就好像你不再需要其他浏览者一样。这并不是一个好的用户体验，你会失去和无法驾驭用户浏览你内容。

应用是一个特殊的平台

写一个自动的App链接你和平台。这将直接限制你潜在的用户，智能手机发展很快，但在目前互联网电话市场仍占小部分。以美国市场为例，31%的人口使用智能手机，只有6%的人口有iPhone.是3亿多人中的1900多万人。在美国，如果你忽略了国际标准化的App,你讲直接失去，7600多万潜在用户。

应用最适合大平台和服务

不管App有多好，你不得不每天关注APP商店发布的潮浪般的各种APP。较大的商家发布的APP会在自己现有的网站上发布，于小商家的APP有很多不同。

除非你定期更新很多相关内容，作为你的主要服务，否则你的APP将很快被淘汰。Pinch媒体提供一些10天试用的版，在随后的70天后，安装的下降到只有2%左右。付费的应用app使用率下降的非常快。

移动用户更青睐浏览器多于应用
2010年10月的 Keynote Systems 显示，用户更喜欢移动网站上形形色色的内容。在唯一的范畴中的app领先于社会网络、音乐和游戏，因为他们会充分利用这一土生土长平台的能力。
因此，如果想创建更持久的应用，需要在速度上改进，来更适用于我们的客户，我们需要把注意力放在移动网络而不是移动应用上了。我们必须有精良的设计，和经过考量的内容作为便携网络发展的基础。

总结

随着自然发展，便携化的网络会越发完美。浏览器之间的战争不断，研发和设计师们必须自我学习并鼓足勇气去接受当前新的想法和新标准。从用户角度，不仅仅是一名技术人员，去理解怎么集所有平台优点为打造未来网站做准备。对于我们，谁可以提供真正有价值的信息给我们的客户。