超贊！如何增強你的頁面表現力

本期《ideas》主要就“增加頁面表現力”進行分享，在"新交互"，平臺頁面，日常活動專題幾個方面進行討論。
本期作者：jamieguo ,suxichen,dobyliang

1.談談那些漫畫類型的互動站 by jamieguo

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

1.TORN 網址：http://disneydigitalbooks.go.com/tron/
首先要介紹的這個是大家都應該看過的TRON《創：戰紀》 的一個交互式在線漫畫 。“探索了使用HTML5以及現代Web技術講述故事的新方式。它采用了HTML5 Canvas以及audio tags，將紙面上的故事更為鮮活。 ”

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

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

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

4.kinetic 網址：http://www.kinetic.com.sg/main.html

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

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

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

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

以下為團隊的設計師們在工作中進行的“漫畫”嘗試：
《英雄聯盟》——英雄就在你身邊 網址：http://lol.qq.com/act/a20120511brand/

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

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

 

 

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

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

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

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

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

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

矢量插畫與真人的結合很好的體現了網站的青少年主題，精美小巧的插畫滲入內頁的角角落落，整個網站迎面而來的活潑氣息不言而喻。

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

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

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

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

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

說到這想必你一定躍躍一試了，不如聽一曲巴赫的第四號序曲，在這種歡快又嚴謹的氣息中創造出一個清新自然的頁面吧。

 

 

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

 

在游戲專題活動類設計中，當各種獎品，禮包涌過來的時候，你是否經常會遇到出現贈送獎品相關的專
題或者是和某品牌合作，適當加入合作品牌的產品。視覺設計師在這類專題活動類的項目中，如何去將
獎品與游戲特色結合，當頁面需要加入獎品時，怎么樣做到既保留游戲特色又體現獎品.

> 我們就游戲專題獎品幾種設計形式進行分類

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

Hangame的一款FPS游戲，在整個頁面中標題、獎品、游戲角色相互之間有很多關聯性和層次感，體現了游戲本質特
征，而又傳達了獎品的信息。

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

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

NBA2K活動專題，豐富的獎品禮包贈送和標題結合，切合活動主題和相關信息。

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

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

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

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

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

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

三、獎品專題設計也可以很有愛

 

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

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

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

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

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

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

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

 

 

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

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

五、獎品與節日

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

圣誕節的專題頁面，獎品與圣誕樹經過設計師的巧妙結合，頁面洋溢著圣誕節的色調和元素，獎品堆積成
圣誕樹的形狀，和圣誕節有著密切的關聯，為節日增添一份喜慶及傳達獎品信息。

六、游戲與贊助商的合作

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

游戲與飲料品牌的合作，根據飲料產品的特點在頁面中設計體現。在游戲產品與其他行業產品可以尋求更多
的宣傳渠道。

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

獎品作為游戲專題中出現比較多的元素，如何把握游戲角色形象、主次關系以及相互結合，在頁面設計
中更好的體現和結合，設計師可以從以上鑒賞中獲取更多的思路更好的去發揮，讓獎品設計的更靈活。

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