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

Introduction

灰常好的一篇文章！這里只了提些主干出來(lái)，強(qiáng)烈推薦原文，尤其技術(shù)方面的很多tips有深入的講解。

本文推崇的是“因?yàn)楝F(xiàn)代人越來(lái)越生活net依存狀態(tài)，ipad，3g等等，各種情況下人時(shí)時(shí)刻刻都在online狀態(tài)中。所以如何讓任何用戶在任何情境下使用任何進(jìn)入網(wǎng)絡(luò)的工具（此處指移動(dòng)設(shè)備，cellphone或是平板電腦等）進(jìn)入任何網(wǎng)絡(luò)（比如火車上信號(hào)弱的情況v.s.家中wifi通暢的情況），都能有一致的用戶體驗(yàn)?！盵長(zhǎng)到讀完快憋死的一句話。。。||||

“一致性”天天掛嘴邊，“”也是要“于是共進(jìn)”[好老梗的詞=_=||||

Why?

先看看任何情景+任何入網(wǎng)工具

1. （情景一：同時(shí)打開兩個(gè)窗口）用戶正在看豪斯醫(yī)生，但是此刻正好Hugh Laurie沒有在鏡頭中，所以用戶決定趁此時(shí)看一下他的mail,他的一個(gè)朋友發(fā)給他了一個(gè)連接，他在側(cè)欄打開這個(gè)鏈接，但打開這種連接，也不影響他是不是“監(jiān)視”這豪斯醫(yī)生的屏幕。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.
2. （情景二：雖然有良好的展示區(qū)域，但是網(wǎng)速比較差）用戶在下班回家的遠(yuǎn)途火車上，使用ipad上3g在上網(wǎng)。The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad
3. （情景三：展示區(qū)域非常?。┯脩粽趪L試使用他的索尼愛立信手機(jī)上的mini Opera瀏覽器看你的客戶網(wǎng)站。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?

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

首先是存儲(chǔ)在大腦中的設(shè)計(jì)Key rules:

1. 網(wǎng)站的寬度必須是用戶能多寬，設(shè)計(jì)就得有多寬；The website should be available to as wide an audience as possible;
2. 網(wǎng)站的內(nèi)容必須是無(wú)論什么時(shí)候看無(wú)論拿什么看都是一樣的；The website should contain the same content wherever it is viewed, where feasible;
3. 網(wǎng)站的結(jié)構(gòu)必須是一樣的；The website’s structure should be the same wherever it is viewed;
4. 無(wú)論用戶使用什么產(chǎn)品，內(nèi)容的展示必須符合該產(chǎn)品。The content should be displayed in a manner that is appropriate to its environment.

其次是Step by steps詳解（強(qiáng)烈建議看原文，詳解各種technic，tips，科普知識(shí)及如何做，完全無(wú)能于是無(wú)責(zé)任硬翻||||||）：

一. 為移動(dòng)設(shè)備做設(shè)計(jì)：

1.使用HTML5,各種移動(dòng)設(shè)備的瀏覽器均支持HTML5；

2.屏幕既要適合大到40英寸的1920×11080像素的屏幕也要適合小到320×240像素的小屏幕，可以使用CSS的@media；

3.如果使用跨平臺(tái)開發(fā)，忘記silverlight和flash吧，因?yàn)樗麄儾贿m合跨平臺(tái)。

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

5.測(cè)試，測(cè)試，再測(cè)試！??！請(qǐng)?jiān)诓煌囊苿?dòng)設(shè)備上，在任何開發(fā)時(shí)期，隨時(shí)隨地測(cè)試！

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

二. 移動(dòng)設(shè)備網(wǎng)頁(yè)的內(nèi)容：

1.明白什么是用戶最主要的任務(wù)，當(dāng)用在一個(gè)極小的屏幕上進(jìn)入首頁(yè)時(shí)，最優(yōu)化的情況是能將首頁(yè)一屏展示。另外，圖標(biāo)，導(dǎo)航等需要“簡(jiǎn)單易懂”的展示出來(lái)。

youtube iphone HP

2.信息架構(gòu)和信息層級(jí)必須穩(wěn)固且合理。用戶容易一著陸你的網(wǎng)站就知道這是做什么的，且很容易的找到他想要的東西。

John Lewis’ iphone導(dǎo)航

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

三.將各種服務(wù)中將你的服務(wù)推出來(lái)，讓用戶對(duì)你的服務(wù)產(chǎn)生粘性。

對(duì)以下幾條多留心，就容易讓你的網(wǎng)站被“發(fā)現(xiàn)”且“易傳播”。

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

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

四.那么APP前進(jìn)方向呢？

• 你開發(fā)的app容易被購(gòu)買，安裝，卸載；
• 做一件事，就做到最精。鎖定你的品牌和服務(wù)，讓用戶聯(lián)想到某一項(xiàng)特別的事情的時(shí)候，就立刻想到使用你的app（比如“我要搜索，我就要google的APP”）；
• app不要做信息孤島，當(dāng)用戶使用app又突然有其他任務(wù)需要打開某一鏈接時(shí)，扔允許用戶能在你的app當(dāng)中打開；
• 如果你開發(fā)app，最好掛到大品牌下面的頁(yè)面下面來(lái)提高你app的曝光率和可信度；
• 手機(jī)用戶更偏向?yàn)g覽器app。

Resources

HTML5 開發(fā)環(huán)境:

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

模擬器:

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

———————————————————————————————————————————–
想與更多的UE從業(yè)者面對(duì)面交流？請(qǐng)加我們的QQ群140479673 (注明驗(yàn)證信息“申請(qǐng)加入U(xiǎn)serfree群英會(huì)”) 參與討論。

來(lái)源：http://www.userfree.cn/?p=2124