一網(wǎng)學(xué)是國(guó)內(nèi)較早從事遠(yuǎn)程培訓(xùn)的機(jī)構(gòu)，是較好的網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)基地。創(chuàng)新的模式讓在職人員能夠工作學(xué)習(xí)兩不誤，省去了家里培訓(xùn)點(diǎn)來回跑的時(shí)間。讓二三線以及偏遠(yuǎn)地區(qū)的設(shè)計(jì)愛好者能足不出戶也享受來自一線城市老師的培訓(xùn)。遠(yuǎn)程教學(xué)可以把上課內(nèi)容全程錄制，這樣方便學(xué)員課后反復(fù)復(fù)習(xí)，從而讓學(xué)員隊(duì)老師講解的內(nèi)容真正做到的掌握。 做做——QQ飛車感恩三周年、QQ西游安全中心 下面我們來自己動(dòng)手試一試。為主題選擇合適的“抄現(xiàn)實(shí)”物，并對(duì)其進(jìn)行特征提煉，把握內(nèi)容排版與物的關(guān)系，并注意細(xì)節(jié)搭配，讓整體更加深動(dòng)。 《劍靈》武神塔介紹專題 需求分析 1.主題 是武神就上100層，“武神塔”是劍靈游戲測(cè)試新版本中推出的一個(gè)特色內(nèi)容，它是一個(gè)比武場(chǎng)，由底層到高層，難度逐層增加。頁(yè)面的內(nèi)容主要分為三部分，視頻、武神塔副本的介紹，以及七層塔中的BOSS和掉落的寶貝的介紹。需求方希望內(nèi)容的呈現(xiàn)能夠結(jié)合武神塔的造型進(jìn)行表現(xiàn)。 2.排版預(yù)想 為了更好的表現(xiàn)主題并結(jié)合塔的造型，我們選擇使用抄現(xiàn)實(shí)的方法，并計(jì)劃利用塔的造型來裝下這些信息。但如果將塔的造型與內(nèi)容相結(jié)合我們將面臨三個(gè)問題。一，保留些塔的特征；二，文字內(nèi)容放在；三，梳理幾塊內(nèi)容的層次。 3.現(xiàn)有素材 大概理清思路后，我們來看看現(xiàn)有的素材，都說巧婦難為無米之炊，坦若著實(shí)無米，那那那就得自己種！開個(gè)玩笑，不過對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來說，真正對(duì)到槍口上的素材并不多，許多時(shí)候咱都得變著法子玩。 武神塔 一張武神塔的外景，拿到素材的時(shí)候它的像素并不高，只能暫時(shí)考慮作為背景的一小部分，如果要將內(nèi)容放置在塔內(nèi)的話，這個(gè)素材的編輯難度比較大。 另外還有兩張武神塔的內(nèi)景截圖，圖片質(zhì)量不錯(cuò)，但似乎對(duì)這個(gè)創(chuàng)意起不了太大的幫助。但姑且先留著。 BOSS 這是每層塔內(nèi)的BOSS截圖，與此類似的這套圖一共有七張，這是游戲過程中的截圖，所以人物偏小，質(zhì)量也不如原畫和正式輸出的3D模型高。而這些個(gè)BOSS又是內(nèi)容中必需給玩家呈現(xiàn)的，所以揚(yáng)長(zhǎng)避短這又是一個(gè)難題。 人物 劍靈現(xiàn)有的游戲素材大致可以分為三種：3D、2D、GIF的惡搞Q版小動(dòng)畫。 3D是一個(gè)很寫實(shí)的風(fēng)格，如果將其與具體的塔造型結(jié)合并還要盛放信息內(nèi)容的話，那需要繪制出與其匹配的精度，一方面操作難度比較大，另一方面也不利于信息的呈現(xiàn)和查閱，由于過分寫實(shí)，版式的局限性也比較大。 2D的素材相對(duì)于3D來說相對(duì)更概念化一些，但是要繪制出與其匹配精度的塔也是有一定困難的，而且對(duì)于一個(gè)小版本介紹專題來說時(shí)間也比較有限。 第三類，是劍靈的一個(gè)有愛化表現(xiàn)素材，是一些周邊的GIF表現(xiàn)，繪制簡(jiǎn)潔，表現(xiàn)力強(qiáng)，也比較具有情感化。繪制出與之匹配的精度的塔的造型也相對(duì)比較容易。確實(shí)算是個(gè)不錯(cuò)的方向。 4.總結(jié) 通過對(duì)主題、內(nèi)容、素材的了解，我們就有了大概的構(gòu)思。 我們將通過一個(gè)簡(jiǎn)潔的塔造型去承載整個(gè)信息內(nèi)容，并配合以Q版有愛的小動(dòng)畫形像視覺活躍氣氛。 每層塔的內(nèi)容安置在獨(dú)立的單層塔中，并通過七層塔的組合構(gòu)成一個(gè)高聳入云的塔型 在選定方向的同時(shí)也帶來一個(gè)問題，簡(jiǎn)約的風(fēng)格和必需出現(xiàn)的BOSS截圖風(fēng)格匹配？精度和風(fēng)格之間的差異都會(huì)造成視覺的不統(tǒng)一。如果一時(shí)找不到答案，我們暫時(shí)把這個(gè)問題放在腦子的待處理區(qū)。策略從來不是萬(wàn)全的，在大方向確定之后，許多細(xì)節(jié)的問題是在設(shè)計(jì)中一步步變法求解的。當(dāng)然，這個(gè)方法并不是較好的，但卻是我們經(jīng)常遇到的情況，天時(shí)地利，情投意合的情況是少有的，如果要求以萬(wàn)全的策略才開工，那時(shí)間和環(huán)境都是不允許的，就像那句話么說來著，愛情就像一條河,誰(shuí)不是摸著石頭過河呢?所以在大方向確定后，我們就開始嘗試動(dòng)手了。 設(shè)計(jì)分解 STEP 1 減法 游戲中，武神塔擁有它復(fù)雜的飛檐造型和層次豐富的質(zhì)感紋理，每層有大小不一的拱門。為了能給信息內(nèi)容足夠的空間，我們將復(fù)雜的飛檐造型進(jìn)行歸納，并暫時(shí)去掉了拱門，這樣我們也比較明確了信息內(nèi)容的位置。 STEP 2 分塊 接下來我們就需要開始對(duì)內(nèi)容進(jìn)行分塊，我們知道內(nèi)容大致分為三塊，視頻、副本介紹、七層塔。由于七層塔的數(shù)量較多，為了能使它與介紹和視頻內(nèi)容有區(qū)別并保持七層的統(tǒng)一性，我們將它們進(jìn)行顏色的區(qū)分。并在位置上依照塔的物理順序，由下而上從一層到七層。由于內(nèi)容較長(zhǎng)，每層塔可以做成收納的形式，以便控制長(zhǎng)度。 STEP 3 加法 將拱門重新安置在分層塔的左側(cè)，用來安放每層比武塔的主BOSS，要主視覺的塔頂加入主視覺調(diào)節(jié)氣氛，在背景加入其它的建筑造型。并將主視覺的內(nèi)容塔置于一個(gè)高聳入云的角度，體現(xiàn)了“是武神就上100層”的概念高度。 回頭說說先前留下的那個(gè)風(fēng)格匹配的顧慮。降低寫實(shí)的游戲內(nèi)截圖與相對(duì)簡(jiǎn)約風(fēng)格畫面的沖突感。瀏覽截圖我們發(fā)現(xiàn)，它們都是塔內(nèi)的場(chǎng)景，并且基本上是平視的角度，于是便在畫面上開了一道立體的門，將場(chǎng)景安置在門后，一致的視角可以增強(qiáng)畫面的統(tǒng)一感。門的微寫實(shí)表現(xiàn)對(duì)截圖和塔的兩種風(fēng)格進(jìn)行了中間過渡，減弱了二者沖突感。 一網(wǎng)學(xué)，我的未來我設(shè)計(jì)。