本期《ideas》主要就“增加頁面表現(xiàn)力”進(jìn)行分享，在"新交互"，平臺頁面，日?；顒訉ｎ}幾個方面進(jìn)行討論。
本期作者：jamieguo ,suxichen,dobyliang

1.談?wù)勀切┞嬵愋偷幕诱?by jamieguo

隨著WEB技術(shù)的日新月異、好萊塢對漫畫作品的電影化、游戲業(yè)的發(fā)達(dá)、動漫行業(yè)的發(fā)展、以及來臨了很久的讀圖時代，我們可以看到越來越多的“漫畫”類型的互動網(wǎng)站呈現(xiàn)在大家眼前。這些網(wǎng)站的內(nèi)容承載較少、載入速度快、基本上完全沿襲漫畫的表達(dá)方式，令人耳目一新。

1.TORN 網(wǎng)址：http://disneydigitalbooks.go.com/tron/
首先要介紹的這個是大家都應(yīng)該看過的TRON《創(chuàng)：戰(zhàn)紀(jì)》 的一個交互式在線漫畫 ?！疤剿髁耸褂肏TML5以及現(xiàn)代Web技術(shù)講述故事的新方式。它采用了HTML5 Canvas以及audio tags，將紙面上的故事更為鮮活。 ”

這個網(wǎng)站力圖通過利用HTML5的能力來更好地展現(xiàn)漫畫，而又不會失去傳統(tǒng)漫畫應(yīng)用的原滋原味。 每一幅圖都做了特殊處理，以強(qiáng)調(diào)畫中的動作。應(yīng)用保持了從左到右的閱讀方式，保持了傳統(tǒng)漫畫閱讀的感覺，沒有頁面翻頁帶來的中斷。

2.Leave Your World /Enter Theirs 網(wǎng)址：http://www.entertheirworld.com/
這是DC最近的一個互動站，以現(xiàn)實世界切入漫畫世界，幫助漫畫英雄解決難題……然后……你可以購買到特別版的漫畫鞋子（匡威）~笑

這樣一個異業(yè)合作~趕在蝙蝠俠前傳的電影宣傳檔期，聯(lián)合DC漫畫以及匡威，相信全球的粉絲們也會非常開心吧~我本人也非常中意這幾款鞋子的說~
3.soul-reaper 網(wǎng)址：http://www.soul-reaper.com/
網(wǎng)上對這個款游戲的翻譯為魂狩也有叫做靈魂收割者的?？上Ч倬W(wǎng)一直是“TO BE CONTINUED”的狀態(tài),更多的資料和最新信息只能在facebook上查詢，而國內(nèi)目前能翻到的資料也非常有限。
這個網(wǎng)站使用 HTML5的滾動技術(shù)，當(dāng)我們向下滾動鼠標(biāo)，可以看到故事的切換甚至是人物表情的改變。

4.kinetic 網(wǎng)址：http://www.kinetic.com.sg/main.html

該網(wǎng)站做得很cult~雖然不是用完整的漫畫故事，但是其中也使用不少漫畫的表現(xiàn)方式，個人覺得很有趣，也放上來和大家分享。方式總是多樣的嘛~看到不同的東西，總歸是能拓寬眼界的。

互動站的目的無非就是宣傳。結(jié)合圖片、視頻、文字信息、音樂方面的展示；配合線上線下的活動進(jìn)行造勢。這已經(jīng)是非常常見的商業(yè)形式了。

一個比較明顯的情況是：大部分的漫畫互動站往往是一些游戲、電影、動畫、個站或是一些異業(yè)合作。至于為什么選用漫畫的形式，最直接的理解是……讀一個有情節(jié)的故事比起看一張似乎隱藏了很多信息的圖片或者一堆文字來，要輕松很多，自然也容易留下印象。漫畫的一個特點不就是簡單易懂么~笑。另外一點是，會選用這種方式的互動站，對應(yīng)的人群往往都比較年輕，大家多多少少都是看漫畫長大的，接受度比較高。

