晉小彥視覺設(shè)計(jì)系列文章（二）：全屏大視野

【編者注】本文來自騰訊科技高級視覺設(shè)計(jì)師@晉小彥 推薦的視覺設(shè)計(jì)系列文章，接下來的幾個(gè)星期將在互聯(lián)網(wǎng)的一些事上陸續(xù)推出續(xù)篇，敬請留意!下來請來看第三篇連載內(nèi)容《圓、方、三角》。

　　系列文章

　　《視覺設(shè)計(jì)系列文章(一)：抄現(xiàn)實(shí)》

　　《視覺設(shè)計(jì)系列文章(四)：欲擒故縱》

　　七巧板，或許我們小時(shí)候都玩過，我們曾利用它簡單的拼出我們想像中的各種動物花鳥的形態(tài)，有時(shí)我們也會有意外的造型收獲。正如這七巧板，圓形和方形與三角形則是網(wǎng)頁造型結(jié)構(gòu)中的精髓元素的歸納，即使再豐富生動的物體也可以由它們組成?，F(xiàn)在我們利用它進(jìn)行網(wǎng)頁框架的打造，不知道會不會有意外的驚喜呢。

　　說說——三種基礎(chǔ)形態(tài)組合的視覺盛宴

　　做為自然界視覺的三種基礎(chǔ)形態(tài)，它們分別由直線、折線、弧線組成。

　　圓

　　它由弧線組成，外形光滑圓潤飽滿，這樣的形態(tài)通常讓我們浮現(xiàn)一些可愛、靈動的、有親和力的畫面想像，它通常在一些Q版的、歡樂的主題中較常出現(xiàn)。

　　方

　　這是一個(gè)最整潔的形態(tài)，它由直線構(gòu)成。它在門戶網(wǎng)頁和報(bào)紙的排版中最常出現(xiàn)，因?yàn)樵陂喿x瀏覽方面方形可以盡量排除形態(tài)上的干擾，橫平豎直以最整潔的方式梳理信息。所以方形經(jīng)常出現(xiàn)在信息量較大的頁面中，或者莊重的、嚴(yán)肅、情感內(nèi)斂的主題中。但方形這種橫平豎直的、一絲不茍的整齊有時(shí)也顯得呆板、生硬。

　　三角

　　它是由折線尖角構(gòu)成的，形態(tài)上有急轉(zhuǎn)直下的意思，尖銳的造形給人以強(qiáng)烈的情感刺激和反差。傾斜的角度也會帶給人以速度感。所以三角的形態(tài)給我們帶來的感受通常是刺激的、運(yùn)動的、時(shí)尚的、尖銳的。這樣的形態(tài)時(shí)常會出現(xiàn)在一些，時(shí)尚運(yùn)動品牌、或體現(xiàn)速度感、暴力、刺激等主題中。

　　眾觀我們?nèi)粘５捻撁?，方形因?yàn)槠湔麧?、易識別、重構(gòu)性好的特點(diǎn)在網(wǎng)頁設(shè)計(jì)中應(yīng)用比較廣泛，但與此同時(shí)也容易讓人審美疲勞形成畫面生硬的映象，所以在非門戶或大型資料站等頁面時(shí)可以彩用圓、三角這另外兩個(gè)元素進(jìn)行調(diào)和。如內(nèi)容不多的小型資料頁。增強(qiáng)視覺上的靈動和刺激可以讓頁面快速抓住玩家的眼睛，達(dá)到專題快速傳播的效果。

　　簡單的說來圓方三角的優(yōu)點(diǎn)就是在形狀的理性情感牽引下，利用拼圖和類潑墨的方式打破習(xí)慣性思路，創(chuàng)造在自己預(yù)想之外的新奇效果。因?yàn)闆]有了細(xì)節(jié)的牽拌，所以我們對整體形態(tài)、色彩以及內(nèi)容的排版更加游刃有余。圓方三角的組合過程是一個(gè)將理性、運(yùn)氣、聯(lián)想集合一體的設(shè)計(jì)方法。

　　圓方三角設(shè)計(jì)方法的優(yōu)點(diǎn)

　　1. 打破習(xí)慣性思路

　　由于長期的經(jīng)驗(yàn)積累，我們通常會選擇一條合理的便捷的道路通往目的地，但這條路往往已被千萬人踩踏，缺少令人驚喜的風(fēng)景，圓方三角的思維方式正如中國的山水潑墨法，為我們枯竭的思維打開了創(chuàng)造性的任意門。這是一個(gè)冒險(xiǎn)的過程，但沒有冒險(xiǎn)也就沒有未曾被人發(fā)現(xiàn)過的美麗風(fēng)景。

　　2. 理性把握主線情感

