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

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

　　系列文章

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

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

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

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

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

　　圓

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

　　方

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

　　三角

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

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

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

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

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

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

　　2. 理性把握主線情感

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

　　3. 變幻靈活

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

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

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

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

　　1、注意主形。

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

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

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

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

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

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

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

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

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

　　1，信封

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

　　2，測(cè)量器

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

　　3，棒球場(chǎng)

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

　　(如下圖)

　　三、細(xì)化豐肉

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

　　1、顏色

　　圓方三角的組合是由粗到細(xì)由概念到具像的過(guò)程，所以它可以比較自由的把握色彩搭配關(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)容布局敲定后，我們就可以對(duì)形態(tài)進(jìn)行細(xì)化，加入質(zhì)量和細(xì)節(jié)，并添置與之對(duì)應(yīng)的裝飾。一個(gè)頁(yè)面便可以大體完成了。

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

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

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

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

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

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

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

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

　　需求分析

　　1.主題

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

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

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

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

　　3.圓方三角的主形選擇

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

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

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

　　圓形：靈動(dòng)、活潑、有趣、可愛(ài)、多變。

　　三角：尖銳、不平衡、刺激、動(dòng)感。

　　4.排版預(yù)想

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

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

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

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

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

　　感性三步：

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

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

　　STEP 2：漸入佳境

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

　　STEP 3：情投意合

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

　　(如下圖)

　　理性三步：

　　STEP 4：打大框架

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

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

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

　　STEP 6：擺文字和圖片

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

　　頁(yè)面展示

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

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