《寫給大家看的設計書》 設計原則

關于約書亞樹的故事

小時候宵睦,只是在電視上和收音機里聽到格桑花這種花墅诡,覺得這種名字的花應該生長在西藏壳嚎,所以就認為此生不可能見到這種花了。相反末早,家里院子中烟馅、上學的小路上,布滿了一種極易存活的花然磷,為此郑趁,給它取名‘滿天飛’。直到有一天姿搜,我收到一本關于植物的樹寡润,上面畫了格衫υ鳎花,赫然發(fā)現(xiàn)梭纹,原來躲惰,滿天飛就是格桑花变抽〈〔Γ「直到你能叫出他的名字,你才能擁有他绍载,掌握他」《千與千尋》里也有類似一幕诡宗,正是由于千尋呼喚出白龍的名字,白龍才重獲自由击儡。這也就是古語說的:名不正塔沃,言不順。

四大基本原則(CRAP)

對比(Contrast)

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

重復(Repetition)

讓設計中的視覺要素在整個作品中重復出現(xiàn),可以重復顏色区拳、形狀拘领、材質、空間關系樱调、線寬约素、字體、大小和圖片笆凌,等等圣猎。從而增加條理性和統(tǒng)一性

對齊(Alignment)

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

親密性(Proximity)

彼此相關的項欠啤,應當靠近荚藻,歸組在一起。如果多個項之間存在很近的親密性洁段,它們就會成為一個視覺單元应狱,而不是多個孤立的元素。這有助于組織信息眉撵,減少混亂侦香,為讀者提供清晰的結構落塑。

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

親密性

Robin親密性原則:將相關的項組織一起纽疟。物理位置的接近就意味著存在關聯(lián)。(eg.在街上行走的人)

目的:1.使頁面變得更有條理憾赁;2.引領視線污朽,從哪里開始閱讀,從哪里結束龙考;3.留白會使頁面更有呼吸感蟆肆。

如果多個項之間存在很近的親密性,他們將會成為一個視覺單元晦款,而不是多個孤立的元素炎功。彼此相關的項應當歸在一組。要有意識地注意你是怎樣閱讀的缓溅,你的視線怎樣移動:懂哪里開始蛇损;沿著怎樣的路徑;到哪里結束坛怪;讀完之后淤齐,接下來看哪里?真?zhèn)€過程應當是一個合理的過程袜匿,又確定的開始更啄,而且要有確定的結束。

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

對齊

設計新手往往會很草率贰拿,只要頁面上剛好有空間蛤袒,就會把文本和圖片放在那里,全然不考慮頁面上的其他項膨更。對齊可以使視覺上存在一條隱形的線妙真,把界面的元素連接起來。

eg.混亂的排版就像是擁擠在地鐵門口的人群荚守,看起來雜亂無章珍德,使我們無所是從。

建議左對齊或右對齊的原因:居中對齊時矗漾,邊界是軟的锈候,看不出來“對齊線”的強度。書本或材料的邊界敞贡,硬化了布局的邊緣使得元素間的聯(lián)系更加明顯可靠泵琳。居中對齊是新手常用的對齊方式,居中會創(chuàng)建一種更加正式誊役、沉穩(wěn)的外觀斜纪,這種外觀顯得更加中規(guī)中矩松嘶,但通常是很乏味的。一般精巧的設計都沒有采用居中對齊。

多數(shù)婚禮都是采用居中對齊趾断,從而達到一種莊重的效果(居中很穩(wěn)固鸿脓,就算可愛的字體也不能使其拜托乏味感)

[12號Times系列字體居中排版躁愿,再加兩個回車镣屹,也是沒誰了]

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

重復

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

重復元素可能是一種粗字體若治、一條粗線慨蓝、某個項目符號、顏色端幼、設計要素礼烈、某種格式、空間關系等婆跑。讀者能看到的任何地方都可以作為重復元素此熬。

重復有助于組織信息,可以幫助讀者瀏覽各個頁面,也利于將設計中單獨的部分統(tǒng)一起來犀忱。即使在一個只有一頁的文檔中募谎,重復元素也可以建立一中連續(xù)性,將文檔“真?zhèn)€捆在一起”阴汇。如果在創(chuàng)建一個多頁的数冬、作為一個精美包裝一部分的文檔,充分使用重復就很關鍵搀庶。

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

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

對比

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

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

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

字體設計

符號

1.標點后面空一格

2.打字機引號“”,印刷引號6699,(option+[/])

3.撇號‘(單引號)(option+shift+])

4.連字符:表示鏈接 (-)

5.一字線:表示范圍岗喉,寬度等于大寫N的寬度(option+-)