　　選擇主形態(tài)就是掌控整體氣氛和情感的主線，在理性的選擇中潑墨，即可以不受思維限制，又可以使結(jié)果更接近于主題。另外，因?yàn)榛A(chǔ)元素的簡單，我們還可以在整體色彩的搭配上有較強(qiáng)的掌控力。由于在嘗試的過程中沒有具像的形態(tài)，所以受到的形狀和色彩的拘束較少。而基礎(chǔ)形狀和顏色的情感就可以更加充分的發(fā)揮。

　　3. 變幻靈活

　　無細(xì)節(jié)負(fù)擔(dān)，它不受實(shí)物的理性限制，它可以在多種可能性中跳來跳去，我們可以毫不憐惜的隨時(shí)撤銷原來的不合適的想法并奔向另外一個(gè)更有意思的創(chuàng)意。信息排版方面面，可以快速調(diào)整版塊和文字比例，在一種非完全具像的實(shí)物中我們可以較靈活的調(diào)整它變換部分的空間比例大小來適應(yīng)我們內(nèi)容的擺放。

　　想想——七巧板組合和天馬行空聯(lián)想聯(lián)系

　　一、七巧板聯(lián)系

　　我們簡單地使用這三種形態(tài)，進(jìn)行一個(gè)合并、交集、排除的拼合，可以放大縮小任一形狀。在這個(gè)過程中有兩點(diǎn)需要注意。

　　1、注意主形。

　　為了保證整體造型的美感，我們需要選擇其中一種形作主形，避免形成大形不清晰，小形各自獨(dú)立的情況。

　　2、注意形的情感和空間想象。

　　根據(jù)主形的不同，畫面會產(chǎn)生不同的情感，把握情感可以增強(qiáng)哦們對空間的想象。在聯(lián)系過程中我們可以感受到未來頁面豐富的形態(tài)變化。

　　我們只是在此作了一些簡單的嘗試，圓方三角的組合還有許多。在日常的頁面設(shè)計(jì)中我們可以根據(jù)內(nèi)容進(jìn)行頁面基礎(chǔ)框架的打稿。

　　二、天馬行空環(huán)節(jié)

　　在這個(gè)環(huán)節(jié)中我們可以對任意打出的草稿進(jìn)行形態(tài)想像。它有一定的目的性。我們可以結(jié)合主題來變換各種幾何搭配，不斷刺激尋找到創(chuàng)作的G點(diǎn)。將我們草圖中的概念結(jié)構(gòu)形態(tài)轉(zhuǎn)換成具體的事物。

　　我們拿上一張的左一圖形舉例，

　　它是一個(gè)以方形為主三角為輔，小圓為最次的形態(tài)。這樣的形態(tài)是豐富而飽滿的，含有三種元素，并且有主有次。在我們打好滿意的框架造型后就可以開始實(shí)物化的設(shè)想與制作了。

　　它可以是一個(gè)信封、可以是測量器、也可以是棒球場。而它們都源于同一種基礎(chǔ)的形態(tài)。

　　1，信封

　　在原形的基礎(chǔ)上補(bǔ)充了三角，就形成了一張信封，加入層次和陰影，信息造型更加深動，如果做為郵件或祝福等主題聯(lián)想，這樣一個(gè)框架就能夠派得上用場了。

　　2，測量器

　　在原形的基礎(chǔ)上補(bǔ)充了一個(gè)圓形，加入刻度和指針，它就購成了一個(gè)測量器，可以是體重測量器或者壓力表等等，比如這是一個(gè)壓力測試的活動專題或許這個(gè)形態(tài)便可用上。我們都可以在在一個(gè)基礎(chǔ)形態(tài)上根據(jù)主題來選擇它后續(xù)的變換方向。

　　3，棒球場

　　持大形不變，我們在細(xì)節(jié)處加入了45度旋轉(zhuǎn)的小方形，它就變換成了一個(gè)棒球場。下面我們來看看這個(gè)棒球場的具體頁面表現(xiàn)。

　　(如下圖)

　　三、細(xì)化豐肉

　　在確定了要轉(zhuǎn)換的對像并排布出相對合適的內(nèi)容擺放位置后，我們便可以安心的開始細(xì)化它的質(zhì)感顏色層次，并加上一些細(xì)節(jié)元素使整體表現(xiàn)更豐富飽滿。細(xì)化的過程主要有三個(gè)內(nèi)容。

　　1、顏色

　　圓方三角的組合是由粗到細(xì)由概念到具像的過程，所以它可以比較自由的把握色彩搭配關(guān)系。我們可以在建立圓方三角初期模形的時(shí)候就嘗試定義其色調(diào)，以免后期細(xì)化后再繁瑣的調(diào)整。

　　2、內(nèi)容布局

