騰訊美女設計師教你了解圓、方、三角

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

       小編推薦：　　騰訊美女設計師教你如何抄現實

　　說說——三種基礎形態組合的視覺盛宴

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

　　圓

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

　　方

　　這是一個最整潔的形態，它由直線構成。它在門戶網頁和報紙的排版中最常出現，因為在閱讀浏覽方面方形可以盡量排除形態上的干擾，橫平豎直以最整潔的方式梳理信息。所以方形經常出現在信息量較大的頁面中，或者莊重的、嚴肅、情感內斂的主題中。但方形這種橫平豎直的、一絲不苟的整齊有時也顯得呆板、生硬。

　　三角

　　它是由折線尖角構成的，形態上有急轉直下的意思，尖銳的造形給人以強烈的情感刺激和反差。傾斜的角度也會帶給人以速度感。所以三角的形態給我們帶來的感受通常是刺激的、運動的、時尚的、尖銳的。這樣的形態時常會出現在一些，時尚運動品牌、或體現速度感、暴力、刺激等主題中。

　　眾觀我們日常的頁面，方形因為其整潔、易識別、重構性好的特點在網頁設計中應用比較廣泛，但與此同時也容易讓人審美疲勞形成畫面生硬的映象，所以在非門戶或大型資料站等頁面時可以彩用圓、三角這另外兩個元素進行調和。如內容不多的小型資料頁。增強視覺上的靈動和刺激可以讓頁面快速抓住玩家的眼睛，達到專題快速傳播的效果。

　　簡單的說來圓方三角的優點就是在形狀的理性情感牽引下，利用拼圖和類潑墨的方式打破習慣性思路，創造在自己預想之外的新奇效果。因為沒有了細節的牽拌，所以我們對整體形態、色彩以及內容的排版更加游刃有余。圓方三角的組合過程是一個將理性、運氣、聯想集合一體的設計方法。

　　圓方三角設計方法的優點

　　1. 打破習慣性思路

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

　　2. 理性把握主線情感

　　選擇主形態就是掌控整體氣氛和情感的主線，在理性的選擇中潑墨，即可以不受思維限制，又可以使結果更接近於主題。另外，因為基礎元素的簡單，我們還可以在整體色彩的搭配上有較強的掌控力。由於在嘗試的過程中沒有具像的形態，所以受到的形狀和色彩的拘束較少。而基礎形狀和顏色的情感就可以更加充分的發揮。

　　3. 變幻靈活

　　無細節負擔，它不受實物的理性限制，它可以在多種可能性中跳來跳去，我們可以毫不憐惜的隨時撤銷原來的不合適的想法並奔向另外一個更有意思的創意。信息排版方面面，可以快速調整版塊和文字比例，在一種非完全具像的實物中我們可以較靈活的調整它變換部分的空間比例大小來適應我們內容的擺放。

　　想想——七巧板組合和天馬行空聯想聯系

　　一、七巧板聯系

　　我們簡單地使用這三種形態，進行一個合並、交集、排除的拼合，可以放大縮小任一形狀。在這個過程中有兩點需要注意。

　　1、注意主形。

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

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

　　根據主形的不同，畫面會產生不同的情感，把握情感可以增強哦們對空間的想象。在聯系過程中我們可以感受到未來頁面豐富的形態變化。

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

　　二、天馬行空環節

　　在這個環節中我們可以對任意打出的草稿進行形態想像。它有一定的目的性。我們可以結合主題來變換各種幾何搭配，不斷刺激尋找到創作的G點。將我們草圖中的概念結構形態轉換成具體的事物。

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

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

　　它可以是一個信封、可以是測量器、也可以是棒球場。而它們都源於同一種基礎的形態。

　　1，信封

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

　　2，測量器

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

　　3，棒球場

　　持大形不變，我們在細節處加入了45度旋轉的小方形，它就變換成了一個棒球場。下面我們來看看這個棒球場的具體頁面表現。

　　(如下圖)

　　三、細化豐肉

　　在確定了要轉換的對像並排布出相對合適的內容擺放位置後，我們便可以安心的開始細化它的質感顏色層次，並加上一些細節元素使整體表現更豐富飽滿。細化的過程主要有三個內容。

　　1、顏色

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

　　2、內容布局

　　在信息排版的時候，因為其不規則的形狀，我有時需要適當調整字符和圖片內容，並把握疏密和節奏。這個步驟接近於《抄現實》的分塊環節。

　　3、形態細化

　　顏色和內容布局敲定後，我們就可以對形態進行細化，加入質量和細節，並添置與之對應的裝飾。一個頁面便可以大體完成了。

　　從以上特性來看，《圓方三角》的做法似乎比較冒險，不如《抄現實》來得穩妥，《抄現實》是一種基於我們日常邏輯的關聯應用。而《圓方三角》則是一種不斷自我疊代刺激大腦的想像。它不斷刺激我們在預期之外的聯想興奮點，激發出許多意想不到的創意，這些創意的角度、組合、色彩可能經常超出自己日常邏輯的想像。

　　看看——設計是一個理性+運氣+聯想的過程

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