一、項(xiàng)目背景 嘆為觀止的視覺極限，淋漓盡致的暴力美學(xué)，從未有一款游戲可以做到如此性感，如此驚艷！她遠(yuǎn)在誕生之初就已經(jīng)名聲大震，驚鴻一瞥即令人血脈賁張，她終于姍姍來到中國，卻尚未有一次華麗的登場(chǎng)，這是一款無數(shù)人心目中的超級(jí)大作——她，就是《劍靈》！ 這不是在介紹《劍靈》，只是簡(jiǎn)短陳述我對(duì)這款游戲無法概全的真切感受，從2008年《Blade＆Soul》首發(fā)視頻的亮相開始，就持續(xù)關(guān)注著這款游戲研發(fā)進(jìn)度的蛛絲馬跡，跟很多對(duì)RPG游戲十分熱衷的玩家一樣，最期待的，非《劍靈》莫屬！ 毋庸置疑，《劍靈》的名頭和份量都給我?guī)砗艽蟮膲毫?，面?duì)這樣一款承載著萬眾期待的游戲，頗有些手足無措，到底要怎樣的視覺包裝才能符合《劍靈》的氣息……？好吧，靜下心，從市場(chǎng)/項(xiàng)目/視覺等維度分析產(chǎn)品開始。 二、產(chǎn)品分析及設(shè)計(jì)風(fēng)格思考 設(shè)計(jì)啟動(dòng)前，《劍靈》主美金亨泰先生曾蒞臨騰訊出席TGX主辦的《巔峰對(duì)話》，交流《劍靈》美術(shù)之道，闡述了《劍靈》之于其他傳統(tǒng)的甚至是陳舊的武俠類游戲的巨大不同，極致時(shí)尚與東方靜美的結(jié)合，讓《劍靈》清麗脫俗，躍然而出，游戲角色以國際名模為參考，人物時(shí)裝也是以國際前沿服裝設(shè)計(jì)為主流借鑒方向，高挑的人模，精美的服飾，游戲中處處皆是“奢侈品”。 既然游戲原本的視覺已然“潮爆”，盡顯“奢侈”，那么任何多余的元素都只是畫蛇添足，狗尾續(xù)貂……顯然，輕質(zhì)感風(fēng)格是不夠的，就像眾多國際一線品牌的官方網(wǎng)站一樣，展示頂級(jí)產(chǎn)品，何需點(diǎn)滴繁縟？如此，便讓它“無質(zhì)感”吧！ 綜合分析： 1.市場(chǎng)營銷元素：水墨
沿襲韓方視覺設(shè)定及游戲內(nèi)打斗中出現(xiàn)的十分具有《劍靈》特色的“水墨”。 2.項(xiàng)目首發(fā)定位：種族與職業(yè)技能展示，并交代對(duì)應(yīng)關(guān)系
初期內(nèi)容宜少不宜多，主次分明，首發(fā)站將以“展示視覺”為主。 3.視覺解析：過多修飾純屬班門弄斧
整站設(shè)計(jì)必須以承托游戲原本視覺為首要原則。 結(jié)合前面提到的各方面訴求描述，《劍靈》官網(wǎng)的包裝定位呼之欲出：用游戲畫面、種族職業(yè)、水墨、絢麗色彩……成就一個(gè)游戲網(wǎng)站中的“奢侈品”。 三、水墨元素的研究繪制 從初期構(gòu)思的包裝定位來看，水墨成為唯一可雕琢的設(shè)計(jì)元素。 水墨根據(jù)繪制技法及形態(tài)濃淡的不同，或暈染、或潑灑、或噴濺，且各有其不同的效果及內(nèi)涵。 但水墨無形無骨，可控性差，要拼接出預(yù)想中的筆畫走勢(shì)及清晰的飛白細(xì)節(jié)，并適應(yīng)大尺寸運(yùn)用環(huán)境，較有難度，為了達(dá)到原定設(shè)計(jì)效果，進(jìn)行了一些技法與效果的嘗試。 ?經(jīng)對(duì)比，模擬揮毫而出的硬感水墨更干脆更具力量感，亦更契合《劍靈》“戰(zhàn)斗的藝術(shù)”的特點(diǎn)。 四、草案設(shè)計(jì)嘗試（溝通并確立風(fēng)格走向） 根據(jù)項(xiàng)目組對(duì)種族/職業(yè)關(guān)系的交互邏輯陳述，以及希望在官網(wǎng)上的呈現(xiàn)方式，進(jìn)行了多稿嘗試，視覺風(fēng)格也在這個(gè)期間不斷試錯(cuò)。 首頁部分 圖1.當(dāng)前公布的5個(gè)職業(yè)集體登場(chǎng)，以鼠標(biāo)滑過“種族圖標(biāo)”的同時(shí)，用“流墨暈染”的方式點(diǎn)亮對(duì)應(yīng)職業(yè)，背景可用游戲截圖處理更換。
圖2.無職業(yè)角色出現(xiàn)，以“水墨羅盤（圖中為簡(jiǎn)單示意）”為主視覺元素，鼠標(biāo)滑過種族文字（或圖標(biāo)）的同時(shí)，用“滴墨暈染”點(diǎn)亮職業(yè)小形象，背景更替方式同圖1。
圖3.呈現(xiàn)方式同圖1，整體以灰色調(diào)為主，動(dòng)勢(shì)整齊的硬水墨鋪大背景。
圖4.摒棄傳統(tǒng)的種族/職業(yè)交互方式，以大角色形象為主畫面視覺元素（相當(dāng)于二級(jí)頁的處理），大面積的硬水墨（質(zhì)感輕盈而形態(tài)干脆）疊加高飽和色彩，最大化呈現(xiàn)《劍靈》美術(shù)優(yōu)勢(shì)，強(qiáng)化整體視覺沖擊。 經(jīng)過與項(xiàng)目組/品牌經(jīng)理/多媒體設(shè)計(jì)師等分析及討論，決定取消最初設(shè)定的“種族/職業(yè)選擇頁”，采取職業(yè)展示為主，種族介紹為輔的呈現(xiàn)方式，即圖4方案獲得共識(shí)。 職業(yè)二級(jí)頁部分 資源支持方面，韓方并未如事先溝通的那樣提供帶Alpha通道的職業(yè)技能序列幀，而直接用“線性色鍵”做視頻摳圖提取，黑色邊緣明顯且粗糙，十分不理想，或?qū)?dǎo)致二級(jí)頁的職業(yè)技能展示效果大打折扣！ 經(jīng)與動(dòng)畫設(shè)計(jì)同事溝通，背景特別添加了一筆100%純黑的潑墨（與首頁透明彩墨的處理方式并不一致），同時(shí)為了平衡“介紹性圖文展示”與“技能視頻展示”的面積比例，適當(dāng)控制了墨的范圍大小，視頻則采用“濾色”模式疊放在墨上，保證了最大程度還原視頻效果。 圖1.內(nèi)容居中，以原定的原畫主形象及金色背景做效果展示。
圖2.整體灰色調(diào)的設(shè)計(jì)，與圖1不同，替換了原尺寸視頻幀的效果展示（角色技能的邊緣很毛糙）。
圖3.技能視頻部分，與韓方溝通并提供大尺寸視頻幀后的展示效果（視頻超出墨跡部分變得透明，不甚理想）。
圖4.內(nèi)容居左，以游戲截圖為背景的展示效果（視頻超出墨跡部分依然顯得透明，但效果可以接受）。 綜合考量，顯然，圖4方案得以優(yōu)化執(zhí)行。 五、設(shè)計(jì)執(zhí)行與制作 確定風(fēng)格后，設(shè)計(jì)執(zhí)行階段主要進(jìn)行了大面積的視覺元素的重新繪制或優(yōu)化處理，以及各個(gè)欄目的表現(xiàn)方式等工作： 1.修飾主要角色素材并進(jìn)行視覺聚焦處理，為職業(yè)角色設(shè)定五種色彩及相應(yīng)的水墨走勢(shì)，并配套噴濺墨滴的運(yùn)用。
2.職業(yè)二級(jí)頁的介紹性圖文展示進(jìn)行了較多的排版調(diào)整，繪制蛛網(wǎng)圖等。
3.其他欄目均在當(dāng)前頁上以80%黑幕遮蓋的彈出形式呈現(xiàn)。 最終效果 職業(yè)形象展示： 職業(yè)詳細(xì)介紹： 其他部分頁面： 動(dòng)畫制作環(huán)節(jié)：
一個(gè)互動(dòng)站的制作，設(shè)計(jì)稿的完成或許才僅僅進(jìn)行了項(xiàng)目進(jìn)度的一半，動(dòng)畫實(shí)現(xiàn)當(dāng)中的交互邏輯梳理，以及設(shè)計(jì)配套調(diào)整亦是極為關(guān)鍵，《劍靈》預(yù)告站在這個(gè)階段進(jìn)行的較明顯的視覺優(yōu)化約二十條，交互優(yōu)化則更多一些，此處不再贅述。 六、一些遺憾（或算是收獲） 《劍靈》的視覺素材或讓很多項(xiàng)目艷羨，但當(dāng)我們需要整理出一套風(fēng)格便于整合收納進(jìn)這個(gè)互動(dòng)站的素材時(shí)，依然捉襟見肘，比如：市面上好評(píng)如潮的2D原畫等均不能匹配互動(dòng)站的新意設(shè)定。所以，與其他很多網(wǎng)站項(xiàng)目一樣，制約——處處可見。 資源制約：
1.職業(yè)技能視頻的序列幀，韓方未能提供，致使最終上線效果中壓縮后的技能視頻展示部分顯得十分模糊。
2.對(duì)應(yīng)技能視頻中的角色形象大圖，韓方未能提供，致使職業(yè)角色形象與二級(jí)頁的技能視頻角色不對(duì)應(yīng)，十分遺憾。
3.高清游戲截圖，韓方未能提供，最終使用的大尺寸截圖均為網(wǎng)上搜索的韓國玩家素材處理完成。
4.素材需求中提出的山石植物等組件，韓方未能提供，在游戲截圖中摳圖+繪制補(bǔ)缺完成，最終效果顯生硬。 時(shí)間制約：
1.為了趕2011年TGC的檔期，原定的“種族版本”的預(yù)告站因受限工期未能出爐。
2.職業(yè)技能視頻對(duì)應(yīng)的技能圖標(biāo)中文名稱無法及時(shí)確定，最終只能以“技能一/二/三”代替，使技能視頻的信息傳達(dá)略顯蒼白。 ★ 其他：
交互設(shè)計(jì)中未能考慮周全，在后期需要活動(dòng)推廣等渠道時(shí)不能很好支撐。 七、結(jié)語 設(shè)計(jì)《劍靈》互動(dòng)站的這個(gè)過程很艱辛，但于我個(gè)人是一次升華，不同于曾效力的《QQ仙俠傳》，同為水墨與時(shí)尚調(diào)性的結(jié)合，這次是另一種風(fēng)格或另一個(gè)維度的嘗試，亦來的更加酣暢淋漓，學(xué)習(xí)駕馭水墨的過程，很難忘。 盡管有些微掣肘，但依然希望做到《劍靈》預(yù)告站最終感覺能如一位絕世美女，步履姍姍，翩若驚鴻，每一度轉(zhuǎn)身都凌厲而風(fēng)姿優(yōu)雅，每一幕切換都璀璨而光華奪目…… 她，為你期待，為你而來！

