全面解析設計的四大基本原則

原創文章 分類: 經驗/觀點 版權:
10334 156 226 9
2018-10-22
66.8
首頁推薦

設計的四大基本原則,相信設計師們都不陌生,也一定都在自己的設計中多多少少運用到了。可能有的設計師運用到了,也不見得清晰的理解設計四大基本原則,所以今天小梓主要以 “設計的四大基本原則是什么”,“如何更好的運用設計的四大基本原則” 為主題來寫這篇文章。


Image title


親密性

親密性原則是指:將相關的項組織在一起,移動這些項,使它們的物理位置相互靠近,這樣一來,相關的項將被看作凝聚為一體的一個組,而不再是一堆彼此無關的片段。當然了,如果某些信息項或組彼此之間并無關聯,這些元素就不應存在很近的親密性(即不應靠近)。這樣就能為用戶提供一個直觀的提示,使用戶馬上了解頁面的組織和內容。

總結:親密性意味著關聯,在一個頁面上,物理位置的接近就意味著存在關聯 (實際生活中也是如此) 。就像兩個很靠近的人走在大街上,你會認為他們認識,反之,兩個相距甚遠的人,你會認為他們不認識...

舉例:下圖1左邊的排版中每一個內容都和其他的內容間距相同,看不出它們之間有什么關系。而圖1右邊的排版縮小了標題與內容之間的間距,加大了組與組之間的間距,從而使得標題與內容之間的關系更加清晰,同時空間感也更強。

下圖2左邊的排版中數字看起來像一個單獨的單元,與內容無關。而圖2右邊的排版縮小了數字與內容之間的間距,使它們靠的更近了,這樣一來,我們很容易就發現了它們之間的關系。

Image title


對齊

對齊原則是指:任何元素都不能在頁面上隨意安放,每一項都應當與頁面上的某個內容存在某種視覺聯系。如果頁面上的一些項是對齊的,這會得到一個更內聚的單元。即使對齊的元素物理位置是彼此分離的,但在你眼里(以及在你的心里)它們之間也會有一條看不見的線把彼此連在一起。不知道大家有沒有聽過一句話,整齊即是美。

現在的對齊方式分為:左對齊、右對齊、左右對齊、居中對齊。

總結:對齊意味著有條理,頁面最好只使用一種對齊方式。

舉例:下圖1左邊的排版中既有居中對齊、左對齊、還有右對齊、整體顯得非常雜亂,不知從何看起。而圖1右邊的排版統一使用了右對齊的方式,整體看上去非常舒適有條理。

下圖2左邊的排版中有三種對齊方式 (標題劇中對齊,文本左對齊,圖片右對齊),并且文本與圖片上下沒有對齊,整體關系不夠明確。而圖2右邊的排版統一使用左對齊,并且文本與圖片上下對齊,使得整個排版井然有序。

Image title


重復

重復原則是指:設計的某些方面需要在整個作品中重復。重復元素可能是一種粗字體、一條粗線、某個項目符號、顏色、設計要素、某種格式、空間關系等。讀者能看到的任何方面都可以作為重復元素。你在工作中肯定已經用過重復。例如,所有標題都設置為相同的大小和粗細,項目中的每個列表都使用相同的項目符號,這些都是重復的例子。

總結:可以把重復認為是“一致性”。不過重復還不只是自然的一致,這是一種統一設計各個部分的有意識的行為,就如我們為每個項目所做的設計規范,就是為了使項目更加的統一。

舉例:下圖1每一段內容的標題、文本、還有圓形符號都是重復元素,使得整個頁面非常具有組織性與連續性。

下圖2的頭部采用了深色的背景填充,如果沒有底部重復的深色小色塊,整個頁面就不會有這么強的連續性,所以在頁面中連續性也是非常關鍵的,尤其是有多個頁面的時候。

Image title


對比

對比原則是指:頁面上的不同元素之間要有對比效果,達到吸引用戶的對比效果。如果兩個項不完全相同,就應當使之不同,而且應當是截然不同。對比不僅可以用來吸引眼球,還可以用來組織信息、清晰層級、在頁面上指引讀者,并且制造焦點。可以采用多種方式產生對比。如大字體與小字體的對比;細線與粗線的對比;冷色與暖色的對比;平滑材質與粗糙材質的對比;間隔很寬的文本行與緊湊在一起的文本行形成對比;小圖片與大圖片的對比...

總結:要想實現有效的對比,對比就必須強烈,千萬不要畏畏縮縮。

舉例:下圖1左邊的排版中標題與文字的對比比較輕微,中規中矩。而圖1右邊的排版中把標題顏色換成了紅色,就與文字的對比非常明顯,讓人一眼就注意到了標題。

下圖2左邊的排版也是對比不夠強烈,沒有抓住眼球。而圖2右邊的排版則截然不同,只是換了一個黑色的背景色就抓住了人的眼球,再加上紅色的標題,白色的副標題、淺灰色的文本,使得整個頁面的層級非常分明且突出。

Image title


Image title


在設計頁面的時候,我們往往采用的不止一種基本原則,而是四種基本原則都會用到。要知道,一個好的頁面設計,親密性、對齊、重復和對比,往往都是相輔相成的,而不是孤立存在的。

前面已經總結了設計的四大基本原則是什么,接下來主要以舉例的形式來讓大家更好的運用四大基本原則,舉例涉及平面及UI等。


APP設計

下圖是我們常見的App Store里面的兩個頁面,第一個搜索的頁面盡管它非常的簡潔,沒什么太多的內容,但它的設計里面同樣運用了四大基本原則。而第二個App的頁面雖然復雜一些,但同樣也是運用了四大基本原則,尤其是重復與親密性。

Image title

網頁設計

下圖是一個企業官網,采用了比較多的對比、對齊、重復和親密性。相比較移動端App而言,網頁運用的四大基本原則更加明顯,讓人更容易察覺,因為它的空間大,內容多。

Image title


平面設計

下圖是兩張活動海報,一個是設計展的海報,一個是七夕的海報。它們共同的特點除了都采用了四大基本原則,還有一個很明顯的特點就是,它們標題與內容的對比非常強烈,很吸引眼球。同時重復的元素也讓整個設計更加的完整一致。

Image title

總結:以上分別通過App設計、網頁設計及平面設計的角度舉例,無非是想告訴大家設計的四大基本原則運用是非常廣泛的,并不僅僅局限于某種形式的設計。舉例最主要還是起一個舉一反三、拋磚引玉的作用,更多的還是希望大家在設計中多觀察、多思考、多實踐。

對了,以上舉例內容中,因為怕顯示的特別雜亂,所以可能還有許多沒有框選出來的對齊、重復、對比及親密性的地方,大家不要糾結哦。希望大家看完都能有收獲吧!



微信公眾號:小梓的設計筆記

小梓兒

微信公眾號:小梓的設計筆記

198粉絲/3關注

10種專題頁版式及元素分析Sketch常用快捷鍵及技巧

小梓兒

小梓兒

微信公眾號:小梓的設計筆記

掃描二維碼
去手機端查看海報

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2018 UI.CN

广西福彩官网