　　在信息排版的時(shí)候，因?yàn)槠洳灰?guī)則的形狀，我有時(shí)需要適當(dāng)調(diào)整字符和圖片內(nèi)容，并把握疏密和節(jié)奏。這個(gè)步驟接近于《抄現(xiàn)實(shí)》的分塊環(huán)節(jié)。

　　3、形態(tài)細(xì)化

　　顏色和內(nèi)容布局敲定后，我們就可以對形態(tài)進(jìn)行細(xì)化，加入質(zhì)量和細(xì)節(jié)，并添置與之對應(yīng)的裝飾。一個(gè)頁面便可以大體完成了。

　　從以上特性來看，《圓方三角》的做法似乎比較冒險(xiǎn)，不如《抄現(xiàn)實(shí)》來得穩(wěn)妥，《抄現(xiàn)實(shí)》是一種基于我們?nèi)粘＿壿嫷年P(guān)聯(lián)應(yīng)用。而《圓方三角》則是一種不斷自我疊代刺激大腦的想像。它不斷刺激我們在預(yù)期之外的聯(lián)想興奮點(diǎn)，激發(fā)出許多意想不到的創(chuàng)意，這些創(chuàng)意的角度、組合、色彩可能經(jīng)常超出自己日常邏輯的想像。

　　看看——設(shè)計(jì)是一個(gè)理性+運(yùn)氣+聯(lián)想的過程

　　這是一個(gè)俄羅斯方塊游戲，圓形的主形，使整體形態(tài)的主線感情更加有趣、Q版、靈動。時(shí)鐘分塊構(gòu)成的三角，給人游戲的刺激感。背景隱藏的方塊，一方面表示了這是一個(gè)俄羅斯方塊游戲另一方面又使圓方三角的造型更加飽滿。主形明晰，形態(tài)層次豐滿。

　　初看這個(gè)頁面似乎很難找到它的主形，但通過輔助線我們可以看到它的三角形態(tài)，與游戲LOGO的邊三角相互呼應(yīng)。在主形與LOGO的交接部分搭配了弧線，這種形態(tài)配合了游戲本身界與Q版與寫實(shí)之間的游戲角色風(fēng)格特點(diǎn)。兩邊的直線使整體的形態(tài)結(jié)構(gòu)進(jìn)一步飽滿化。整個(gè)頁面雖然各自為塊，卻渾然一體，剛?cè)岵?jì)。

　　三角做為這個(gè)頁面的主形，配以人物形成強(qiáng)烈的透視，給人以強(qiáng)大的視覺沖擊力。第二層形是圓形，它隱藏在棕色地面的弧形輪廓中，并與遠(yuǎn)處的藍(lán)色地球呼應(yīng)，第三層形是方形，它體現(xiàn)在游戲地圖的方格中和地面的方格紋理中。主形沖擊力強(qiáng)，圓方三角配合巧妙、形態(tài)飽滿。

　　這是一個(gè)基本由純粹圓形構(gòu)成的頁面，畫面柔和、可愛、靈動。文字排版的隱性方塊稍稍彌補(bǔ)了圓形造形的單一。整體頁面相對豐滿、有趣。

　　做做——QQ宋體西游愚人節(jié)專題

　　一、QQ西游愚人節(jié)專題

　　需求分析

　　1.主題

　　QQ西游滿城”魚人”鬧翻天這是一張我們?nèi)粘？赡苁盏降膩碜皂?xiàng)目的需求，內(nèi)容大致分為兩個(gè)格式并列的活動，版塊多、文字也不少。要做一張有形式感的頁看起來并不容易。怎么辦呢?

　　讓我們來簡單規(guī)劃一下吧。主題是什么?它的情感和氣氛是什么樣的?這是一個(gè)愚人節(jié)主題活動，在愚人節(jié)這一天，人們可以公然的理直氣壯的通過各種讓人意想不到的方式開朋友玩笑，無厘頭的陷井、報(bào)冷，戲弄者的歡笑與被戲弄者的驚岔構(gòu)成了我們對愚人節(jié)的映像。

　　2.關(guān)鍵詞聯(lián)想

　　看完交互需求稿后，我們圍繞”愚人節(jié)”這個(gè)主題開始了系列關(guān)鍵詞的聯(lián)想。有趣的、好玩的、搞笑的、刺激的，這些都是愚人節(jié)帶給我們的感受。另外在SLOGAN中，需求方將愚人諧音讀作”魚人”，并以魚人為對像展開整個(gè)活動內(nèi)容。捕魚和逃跑這樣兩個(gè)對稱的活動類型。

　　3.圓方三角的主形選擇

　　我們選擇”圓方三角”中的誰做為主形態(tài)?

　　陷井、驚岔、歡樂，對于這種映像的描素，三角和圓形成為了基礎(chǔ)形態(tài)中的兩個(gè)相對接近的選擇。