至于為何到現(xiàn)今才出現(xiàn)這么多漫畫形式的互動站，這點和WEB技術(shù)的發(fā)展就息息相關(guān)了~光是想想用FLASH技術(shù)設(shè)計一個互動站所耗費的資源和載入速度就有點讓人擔(dān)心了。更不要說壓縮帶來的圖片質(zhì)量……而低配用戶更是傷不起啊~笑。

以下為團(tuán)隊的設(shè)計師們在工作中進(jìn)行的“漫畫”嘗試：
《英雄聯(lián)盟》——英雄就在你身邊 網(wǎng)址：http://lol.qq.com/act/a20120511brand/

《地下城與勇士》——阿拉德秘史（已下線）

《QQ仙靈》——神秘站（已下線）

 

 

2.彈奏清新序曲：平臺頁面中的插畫應(yīng)用by suxichen

平臺類頁面？想必大家大腦詞庫里自動匹配顯示的都是諸如：乏味，簡潔，柵格化，功能性的字眼。用音樂來比較，大概就是枯燥乏味的車爾尼練習(xí)曲，需要反復(fù)彈奏來提高彈奏者的基本功。

相較華麗精美的游戲類網(wǎng)頁，平臺頁面或許不能一瞬奪人眼球，你也不能妄想把平臺類做的光彩奪目炫美動人。畢竟這是一類對大量信息的整合設(shè)計，一切為易用易讀所優(yōu)先，我們所做的努力只能是在保證用戶體驗良好的基礎(chǔ)之上的裝飾音，絕不能喧賓奪主。那么如何使我們的頁面從眾多平淡的平臺網(wǎng)站中脫穎而出，在用戶腦中留下美妙的“旋律”呢？方法固然有很多，插畫的應(yīng)用就是其中一個。平臺類網(wǎng)站通常除了logo外沒有素材可用，這種制約同時也使得頁面的自由度非常的高，如果時間允許的話，在頁面上花一些小心思繪制適當(dāng)?shù)牟瀹?，整個頁面立刻就會呈現(xiàn)不再索然無味的狀態(tài)，嚴(yán)謹(jǐn)中不失親切可人，也能給用戶留下較為獨特的印象。

每個網(wǎng)站的頭部banner位置就相當(dāng)于一首序曲（亦稱“開場音樂”），其使命在于綜合地敘述全劇發(fā)展的重要關(guān)鍵場面，奏出劇中代表主角發(fā)旋律，它仿佛是劇情的縮影。這塊黃金地帶在平臺類頁面中彌足珍貴，在上面出現(xiàn)的“音符”必須是考究嚴(yán)謹(jǐn)?shù)摹ｍn國的很多平臺類頁面都把小插畫運(yùn)用得行云流水般自然，下面我們就來賞析幾個優(yōu)秀的范例吧。

作為韓國最大的游戲運(yùn)營商公司之一的Hangame對設(shè)計的拿捏總是恰到好處，縱然是幾年前的設(shè)計的在今天來看也毫不過時，上面這個平臺小專題頁面中，輕松詼諧的單線插畫讓頁面清新自然兼具設(shè)計感，同時不會過多的吸引用戶的注意力，良好的傳達(dá)了信息內(nèi)容。除了頭部，內(nèi)容板塊重要信息點處的小插畫也引導(dǎo)用戶視覺聚焦于其上，整個頁面生機(jī)盎然。

平臺門戶也可以如此清爽美妙，五張全背景的充滿設(shè)計感插畫的輪播，大方得體又具備商務(wù)氣息，微妙的材質(zhì)疊加運(yùn)用讓插畫層次分明又別具一格，在很好的傳達(dá)了此公司的理念之余充滿趣味性。

矢量插畫與真人的結(jié)合很好的體現(xiàn)了網(wǎng)站的青少年主題，精美小巧的插畫滲入內(nèi)頁的角角落落，整個網(wǎng)站迎面而來的活潑氣息不言而喻。

