畢卡索說過：“像專家一樣學習規則，這樣你就可以像藝術家那樣打破它”。這句話為幾世紀以來的藝術家們的設計法則墊定了基礎。
簡單說，設計的基本原理是解釋如何使用構圖的元素(如形狀、顏色、形式、紋理材質和空間)來創建特定的效果並傳達目的。
但即使遵循這所謂的基本原理，也不會讓天底下有兩件完全相同的設計作品(除非抄襲)，達文西和Jeff Koon都深受畢卡索的影響，但是蒙娜麗莎和氣球狗卻是天壤之別。
這個設計的核心概念開始廣泛被採用，從建築體到平面設計，當然還有現在的網站創作。說到網站，你一定會很注意視覺構圖，優秀的視覺會讓你對網站的效果(導航、轉換、浮動等)產生直接的影響。
我們將在本文中定義設計的7個原則，以及如何將它們應用於網站。
01、平衡
好像做瑜珈一般，平衡是一個設計創作的關鍵。它讓人聯想到安定感、幸福，如同已故的Steve Jobs也說過他領悟瑜珈的平衡，產生更多優秀的產品想法。
對設計而言，平衡是確保沒有任何一個元素會壓制或蓋過另一個元素，進而導致其他項目無意義的減少。平衡設計分為3種：
1、對稱平衡：
是指以中心點兩邊或四周的形象，具有相等或相當的視覺量而形成的靜止現象（即視覺的安定感），對稱包括隨左右（或上下）對稱，輻射對稱兩種。原則上，對稱形式的對稱平衡給予人莊重和嚴肅的感覺，因此又被稱為「正式平衡」。
2、不對稱平衡
是指形式中，相對部分的形象完全不同，但因各自的位置與距離安排得宜，使重量的感覺相若而形成的平衡現象。 應用不對稱平衡的效果，顯得靈活而富於變化，但無前者的莊重感覺，因此又被稱為「非正式平衡」﹝informal balance﹞。
3、徑向平衡：
這是在中心點周圍佈置不同元素的時候。當物體以均勻分佈的視覺重量的方式放置時，可以實現這一點。徑向平衡在物體中心產生強烈的焦點。時鐘就是一個例子。
如何應用在網站上？
從您的中心線或點，保持視覺佔比均勻分佈在您的網站。您要置入的每個元素無論是圖像，文字還是按鈕，每個新的項目都可能會影響平衡。保持井然有序的簡單方法是使用網格狀設計，尤其是該單頁內容大量的時候。那怎麼做？首先將頁面作水平分割，每個部分使用一個區域（“關於我們”，“聯繫業務項目”，“Instagram Feed”等）。完成後，您只需將您選擇的區域拆分為多個列，看起來就像是垂直分域化，剩下要做的就是個性化及設計內容，這樣就可以成就一個整潔且專業的作品。
請參考這個模版，是一個很好的示範案例：
02、對比
你應該聽過對比色/互補色糸，但對比指的不僅是顏色，更包括了形狀(圓和尖銳)、空間(正和負)、材質(光滑和粗糙)，以及任何本質上相反的元素。這樣的設計並置會吸引觀眾的注意力並且感到興奮，對比的應用在藝術和設計界都是一項強有力的表達。
如何應用在網站上？
單調的網站會讓人沉悶，但我們要做的不是讓每一個元素發光，要考慮『你想強調哪些特定項目？』它們可以是：
．你在首頁的名字或是Slogan
．你希望客戶聯繫你的聯繫方式
在網站中，最主要的對比效果從顏色開始，你可以打開色輪，尋找每個色糸的對比色，如：黃色和紫色，藍色和橘色，或是經典的黑色和白色。再者也可以透過字型的大小，或是進階一點的形狀之於空白區域，都可以達到對比的效果。
這裡有一個參考的模版：
03、重點
當伸展台上一群顏值高身材好的男模們，穿著黑色西裝在走秀，突然一位穿著粉紅色西裝的男模走出來，他會不會是全場關注的焦點？
重點是：你可以利用一個元素在組合中占據主導的地位。
在藝術和設計中有很多方法可以實現，但最常使用的是前面提過的原理：對比，但它不是唯一。Highligt你的重點，使它成為焦點。
如何應用在網站上？
說句實話：在網站上的每個元素的重要性，是有高低之分的，有些甚至是偏裝飾性。找出你的焦點，這通常就是所謂的CTA(Call To Action)，如果想了解什麼是CTA，可以看我分享的這篇：https://www.wixtaiwan.tw/single-post/CTA
這裡有一個參考的模版：
04、動態
在一般的空間設計或靜物藝術中，使用的是不同元素創造動態感，例如對角線、曲線設計以及空間幻覺。但是在數位設計的世界，製造動態更容易，就是”動畫”。
自從平行式設計盛行之後，許多的設計師開始把重點放在”動態”的設計上，使整體的設計不會太單調。你可能看過滑鼠下拉時，圖片有滑落的感覺，或是物件的飛入等。
如何應用在網站上？
常見的可以將視覺素材做視差滑動(Parallax scrolling)，會讓你的頁面產生切割感，前景和背景以不同速度移動，帶有一點3D幻覺讓你的網站看起來更加有深度。通常這樣的功能已屬較複雜的技術工作，需要較高的coding技術，但是Wix已經將這個功能內建，另外，也可以做到淡入、淡出的效果。
但是切記，動態的效果不可以過度使用，一但使用太多，對觀眾將會是一種視覺干擾，沉悶的網站讓人無聊，但視覺干擾過多的網站會惹怒觀眾。
這裡有一個參考的模版：
05、重複性
重複不見得單調，使用得當它會讓人產生一種安定感，並對你的品牌感到信任。呼應前文所寫的動態，鮮花之所以嬌豔是因為有綠葉的襯托，當你來到一片青脆的草地，不也有著安定的感覺？
如何應用在網站上？
如果你是非中文的網站(中文網站建議字型是微軟正黑體)，你可以在不同的網站區域，重複性使用兩種字體，或是重複性的使用3種色糸。這有助於你的觀眾容易記住你的網站，導致他們想到該領域的專家就想到你。你可以參考以下這個模版，它重複性的使用2種字型和橘、紫的色糸，有點狂野大膽，但又做到適度留白，是個有個性但不失專業的網站。
模版參考：
06、層次
一般而言，構圖將元素分為3個層次：最重要、中間、不重要。原因在於人類的大腦無法對故事、景觀或構圖中每個元素賦予相同程度的重要性(我們總是愛分高下)。想對而言，大腦更傾向重視它所感知的第一個元素，這也是優秀的設計師和藝術家想要集中觀眾注意力的關鍵地方。
如何應用在網站上？
一般而言，人類的視覺習慣先注意網站的左上角，所以在UI和UX設計界會有著所謂的”F”型和”Z”型方向的設計。Yahoo是一個曾經紅極一時的入口網站，但它偏左上角的焦點區域，一直都是廣告費最高的賣點。
最重要的訊息放在左上方(這通常也是品牌Logo的放置處)，最不重要的訊息通常會放在網站的頁面中間，而屬於中間角色的通常分散在四處。
在這個模版中，你很清楚看到左上角的黑色Logo及它的預訂功能，主視覺也有著不錯的動態表現，中間的關於我們和業務介紹相對起來平淡些，至於服務細節那些就更容易忽視了。
模版參考：
07、融合性
像三明治一樣，吐司、火腿、起司搭起來是取代不了的經典。這個原則是為設計的元素找到適當的平衡，設計師需確保每個物件在構圖中有特定的位置及作用，融合性就是不同元素，覺得有點抽象嗎？我們看一下範例。
如何應用在網站上？
直接參考這個模版：https://bit.ly/2LE72u9
你首先看到主視覺的女性Model身著黃色的T-shirt，中間的區塊色糸以黃色作底，商品選購時將滑鼠移到手機殼上，會有著黃色的互動，再往下拉有著動態背景的圖片和色塊都是以有明顯的黃色元素。這網站中的照片、色塊、背景都以黃色糸將它們完美融合，產生一致性的形象視覺。
