moonbear-website-design-story-1

云南体彩网編者按:這個三年前以7.86的高分拿了AWWWARDS的Site of the Day獎項,成為第一個獲此殊榮的簡體中文網站,現在看仍然驚艷十足。昨天偶然發現它的發明人Logicdesign 分享了這個過程中對細枝末節的思考,非常受用,特意發掘出來給同學們重溫一遍,來看頂尖大咖怎么做設計!

云南体彩网創建于1998年的亞洲動物基金(Animals Asia Foundation,以下簡稱AAF)是一個以改善動物生存環境為目的的非盈利慈善機構,15年來致力于取締活熊取膽以及拯救亞洲黑熊的項目。

云南体彩网Internet Explorer是微軟的瀏覽器產品(下簡稱IE),Logicdesign也連續在為IE進行著全面的品牌塑造和市場推廣。正是因為這樣的淵源,我們促成了AAF和微軟這次的品牌合作。而Logicdesign要做的,則是利用IE瀏覽器所代表的最新的Web技術趨勢,以及我們對內容和設計的深刻理解,贊助AAF重塑一個全新的在線體驗——讓更多的人可以用一種完全分歧的方式感受到“活熊取膽背后的真相” 以及讓更多人去重新審視動物權益的掩護。

挑戰

云南体彩网這次項目對我們來說是一次“前所未有”的挑戰,如同一個“多分支的蹺蹺板”,我們首先需要平衡來自分歧層面的需求,其次還要帶來最棒的效果——因為這個項目也將會是微軟全球IE品牌推廣的核心項目之一,因此我們也面臨著來自微軟總部對于最終質量的極高要求。

yxz201606221

內容的挑戰:我們需要在極短的時間內收集和整理出更加充分、有理有據的內容去盡可能多的轉達出月熊掩護和動物權益的內容——這是來自亞洲動物基金(AAF)的需求。

云南体彩网設計的挑戰:另一方面,我們弗成以只是進行傳統方式上“枯燥的說教”和生硬的“內容羅列”,而是要讓錯綜復雜的內容的涌現方式更加有趣和具有吸引力,讓更多的用戶能夠堅持的看下去,獲得觸動,并愿意分享給更多人——這是我們需要滿足最終受眾的潛在需求。

云南体彩网技術的挑戰:我們必須要充分利用最先進的網頁開發技術去做最終的涌現,而不僅僅只是通常的實現方式,這樣才可以更好的塑造IE所代表的尖端技術潮流——這是來自微軟的品牌訴求。

不克不及純真的“炫技”,也不克不及是枯燥的“說教”,更不克不及是通常慈善項目上空洞無味的倡議和吶喊,而是需要讓內容、技術、設計、商業、慈善這些分歧層面的訴求可以完美的結合和涌現——這一切都要做到世界級的水準,這對我們來說是一次前所未有的挑戰。

設計:對“網頁”的重新界說

yxz201606223

月熊背后有著觸動人心的故事,所以我們希望通過一種更豐富、交互性更強的方式把這些“故事”涌現給所有人。整個在線體驗的名字叫《月熊志》,分為三部分:第一部分通過一只叫Jasper的月熊和他小伙伴之間的故事,表達出動物和人一樣是有自己的情感世界;第二部分回顧了Jasper和他小伙伴的過去——也就是活熊取膽所帶來的殘暴真相和數據,以及動物權益的相關內容;第三部分則是講AAF在15年拯救月熊事業中所做出的不懈努力。

而我們將這三部分的“深入了解”,完全設計成為了“翻閱三本書的體驗”,這與傳統的網頁欄目的涌現方式有著實質的分歧,這種“沉浸式”的設計方式,完全為內容而服務,但卻又贊助內容無法承載的“那部分情感”因素,有了一個合理的“落腳點”。

yxz201606224

云南体彩网在《月熊志》里,一切內容涌現的方式和傳統觀念中的四平八穩的“網頁”完全分歧,而是像在翻閱一本真正的雜志,但又不是“傳統的電子雜志”——因為在其中我們加入了豐富的3D元素、動態效果、視頻和信息交互方式,而且支持觸控的流暢體驗。我們通過設計模糊了“網頁”的概念,讓人們可以真正沉浸在內容和體驗之中,并時刻被技術的表達方式所吸引。

yxz201606226

技術:讓“主角”更加光彩奪目

yxz201606222

云南体彩网“技術”似乎是一把“雙刃劍”,大多數時候贏得用戶的一句 “WOW!挺炫的!” 似乎就是它的終極使命,但之后呢?……或許正是如此,我們也一直在思考如何讓“技術”在《月熊志》傍邊,可以真正發揮它的實質作用——“技術”的目的絕不僅僅只是“技術的涌現”,而是通過“技術”去贊助“設計體驗”上升到一個全新的高度。我們要讓“技術”躲在“幕后”,舞臺的主角應該是“經過設計的內容”,但也正是有了幕后的支持,才得以贊助舞臺的主角更加光彩奪目。

