業界資訊
Logicdesign專訪:探尋草莓音樂節網站背后的技術故事

五一假期,喜歡音樂的朋友一定在草莓音樂節享受了一次饕餮大餐,本次草莓音樂節網站首次使用HTML5技術開發,采用了諸如Parallax視差滑動效果、H.264視頻背景和Canvas技術。筆者特別采訪到 @Logicdesign官方 負責此項目的技術團隊,以下是訪談的詳細內容:

InfoQ:請首先介紹下Logicdesign?

Logicdesign:Logicdesign(@Logicdesign官方)是一家設計公司。Logicdesign顧名思義,我們更看中圖形背后的所隱藏的邏輯、內容和觀點是否可以得到有效的傳播。專注于內容策略、市場傳播解決方案方面的研究。比如過去兩年,我們為微軟(中國) 6位CEO/VP/GM級別管理層以及超過10場的重要產品發布會/媒體溝通會提供了內容優化和觀點輸出。同時我們也幫助很多重要產品比如Windows 7、IE、Office……的產品以及不同的IT類受眾,在各個市場傳播層面做了非常多的傳播工作。草莓音樂節是我們在沉浸式體驗上一個全新的嘗試。

InfoQ:請做下自我介紹,目前主要負責的工作和在“草莓音樂節”項目中擔任的角色?

Logicdesign:Saber Zou(鄒頌兵),項目總監,我主要負責在線項目,包括項目的前期創意策劃,執行和質量控制等。在草莓音樂節這個項目中,整個創意開發團隊包括我,Hory (張昊,負責項目溝通執行),Logicdesign設計團隊(林媛、哈達、薛凱),以及Alex Wang(王懷遠,負責開發)。

InfoQ:請介紹一下草莓音樂節網站建設的背景?使用HTML5技術帶來了哪些改變和提升?

Logicdesign:微軟IE9推出一年時間,在市場獲得了很好的反響,但是國內由于歷史原因,一方面舊版IE仍有不少消費者在使用,另一方面由于國內企業對HTML5這一未來發展趨勢并沒有太多認知,使得其在商業領域的應用更是鳳毛麟角,微軟一直希望通過和一些具有影響力的品牌合作,以推進國內HTML5的普及和發展,讓更多人了解HTML5的優勢和在商業上可以帶來的價值。其實這種跨界的合作在國外已經很常見,著名的SWSX音樂節就已成為IT界的一個盛會。而草莓音樂節正是國內最有影響力的一個音樂節,微軟IE9選擇跟它合作,也正是希望雙方不但在HTML5方面有所合作,更是品牌層面的相互促進,藝術和科技的結合是一件很有意思的事情。

草莓音樂節的網站運用HTML5進行開發帶來了幾個層面的改進:

  • 首先是交互體驗上的提升。以前的網站僅僅是簡單地把音樂節的信息簡單的羅列,而現在這個網站給人一種故事的感覺,通過鼠標滑動,登陸草莓星球,查看信息,整個過程變得更加有趣,用戶可以參與其中;
  • 第二是跨平臺的完美體驗。它不需要任何插件就能讓平板體驗到像PC上一樣的瀏覽效果,不像目前很多Flash的商業推廣案例,因為硬件對Flash的不支持,而導致在平板上無法瀏覽;
  • 第三是整個網站更加輕盈,即便是嵌入了視頻背景。由于HTML5不需要插件就原生支持H.264編碼視頻,不但保證了速度,也大大降低瀏覽器因為插件問題而導致的崩潰。

InfoQ:草莓音樂節網站采用的主要技術有哪些?

Logicdesign:草莓音樂節網站主要采用了HTML5的文本標記,JavaScript控制的Parallax效果(視覺差,不同層次的元素按照不同的速率位移),H.264視頻背景和Canvas繪圖,就是網站最后一部分移動的星空,整個背景是Canvas,而上面的星星都是即時運算畫出來的。

InfoQ:您認為設計優良的網站應該具備的特質有哪些(請列舉三點)?

Logicdesign:主要分為以下幾點,

  • 清晰簡潔的信息架構。用戶每天在網站接觸到的信息是海量的,他們對很多網頁內容都不是在認真的閱讀,而僅僅是skim,所謂的“掃視”的形式,這就需要盡量簡潔和邏輯性強的信息架構,什么信息更重要要突出,什么信息無關緊要要去掉,什么內容是需要用戶第一時間了解的,什么內容可以讓用戶去自己探索的,不同內容區塊之間的主次邏輯等,都需要認真考慮,信息安排上有主有次,讓用戶一眼就能了解大致內容,這是良好用戶體驗的第一步;
  • 好的內容和經過斟酌的文案。這一點其實被很多人忽視?;ヂ摼W發展到今天其實很多技術上的呈現并不是問題,而一個網站(除了Web Application)總是需要向受眾展示,告知或者宣傳某些東西,讓用戶愿意花時間去了解就需要在內容上花功夫,這里的內容包括頁面上的每一句話,每一張配圖,這和我提到的第一點也是緊密相連的,如果內容足夠吸引用戶是愿意花時間停留的,甚至是再次回來;
  • 良好的視覺和交互設計。任何東西都是經過設計的,但優秀的設計和交互會讓人感覺不到設計的痕跡,因為很自然地讓人覺得這就是這樣的。就像是草莓音樂節的網站,整個體驗過程只需要用戶向下滑動鼠標滾輪,這時最普遍和普通的交互方式,不需要用戶去思考,也不會變得做作。

