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