面向未來Web設(shè)計(jì)：內(nèi)容與外層分離 漸進(jìn)增強(qiáng)
您當(dāng)前位置：首頁 > 紅訊頻道 > 站長經(jīng)驗(yàn)
紅軟基地 推薦
2012-04-23
現(xiàn)在終端設(shè)備種類繁多對WEB設(shè)計(jì)提出更多要求
是時候考慮針對未來，設(shè)計(jì)出體驗(yàn)友好的Web了�，F(xiàn)在終端設(shè)備種類繁多，如臺式機(jī)、筆記本、上網(wǎng)本、平板電腦、多功能手機(jī)、智能手機(jī)等等，而這僅僅是一個開始。技術(shù)更新?lián)Q代的速度在加快，我們的工作流程、標(biāo)準(zhǔn)及基礎(chǔ)設(shè)施正在觸及它們所能承受的極限。這個相互聯(lián)通的時代不斷創(chuàng)造著新的挑戰(zhàn)，同時也醞釀著巨大的機(jī)會。
誰也無法預(yù)知，在未來將會發(fā)生什么。如果有人說可以創(chuàng)造出永不過時的事物，這又將是多么愚蠢的事啊。雖然我們無法提前預(yù)知應(yīng)對這種多樣化發(fā)展的解決方案，但作為Web的創(chuàng)造者，我們可以做一些準(zhǔn)備來更好地應(yīng)對未來。
首先，我們必須承認(rèn)和擁抱未來的這種不可預(yù)知性，從而以友好地態(tài)度面對未來。我們不應(yīng)該存在僥幸的假設(shè)：這種混亂只是暫時的，一段時間之后，一切將回歸正常。伴隨著每天越來越多連接設(shè)備的出現(xiàn)，我們正進(jìn)入一個多樣化長存且持續(xù)變化的時代。這些事實(shí)要求我們重新思考我們所創(chuàng)造的內(nèi)容、產(chǎn)品與用戶交互的環(huán)境及我們所提供服務(wù)。
推出與用戶密切相關(guān)的服務(wù)
人們閑扯的精力正在快速減少。據(jù)研究報(bào)告顯示平均每個美國人一天可消費(fèi)掉34GB有價值的內(nèi)容，所以出于需要，每個人正尋找各種方法減少噪音的干擾。自動轉(zhuǎn)帳服務(wù)減少了實(shí)體郵箱中過往的垃圾。通過DVR、Netflix Instant、Ad Block Plus和BitTorrent，用戶不必再受節(jié)目空檔時間及廣告的干擾，還可以自由選擇內(nèi)容。像Instapaper、Readability、Safari Reader和Flipboard之類的工具可以幫助用戶遠(yuǎn)離紛雜的社交工具、Blogroll、廣告及討厭的Overlay。
移動也是該相關(guān)性的巨大推動力。大部分美國人睡覺前最后接觸的是手機(jī)，而他們醒來后做的第一件事同樣是拿起手機(jī)。我們與移動設(shè)備有著密切的關(guān)系，所以我們希望它們可以成為我們自身的延展。我們希望它們僅發(fā)布我們需要的內(nèi)容與功用。單單沒有足夠的時間、寬帶、屏幕面積等，我們?nèi)允艿胶芏嗤庠诶_。
作為Web設(shè)計(jì)者，我們應(yīng)該擁抱這些發(fā)展趨勢，尊重用戶的時間，去創(chuàng)造有價值地體驗(yàn)。
專注于用戶最關(guān)心的事
設(shè)備將會越來越多樣化，而用戶關(guān)注范圍也將逐漸縮小，對此，我們應(yīng)當(dāng)如何應(yīng)對呢?要想更好地適應(yīng)未來，可能我們需要做的最重要的事便是“專注”。我們必須精準(zhǔn)地找到對用戶和客戶來說最重要的事。
在過去幾年里，我們只是一味地增添內(nèi)容和功能，而忽視了對網(wǎng)站結(jié)構(gòu)的梳理。最終導(dǎo)致網(wǎng)站和服務(wù)變得十分臃腫、笨重，而無法適應(yīng)當(dāng)前快速發(fā)展的需要。頁面超慢的加載速度、凌亂而繁瑣的導(dǎo)航條、雜亂的工具欄，還有一些不太完善的功能，讓用戶備受煎熬。
要想解決這些問題，我們必須對所提供的服務(wù)內(nèi)容進(jìn)行深入分析，并建立強(qiáng)大的內(nèi)容策略以保證我們所提供的內(nèi)容對用戶和客戶來說有切實(shí)地意義。產(chǎn)品新增的每個功能、每行代碼及所包含的角本，都應(yīng)該目的明確，且與網(wǎng)站的內(nèi)容架構(gòu)息息相關(guān)。我們必須果斷地去除糟粕，提供強(qiáng)大的、以用戶為中心的體驗(yàn)。
前福特和克萊斯勒CEO Lee Iacocca每當(dāng)要決定汽車的某項(xiàng)性能、附屬產(chǎn)品或計(jì)劃是該繼續(xù)還是該放棄時，他都會問“它可以發(fā)揮怎樣的作用?”。當(dāng)我們考慮添加某項(xiàng)內(nèi)容和功能時，我們也應(yīng)該學(xué)著向Iacocca先生那樣追問“它可以發(fā)揮怎樣的作用?”，以測試我們的產(chǎn)品與服務(wù)。這樣真得可以增強(qiáng)用戶體驗(yàn)嗎?通過怎樣的方式可以使我們的商業(yè)更好?
甩掉一些無用負(fù)載，從中解放出來開發(fā)更具核心地位、用戶確實(shí)需要的功能，從而讓我們的產(chǎn)品在競爭中脫穎而出。從用戶的愿景出發(fā)，提供更簡潔、更快速、更流暢的使用體驗(yàn)。
“用戶的耐性是有限的，更何況面對小屏幕的移動設(shè)備。除非你專注于設(shè)計(jì)，否則用戶可能還沒來得及了解你的產(chǎn)品，就已經(jīng)放棄了它。”—Marcos Lara
如果我們想更敏捷地跟上各種變化發(fā)展的步伐，我們就要甩掉一些包袱。專注于我們的用戶體驗(yàn)，讓它變得更簡單。
設(shè)計(jì)出如“水”般的產(chǎn)品
無論你準(zhǔn)備好與否，用戶已經(jīng)開始在多設(shè)備上與我們的產(chǎn)品交互了。而很多情況下，這些設(shè)備，在我們設(shè)計(jì)這些產(chǎn)品時，還沒有出現(xiàn)。而這也促使了移動交互設(shè)計(jì)專家Josh Clark表示，我們應(yīng)該把我們的產(chǎn)品想象成水，它可以倒入多種不同的容器中。
不要試圖覆蓋所有平臺
很多情況下，企業(yè)只會單純地應(yīng)對擺在面前的問題，比如新的設(shè)備、瀏覽器、本地平臺、社交媒體渠道等等。這樣我們就會像流水線上的工人一樣，忙亂地遷移到不斷增長的各種渠道上。我們不應(yīng)追趕蜂擁而至的各種平臺，更應(yīng)意識到我們的產(chǎn)品內(nèi)容需要拓展到更多領(lǐng)域，并在內(nèi)容的基礎(chǔ)架構(gòu)上做投資。而這是對未來的一種投資。
內(nèi)容與表示層分離 實(shí)現(xiàn)平臺無縫遷移
要創(chuàng)造更具響應(yīng)性的內(nèi)容，就需要舍棄以前所見即所得、Web頁文字編排工具，換用更加模塊化、跨平臺、富含元數(shù)據(jù)的系統(tǒng)。更好的內(nèi)容管理工具、更強(qiáng)大的API能產(chǎn)生更便攜的數(shù)據(jù)內(nèi)容，不依賴某種特定技術(shù)，更容易適應(yīng)未來的發(fā)展。
“內(nèi)容的可移植性，保證了其移植到所有平臺上可以存活并繁榮發(fā)展。”——Daniel Jacobson
NPR的COPE(Create Once Publish Everywhere)系統(tǒng)已經(jīng)成為下一代內(nèi)容管理系統(tǒng)的典范。它可以將內(nèi)容與表示層分離開來，從而使內(nèi)容可以在Web頁、本地應(yīng)用及各種環(huán)境中展示。開發(fā)者仍可使用標(biāo)記語言來編寫內(nèi)容，但最終會被CMS轉(zhuǎn)換成一種跨平臺的語言進(jìn)行保存。該系統(tǒng)避免了存儲標(biāo)記語言、表示層樣式，并將內(nèi)容加以模塊化，這樣內(nèi)容更輕便，并能以最好的樣式去適應(yīng)某一特殊環(huán)境。更重要的是，NPR不必一一在出現(xiàn)的平臺上對他們的系統(tǒng)進(jìn)行全方位的測試。
提供更簡潔、更靈活的數(shù)據(jù)，可以使我們的產(chǎn)品及服務(wù)在未來有一個更好的生存機(jī)會。
漸進(jìn)增強(qiáng)——新的方法論
“如水般的內(nèi)容”正影響著Web用戶體驗(yàn)的設(shè)計(jì)及建設(shè)。人們正使用著不同種類的設(shè)備，而種類也將越來越多，這也注定了產(chǎn)品在各設(shè)備上的性能、元素樣式及解決方案無法達(dá)成統(tǒng)一、標(biāo)準(zhǔn)化。
根據(jù)摩爾定侓，隨著時間的遷移，器件會越來越快、越來越強(qiáng)大，其成本也將大大降低。用戶也將獲得低成本，性能“足夠好”的Web終端設(shè)備。
“技術(shù)專業(yè)人士都知道摩爾定侓，但通常會忘記一個重要方面：在性能增長的同時，其成本也會降低。” ——Scott Jenson
終端設(shè)備領(lǐng)域的門檻很低(免費(fèi)的操作系統(tǒng)、廉價的硬件)，將導(dǎo)致大量廉價的互聯(lián)設(shè)備涌入市場。正如iPad 5肯定比iPad 2具有更好的性能，我們需要考慮提供不同性能的產(chǎn)品：優(yōu)秀的、粗糙的，及介于兩者之間的性能狀態(tài)。因?yàn)檫@些屏幕背后的是希望獲得交互、探索、學(xué)習(xí)、享受的人。
為了滿足這種多樣化，我們需要將漸進(jìn)增強(qiáng)的能力提高一個等級。除了探索新特性，我們還需再進(jìn)一步，產(chǎn)品要能基于設(shè)備屏幕的大小、寬帶、JavaScript支持情況及設(shè)備性能的情況進(jìn)行自我適應(yīng)、漸進(jìn)增強(qiáng)。放棄某些安逸的假設(shè)，以移動優(yōu)先為設(shè)計(jì)思想，構(gòu)建一種核心體驗(yàn)，我們便能構(gòu)建一個穩(wěn)定的基礎(chǔ)去支持更多的平臺。在很多情況下，最核心的體驗(yàn)獲得了較好的效果，漸進(jìn)增強(qiáng)將幫我們把產(chǎn)品推給更多的用戶。
結(jié)構(gòu)化的內(nèi)容可適應(yīng)未來多平臺環(huán)境
一切將從標(biāo)記語言開始。即便是最討厭的瀏覽器也能識別標(biāo)記語言。HTML5為增強(qiáng)用戶體驗(yàn)敞開了大門。面對眾多的移動設(shè)備不斷發(fā)生的變化，我們意識到根本的、簡潔的、強(qiáng)大的標(biāo)記語言是跨眾多平臺開發(fā)最好的利器。
“移動設(shè)備市場正不斷發(fā)生著變化。性能也在持續(xù)改變�？赡苤挥薪Y(jié)構(gòu)化的內(nèi)容可以移值到未來的平臺上。”——Stephen Hay
具有靈活性的樣式，可適應(yīng)多屏幕
現(xiàn)在我們已經(jīng)意識到，Web頁的寬并非只能限定在960px大小，我們正逐漸回歸Web所具有的流動特性。多虧有響應(yīng)式Web設(shè)計(jì)，它提供了具體的技術(shù)去適應(yīng)各種尺寸大小的屏幕，同時保證設(shè)計(jì)布局和表現(xiàn)樣式保持在同等水平�？赡芨匾氖牵憫�(yīng)式設(shè)計(jì)提供了我們急需的開發(fā)語言，依靠它，我們在討論設(shè)計(jì)方案時不必再單獨(dú)考慮屏幕的大小及硬件環(huán)境。
面對設(shè)備多樣化的挑戰(zhàn)，響應(yīng)式Web設(shè)計(jì)并非是萬能的(并非像它所聲稱的那樣)，但它卻是重要的一步。我們?nèi)孕柰ㄟ^上下文環(huán)境、源代碼、輸入方式、媒介等方式解決內(nèi)容層次結(jié)構(gòu)問題。
定位不同平臺 開拓平臺優(yōu)勢
移動設(shè)備及其他新出現(xiàn)的平臺在屏幕大小上各不相同，可靈活適應(yīng)的布局結(jié)構(gòu)將變得極其重要。各平臺均有自己的優(yōu)勢及限制，開發(fā)者必須謹(jǐn)慎選擇。雖然對內(nèi)容提供統(tǒng)一的訪問方式相當(dāng)重要，但這并不意味著我們應(yīng)該為所有平臺的用戶提供可以適應(yīng)所有平臺的同一尺寸的服務(wù)。
理解用戶使用產(chǎn)品的環(huán)境
用戶正以越來越多的方式與我們的產(chǎn)品進(jìn)行交互，用戶的使用環(huán)境直接影響著我們產(chǎn)品的設(shè)計(jì)目標(biāo)。我們不應(yīng)該簡單地根據(jù)用戶的設(shè)備就砍倒某些內(nèi)容或功能，我們應(yīng)該了解用戶使用該產(chǎn)品的環(huán)境。根據(jù)它來確定需要加強(qiáng)和優(yōu)化的地方。一個整天忙碌的用戶如何從你的服務(wù)中獲益?用戶憑什么要在他們的TV上訪問你的網(wǎng)站?筆記本用戶訪問我們的網(wǎng)站和平板電腦用戶有怎樣的不同?通過詢問這些問題可以幫助我們確定優(yōu)先考慮的目標(biāo)，避免與機(jī)會擦肩而過。
充分利用設(shè)備的性能
現(xiàn)在有些瀏覽器已經(jīng)支持觸屏控制、地理定位及硬件加速。希望未來的瀏覽器可以訪問設(shè)備更多的API。這將為基于設(shè)備的性能提高用戶體驗(yàn)提供更多機(jī)會。例如，我們常常忘記移動電話是用來打電話與發(fā)送消息的通訊工具。我們應(yīng)該如何利用這些特性更好的吸引用戶呢?
現(xiàn)在，一些設(shè)備可以打電話。而未來的設(shè)備可能會接入類Kinect的手勢感應(yīng)功能、語音輸入，甚至其他仍在構(gòu)思中的功能�，F(xiàn)在新興的多屏幕，為我們實(shí)現(xiàn)各屏幕之間的交互提供了令人激動的機(jī)會。讓我們完成這些新功能，讓W(xué)eb成為新的、令人興奮的地方。
結(jié)語
設(shè)計(jì)出對未來友好的Web，這一思想包含很多內(nèi)容：Web標(biāo)準(zhǔn)、內(nèi)容策略、漸進(jìn)增強(qiáng)、響應(yīng)式設(shè)計(jì)等等。這比任何一個方法、技術(shù)更強(qiáng)大。它可以幫助我們跳出現(xiàn)有項(xiàng)目的范圍思考問題，幫助我們?yōu)槌錆M創(chuàng)新、持續(xù)改變的未來做好準(zhǔn)備。(編譯：CSDN陳秋歌)
來源：CSDN 陳秋歌