作為平臺網(wǎng)站的首頁，大畫幅的插畫加上五個主要入口，整個網(wǎng)站一目了然功能清晰。

--------------------------------------------------------------------------------
以下是本人在平臺頁面上繪制插畫的嘗試：

上圖為大學(xué)生戲劇節(jié)的專題頁面，一開始項目組沒有提供任何可使用的素材，對需求的風(fēng)格方向也沒有很明確的方向，在時間比較充裕的情況下，我決定畫一些貼合主題的小插畫來豐富頁面氛圍。

除了版頭的小插畫之外，由于是專題，可以有別于平臺的延展性的需要，下面的板塊外框我采延續(xù)了戲劇節(jié)主題，采用了票根這個元素。

某位張姓大神說過，經(jīng)典的永不過時的設(shè)計大都是由幾何圖形組成的。應(yīng)用在帶有強(qiáng)烈現(xiàn)代商業(yè)氣息的矢量類型插畫上，這也是一個準(zhǔn)則，就如同西方的庭園美學(xué)，所有樹木，雕飾都呈現(xiàn)對稱平衡以及規(guī)整的形狀，儼然帶著一種人工設(shè)計的紀(jì)律美感。或許你會有疑問，基礎(chǔ)幾何形是每個人都能信手拈來的，要如何創(chuàng)造出別具個性的同時帶有美感的圖形？那其中一個小技巧就是“加減法”，兩個簡單的圖形的適當(dāng)組合就能產(chǎn)生一種較為復(fù)雜的但仍然規(guī)整的幾何形。

說到這想必你一定躍躍一試了，不如聽一曲巴赫的第四號序曲，在這種歡快又嚴(yán)謹(jǐn)?shù)臍庀⒅袆?chuàng)造出一個清新自然的頁面吧。

 

 

3.讓獎品更靈活--游戲頁面中的獎品設(shè)計by dobyliang

 

在游戲?qū)ｎ}活動類設(shè)計中，當(dāng)各種獎品，禮包涌過來的時候，你是否經(jīng)常會遇到出現(xiàn)贈送獎品相關(guān)的專
題或者是和某品牌合作，適當(dāng)加入合作品牌的產(chǎn)品。視覺設(shè)計師在這類專題活動類的項目中，如何去將
獎品與游戲特色結(jié)合，當(dāng)頁面需要加入獎品時，怎么樣做到既保留游戲特色又體現(xiàn)獎品.

> 我們就游戲?qū)ｎ}獎品幾種設(shè)計形式進(jìn)行分類

一、獎品與標(biāo)題之間：
將獎品與專題頁面的標(biāo)題來一次邂逅，合理的將獎品與頁面標(biāo)題相互結(jié)合在一起，使標(biāo)題表達(dá)的主題更
明確，出彩。

Hangame的一款FPS游戲，在整個頁面中標(biāo)題、獎品、游戲角色相互之間有很多關(guān)聯(lián)性和層次感，體現(xiàn)了游戲本質(zhì)特
征，而又傳達(dá)了獎品的信息。

Hanbiton 5周年慶的專題頁面，蛋糕和禮品以及標(biāo)題相互之間構(gòu)成，融為一體，突出周年慶典和送好禮。

并且內(nèi)容信息這里的獎品擺放也和場景一致，貼近主題，整個頁面濃郁在歡慶的氛圍中。

NBA2K活動專題，豐富的獎品禮包贈送和標(biāo)題結(jié)合，切合活動主題和相關(guān)信息。

二、獎品與游戲角色來一次互動

將獎品和游戲角色組合在一起，來一次互動，是不是很有趣。

Tera的專題活動，游戲里的人物角色動作和三星顯示器結(jié)合的很好，就像兩者是一體的。

棒球游戲，通過棒球裝備與礦泉水的相互搭配，很好的詮釋這項運(yùn)動。

