形式感之「超」現實
本文字數：3545字
閱讀時間：約7分鐘
作者：晉小彥
騰訊互動娛樂 高級設計師
《形式感+》設計出版物作者
《設計葯電》網路電台主播
電台旗下三個欄目《設計蛋白粉》《設計微顆粒》《設計交流電》
《形式感+》內容不涉及任何網頁前端程序開發或PS操作步驟，也沒有精深複雜的平面構成和色彩搭配理論。希望通過分享幫助有一定基礎的網頁設計初學者或在職者，在遇到設計創意瓶頸時，能夠在較短的時間內解決設計上的創意和視覺形式感的問題。不論是應對緊急的工作需求或是求職面試都能夠給觀者一個新穎的視覺表現。
以下為正文
「超」現實是我們在設計中最直接也是常用的一種方法，它顧名思義就是參考現實中存在的物體。因為其結果直接與主題相關聯，所以「超」現實的方法可以讓視覺整體更有整體感，主題更突出。它將抽象的主題通過實體的事物表達出來，並以之做為內容信息的承載體，從而在第一視覺上直觀的體現了核心內容並突出主題。
說說——就是參考現實中的物體
簡單的意義上說就是眼前所能見到的一切事物，正如你現在手中的書本、手指、桌上的檯燈、水杯。這些生活中的事物通常具有豐富的形態和其延展的情感意義，我們可以利用它們來表達一些特定的主題。所以當我們接收到一個表現主題時可以通過它的生活原貌來激發靈感。
這裡所指的現實是任何可以被我們認知的可視的物體（文中部分圖片來源於網路，如涉及任何版權問題，請聯繫騰訊遊戲學院）
想想——「超」現實的三步驟減法、分塊、加法
讓我們暫且拋開主題，就一個物體可以如何變成網頁而言，它有兩個關鍵點，第一是現實物轉換成網頁載體過程中的形態取捨，如何讓觀者既能辨識出參考的物體，又能夠給未來信息留下足夠的自由的排版空間；第二是信息內容與形態載體的結合和排版，如何讓信息內容完整的有條理的排布到形態載體中。
選擇物，是對主題視覺表現的選擇。主題有抽象和具象。具象的主題一般比較好把握，如棒球比賽，我們很自然的選擇棒球或球場做為主視覺。如果一些間接或者抽象的主題比如安全選擇盾牌、壓力測試選擇壓力表等，這些都需要我們發揮一定的想像。
下面我們來一起看看這一顆棒球的網頁變形記。
在還未翻到下一頁前，你可以想像一下，假如這個棒球是一個網頁，它會是什麼樣的？你會保留它的哪些特徵讓它看起來依然是一個棒球而非籃球，你會如何讓它的形態和內容結合，你會如何利用它的形態關係使你的內容更有層次。給自己一分鐘時間，不許翻頁劇透。
STEP 1：減法
為了不使形態干擾到網頁內容的表現，通常情況下，我們會先對物的形態進行簡化，使其在保留特徵的同時更適合之後內容的安置。簡化的步驟有兩個：
1.特徵的提練，如案例中的棒球，它的特徵有兩個，一個是圓形的輪廓代表是一個球體，另一個是紅色的縫線，代表它是一個棒球而非足球或籃球。
2.審查刪除重複的描述。特徵提煉後，在保留棒球特徵的情況下，我們選擇去掉其中一根縫線，為信息騰出更多可操作的空間。
STEP 2：分塊
分塊以便根據物的形態對網頁的信息內容進行規劃。主要有三個關鍵點：
1.對信息進行消化。充分的理解信息對之後的排版和信息調整有很大的幫助。這時也可以和需求方進行溝通對信息進行微調或收納；
2.在吃透信息後，我們就可以開始正式的分塊，分塊是一個逐層深入由粗到細的過程；
3.分塊完成後，我們結合造型進行一定的信息和造型微調。
STEP 3：加法
進行加法前，網頁大致的雛形已經出來了，之後加法的工作主要有三個：
1.具體內容的填充；
2.氣氛和視覺的補充，讓整體效果更真實，如前景的人物添加使棒球的主題更明確，運動感更強；
3.特徵的還原和細節補充。不得不承認信息高於裝飾。在確保信息的完整性後，我們在不干擾信息呈現的情況下還原一些原來刪去的細節，如背景縫線的還原，選擇了低透明低飽合的淺灰色，讓棒球更真實。
當我們瀏覽這個頁面時，強視覺衝擊力的棒球大效果映入眼帘。簡單的視覺掃描我們便立刻了解了這個專題的核心主題。結構清晰、主題明確，視覺強烈。這就是我們「超」現實帶來的直接而有效的視覺效果。
總結：
「超」現實的過程是利用現實物的原型來裝載網頁的信息內容，它就像舊公寓改造，倘若我們將「超」現實想像成一個舊公寓改造工程，假定我們和房子原主人有著不同的生活習慣，我們就需要拆牆，重新劃分功能區，重新裝修裝飾。也正如我們「超」現實的方法：減法、分塊、加法。下面我們來具體看看它們的相通之處。
1.減法
首先根據我們的生活需要，我們會選擇一個形態大小合適的房子。這個房子要滿足居住人的基本功能需求，整體的改造也需要核算在可操控的成本範圍，選定房子後我們可能會先拆去原先的分割的圍牆，方便我們不受限制的設計出更貼合現有需求的空間。網頁設計也是一樣，原先的細節經常是束縛我們想像和內容設置的枷鎖。當然我們也不能無限制的拆牆，保留樑柱和承重牆是必需的，這也便是我們「超」現實網頁設計方法中提到的特徵，房子必需還是房子，參考的事物必需能被識別，這是刪減的底線。總而言之我們歸納為三點，一、選房要合適，選對房可以為後面的工作節省最大的成本。二、拆牆越乾淨操作的自由度越高，同時也要考慮重建的成本。三拆牆不能毀樑柱，保留樑柱和保留物體特徵一樣重要，沒有了它們，不論房子還是現實物都將不復存在。
2.分塊
在功能劃分前，我們必需再梳理一遍自己的生活需求，這正如我們在進行網頁分區前所要做的信息消化。比如我們希望一個更大的洗浴間，或者希望將客廳娛樂與卧室一體化，這時候我們可以在房子的基本大輪廓內，結合管道的基本設置進行空間的重新劃分。分塊的這個步驟主要是解決功能性問題。滿足功能需要才使我們一切行為變得有意義。網頁設計中的這些信息內容就如同我們住家的吃喝拉撒睡，這些是最重要的。
3.加法
與分塊解決的功能性問題相比較起來，加法解決的則是填充和裝飾的問題。在做完分區並完善好了基礎裝修之後，我們就可以陸續將我們的生活用品搬進房子，配置家電、沙發什麼的。這也正如我們網頁設計中的內容填充。如果時間和金錢充裕我們可以購買符合自己個性的裝飾物，調整燈光氣氛等，讓我們的生活環境看起來更有情趣也正如使我們的網頁看起來更生動一樣。它是一種錦上添花，它可以為你的視覺加分，但切忌過於繁重而影響到了功能的使用，畢竟家不是博物館，網頁信息傳播才是最重要的。
看看——「超」現實讓網頁主題一目了然、不言而喻
下面我們通過「減法、分塊、加法」這三個步驟來欣賞和分析一些網頁案例。在關注大的方法的同時，也可以學習它們創意思路以及對於細節的處理方式。我們還可以關注近似主題的不同參考物，以及相同參考物的不同表達方式。
一個主題，我們可以有多種的聯想，並呈現出不同的設計表現。關於春節的聯想有很多，歡聚、團圓、紅包、鞭炮、禮花、祝福。製作前，我們的設計結果有著多種的可能性。下面我們看看三個關於春節的案例，它們選擇了不同的參考對像，為我們呈現了不同的春節視覺。
這是一個春節活動大盤點主題頁面，頁面由六個活動組成，每個活動只呈現其活動名稱和時間，內容並不多。這裡作者引用了春節團圓的聯想，選擇了團圓桌來作為參考對像。每個活動為圓桌上的一個成員席位。紅黃色的桌子和藍色的紋理背景，讓顏色飽滿，年味兒十足。
1.減法：減法不僅僅包括細節上的刪減，也包括角度變換和視覺替代，這些都依據實際網頁的信息量而定。這個案例改變了圓桌的日常視覺角度，轉以俯視的角度替代，俯視角度給內容擺放留下足夠空間，並能以最均衡的方式呈現六個席位的活動信息。
2.分塊：圓桌分為六個成員席，每個席位代表一個活動。主SLOGAN視覺安置在圓桌中間的轉盤上，其它的按鈕和補充說明信息置於圓桌之外的區域。
3.加法：在基礎內容填充完整後，作者在桌上加入了筷子，進入按鈕使用醬碟來裝載。近景模糊的綠葉加入，使畫面有了前後的景深關係，也讓紅綠色彩的搭配更加飽滿。
這是一個DNF的黑鑽推廣、訂製和續費的頁面，黑鑽是針對DNF的VIP用戶開設的遊戲特權圖標，在這裡，作者選擇了黑鑽的形態作為整體的網頁視覺載體。主題明確而直觀。
1.減法：在選定黑鑽為專題的參考物後，作者開始通過減法刪去黑鑽的立體切面光澤，保留了鑽石的外輪廓和黑色。把「黑」和「鑽」有效的提煉出來。
2.分塊：根據頁面內容和黑鑽的輪廓線，作者通過與其外形相平行吻合的斜線進行分區，在這個部分我們可以看到作者對右側表格的精巧優化。
3.加法：空間分塊和進行內容的填充完成後，作者加入了左側低胸手持紅酒杯的遊戲人物以及寫實的黑鑽，將黑鑽的尊貴的身份交待完整，底部的人物圖形的小提示和右下方的寶箱圖片對多餘的空間進行了填充也讓頁面更加完整和生動。
做做——《劍靈》武神塔介紹專題
下面我們來自己動手試一試。為主題選擇合適的「超」現實物，並對其進行特徵提煉，把握內容排版與物的關係，並注意細節搭配，讓整體更加生動。
需求分析
1.主題
是武神就上100層，「武神塔」是劍靈遊戲測試新版本中推出的一個特色內容，它是一個比武場，由底層到高層，難度逐層增加。頁面的內容主要分為三部分，視頻、武神塔副本的介紹，以及七層塔中的BOSS和掉落的寶貝的介紹。需求方希望內容的呈現能夠結合武神塔的造型進行表現。
2.排版預想
為了更好的表現主題並結合塔的造型，我們選擇使用「超」現實的方法，並計劃利用塔的造型來裝下這些信息。但如果將塔的造型與內容相結合我們將面臨三個問題。一，保留哪些塔的特徵；二，文字內容放在哪；三，如何梳理幾塊內容的層次。
3.現有素材
大概理清思路後，我們來看看現有的素材，都說巧婦難為無米之炊，坦若著實無米，那那那就得自己種！開個玩笑，不過對於網頁設計來說，真正對到槍口上的素材並不多，許多時候咱都得變著法子玩。
武神塔，一張武神塔的外景，拿到素材的時候它的像素並不高，只能暫時考慮作為背景的一小部分，如果要將內容放置在塔內的話，這個素材的編輯難度比較大。另外還有兩張武神塔的內景截圖，圖片質量不錯，但似乎對這個創意起不了太大的幫助。但姑且先留著。
BOSS，這是每層塔內的BOSS截圖，與此類似的這套圖一共有七張，這是遊戲過程中的截圖，所以人物偏小，質量也不如原畫和正式輸出的3D模型高。而這些個BOSS又是內容中必需給玩家呈現的，所以如何揚長避短這又是一個難題。
人物，劍靈現有的遊戲素材大致可以分為三種：3D、2D、GIF的惡搞Q版小動畫。
3D是一個很寫實的風格，如果將其與具體的塔造型結合併還要盛放信息內容的話，那需要繪製出與其匹配的精度，一方面操作難度比較大，另一方面也不利於信息的呈現和查閱，由於過分寫實，版式的局限性也比較大。
2D的素材相對於3D來說相對更概念化一些，但是要繪製出與其匹配精度的塔也是有一定困難的，而且對於一個小版本介紹專題來說時間也比較有限。第三類，是劍靈的一個有愛化表現素材，是一些周邊的GIF表現，繪製簡潔，表現力強，也比較具有情感化。繪製出與之匹配的精度的塔的造型也相對比較容易。確實算是個不錯的方向。
4.總結
通過對主題、內容、素材的了解，我們就有了大概的構思。我們將通過一個簡潔的塔造型去承載整個信息內容，並配合以Q版有愛的小動畫形像視覺活躍氣氛。每層塔的內容安置在獨立的單層塔中，並通過七層塔的組合構成一個高聳入雲的塔型。
在選定方向的同時也帶來一個問題，簡約的風格和必需出現的BOSS截圖風格如何匹配？精度和風格之間的差異都會造成視覺的不統一。如果一時找不到答案，我們暫時把這個問題放在腦子的待處理區。策略從來不是萬全的，在大方向確定之後，許多細節的問題是在設計中一步步變法求解的。當然，這個方法並不是最好的，但卻是我們經常遇到的情況，天時地利，情投意合的情況是少有的，如果要求以萬全的策略才開工，那時間和環境都是不允許的，就像那句話怎麼說來著，愛情就像一條河,誰不是摸著石頭過河呢?所以在大方向確定後，我們就開始嘗試動手了。
STEP 1 減法
遊戲中，武神塔擁有它複雜的飛檐造型和層次豐富的質感紋理，每層有大小不一的拱門。為了能給信息內容足夠的空間，我們將複雜的飛檐造型進行歸納，並暫時去掉了拱門，這樣我們也比較明確了信息內容的位置。
STEP 2 分塊
接下來我們就需要開始對內容進行分塊，我們知道內容大致分為三塊，視頻、副本介紹、七層塔。由於七層塔的數量較多，為了能使它與介紹和視頻內容有區別並保持七層的統一性，我們將它們進行顏色的區分。並在位置上依照塔的物理順序，由下而上從一層到七層。由於內容較長，每層塔可以做成收納的形式，以便控制長度。
STEP 3 加法
將拱門重新安置在分層塔的左側，用來安放每層比武塔的主BOSS，要主視覺的塔頂加入主視覺調節氣氛，在背景加入其它的建築造型。並將主視覺的內容塔置於一個高聳入雲的角度，體現了「是武神就上100層」的概念高度。
回頭說說先前留下的那個風格匹配的顧慮。如何降低寫實的遊戲內截圖與相對簡約風格畫面的衝突感。瀏覽截圖我們發現，它們都是塔內的場景，並且基本上是平視的角度，於是便在畫面上開了一道立體的門，將場景安置在門後，一致的視角可以增強畫面的統一感。門的微寫實表現對截圖和塔的兩種風格進行了中間過渡，減弱了二者衝突感。
網頁設計圖
TAG:騰訊遊戲學院 |