網站設計的7個原則



畢卡索說過:“像專家一樣學習規則,這樣你就可以像藝術家那樣打破它”。這句話為幾世紀以來的藝術家們的設計法則墊定了基礎。

簡單說,設計的基本原理是解釋如何使用構圖的元素(如形狀、顏色、形式、紋理材質和空間)來創建特定的效果並傳達目的。

但即使遵循這所謂的基本原理,也不會讓天底下有兩件完全相同的設計作品(除非抄襲),達文西和Jeff Koon都深受畢卡索的影響,但是蒙娜麗莎和氣球狗卻是天壤之別。


這個設計的核心概念開始廣泛被採用,從建築體到平面設計,當然還有現在的網站創作。說到網站,你一定會很注意視覺構圖,優秀的視覺會讓你對網站的效果(導航、轉換、浮動等)產生直接的影響。

我們將在本文中定義設計的7個原則,以及如何將它們應用於網站。

01、平衡

好像做瑜珈一般,平衡是一個設計創作的關鍵。它讓人聯想到安定感、幸福,如同已故的Steve Jobs也說過他領悟瑜珈的平衡,產生更多優秀的產品想法。

對設計而言,平衡是確保沒有任何一個元素會壓制或蓋過另一個元素,進而導致其他項目無意義的減少。平衡設計分為3種:

1、對稱平衡:

是指以中心點兩邊或四周的形象,具有相等或相當的視覺量而形成的靜止現象(即視覺的安定感),對稱包括隨左右(或上下)對稱,輻射對稱兩種。原則上,對稱形式的對稱平衡給予人莊重和嚴肅的感覺,因此又被稱為「正式平衡」。

2、不對稱平衡

是指形式中,相對部分的形象完全不同,但因各自的位置與距離安排得宜,使重量的感覺相若而形成的平衡現象。 應用不對稱平衡的效果,顯得靈活而富於變化,但無前者的莊重感覺,因此又被稱為「非正式平衡」﹝informal balance﹞。

3、徑向平衡:

這是在中心點周圍佈置不同元素的時候。當物體以均勻分佈的視覺重量的方式放置時,可以實現這一點。徑向平衡在物體中心產生強烈的焦點。時鐘就是一個例子。


如何應用在網站上?

從您的中心線或點,保持視覺佔比均勻分佈在您的網站。您要置入的每個元素無論是圖像,文字還是按鈕,每個新的項目都可能會影響平衡。保持井然有序的簡單方法是使用網格狀設計,尤其是該單頁內容大量的時候。那怎麼做?首先將頁面作水平分割,每個部分使用一個區域(“關於我們”,“聯繫業務項目”,“Instagram Feed”等)。完成後,您只需將您選擇的區域拆分為多個列,看起來就像是垂直分域化,剩下要做的就是個性化及設計內容,這樣就可以成就一個整潔且專業的作品。

請參考這個模版,是一個很好的示範案例:

https://bit.ly/2AaSfmj


02、對比

你應該聽過對比色/互補色糸,但對比指的不僅是顏色,更包括了形狀(圓和尖銳)、空間(正和負)、材質(光滑和粗糙),以及任何本質上相反的元素。這樣的設計並置會吸引觀眾的注意力並且感到興奮,對比的應用在藝術和設計界都是一項強有力的表達。


如何應用在網站上?

單調的網站會讓人沉悶,但我們要做的不是讓每一個元素發光,要考慮『你想強調哪些特定項目?』它們可以是:

.你在首頁的名字或是Slogan

.你希望客戶聯繫你的聯繫方式

在網站中,最主要的對比效果從顏色開始,你可以打開色輪,尋找每個色糸的對比色,如:黃色和紫色,藍色和橘色,或是經典的黑色和白色。再者也可以透過字型的大小,或是進階一點的形狀之於空白區域,都可以達到對比的效果。

這裡有一個參考的模版:

https://bit.ly/2LwltAD


03、重點

當伸展台上一群顏值高身材好的男模們,穿著黑色西裝在走秀,突然一位穿著粉紅色西裝的男模走出來,他會不會是全場關注的焦點?

重點是:你可以利用一個元素在組合中占據主導的地位。

在藝術和設計中有很多方法可以實現,但最常使用的是前面提過的原理:對比,但它不是唯一。Highligt你的重點,使它成為焦點。