InfoQ:用到了哪些主要的HTML5 API或開發框架,請分享下使用的感受(如采用Parallax視差滑動效果、H.264視頻背景、Canvas等)?

Logicdesign:這個網站主要使用了HTML5標記,Canvas API,H.264解碼的視頻。其實HTML5還有很多很多API,而且還有CSS3和一些強大的JS Library可以實現很多不同的效果,我們僅僅使用了很少的一些,但是效果也是顯而易見的。我們覺得目前HTML5優勢很多,但一個很讓人頭疼的問題還是不同瀏覽器之間的兼容測試,當然現代的瀏覽器(支持HTML5)在呈現上不會有太大差異了,但很多小的地方,如元素的位置,JavaScript的執行效率,音頻格式的不統一等都是需要做優化的。

InfoQ:請分享下您對沉浸式跨平臺設計體驗的理解,目前在Logicdesign的項目中得到了哪些應用?

Logicdesign:沉浸式跨平臺體驗是一個趨勢,這個體驗主要是讓用戶充分享受內容,界面元素不成為阻隔閱讀和瀏覽的障礙。比如說最新的Internet Explorer 9和Chrome等瀏覽器邊框都簡化到了極致,讓用戶完全關注網頁內容本身,而這些想法也會越來越多地遷移到其他平臺和應用中。比如說蘋果Mac中的全屏應用模式和即將到來的Windows 8 Metro界面,都是這個思路。為什么會是這樣的趨勢呢?其實跟我前面談到的“內容為王”是分不開的,無論技術怎么變化,人們獲取高質量內容的需求是始終不變的,反而隨著信息的爆炸式增長而更加需要簡單無阻隔的體驗。這個理念其實就是我們Logicdesign的一個設計原則,無論是平面還是在線的項目,我們都希望用戶首先關注的是內容本身,這就需要我們去研究和挖掘有意思的內容和信息,分清主次,我們反而不會特別在意呈現的方式。

InfoQ:我們看到了在官網上很醒目的IE9圖標,請介紹下在草莓音樂節的項目上IE9擔任著怎樣的角色?

Logicdesign:IE9是這一界草莓音樂節的合作伙伴,主要在網站方面為草莓音樂節提供一個酷炫的體驗。IE9還在國內和adidas Origianls三葉草合作推出了一個推廣網站(info.msn.com.cn/adidasoriginals)以及在全球范圍內推出了眾多HTML5體驗(詳情可以查看www.beautyoftheweb.com

InfoQ:在對HTML5技術的支持上,您認為IE9在哪些地方的支持最有幫助?

Logicdesign:IE9其實是微軟一款非常有誠意的產品,由于歷史原因(盜版XP,IE內核瀏覽器的普及等等),IE6、7等舊的瀏覽器在國內仍然占據很大一部分份額(可以參考www.theie6countdown.cn),  而這些老版本的瀏覽器對于新技術如HTML5是不支持的,速度慢,安全性也會有問題,但是市場份額在,網站就還是會為他們兼容,導致國內的前端開發舉步維艱,增加開發的難度和成本,用戶體驗也沒有任何的提升。而IE9一改IE品牌給人慢、落后的印象,從根本上采用了硬件加速功能和新的JavaScript引擎,瀏覽速度和圖形渲染方面的表現非常優秀,也支持大量HTML5最新標準,這些特點都讓我們的開發帶了很大的方便。特別是IE9的硬件加速,讓我們的開發人員放心地在頁面嵌入大量圖形、視頻和動畫而不用擔心瀏覽起來會卡的問題,因為與其他瀏覽器不一樣,IE9可以讓CPU和GPU(顯卡)協同工作,CPU來執行程序代碼,而GPU來渲染圖形文字和視頻等,效率更高。所以我們大量采用這些甚至不進行特殊優化,也不用擔心在IE9上面會不順暢。

InfoQ:如何看待HTML5的發展,您認為HTML5在未來還有哪些創新的應用,例如在商業設計領域?

Logicdesign:HTML5是未來的發展方向這是毋庸置疑的,特別是隨著移動設備的不斷發展,HTML5的跨平臺優勢會越來越突出,讓開發者真正可以一次開發實現在多個設備和平臺上使用,而不必過分擔心兼容性問題。目前HTML5還是W3C組織的一個草案,主流瀏覽器對它的支持也不完全一致,另外目前還沒有比較全面的專門針對HTML5的開發工具,這些都對HTML5的發展造成一定的阻礙,但是我相信隨著各大科技巨頭的推動(微軟,Apple和Google等)和目前移動設備的發展勢頭,會有越來越多的開發人員考慮使用HTML5來進行開發。

未來HTML5的應用反而會越來越注重細節,目前HTML5是一個很火的商業概念,很多網站采用HTML5主要是為了顯示技術的酷炫呈現,而并沒有考慮太多HTML5作為網絡文本標記語言本身的意義(更具備語義識別性的網絡標記語言),未來大家還會看到更多類似草莓音樂節這樣Cool的網站,但是也會有越來越多的網站拋棄舊版(HTML4.0)的標記方式,而采用HTML5,比如說原來網頁代碼中很多 <div>會被<article>和<section>等代替,這時候應該是HTML5開始普及的時候了。



国产小视频学生2020_国产免费破外女出血视频_人妻耻辱中文字幕在线