晉小彥視覺設(shè)計系列文章（二）：全屏大視野
【編者注】本文來自騰訊科技高級視覺設(shè)計師@晉小彥 推薦的視覺設(shè)計系列文章，接下來的幾個星期將在互聯(lián)網(wǎng)的一些事上陸續(xù)推出續(xù)篇，敬請留意!下來請來看第三篇連載內(nèi)容《圓、方、三角》。
系列文章
七巧板，或許我們小時候都玩過，我們曾利用它簡單的拼出我們想像中的各種動物花鳥的形態(tài)，有時我們也會有意外的造型收獲。正如這七巧板，圓形和方形與三角形則是網(wǎng)頁造型結(jié)構(gòu)中的精髓元素的歸納，即使再豐富生動的物體也可以由它們組成?，F(xiàn)在我們利用它進行網(wǎng)頁框架的打造，不知道會不會有意外的驚喜呢。
說說——三種基礎(chǔ)形態(tài)組合的視覺盛宴
做為自然界視覺的三種基礎(chǔ)形態(tài)，它們分別由直線、折線、弧線組成。
圓
它由弧線組成，外形光滑圓潤飽滿，這樣的形態(tài)通常讓我們浮現(xiàn)一些可愛、靈動的、有親和力的畫面想像，它通常在一些Q版的、歡樂的主題中較常出現(xiàn)。
方
這是一個最整潔的形態(tài)，它由直線構(gòu)成。它在門戶網(wǎng)頁和報紙的排版中最常出現(xiàn)，因為在閱讀瀏覽方面方形可以盡量排除形態(tài)上的干擾，橫平豎直以最整潔的方式梳理信息。所以方形經(jīng)常出現(xiàn)在信息量較大的頁面中，或者莊重的、嚴肅、情感內(nèi)斂的主題中。但方形這種橫平豎直的、一絲不茍的整齊有時也顯得呆板、生硬。
三角
它是由折線尖角構(gòu)成的，形態(tài)上有急轉(zhuǎn)直下的意思，尖銳的造形給人以強烈的情感刺激和反差。傾斜的角度也會帶給人以速度感。所以三角的形態(tài)給我們帶來的感受通常是刺激的、運動的、時尚的、尖銳的。這樣的形態(tài)時常會出現(xiàn)在一些，時尚運動品牌、或體現(xiàn)速度感、暴力、刺激等主題中。
眾觀我們?nèi)粘５捻撁妫叫我驗槠湔麧?、易識別、重構(gòu)性好的特點在網(wǎng)頁設(shè)計中應(yīng)用比較廣泛，但與此同時也容易讓人審美疲勞形成畫面生硬的映象，所以在非門戶或大型資料站等頁面時可以彩用圓、三角這另外兩個元素進行調(diào)和。如內(nèi)容不多的小型資料頁。增強視覺上的靈動和刺激可以讓頁面快速抓住玩家的眼睛，達到專題快速傳播的效果。
簡單的說來圓方三角的優(yōu)點就是在形狀的理性情感牽引下，利用拼圖和類潑墨的方式打破習慣性思路，創(chuàng)造在自己預想之外的新奇效果。因為沒有了細節(jié)的牽拌，所以我們對整體形態(tài)、色彩以及內(nèi)容的排版更加游刃有余。圓方三角的組合過程是一個將理性、運氣、聯(lián)想集合一體的設(shè)計方法。
圓方三角設(shè)計方法的優(yōu)點
1. 打破習慣性思路
由于長期的經(jīng)驗積累，我們通常會選擇一條合理的便捷的道路通往目的地，但這條路往往已被千萬人踩踏，缺少令人驚喜的風景，圓方三角的思維方式正如中國的山水潑墨法，為我們枯竭的思維打開了創(chuàng)造性的任意門。這是一個冒險的過程，但沒有冒險也就沒有未曾被人發(fā)現(xiàn)過的美麗風景。
2. 理性把握主線情感
選擇主形態(tài)就是掌控整體氣氛和情感的主線，在理性的選擇中潑墨，即可以不受思維限制，又可以使結(jié)果更接近于主題。另外，因為基礎(chǔ)元素的簡單，我們還可以在整體色彩的搭配上有較強的掌控力。由于在嘗試的過程中沒有具像的形態(tài)，所以受到的形狀和色彩的拘束較少。而基礎(chǔ)形狀和顏色的情感就可以更加充分的發(fā)揮。
3. 變幻靈活
無細節(jié)負擔，它不受實物的理性限制，它可以在多種可能性中跳來跳去，我們可以毫不憐惜的隨時撤銷原來的不合適的想法并奔向另外一個更有意思的創(chuàng)意。信息排版方面面，可以快速調(diào)整版塊和文字比例，在一種非完全具像的實物中我們可以較靈活的調(diào)整它變換部分的空間比例大小來適應(yīng)我們內(nèi)容的擺放。
想想——七巧板組合和天馬行空聯(lián)想聯(lián)系
一、七巧板聯(lián)系
我們簡單地使用這三種形態(tài)，進行一個合并、交集、排除的拼合，可以放大縮小任一形狀。在這個過程中有兩點需要注意。
1、注意主形。
為了保證整體造型的美感，我們需要選擇其中一種形作主形，避免形成大形不清晰，小形各自獨立的情況。
2、注意形的情感和空間想象。
根據(jù)主形的不同，畫面會產(chǎn)生不同的情感，把握情感可以增強哦們對空間的想象。在聯(lián)系過程中我們可以感受到未來頁面豐富的形態(tài)變化。
我們只是在此作了一些簡單的嘗試，圓方三角的組合還有許多。在日常的頁面設(shè)計中我們可以根據(jù)內(nèi)容進行頁面基礎(chǔ)框架的打稿。
二、天馬行空環(huán)節(jié)
在這個環(huán)節(jié)中我們可以對任意打出的草稿進行形態(tài)想像。它有一定的目的性。我們可以結(jié)合主題來變換各種幾何搭配，不斷刺激尋找到創(chuàng)作的G點。將我們草圖中的概念結(jié)構(gòu)形態(tài)轉(zhuǎn)換成具體的事物。
我們拿上一張的左一圖形舉例，
它是一個以方形為主三角為輔，小圓為最次的形態(tài)。這樣的形態(tài)是豐富而飽滿的，含有三種元素，并且有主有次。在我們打好滿意的框架造型后就可以開始實物化的設(shè)想與制作了。
它可以是一個信封、可以是測量器、也可以是棒球場。而它們都源于同一種基礎(chǔ)的形態(tài)。
1，信封
在原形的基礎(chǔ)上補充了三角，就形成了一張信封，加入層次和陰影，信息造型更加深動，如果做為郵件或祝福等主題聯(lián)想，這樣一個框架就能夠派得上用場了。
2，測量器
在原形的基礎(chǔ)上補充了一個圓形，加入刻度和指針，它就購成了一個測量器，可以是體重測量器或者壓力表等等，比如這是一個壓力測試的活動專題或許這個形態(tài)便可用上。我們都可以在在一個基礎(chǔ)形態(tài)上根據(jù)主題來選擇它后續(xù)的變換方向。
3，棒球場
持大形不變，我們在細節(jié)處加入了45度旋轉(zhuǎn)的小方形，它就變換成了一個棒球場。下面我們來看看這個棒球場的具體頁面表現(xiàn)。
(如下圖)
三、細化豐肉
在確定了要轉(zhuǎn)換的對像并排布出相對合適的內(nèi)容擺放位置后，我們便可以安心的開始細化它的質(zhì)感顏色層次，并加上一些細節(jié)元素使整體表現(xiàn)更豐富飽滿。細化的過程主要有三個內(nèi)容。
1、顏色
圓方三角的組合是由粗到細由概念到具像的過程，所以它可以比較自由的把握色彩搭配關(guān)系。我們可以在建立圓方三角初期模形的時候就嘗試定義其色調(diào)，以免后期細化后再繁瑣的調(diào)整。
2、內(nèi)容布局
在信息排版的時候，因為其不規(guī)則的形狀，我有時需要適當調(diào)整字符和圖片內(nèi)容，并把握疏密和節(jié)奏。這個步驟接近于《抄現(xiàn)實》的分塊環(huán)節(jié)。
3、形態(tài)細化
顏色和內(nèi)容布局敲定后，我們就可以對形態(tài)進行細化，加入質(zhì)量和細節(jié)，并添置與之對應(yīng)的裝飾。一個頁面便可以大體完成了。
從以上特性來看，《圓方三角》的做法似乎比較冒險，不如《抄現(xiàn)實》來得穩(wěn)妥，《抄現(xiàn)實》是一種基于我們?nèi)粘＿壿嫷年P(guān)聯(lián)應(yīng)用。而《圓方三角》則是一種不斷自我疊代刺激大腦的想像。它不斷刺激我們在預期之外的聯(lián)想興奮點，激發(fā)出許多意想不到的創(chuàng)意，這些創(chuàng)意的角度、組合、色彩可能經(jīng)常超出自己日常邏輯的想像。
看看——設(shè)計是一個理性+運氣+聯(lián)想的過程
這是一個俄羅斯方塊游戲，圓形的主形，使整體形態(tài)的主線感情更加有趣、Q版、靈動。時鐘分塊構(gòu)成的三角，給人游戲的刺激感。背景隱藏的方塊，一方面表示了這是一個俄羅斯方塊游戲另一方面又使圓方三角的造型更加飽滿。主形明晰，形態(tài)層次豐滿。
初看這個頁面似乎很難找到它的主形，但通過輔助線我們可以看到它的三角形態(tài)，與游戲LOGO的邊三角相互呼應(yīng)。在主形與LOGO的交接部分搭配了弧線，這種形態(tài)配合了游戲本身界與Q版與寫實之間的游戲角色風格特點。兩邊的直線使整體的形態(tài)結(jié)構(gòu)進一步飽滿化。整個頁面雖然各自為塊，卻渾然一體，剛?cè)岵?/p>
三角做為這個頁面的主形，配以人物形成強烈的透視，給人以強大的視覺沖擊力。第二層形是圓形，它隱藏在棕色地面的弧形輪廓中，并與遠處的藍色地球呼應(yīng)，第三層形是方形，它體現(xiàn)在游戲地圖的方格中和地面的方格紋理中。主形沖擊力強，圓方三角配合巧妙、形態(tài)飽滿。
這是一個基本由純粹圓形構(gòu)成的頁面，畫面柔和、可愛、靈動。文字排版的隱性方塊稍稍彌補了圓形造形的單一。整體頁面相對豐滿、有趣。
做做——QQ宋體西游愚人節(jié)專題
一、QQ西游愚人節(jié)專題
需求分析
1.主題
QQ西游滿城”魚人”鬧翻天這是一張我們?nèi)粘？赡苁盏降膩碜皂椖康男枨?，?nèi)容大致分為兩個格式并列的活動，版塊多、文字也不少。要做一張有形式感的頁看起來并不容易。怎么辦呢?
讓我們來簡單規(guī)劃一下吧。主題是什么?它的情感和氣氛是什么樣的?這是一個愚人節(jié)主題活動，在愚人節(jié)這一天，人們可以公然的理直氣壯的通過各種讓人意想不到的方式開朋友玩笑，無厘頭的陷井、報冷，戲弄者的歡笑與被戲弄者的驚岔構(gòu)成了我們對愚人節(jié)的映像。
2.關(guān)鍵詞聯(lián)想
看完交互需求稿后，我們圍繞”愚人節(jié)”這個主題開始了系列關(guān)鍵詞的聯(lián)想。有趣的、好玩的、搞笑的、刺激的，這些都是愚人節(jié)帶給我們的感受。另外在SLOGAN中，需求方將愚人諧音讀作”魚人”，并以魚人為對像展開整個活動內(nèi)容。捕魚和逃跑這樣兩個對稱的活動類型。
3.圓方三角的主形選擇
我們選擇”圓方三角”中的誰做為主形態(tài)?
陷井、驚岔、歡樂，對于這種映像的描素，三角和圓形成為了基礎(chǔ)形態(tài)中的兩個相對接近的選擇。
根據(jù)關(guān)鍵詞聯(lián)想，我們選擇了主形圓形和輔形三角。
圓形：靈動、活潑、有趣、可愛、多變。
三角：尖銳、不平衡、刺激、動感。
4.排版預想
內(nèi)容有多少?我們大致的布局構(gòu)想會是怎么樣的?
交互稿的內(nèi)容并不少，所以我們需要為它預留比較大的信息空間。
除了SLOGAN的主視覺之外，內(nèi)容分為三部分，概要、核心活動內(nèi)容、獎勵。其中最主要的是核心活動，它分為并列的兩大類，每類分別由四個小活動組成。這也便決定了我們未來的頁面結(jié)構(gòu)可能會傾向于一個對稱結(jié)構(gòu)的布局。
設(shè)計分解
圓方三角的設(shè)計過程是一個運氣和理性、聯(lián)想相互刺激的過程，他們疊代著互相推進。我們可以潑墨般的嘗試無數(shù)種方案，由運氣不斷刺激靈感，靈感不繼產(chǎn)生新的體驗，但我們也始終把握住理性的韁繩。所以圓方三角的方法將經(jīng)歷兩個三步，感性三步和理性三步。
感性三步：
STEP 1：迷茫和堅持
使用圓的主形和三角的輔形進行七巧板式的搭建，我們可以設(shè)定基礎(chǔ)的配色，這個階段可能是天馬行空的，有著多種不可預計的有趣結(jié)果在等待我們。但這也是一個痛苦的階段，大多的時候我們無法定義這個組合出來的圖形，并且可能在很長一段時間都沒有結(jié)果，在這個階段我們要做的最重要的一件事是堅持。
STEP 2：漸入佳境
靈感可能在不定期的時候到來，就像等待另外一半的愛人一般，需要原則也需要包容。在這個案例七巧板的執(zhí)行中我們可能意外的收獲節(jié)一頂小丑帽，小丑有戲弄搞怪的意思，它似乎可以與主題產(chǎn)生一定的聯(lián)系，這個時候我們可以選擇接受，或者沖擊更適合的靈感火花。
STEP 3：情投意合
第二個火花出現(xiàn)了，它看起來像一條魚，而魚正好與需求方給出的魚人節(jié)的主題一致，并且在需求的活動中也是以抓魚為主題的，這是一個令人欣喜而興奮的結(jié)果。我們將帶著這種熱情繼續(xù)下面一個步驟，這種熱情會讓我們覺得設(shè)計是一個多么讓人興奮的事。
(如下圖)
理性三步：
STEP 4：打大框架
在知道了策劃需求后，我們大致清楚我們需要一個對稱的造型。根據(jù)魚人這個概念，我們通過圓方三角的基礎(chǔ)形狀打出一只魚的造型。在細化方案的階段我們必需確認好色彩搭配的方案、信息內(nèi)容空間容量。因為這是一個逐步確認的過程，這個時候我們需要更多的是理性。
STEP 5：為內(nèi)容進行布局調(diào)整
這個部分我們主要服務(wù)于信息內(nèi)容，包括信息的類型、信息的層次、還有修飾信息的安放等。
STEP 6：擺文字和圖片
放入必需的圖片和文字進行空間的比對，并進一步切割形狀，豐潤細節(jié)，在這個過程中必需注意運用顏色和形態(tài)大小保持每個版塊的主形，避免過于瑣碎。
頁面展示
在布局完整無誤的情況下瘋狂隨意豐肉吧。加入裝飾物和質(zhì)感細化，使得畫面更加真實、親切、豐富。一張有愛的魚人節(jié)頁面就這樣快速簡單的完成了。
設(shè)計是一個理性+運氣+聯(lián)想的過程，感性三步、理性三步。太多感性則可能會使受眾面狹窄或者偏離主題。太過理性則顯得呆板俗套。圓方三角不僅需要三個元素的形態(tài)主次結(jié)合，也需要我們感性和理性的雙向互動配合。
本文地址：http://m.likemindfilms.com/tutorial/ui1816.html
