國(guó)際頂尖作品！《月熊志》公益主題網(wǎng)站背后的設(shè)計(jì)故事

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

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

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

月熊志

挑戰(zhàn)

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

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

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

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

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

設(shè)計(jì)：對(duì)“網(wǎng)頁(yè)”的重新定義

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

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

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

技術(shù)：讓“主角”更加光彩奪目

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

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

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

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

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

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

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

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

里程碑

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

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

《月熊志》廣告視頻

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

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

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

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

原文地址：logicdesign

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

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