火爆的FPS的游戲與爆米花也是一個很好的合作與設(shè)計。在進(jìn)行FPS游戲的時候是不是餓了呢，來一桶薯條吧~

tgideas設(shè)計師設(shè)計的cf活動專題，這個頁面運(yùn)用游戲場景配合道具獎品互動營造氛圍。

三、獎品專題設(shè)計也可以很有愛

 

獎品通過擺放和進(jìn)行一定的夸張透視，增加畫面的趣味，形成很有愛的畫面感。

棒球，獎品，可愛的游戲人物，打開的盒子里面裝著獎品，很有愛。

售賣機(jī)里面陳列著獎品，還標(biāo)上價格，這個專題頁面設(shè)計和現(xiàn)實中的場景多么的相似啊，是不是令你有種點擊
購買的沖動。

QQ西游的一個特惠商品限時發(fā)售頁面，人物角色和購物車的巧妙結(jié)合，是不是很有愛。

DNF中的活動禮包大派送活動專題，可愛的魔法師小蘿莉帶著多彩的禮包在DNF游戲城鎮(zhèn)中等你來領(lǐng)取。

四、獎品的排列、介紹形式
在活動類專題中，有獎品的詳細(xì)排列及介紹，可能很多時候大家想的就是規(guī)則的獎品框排列過去，如果
換種方式會是怎樣呢？

這個頁面設(shè)計獎品排列的方式根據(jù)游戲特征，結(jié)合水紋的背景，獎品擺放在氣袋中，感覺漂浮在水中的獎品也
是有靈魂的。

 

 

AVA韓服獎品頁面，獎品展示方式與雪地的背景結(jié)合一起，構(gòu)思巧妙，營造出了冬天的氣氛，讓玩家如同身臨其境，想伸手去獲取獎品，完全抓住了玩家的眼球。這些作品在主題和表現(xiàn)上找到適合的元素，輔以合理統(tǒng)一的場景，為獎品設(shè)計呈現(xiàn)魅力。

獎品組合排列方式是不是很貼近游戲特色，很新穎

五、獎品與節(jié)日

騰訊游戲小熊夢工廠感恩節(jié)活動頁面，獎品與節(jié)日元素的結(jié)合為節(jié)日增加了更多的樂趣。

圣誕節(jié)的專題頁面，獎品與圣誕樹經(jīng)過設(shè)計師的巧妙結(jié)合，頁面洋溢著圣誕節(jié)的色調(diào)和元素，獎品堆積成
圣誕樹的形狀，和圣誕節(jié)有著密切的關(guān)聯(lián)，為節(jié)日增添一份喜慶及傳達(dá)獎品信息。

六、游戲與贊助商的合作

洛克王國和LEGO合作的頁面，設(shè)計師巧妙的應(yīng)用樂高玩具的特征結(jié)合洛克的游戲特點在頁面設(shè)計上巧妙搭
配，傳遞了雙方的合作。

游戲與飲料品牌的合作，根據(jù)飲料產(chǎn)品的特點在頁面中設(shè)計體現(xiàn)。在游戲產(chǎn)品與其他行業(yè)產(chǎn)品可以尋求更多
的宣傳渠道。

足球游戲與現(xiàn)代汽車的合作
明星、美女、汽車吸引了喜歡這款游戲的玩家，達(dá)到了贊助商與游戲產(chǎn)品的雙方互利。

獎品作為游戲?qū)ｎ}中出現(xiàn)比較多的元素，如何把握游戲角色形象、主次關(guān)系以及相互結(jié)合，在頁面設(shè)計
中更好的體現(xiàn)和結(jié)合，設(shè)計師可以從以上鑒賞中獲取更多的思路更好的去發(fā)揮，讓獎品設(shè)計的更靈活。

tgideas原文：http://tgideas.qq.com/webplat/info/news_version3/804/808/884/m579/201211/181850.shtml