騰訊美女設計師教你如何抄現實

 　　晉小彥(騰訊 TGI 高級視覺設計師，美女設計師一枚)：抄現實是我們在設計中最直接也是常用的一種方法，它顧名思意就是抄襲現實中存在的物體。因為其結果直接與主題相關聯，所以抄現實的方法可以讓視覺整體，主題突出。它將抽像的主題通過實體的事物表達出來，並以之做為內容信息的承載體，從而在第一視覺上直觀的體現了核心內容並突出主題。

　　這裡所指的現實是任何可以被我們認知的可視的物體

　　選擇物，是對主題視覺表現的選擇。主題有抽像和具像。具像的主題一般比較好把握，如棒球比賽，我們很自然的選擇棒球或球場做為主視覺。如果一些間接或者抽像的主題比如安全選擇盾牌、壓力測試選擇壓力表等，這些都需要我們發揮一定的想像。

　　下面我們來一起看看這一顆棒球的網頁變形記。

　　在還未翻到下一頁前，你可以想像一下，假如這個棒球是一個網頁，它會是什麼樣的?你會保留它的哪些特征讓它看起來依然是一個棒球而非籃球，你會如何讓它的形態和內容結合，你會如何利用它的形態關系使你的內容更有層次。給自己一分鐘時間，不許翻頁劇透。

　　步驟分解

　　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. 減法：在選定黑鑽為專題的抄襲物後，作者開始通過減法刪去黑鑽的立體切面光澤，保留了鑽石的外輪廓和黑色。把”黑”和”鑽”有效的提煉出來。