編者按：這個三年前以7.86的高分拿了AWWWARDS的Site of the Day獎項，成為第一個獲此殊榮的簡體中文網(wǎng)站，現(xiàn)在看仍然驚艷十足。昨天偶然發(fā)現(xiàn)它的創(chuàng)造人Logicdesign 分享了這個過程中對細枝末節(jié)的思考，非常受用，特意發(fā)掘出來給同學們重溫一遍，來看頂尖大咖怎么做設計！

創(chuàng)立于1998年的亞洲動物基金（Animals Asia Foundation，以下簡稱AAF）是一個以改善動物生存環(huán)境為目的的非盈利慈善機構，15年來致力于取締活熊取膽以及拯救亞洲黑熊的項目。

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

月熊志

挑戰(zhàn)

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

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

設計的挑戰(zhàn)：另一方面，我們不可以只是進行傳統(tǒng)方式上“枯燥的說教”和生硬的“內(nèi)容羅列”，而是要讓錯綜復雜的內(nèi)容的呈現(xiàn)方式更加有趣和具有吸引力，讓更多的用戶能夠堅持的看下去，獲得觸動，并愿意分享給更多人——這是我們需要滿足最終受眾的潛在需求。

技術的挑戰(zhàn)：我們必須要充分利用最先進的網(wǎng)頁開發(fā)技術去做最終的呈現(xiàn)，而不僅僅只是通常的實現(xiàn)方式，這樣才可以更好的塑造IE所代表的尖端技術潮流——這是來自微軟的品牌訴求。

不能單純的“炫技”，也不能是枯燥的“說教”，更不能是通常慈善項目上空洞無味的倡議和吶喊，而是需要讓內(nèi)容、技術、設計、商業(yè)、慈善這些不同層面的訴求可以完美的結合和呈現(xiàn)——這一切都要做到世界級的水準，這對我們來說是一次前所未有的挑戰(zhàn)。

設計：對“網(wǎng)頁”的重新定義

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

而我們將這三部分的“深入了解”，完全設計成為了“翻閱三本書的體驗”，這與傳統(tǒng)的網(wǎng)頁欄目的呈現(xiàn)方式有著本質(zhì)的不同，這種“沉浸式”的設計方式，完全為內(nèi)容而服務，但卻又幫助內(nèi)容無法承載的“那部分情感”因素，有了一個合理的“落腳點”。

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

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

“技術”似乎是一把“雙刃劍”，大多數(shù)時候博得用戶的一句 “WOW！挺炫的!” 似乎就是它的終極使命，但之后呢？……或許正是如此，我們也一直在思考如何讓“技術”在《月熊志》當中，可以真正發(fā)揮它的本質(zhì)作用——“技術”的目的絕不僅僅只是“技術的呈現(xiàn)”，而是通過“技術”去幫助“設計體驗”上升到一個全新的高度。我們要讓“技術”躲在“幕后”，舞臺的主角應該是“經(jīng)過設計的內(nèi)容”，但也正是有了幕后的支持，才得以幫助舞臺的主角更加光彩奪目。

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

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

內(nèi)容：萬物之源

我們需要內(nèi)容，設計，技術開發(fā)三條工作流協(xié)同進行——但在傳統(tǒng)的設計模式下，往往是文字內(nèi)容OK了交給設計；設計圖OK了交給技術開發(fā)，技術開發(fā)OK了發(fā)布……但這種工作模式對于我們來說是一種彼此割裂的工作方式，無法追溯本質(zhì)訴求，因此也更談不上高質(zhì)量的結果。

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

動物和人本質(zhì)是一樣的，都有自己的情感世界，那么在這個前提下，人類對于動物的迫害則顯得更加觸動和震撼——但這種負面的內(nèi)容我們恰恰更不可以用一種“激動和義憤填膺”的方式，就如同最受觸動往往不是“主旋律電影”而是“紀錄片”，真實和樸實，永遠是最有力的方式。我們唯一要做的事情，就是提煉出最觸動人心的內(nèi)容，用最簡單，直接的方式表達出來——而這一切，卻又是最難的。因此直到項目結束之前，我們?nèi)栽诓煌Ｐ薷暮驼{(diào)整內(nèi)容。

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

里程碑

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

最后我們要感謝亞洲動物基金：我們所做的“事情”和你們的“事業(yè)”比起來，是微不足道的。感謝微軟，沒有你們對技術的不斷探索和尊重，《月熊志》也無法誕生。感謝我們的技術開發(fā)合作伙伴Vision Soar，沒有你們強大的技術實現(xiàn)能力，所有的一切將成為泡影。感謝所有人！

《月熊志》廣告視頻

「優(yōu)設字體設計好文最新集錦」

灰晝大大的字體推薦：
《灰晝的字體庫！10款常用的經(jīng)典基礎英文字體推薦（已打包）》

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

谷歌免費字體網(wǎng)站：
《Google Fonts 網(wǎng)站全新設計，免費下載八百種英文字體！》

原文地址：logicdesign

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量130萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com