yxz201606228

通過WebGL技術,我們把3D Jasper搬到了瀏覽器上,生動的表達加上支持觸控的交互方式,不僅運用到了最前沿的技術,更重要的是為用戶帶來了一種前所未有的瀏覽體驗——它模糊了“網頁”和“應用”之間的界限讓原本只能通過本地應用的復雜表示方式,釀成了隨時隨地就可以瀏覽的網頁。

yxz201606227

基于最新網絡標準HTML5,我們使用了WebGL、JS、CSS3等最新技術營造了前所未有的體驗。“技術”是一個偉大的載體,“Cool”只是其中微不足道的一個子集。我們時刻努力去涌現“技術之美”,這種“美”是通過“技術”與“設計”的結合,帶來更多“觸動”和“感動”——這才是最終的目的。

yxz201606225

內容:萬物之源

yxz2016062213

云南体彩网我們需要內容,設計,技術開發三條工作流協同進行——但在傳統的設計模式下,往往是文字內容OK了交給設計;設計圖OK了交給技術開發,技術開發OK了發布……但這種工作模式對于我們來說是一種彼此割裂的工作方式,無法追溯實質訴求,因此也更談不上高質量的結果。

“技術”為“設計”服務,“設計”為“內容”服務,“內容”是一切的基礎——我們90%以上的內部溝通都是基于“內容”去進行,因為任何一個畫面的創意、交互行為、動態效果……目的都是為了讓“內容”更加觸動人心。我們一直修改內容和觀點,賡續的推翻我們既有設計構想,很重要的一個原因就是“某種設計方式無法讓內容更加吸引人”。

yxz2016062212

云南体彩网動物和人實質是一樣的,都有自己的情感世界,那么在這個前提下,人類對于動物的迫害則顯得更加觸動和震撼——但這種負面的內容我們恰恰更弗成以用一種“激動和義憤填膺”的方式,就如同最受觸動往往不是“主旋律片子”而是“紀錄片”,真實和樸實,永遠是最有力的方式。我們唯一要做的事情,就是提煉出最觸動人心的內容,用最簡單,直接的方式表達出來——而這一切,卻又是最難的。因此直到項目結束之前,我們仍在一直修改和調劑內容。

yxz2016062210

云南体彩网在思考每個交互細節層面,我們也同樣將它與內容緊密相聯。如果交互行為背后,都可以隱含著對內容價值取向的引導,那么整個用戶體驗也將會上升到一個全新的高度。好比我們在“謠言粉碎機”部分,通過“滑動切開”的方式,去引導用戶去了解隱藏在謊言背后的真相——而這個交互行為自己,就是一種內容價值取向的暗示。

yxz201606229

里程碑

yxz2016062211

經過三個月緊張的工作,《月熊志》在亞洲動物基金成立15周年慶典上正式發布,之后在業界獲得了超出預期的反響。或許若干年后,我們回首會覺得還可以做的更好。但此時此刻,卻是我們所有人共同打造的完美結晶——它不僅僅是我們成立7年以來最富挑戰性的項目之一,更重要的是將我們所一直追求的 “內容,觀點,設計,技術融合的理念” 表示的淋漓盡致。同時它又是一個絕佳的載體,完美的承載和平衡了慈善,公關,品牌,市場……等多重訴求。而在電子出版領域,《月熊志》也是一種非常積極和里程碑式的探索,讓更多的人了解到倚靠現有的技術和設計方式,完全可以讓內容的涌現變得超乎想象和觸手可及,而且也完全可以運用到更多場合——科技,教育,營銷,品牌……

云南体彩网最后我們要感謝亞洲動物基金:我們所做的“事情”和你們的“事業”比起來,是微不足道的。感謝微軟,沒有你們對技術的賡續探索和尊重,《月熊志》也無法出身。感謝我們的技術開發合作伙伴Vision Soar,沒有你們強大的技術實現能力,所有的一切將成為泡影。感謝所有人!

《月熊志》廣告視頻

「優設字體設計好文最新集錦」

灰晝大大的字體推薦:
《灰晝的字體庫!10款常用的經典基礎英文字體推薦(已打包)》

字體排印指南:
《新手福利!一份詳盡全面的UI設計字體與排版指南》

谷歌免費字體網站:
《Google Fonts 網站全新設計,免費下載八百種英文字體!》

原文地址:

yestone-uisdc-2

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量130萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn

點贊
收藏
繼續閱讀相關文章

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
評論 收藏