為未來的網(wǎng)頁做設(shè)計(jì)
本文推崇的是“因?yàn)楝F(xiàn)代人越來越生活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)。”
Why?
先看看任何情景+任何入網(wǎng)工具
(情景一：同時(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.
(情景二：雖然有良好的展示區(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
(情景三：展示區(qū)域非常小)用戶正在嘗試使用他的索尼愛立信手機(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?
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)容必須是無論什么時(shí)候看無論拿什么看都是一樣的;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. 無論用戶使用什么產(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í)及如何做，完全無能于是無責(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)頁的內(nèi)容：
1.明白什么是用戶最主要的任務(wù)，當(dāng)用在一個(gè)極小的屏幕上進(jìn)入首頁時(shí)，***化的情況是能將首頁一屏展示。另外，圖標(biāo)，導(dǎo)航等需要“簡單易懂”的展示出來。
youtube網(wǎng)頁HP
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ù)推出來，讓用戶對(duì)你的服務(wù)產(chǎn)生粘性。
對(duì)以下幾條多留心，就容易讓你的網(wǎng)站被“發(fā)現(xiàn)”且“易傳播”。
1.使你的文章標(biāo)題格式簡潔且易被搜索引擎搜索出來并且排位靠前(這個(gè)完全沒有研究過，除了付費(fèi)搜索引擎外的方式，如何讓自己的標(biāo)題更符合“搜索”格式)。
2.(這個(gè)是個(gè)Tips)讓你的信息能很好的“外流分享”出去，提供多種“分享”按鈕，讓用戶免費(fèi)為你做推廣。
四.那么APP前進(jìn)方向呢?
你開發(fā)的app容易被購買，安裝，卸載;
做一件事，就做到最精。鎖定你的品牌和服務(wù)，讓用戶聯(lián)想到某一項(xiàng)特殊服務(wù)的時(shí)候，就立刻想到使用你的app(比如“我要搜索，我就要google的APP”);
app不要做信息孤島，當(dāng)用戶使用app又突然有其他任務(wù)需要打開某一鏈接時(shí)，扔允許用戶能在你的app當(dāng)中打開;
如果你開發(fā)app，***掛到大品牌下面的頁面下面來提高你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
原文鏈接：http://www.smashingmagazine.com/2011/03/29/designing-for-the-future-web/
【編輯推薦】