6.破折號:表示思想突然變化秋度,或者句子中的句號表意太強,而逗號表意太弱的情況下可以使用(shift+-)

7.特殊符號:

補充? option+shift+k

résumé

保持統(tǒng)一的前提下钱床,區(qū)分信息層級荚斯,從而更好的表達信息。

字體對比有6種明確的不同方式:大小、粗細事期、結構拐格、形狀、方向和顏色刑赶。

字體的種類

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

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

粗襯線體(Slab serif)隨著工業(yè)革命,廣告產生牵敷,用于海報的字體胡岔。沒有強烈的粗細變化,適用于文本內容枷餐,然而相對單一靶瘸。

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

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

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

字體的對比

大忻摺(size)怨咪、粗細(weight)、結構(structure)润匙、形狀(form)诗眨、方向(Direction)、顏色(color)

排版的幾個步驟

1.確定中心:確定希望讀者最先看到什么

2.將信息分組:按照邏輯進行分組孕讳,確定這些組之間的關系匠楚,通過之間的距離(親密性)來顯示這些關系

3.對齊原則:在頁面上組織文本和圖片時,要建立并維護明確的對齊厂财。如果能夠看到一個明顯的邊界芋簿,如照片邊界或者垂直線條,可以通過其他文本或對象的對齊來加強這個邊界

4.創(chuàng)建重復:可以使用粗字體璃饱、線与斤、裝飾符號或者某空間布局。

5.建立強烈的對比帜平。

來自琳琳老師

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末幽告,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子裆甩,更是在濱河造成了極大的恐慌冗锁,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嗤栓,死亡現(xiàn)場離奇詭異冻河,居然都是意外死亡箍邮,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進店門叨叙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锭弊,“玉大人,你說我怎么就攤上這事擂错∥吨停” “怎么了?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵钮呀,是天一觀的道長剑鞍。 經常有香客問我,道長爽醋,這世上最難降的妖魔是什么蚁署? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮蚂四,結果婚禮上光戈,老公的妹妹穿的比我還像新娘。我一直安慰自己遂赠,他們只是感情好久妆,可當我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著解愤,像睡著了一般镇饺。 火紅的嫁衣襯著肌膚如雪乎莉。 梳的紋絲不亂的頭發(fā)上送讲,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天,我揣著相機與錄音惋啃,去河邊找鬼哼鬓。 笑死,一個胖子當著我的面吹牛边灭,可吹牛的內容都是我干的异希。 我是一名探鬼主播,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼绒瘦,長吁一口氣:“原來是場噩夢啊……” “哼称簿!你這毒婦竟也來了?” 一聲冷哼從身側響起惰帽,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤憨降,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后该酗,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體授药,經...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡士嚎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了悔叽。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片莱衩。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖娇澎,靈堂內的尸體忽然破棺而出笨蚁,到底是詐尸還是另有隱情,我是刑警寧澤趟庄,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布赚窃,位于F島的核電站,受9級特大地震影響岔激,放射性物質發(fā)生泄漏勒极。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一虑鼎、第九天 我趴在偏房一處隱蔽的房頂上張望辱匿。 院中可真熱鬧,春花似錦炫彩、人聲如沸匾七。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽昨忆。三九已至,卻和暖如春杉允,著一層夾襖步出監(jiān)牢的瞬間邑贴,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工叔磷, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拢驾,地道東北人。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓改基,卻偏偏與公主長得像繁疤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子秕狰,可洞房花燭夜當晚...
    茶點故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內容

  • 關于約書亞樹的故事 小時候稠腊,只是在電視上和收音機里聽到格桑花這種花鸣哀,覺得這種名字的花應該生長在西藏架忌,所以就認為此生...
    Doria2016閱讀 1,156評論 0 11
  • 本書講了什么 復雜的設計原理在本書中凝煉為親密性、對齊诺舔、重復和對比這4個基本原則鳖昌。作者以簡潔明快的風格备畦,將設計所必...
    少穻閱讀 2,111評論 0 14
  • 第一章 引言 一旦能夠說出什么東西的名字,就會很容易注意到它许昨。你就會掌握它懂盐,擁有它,讓它受你所控糕档。優(yōu)秀的設計需要知...
    知魚君閱讀 967評論 3 19
  • 家翁壽晏席正開莉恼, 親朋故友酒杯滿, 美味佳肴齊上桌速那, 客笑主樂笑上傳俐银。
    臉上永微笑閱讀 263評論 2 6
  • 漢·劉向 《新序·雜事五》:“葉公子高好龍,鉤以寫龍端仰,鑿以寫龍捶惜,屋室雕文以寫龍。于是天龍聞而下之荔烧,窺頭于牖吱七,施尾于...
    孤獨工廠閱讀 300評論 0 1