本文推崇的是“因為(wèi)現代人(rén)越來(lái)越生(shēng)活net依存狀态，ipad，3g等等，各種情況下人(rén)時(shí)時(shí)刻刻都在online狀态中。所以如何讓任何用戶在任何情境下使用任何進入網絡的工具（此處指移動設備，cellphone或是平闆電(diàn)腦(nǎo)等）進入任何網絡（比如火(huǒ)車(chē)上(shàng)信号弱的情況v.s.家(jiā)中wifi通(tōng)暢的情況），都能有(yǒu)一緻的用戶體(tǐ)驗。”

Why?

先看看任何情景+任何入網工具

（情景一：同時(shí)打開(kāi)兩個(gè)窗口）用戶正在看豪斯醫(yī)生(shēng)，但(dàn)是此刻正好Hugh Laurie沒有(yǒu)在鏡頭中，所以用戶決定趁此時(shí)看一下他的mail,他的一個(gè)朋友(yǒu)發給他了一個(gè)連接，他在側欄打開(kāi)這個(gè)鏈接，但(dàn)打開(kāi)這種連接，也不影(yǐng)響他是不是“監視(shì)”這豪斯醫(yī)生(shēng)的屏幕。The user is watching House on their new Internet TV. Hugh Laurie’s not on screen, so the user decides to check their email. A friend has sent a link to your website, which the user opens in a sidebar and views simultaneously with the program.

（情景二：雖然有(yǒu)良好的展示區(qū)域，但(dàn)是網速比較差）用戶在下班回家(jiā)的遠途火(huǒ)車(chē)上(shàng)，使用ipad上(shàng)3g在上(shàng)網。The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad

（情景三：展示區(qū)域非常小(xiǎo)）用戶正在嘗試使用他的索尼愛(ài)立信手機上(shàng)的mini Opera浏覽器(qì)看你(nǐ)的客戶網站(zhàn)。The user is on a client’s website. They need to access your website to read an article, but they have only a company-supplied Sony Ericsson with Opera Mini installed. How?

How?

那(nà)麽，怎麽設計(jì)一個(gè)能讓用戶在這三種情景下，都是流暢而又一緻的體(tǐ)驗？

首先是存儲在大(dà)腦(nǎo)中的設計(jì)Key rules:

1. 網站(zhàn)的寬度必須是用戶能多(duō)寬，設計(jì)就得(de)有(yǒu)多(duō)寬；The website should be available to as wide an audience as possible;

2. 網站(zhàn)的內(nèi)容必須是無論什麽時(shí)候看無論拿(ná)什麽看都是一樣的；The website should contain the same content wherever it is viewed, where feasible;

3. 網站(zhàn)的結構必須是一樣的；The website’s structure should be the same wherever it is viewed;

4. 無論用戶使用什麽産品，內(nèi)容的展示必須符合該産品。The content should be displayed in a manner that is appropriate to its environment.

其次是Step by steps詳解（強烈建議看原文，詳解各種technic，tips，科普知識及如何做(zuò)，完全無能于是無責任硬翻||||||）：

一. 為(wèi)移動設備做(zuò)設計(jì)：

1.使用HTML5,各種移動設備的浏覽器(qì)均支持HTML5；

2.屏幕既要适合大(dà)到40英寸的1920×11080像素的屏幕也要适合小(xiǎo)到320×240像素的小(xiǎo)屏幕，可(kě)以使用CSS的@media；

3.如果使用跨平台開(kāi)發，忘記silverlight和(hé)flash吧(ba)，因為(wèi)他們不适合跨平台。

4.謹慎使用JavaScript：很(hěn)不幸的我們必須考慮未知的屏幕尺寸的設計(jì)，所以這個(gè)時(shí)候我們需要更加注意“網站(zhàn)內(nèi)容結構”而少(shǎo)專注于美觀的UI設計(jì)。

5.測試，測試，再測試！！！請(qǐng)在不同的移動設備上(shàng)，在任何開(kāi)發時(shí)期，随時(shí)随地測試！

6.不重視(shì)UI設計(jì)就是醜小(xiǎo)鴨？不是。一個(gè)好的設計(jì)不僅僅是“美觀”，重要的是信息架構，布局導航，層次結構的合理(lǐ)。

二. 移動設備網頁的內(nèi)容：

1.明(míng)白什麽是用戶最主要的任務，當用在一個(gè)極小(xiǎo)的屏幕上(shàng)進入首頁時(shí)，最優化的情況是能将首頁一屏展示。另外，圖标，導航等需要“簡單易懂”的展示出來(lái)。

youtube網頁HP

youtube iphone HP

2.信息架構和(hé)信息層級必須穩固且合理(lǐ)。用戶容易一着陸你(nǐ)的網站(zhàn)就知道(dào)這是做(zuò)什麽的，且很(hěn)容易的找到他想要的東西。

John Lewis’ iphone導航

3.保證你(nǐ)呈現的內(nèi)容都是對用戶有(yǒu)用的。移除不必要的文案，不必要的圖片，不支持的文件格式（Ex，flash）。

三.将各種服務中将你(nǐ)的服務推出來(lái)，讓用戶對你(nǐ)的服務産生(shēng)粘性。

對以下幾條多(duō)留心，就容易讓你(nǐ)的網站(zhàn)被“發現”且“易傳播”。

1.使你(nǐ)的文章标題格式簡潔且易被搜索引擎搜索出來(lái)并且排位靠前（這個(gè)完全沒有(yǒu)研究過，除了付費搜索引擎外的方式，如何讓自己的标題更符合“搜索”格式）。

2.（這個(gè)是個(gè)Tips）讓你(nǐ)的信息能很(hěn)好的“外流分享”出去，提供多(duō)種“分享”按鈕，讓用戶免費為(wèi)你(nǐ)做(zuò)推廣。

四.那(nà)麽APP前進方向呢？

你(nǐ)開(kāi)發的app容易被購買，安裝，卸載；

做(zuò)一件事，就做(zuò)到最精。鎖定你(nǐ)的品牌和(hé)服務，讓用戶聯想到某一項特殊服務的時(shí)候，就立刻想到使用你(nǐ)的app（比如“我要搜索，我就要google的APP”）；

app不要做(zuò)信息孤島，當用戶使用app又突然有(yǒu)其他任務需要打開(kāi)某一鏈接時(shí)，扔允許用戶能在你(nǐ)的app當中打開(kāi)；

如果你(nǐ)開(kāi)發app，最好挂到大(dà)品牌下面的頁面下面來(lái)提高(gāo)你(nǐ)app的曝光率和(hé)可(kě)信度；

手機用戶更偏向浏覽器(qì)app。

Resources

HTML5 開(kāi)發環境:

• CS5 HTML5 Support Pack (part of the CS5 11.0.3 Updater), plus tutorial
• Aptana 3 beta

模拟器(qì):

• Android
• Opera Mini
• Apple iPhone (via iOS SDK)
• Windows Mobile (look for the latest Windows Phone Developer Tools)
• BlackBerry
• Nokia Mobile Browser

原文地址：http://www.smashingmagazine.com/2011/03/29/designing-for-the-future-web/