《寫給大家看的設(shè)計書》 設(shè)計原則

關(guān)于約書亞樹的故事

小時候,只是在電視上和收音機里聽到格?;ㄟ@種花,覺得這種名字的花應(yīng)該生長在西藏,所以就認(rèn)為此生不可能見到這種花了。相反,家里院子中、上學(xué)的小路上,布滿了一種極易存活的花,為此,給它取名‘滿天飛’。直到有一天,我收到一本關(guān)于植物的樹,上面畫了格?;ǎ杖话l(fā)現(xiàn),原來,滿天飛就是格?;?。「直到你能叫出他的名字,你才能擁有他,掌握他」《千與千尋》里也有類似一幕,正是由于千尋呼喚出白龍的名字,白龍才重獲自由。這也就是古語說的:名不正,言不順。

四大基本原則(CRAP)


對比(Contrast)
避免頁面上的元素太過相似,如果元素(字體、顏色、大小、線寬、形狀、空間等)不相同,那就干脆讓他們截然不同。要讓頁面引人注目,對比通常是最重要的一個因素,正式它能使讀者首先看這個頁面。

重復(fù)(Repetition)
讓設(shè)計中的視覺要素在整個作品中重復(fù)出現(xiàn),可以重復(fù)顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小和圖片,等等。從而增加條理性和統(tǒng)一性

對齊(Alignment)
任何東西都不能在頁面上隨意安放。每個元素都應(yīng)與頁面的另一個元素有種視覺聯(lián)系,這樣能建立一種清晰、精巧而且清爽的外觀。

親密性(Proximity)
彼此相關(guān)的項,應(yīng)當(dāng)靠近,歸組在一起。如果多個項之間存在很近的親密性,它們就會成為一個視覺單元,而不是多個孤立的元素。這有助于組織信息,減少混亂,為讀者提供清晰的結(jié)構(gòu)。

注解:4個原則都出現(xiàn)于格式塔遠離(《認(rèn)知與設(shè)計》這本書里有詳細的介紹)

親密性

Robin親密性原則:將相關(guān)的項組織一起。物理位置的接近就意味著存在關(guān)聯(lián)。(eg.在街上行走的人)
目的:1.使頁面變得更有條理;2.引領(lǐng)視線,從哪里開始閱讀,從哪里結(jié)束;3.留白會使頁面更有呼吸感。

如果多個項之間存在很近的親密性,他們將會成為一個視覺單元,而不是多個孤立的元素。彼此相關(guān)的項應(yīng)當(dāng)歸在一組。要有意識地注意你是怎樣閱讀的,你的視線怎樣移動:懂哪里開始;沿著怎樣的路徑;到哪里結(jié)束;讀完之后,接下來看哪里?真?zhèn)€過程應(yīng)當(dāng)是一個合理的過程,又確定的開始,而且要有確定的結(jié)束。

親密性的根本目的是誰實現(xiàn)組織性。盡管其他原則也能達到這個目的,不過利用親密性原則,只需簡單地將相關(guān)的元素分在一組建立更近的親密性,就能自動實現(xiàn)條理性和組織性。試想下,有條理的信息和混亂無章的信息哪個更適合閱讀,哪個更容易被記住。此外親密性的副產(chǎn)品是留白,一定的留白是整個畫面看上去具有呼吸感。

?對齊

設(shè)計新手往往會很草率,只要頁面上剛好有空間,就會把文本和圖片放在那里,全然不考慮頁面上的其他項。對齊可以使視覺上存在一條隱形的線,把界面的元素連接起來。
eg.混亂的排版就像是擁擠在地鐵門口的人群,看起來雜亂無章,使我們無所是從。
建議左對齊或右對齊的原因:居中對齊時,邊界是軟的,看不出來“對齊線”的強度。書本或材料的邊界,硬化了布局的邊緣使得元素間的聯(lián)系更加明顯可靠。居中對齊是新手常用的對齊方式,居中會創(chuàng)建一種更加正式、沉穩(wěn)的外觀,這種外觀顯得更加中規(guī)中矩,但通常是很乏味的。一般精巧的設(shè)計都沒有采用居中對齊。

多數(shù)婚禮都是采用居中對齊,從而達到一種莊重的效果(居中很穩(wěn)固,就算可愛的字體也不能使其拜托乏味感)
[12號Times系列字體居中排版,再加兩個回車,也是沒誰了]