---

原文作者： pavo
原文地址：http://tgideas.qq.com/webplat/info/news_version3/804/808/810/m579/201204/61474.shtml 轉(zhuǎn)載請(qǐng)注明：靈智飛揚(yáng) » 奢華視覺中的低調(diào)設(shè)計(jì)——《劍靈》預(yù)告站回顧總結(jié)（設(shè)計(jì)經(jīng)驗(yàn)談） 登錄收藏

學(xué)UI就上靈智飛揚(yáng)！越努力，越幸運(yùn)！

“靈智飛揚(yáng)www.lingzhifeiyang.com?”最值得關(guān)注的UI學(xué)習(xí)平臺(tái)！ 每天發(fā)布高質(zhì)量的設(shè)計(jì)教程和分享設(shè)計(jì)經(jīng)驗(yàn)，服務(wù)于20萬UI設(shè)計(jì)師,幫助初學(xué)者快速轉(zhuǎn)型。 ，給大家提供更多免費(fèi)學(xué)習(xí)的機(jī)會(huì)。想成為設(shè)計(jì)師的你快來關(guān)注吧！ 【特色推薦】 “APP截圖站www.lingzhifeiyang.com”??海量APP截圖，讓你靈感爆發(fā)！國內(nèi)最好的APP截圖站。 “國內(nèi)最棒的UI設(shè)計(jì)導(dǎo)航站” 專為UI設(shè)計(jì)學(xué)習(xí)者打造的資源＋學(xué)習(xí)，雙用途的網(wǎng)址導(dǎo)航站。親愛的，你收藏了嗎？ 【靈智飛揚(yáng) 原創(chuàng)文章 ，也可以找各個(gè)群的管理】  給靈智飛揚(yáng)打氣，加油 ?猛點(diǎn)這里?>>