　　根據(jù)關(guān)鍵詞聯(lián)想，我們選擇了主形圓形和輔形三角。

　　圓形：靈動、活潑、有趣、可愛、多變。

　　三角：尖銳、不平衡、刺激、動感。

　　4.排版預(yù)想

　　內(nèi)容有多少?我們大致的布局構(gòu)想會是怎么樣的?

　　交互稿的內(nèi)容并不少，所以我們需要為它預(yù)留比較大的信息空間。

　　除了SLOGAN的主視覺之外，內(nèi)容分為三部分，概要、核心活動內(nèi)容、獎勵。其中最主要的是核心活動，它分為并列的兩大類，每類分別由四個(gè)小活動組成。這也便決定了我們未來的頁面結(jié)構(gòu)可能會傾向于一個(gè)對稱結(jié)構(gòu)的布局。

　　設(shè)計(jì)分解

　　圓方三角的設(shè)計(jì)過程是一個(gè)運(yùn)氣和理性、聯(lián)想相互刺激的過程，他們疊代著互相推進(jìn)。我們可以潑墨般的嘗試無數(shù)種方案，由運(yùn)氣不斷刺激靈感，靈感不繼產(chǎn)生新的體驗(yàn)，但我們也始終把握住理性的韁繩。所以圓方三角的方法將經(jīng)歷兩個(gè)三步，感性三步和理性三步。

　　感性三步：

　　STEP 1：迷茫和堅(jiān)持

　　使用圓的主形和三角的輔形進(jìn)行七巧板式的搭建，我們可以設(shè)定基礎(chǔ)的配色，這個(gè)階段可能是天馬行空的，有著多種不可預(yù)計(jì)的有趣結(jié)果在等待我們。但這也是一個(gè)痛苦的階段，大多的時(shí)候我們無法定義這個(gè)組合出來的圖形，并且可能在很長一段時(shí)間都沒有結(jié)果，在這個(gè)階段我們要做的最重要的一件事是堅(jiān)持。

　　STEP 2：漸入佳境

　　靈感可能在不定期的時(shí)候到來，就像等待另外一半的愛人一般，需要原則也需要包容。在這個(gè)案例七巧板的執(zhí)行中我們可能意外的收獲節(jié)一頂小丑帽，小丑有戲弄搞怪的意思，它似乎可以與主題產(chǎn)生一定的聯(lián)系，這個(gè)時(shí)候我們可以選擇接受，或者沖擊更適合的靈感火花。

　　STEP 3：情投意合

　　第二個(gè)火花出現(xiàn)了，它看起來像一條魚，而魚正好與需求方給出的魚人節(jié)的主題一致，并且在需求的活動中也是以抓魚為主題的，這是一個(gè)令人欣喜而興奮的結(jié)果。我們將帶著這種熱情繼續(xù)下面一個(gè)步驟，這種熱情會讓我們覺得設(shè)計(jì)是一個(gè)多么讓人興奮的事。

　　(如下圖)

　　理性三步：

　　STEP 4：打大框架

　　在知道了策劃需求后，我們大致清楚我們需要一個(gè)對稱的造型。根據(jù)魚人這個(gè)概念，我們通過圓方三角的基礎(chǔ)形狀打出一只魚的造型。在細(xì)化方案的階段我們必需確認(rèn)好色彩搭配的方案、信息內(nèi)容空間容量。因?yàn)檫@是一個(gè)逐步確認(rèn)的過程，這個(gè)時(shí)候我們需要更多的是理性。

　　STEP 5：為內(nèi)容進(jìn)行布局調(diào)整

　　這個(gè)部分我們主要服務(wù)于信息內(nèi)容，包括信息的類型、信息的層次、還有修飾信息的安放等。

　　STEP 6：擺文字和圖片

　　放入必需的圖片和文字進(jìn)行空間的比對，并進(jìn)一步切割形狀，豐潤細(xì)節(jié)，在這個(gè)過程中必需注意運(yùn)用顏色和形態(tài)大小保持每個(gè)版塊的主形，避免過于瑣碎。

　　頁面展示

　　在布局完整無誤的情況下瘋狂隨意豐肉吧。加入裝飾物和質(zhì)感細(xì)化，使得畫面更加真實(shí)、親切、豐富。一張有愛的魚人節(jié)頁面就這樣快速簡單的完成了。

　　設(shè)計(jì)是一個(gè)理性+運(yùn)氣+聯(lián)想的過程，感性三步、理性三步。太多感性則可能會使受眾面狹窄或者偏離主題。太過理性則顯得呆板俗套。圓方三角不僅需要三個(gè)元素的形態(tài)主次結(jié)合，也需要我們感性和理性的雙向互動配合。