排版時要傾聽你的眼睛,眼睛看向哪里,路線是什么,這是最佳路徑嗎? 重要的信息是否都歸入了邏輯親密性中?對其是否對清晰的表達有幫助?在這個小空間中畫下能表示已有對齊的垂直線。

重復(fù)

Robin重復(fù)原則指出:設(shè)計的某些方面需要在整個作品中重復(fù)。

重復(fù)元素可能是一種粗字體、一條粗線、某個項目符號、顏色、設(shè)計要素、某種格式、空間關(guān)系等。讀者能看到的任何地方都可以作為重復(fù)元素。
重復(fù)有助于組織信息,可以幫助讀者瀏覽各個頁面,也利于將設(shè)計中單獨的部分統(tǒng)一起來。即使在一個只有一頁的文檔中,重復(fù)元素也可以建立一中連續(xù)性,將文檔“真?zhèn)€捆在一起”。如果在創(chuàng)建一個多頁的、作為一個精美包裝一部分的文檔,充分使用重復(fù)就很關(guān)鍵。

設(shè)計中視覺元素的重復(fù)可以將作品中的各部分連在一起,從而統(tǒng)一并增強整個作品,否則這些部分只是彼此孤立的單元。重復(fù)不僅只對一頁的作品有用,對于多頁文檔的設(shè)計更顯重要(保持一致性)

根本目的:統(tǒng)一,并增強視覺效果(多樣性的統(tǒng)一)。如果一個作品看起來很有趣,那它往往也易于閱讀。

對比

對比是為頁面增加視覺效果的最有效途徑,也是不同元素之間建立一種有組織的層次結(jié)構(gòu)最有效的方法。記住一條重要規(guī)則:要實現(xiàn)歐小的對比,對比就必須強烈,不要畏畏縮縮。

對比不僅可以吸引眼球,還可以用來組織信息、清晰層級、在頁面上指引讀者,并且制造焦點。

對比方式:字體大小對比;典雅的舊式體與加粗的無襯線體產(chǎn)生對比;細線與粗線的對比;冷色與暖色的對比;平滑材質(zhì)與粗糙材質(zhì)的對比;水平元素(如很長的一行文本)與垂直元素(如又高又窄的一列文本)的對比;間隔很寬的文本行與緊湊在一切

字體設(shè)計

符號

1.標(biāo)點后面空一格
2.打字機引號“”,印刷引號6699,(option+[/])
3.撇號‘(單引號)(option+shift+])
4.連字符:表示鏈接 (-)
5.一字線:表示范圍,寬度等于大寫N的寬度(option+-)
6.破折號:表示思想突然變化,或者句子中的句號表意太強,而逗號表意太弱的情況下可以使用(shift+-)
7.特殊符號:

?補充? option+shift+k

résumé

保持統(tǒng)一的前提下,區(qū)分信息層級,從而更好的表達信息。
字體對比有6種明確的不同方式:大小、粗細、結(jié)構(gòu)、形狀、方向和顏色。

字體的種類

舊式體(Oldstyle)基于手寫體創(chuàng)建的

現(xiàn)代體(Modern)外觀很醒目,給人震撼感覺,但由于有強烈的粗細過度,不適合作為大量的正文文字。

粗襯線體(Slab serif)隨著工業(yè)革命,廣告產(chǎn)生,用于海報的字體。沒有強烈的粗細變化,適用于文本內(nèi)容,然而相對單一。

無襯線體(Sans serif)適用于屏幕而不適用于印刷

手寫體(Script)像奶酪蛋糕,少些才不會覺得惡心

花體(Decorative)有時名人名言可以使用

字體的對比

大?。╯ize)、粗細(weight)、結(jié)構(gòu)(structure)、形狀(form)、方向(Direction)、顏色(color)

排版的幾個步驟

1.確定中心:確定希望讀者最先看到什么
2.將信息分組:按照邏輯進行分組,確定這些組之間的關(guān)系,通過之間的距離(親密性)來顯示這些關(guān)系
3.對齊原則:在頁面上組織文本和圖片時,要建立并維護明確的對齊。如果能夠看到一個明顯的邊界,如照片邊界或者垂直線條,可以通過其他文本或?qū)ο蟮膶R來加強這個邊界
4.創(chuàng)建重復(fù):可以使用粗字體、線、裝飾符號或者某空間布局。
5.建立強烈的對比。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容