如何應用在網站上?

說句實話:在網站上的每個元素的重要性,是有高低之分的,有些甚至是偏裝飾性。找出你的焦點,這通常就是所謂的CTA(Call To Action),如果想了解什麼是CTA,可以看我分享的這篇:https://www.wixtaiwan.tw/single-post/CTA

這裡有一個參考的模版:

https://bit.ly/2LTayxu


04、動態

在一般的空間設計或靜物藝術中,使用的是不同元素創造動態感,例如對角線、曲線設計以及空間幻覺。但是在數位設計的世界,製造動態更容易,就是”動畫”。

自從平行式設計盛行之後,許多的設計師開始把重點放在”動態”的設計上,使整體的設計不會太單調。你可能看過滑鼠下拉時,圖片有滑落的感覺,或是物件的飛入等。

如何應用在網站上?

常見的可以將視覺素材做視差滑動(Parallax scrolling),會讓你的頁面產生切割感,前景和背景以不同速度移動,帶有一點3D幻覺讓你的網站看起來更加有深度。通常這樣的功能已屬較複雜的技術工作,需要較高的coding技術,但是Wix已經將這個功能內建,另外,也可以做到淡入、淡出的效果。

但是切記,動態的效果不可以過度使用,一但使用太多,對觀眾將會是一種視覺干擾,沉悶的網站讓人無聊,但視覺干擾過多的網站會惹怒觀眾。

這裡有一個參考的模版:

https://bit.ly/2uSycDW


05、重複性

重複不見得單調,使用得當它會讓人產生一種安定感,並對你的品牌感到信任。呼應前文所寫的動態,鮮花之所以嬌豔是因為有綠葉的襯托,當你來到一片青脆的草地,不也有著安定的感覺?

如何應用在網站上?

如果你是非中文的網站(中文網站建議字型是微軟正黑體),你可以在不同的網站區域,重複性使用兩種字體,或是重複性的使用3種色糸。這有助於你的觀眾容易記住你的網站,導致他們想到該領域的專家就想到你。你可以參考以下這個模版,它重複性的使用2種字型和橘、紫的色糸,有點狂野大膽,但又做到適度留白,是個有個性但不失專業的網站。

模版參考:

https://bit.ly/2uRjnSb


06、層次

一般而言,構圖將元素分為3個層次:最重要、中間、不重要。原因在於人類的大腦無法對故事、景觀或構圖中每個元素賦予相同程度的重要性(我們總是愛分高下)。想對而言,大腦更傾向重視它所感知的第一個元素,這也是優秀的設計師和藝術家想要集中觀眾注意力的關鍵地方。

如何應用在網站上?

一般而言,人類的視覺習慣先注意網站的左上角,所以在UI和UX設計界會有著所謂的”F”型和”Z”型方向的設計。Yahoo是一個曾經紅極一時的入口網站,但它偏左上角的焦點區域,一直都是廣告費最高的賣點。

最重要的訊息放在左上方(這通常也是品牌Logo的放置處),最不重要的訊息通常會放在網站的頁面中間,而屬於中間角色的通常分散在四處。

在這個模版中,你很清楚看到左上角的黑色Logo及它的預訂功能,主視覺也有著不錯的動態表現,中間的關於我們和業務介紹相對起來平淡些,至於服務細節那些就更容易忽視了。

模版參考:

https://bit.ly/2LzFE0m


07、融合性

像三明治一樣,吐司、火腿、起司搭起來是取代不了的經典。這個原則是為設計的元素找到適當的平衡,設計師需確保每個物件在構圖中有特定的位置及作用,融合性就是不同元素,覺得有點抽象嗎?我們看一下範例。

如何應用在網站上?

直接參考這個模版:https://bit.ly/2LE72u9

你首先看到主視覺的女性Model身著黃色的T-shirt,中間的區塊色糸以黃色作底,商品選購時將滑鼠移到手機殼上,會有著黃色的互動,再往下拉有著動態背景的圖片和色塊都是以有明顯的黃色元素。這網站中的照片、色塊、背景都以黃色糸將它們完美融合,產生一致性的形象視覺。


#平衡 #對稱平衡 #徑向平衡 #對比 #動態 #層次 #CTA

  • Facebook - White Circle

© 2017 WixTW