設計的四個原則

#一周一書#

本周跟大家分享的是《寫給大家看的設計書》,這本書不僅適合于專業的設計師閱讀思考,同時也應適合于完全沒有設計背景的人來提高設計審美意識。本書指出了4大基本設計原則,幾乎每個精良的設計中都用到了這四個概念。

寫給大家看的設計書


設計的四個原則

設計的四個原則包括:親密性、對齊、重復、對比

設計四原則

一、親密性(Proximity)

將相關的項組織在一起,移動這些項,使他們的物理位置相互靠近,這樣一來,相關的項將被看作凝聚為一體的一個組,而不再是一堆彼此無關的元素。

如:下面的這兩張圖片,第1張這樣的兩個人走在大街上,我們并不能確定他們倆的關系,而第2張他們的親密性就說明了他們的關系,頁面上的信息也是如此。

親密性


栗子1:

來看看下面這張名片的信息布局,在這樣一個小的空間里你看到多少個獨立的元素?你的眼睛要停下來多少次才能看全這張名片上的所以信息?你的眼睛是不是停過5次?這張小小的名片上放置了5個獨立的內容。你可能是從中間開始閱讀的,因為中間的短句字體最粗最大。接下來你是不是依次往下從左到右閱讀?如果已經讀到名片的最后(右下角),你的目光是不是還會全盤再巡視一遍,確保自己沒有遺漏任何角落?

調整前


如果按照親密性原則,把這張名片的布局做一下調整,把相關聯的元素分在一組,使它們建立更近的親密性關系。調整之后這張名片不論從理解上還是從視覺上都很有條理,這樣一來,也能更清楚地表達信息。

調整后


栗子2:

再來看下面這個栗子,第1張圖里的123數字項跟其后面的內容沒有任何關聯,數字看起來就像是一個單獨的元素。第2張圖當數字和其后面的信息靠的更近時,就能很直觀的看出來它們之間的關系了。

親密性原則

親密性原則并不是說所有的一切都要更靠近,真正的含義是:如果某些元素在理解上存在關聯,或者相互之間存在某種關系,那么這些元素在視覺上也應當有所關聯,除此之外,其他孤立的元素或元素組則不應該存在親密性。位置是否靠近可以體現出元素之間是否存在關系。


二、對齊(Alignment)

任何元素都不能在頁面上隨意安放。每一項都應當與頁面上的某個內容存在某種聯系。如果頁面上的一些項是對齊的,會得到一個更內聚的單元,它們之間會有一條看不見的線把彼此連在一起。

栗子1:

圖1圖2文本項都進行了分組,有合理的親密性,文本本身居中對齊,并在頁面上居中展示。盡管這是一種合理的對齊方式,但邊界是“軟”的;實在看不出來那條“對齊線”的強度。圖3文本右對齊,盡管這是一條看不見的線,但它很明確,連接了這兩組文本的邊界,正是這個邊界的強度為布局提供了力度。

對齊


栗子2:

下面是兩張報告封面,圖1居中對齊,居中對齊會創建一種更正式、更穩重的外觀,這種外觀顯得中規中矩,但通常也很乏味,可閱讀性較差。圖2利用明確的左對齊,可閱讀性變強,還能給人留下更精美的印象,那條看不見的線提供了強有力的對齊基準,可以將上下兩部分的文本內容連在一起。

對齊


栗子3:

頁面上放其他項時,一定要確保每一項都與頁面上的其他項存在某種對齊。如果文本行水平擺放,則按其基準線對齊。如果有多個單獨的文本塊,則對齊其左邊界或右邊界。如果有圖片元素,將其邊界與頁面的其他邊界對齊,絕對不要在頁面上隨意擺放元素。

對齊


三、重復(Repetition)

設計的某些方面需要在整個作品中重復。重復元素可能是一種粗字體、一條粗線、某個項目符號、顏色、設計要素、某種格式、空間關系等。可以把重復認為是“一致性”。

栗子1:

下面圖片中圖1中有些人是同一隊的,但從圖片上我們無法看出。圖2中他們衣服的重復性讓我們馬上就能看出來這些人屬于同一個組織

重復


栗子2:

重復有助于組織信息,可以幫助讀者瀏覽信息和各個頁面的內容,也有利于將設計中單獨的部分統一起來。

下圖中重復的元素有 粗體字、細字體、方塊項目符號、縮進、間隔、對齊等

重復


四、對比(Contrast)

頁面上的不同元素之間要有對比,達到吸引讀者的效果。如果兩個項不完全相同,那就應當使之不同,而且應當是截然不同。對比不僅可以用來吸引眼球,還可以組織信息、清晰層級、在頁面上指引讀者,并且制造焦點。可以采用多種方式產生對比,如字體大小對比、字體粗細對比、冷暖色對比等等......

栗子1:

下面圖1是兩個人嗎?還是應該看作是同一個人?圖2如果他們是不同的,那就讓他們看起來截然不同。

對比


栗子2:

如果兩個元素雖然不同,但是區別不大,那么這個時候就不是對比了,而是沖突。下面兩張簡報的圖片,圖2增加了頁面上一些元素的對比,字體大小對比、字體粗細對比等。使頁面變得簡潔明快,內容一目了然。

對比


栗子3:

下面這兩張宣傳單,圖2較圖1增加了標題文字大小對比、小標題與內容增加了字體大小粗細對比,整個背景與內容也增強了對比。幾處調整讓宣傳單內容更明確,也更具吸引眼球。

對比


總結:

親密性:如果項彼此相關,就把它們分在一個組,建立更近的親密性。這有助于組織信息、減少混亂、為讀者提供清晰的內容結構。

對齊:頁面上的任何東西都不能隨意安放,每個元素都應當與頁面上的另一個元素有某種視覺聯系。這樣能建立一種清晰、精巧而且清爽的外觀。

重復:讓設計中的視覺要素在整個作品中重復出現。可以重復顏色、形狀、材質、空間關系、線寬、字體、大小、圖片等等。這樣既能增加條理性,還可以加強統一性。

對比:要避免頁面上的元素太過相似,如果元素不相同,那就干脆讓它們截然不同。對比能讓頁面引人注目,也更能使頁面內容結構清晰易讀。


最后:

有關設計(同時也是有關生活)的一個指導原則:不要畏畏縮縮

1.不要害怕在設計(或生活)中留有空白,這能讓你的眼睛(或心靈)稍作休息。

2.不要害怕設計是不對稱的,使用非居中的格式,不居中往往能使效果更強烈。

3.不要害怕把有些信息設置的非常大或非常小,不用擔心說話聲太大或者太小,只要是在合適的場景。

4.只要最后的結果能支持或強調你的設計或觀點,不要害怕讓圖片太大或太小。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,106評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,441評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,211評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,736評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,475評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,834評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,829評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,009評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,559評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,306評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,516評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,038評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,728評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,132評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,443評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,249評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,484評論 2 379

推薦閱讀更多精彩內容