優(yōu)秀設計的4個基本原則課件

優(yōu)秀的設計？

其實很簡單！優(yōu)秀的設計？

其實很簡單！1這樣的信息欄，大家都覺得不好，但是可以說出不好的原因嗎？

這樣的信息欄，大家都覺得不好，但是可以說出不好的原因嗎？

2優(yōu)秀設計的4個基本原則C.R.A.P對比（Contrast）重復（Repetition）對齊（Alignment）親密性（Proximity）優(yōu)秀設計的4個基本原則C.R.A.P對比（Contrast）3親密性（Proximity）親密性（Proximity）：將相關的項目組織在一起，使他們的物理位置相互靠近，如果某些項彼此間并無關聯(lián)，這些元素就不應該靠近。親密性（Proximity）親密性（Proximity）：將4你的眼睛是不是停留過5次？你的眼睛是不是停留過5次？5親密性（即緊密型）意味著存在關聯(lián)。親密性（即緊密型）意味著存在關聯(lián)。6這是一張舞蹈課的宣傳卡片這是一張舞蹈課的宣傳卡片7運用親密性重新組織運用親密性重新組織8左側的列表問題在于，所有的元素都與其他元素湊在一起，看不出他們之間的關系，也無法知道信息的組織右側還是同樣的列表，但是已經(jīng)有意識地形成了多個組左側的列表問題在于，所有的元素都與其他元素湊在一起，看不出他9經(jīng)過親密性原則組織后，信息變得如此清晰，一眼就可以收獲很多的信息量

經(jīng)過親密性原則組織后，信息變得如此清晰，一眼就可以收獲很多的10有什么區(qū)別，看出來沒有？有什么區(qū)別，看出來沒有？11這個用好了親密性嗎？這個用好了親密性嗎？12看到變化了嗎？看到變化了嗎？13親密性小結根本目的：相關聯(lián)的元素，靠攏在一起如何實現(xiàn)：瞇起眼睛統(tǒng)計，超過3~5個元素，就需要行動要避免的問題：沒有關系，就不要建立聯(lián)系，要分開親密性小結根本目的：相關聯(lián)的元素，靠攏在一起14對齊（Alignment）對齊（Alignment）：任何元素都不能在頁面上隨意安放，每一項都應當與頁面上的某個內容存在某種視覺聯(lián)系。對齊（Alignment）對齊（Alignment）：任何元15優(yōu)秀設計的4個基本原則課件16這里右側有一條看不見的線，將彼此分離的文本，連在了一起這里右側有一條看不見的線，將彼此分離的文本，連在了一起17這個圖中可以看出，那一小段引用的文本，雖然在頁面的元素之間是打破了對齊規(guī)則的，但是其仍然與標題是左對齊的。

對于打破對齊規(guī)則的設計的好壞，關鍵在于其在對齊性上所針對的范圍。

這個圖中可以看出，那一小段引用的文本，雖然在頁面的元素之間是18優(yōu)秀設計的4個基本原則課件19找出10處未對齊的錯誤找出10處未對齊的錯誤20優(yōu)秀設計的4個基本原則課件21對齊小結根本目的：統(tǒng)一而且有條理，將衣服收到柜子里如何實現(xiàn)：注意各元素位置，不管距離多遠，首尾有呼應要避免的問題：盡量不要混合使用多種對齊方式

對齊小結根本目的：統(tǒng)一而且有條理，將衣服收到柜子里22對齊小結根本目的：統(tǒng)一而且有條理，將衣服收到柜子里如何實現(xiàn)：注意各元素位置，不管距離多遠，首尾有呼應要避免的問題：盡量不要混合使用多種對齊方式

對齊小結根本目的：統(tǒng)一而且有條理，將衣服收到柜子里23重復（Repetition）重復（Repetition）：設計的某些方面需要在整個作品中重復。重復可以看作是一種一致性，目的是為了保持進一步統(tǒng)一。重復（Repetition）重復（Repetition）：設24讀到信息的末尾時，你的視線是不是會在名片上四處漫游？讀到信息的末尾時，你的視線是不是會在名片上四處漫游？25讀到信息的末尾時，現(xiàn)在你的視線會移向哪里？會在粗體元素之間來回跳嗎？可能會，這正是重復的主旨，它能把整個作品聯(lián)系在一起，提供一致性。讀到信息的末尾時，現(xiàn)在你的視線會移向哪里？會在粗體元素之間來26要創(chuàng)建重復元素，可以從標題和子標題入手，這是一個很好的起點，因為這些元素很可能在某個方面是一致的要創(chuàng)建重復元素，可以從標題和子標題入手，這是一個很好的起點，27使一致的元素更為突出，如標題和子標題的字體。使一致的元素更為突出，如標題和子標題的字體。28優(yōu)秀設計的4個基本原則課件29這里有多少個重復的元素這里有多少個重復的元素30重復小結根本目的：統(tǒng)一，增強視覺效果如何實現(xiàn)：把現(xiàn)有的一致性，更向前推進一步要避免的問題：避免太多地重復同一個元素，否則將混淆重點，重復太多，會讓人討厭！

重復小結根本目的：統(tǒng)一，增強視覺效果31對比（Contrast）對比（contrast）：如果2個項不完全相同，就應當使之不同，而且應該是截然不同。對比（Contrast）對比（contrast）：如果2個32兩個簡報，哪個感覺更想拿起看看？兩個簡報，哪個感覺更想拿起看看？33優(yōu)秀設計的4個基本原則課件34優(yōu)秀設計的4個基本原則課件35優(yōu)秀設計的4個基本原則課件36這本好書的摘要，至少增加了哪4種對比？這本好書的摘要，至少增加了哪4種對比？37這個是尋狗啟事嗎？這個是尋狗啟事嗎？38這樣看起來像個廣告了天壤之別的原因，只是因為運用了4大原則這樣看起來像個廣告了39對比小結根本目的：增強頁面效果，有意思，更有可讀性如何實現(xiàn)：對比一定要強烈！要避免的問題：不要猶豫！

對比小結根本目的：增強頁面效果，有意思，更有可讀性40復習一份中規(guī)中矩的報告封面請大家來修改設計復習一份中規(guī)中矩的報告封面41優(yōu)秀設計的4個基本原則課件42優(yōu)秀設計的4個基本原則課件43優(yōu)秀設計的4個基本原則課件44優(yōu)秀設計的4個基本原則課件45小測驗：7個區(qū)別，找出來，違反了什么原則？小測驗：7個區(qū)別，找出來，違反了什么原則？46優(yōu)秀的設計？

其實很簡單！優(yōu)秀的設計？

其實很簡單！47這樣的信息欄，大家都覺得不好，但是可以說出不好的原因嗎？

這樣的信息欄，大家都覺得不好，但是可以說出不好的原因嗎？

48優(yōu)秀設計的4個基本原則C.R.A.P對比（Contrast）重復（Repetition）對齊（Alignment）親密性（Proximity）優(yōu)秀設計的4個基本原則C.R.A.P對比（Contrast）49親密性（Proximity）親密性（Proximity）：將相關的項目組織在一起，使他們的物理位置相互靠近，如果某些項彼此間并無關聯(lián)，這些元素就不應該靠近。親密性（Proximity）親密性（Proximity）：將50你的眼睛是不是停留過5次？你的眼睛是不是停留過5次？51親密性（即緊密型）意味著存在關聯(lián)。親密性（即緊密型）意味著存在關聯(lián)。52這是一張舞蹈課的宣傳卡片這是一張舞蹈課的宣傳卡片53運用親密性重新組織運用親密性重新組織54左側的列表問題在于，所有的元素都與其他元素湊在一起，看不出他們之間的關系，也無法知道信息的組織右側還是同樣的列表，但是已經(jīng)有意識地形成了多個組左側的列表問題在于，所有的元素都與其他元素湊在一起，看不出他55經(jīng)過親密性原則組織后，信息變得如此清晰，一眼就可以收獲很多的信息量

經(jīng)過親密性原則組織后，信息變得如此清晰，一眼就可以收獲很多的56有什么區(qū)別，看出來沒有？有什么區(qū)別，看出來沒有？57這個用好了親密性嗎？這個用好了親密性嗎？58看到變化了嗎？看到變化了嗎？59親密性小結根本目的：相關聯(lián)的元素，靠攏在一起如何實現(xiàn)：瞇起眼睛統(tǒng)計，超過3~5個元素，就需要行動要避免的問題：沒有關系，就不要建立聯(lián)系，要分開親密性小結根本目的：相關聯(lián)的元素，靠攏在一起60對齊（Alignment）對齊（Alignment）：任何元素都不能在頁面上隨意安放，每一項都應當與頁面上的某個內容存在某種視覺聯(lián)系。對齊（Alignment）對齊（Alignment）：任何元61優(yōu)秀設計的4個基本原則課件62這里右側有一條看不見的線，將彼此分離的文本，連在了一起這里右側有一條看不見的線，將彼此分離的文本，連在了一起63這個圖中可以看出，那一小段引用的文本，雖然在頁面的元素之間是打破了對齊規(guī)則的，但是其仍然與標題是左對齊的。

對于打破對齊規(guī)則的設計的好壞，關鍵在于其在對齊性上所針對的范圍。

這個圖中可以看出，那一小段引用的文本，雖然在頁面的元素之間是64優(yōu)秀設計的4個基本原則課件65找出10處未對齊的錯誤找出10處未對齊的錯誤66優(yōu)秀設計的4個基本原則課件67對齊小結根本目的：統(tǒng)一而且有條理，將衣服收到柜子里如何實現(xiàn)：注意各元素位置，不管距離多遠，首尾有呼應要避免的問題：盡量不要混合使用多種對齊方式

對齊小結根本目的：統(tǒng)一而且有條理，將衣服收到柜子里68對齊小結根本目的：統(tǒng)一而且有條理，將衣服收到柜子里如何實現(xiàn)：注意各元素位置，不管距離多遠，首尾有呼應要避免的問題：盡量不要混合使用多種對齊方式

對齊小結根本目的：統(tǒng)一而且有條理，將衣服收到柜子里69重復（Repetition）重復（Repetition）：設計的某些方面需要在整個作品中重復。重復可以看作是一種一致性，目的是為了保持進一步統(tǒng)一。重復（Repetition）重復（Repetition）：設70讀到信息的末尾時，你的視線是不是會在名片上四處漫游？讀到信息的末尾時，你的視線是不是會在名片上四處漫游？71讀到信息的末尾時，現(xiàn)在你的視線會移向哪里？會在粗體元素之間來回跳嗎？可能會，這正是重復的主旨，它能把整個作品聯(lián)系在一起，提供一致性。讀到信息的末尾時，現(xiàn)在你的視線會移向哪里？會在粗體元素之間來72要創(chuàng)建重復元素，可以從標題和子標題入手，這是一個很好的起點，因為這些元素很可能在某個方面是一致的要創(chuàng)建重復元素，可以從標題和子標題入手，這是一個很好的起點，73使一致的元素更為突出，如標題和子標題的字體。使一致的元素更為突出，如標題和子標題的字體。74優(yōu)秀設計的4個基本原則課件75這里有多少個重復的元素這里有多少個重復的元素76重復小結根本目的：統(tǒng)一，增強視覺效果如何實現(xiàn)：把現(xiàn)有的一致性，更向前推進一步要避免的問題：避免太多地重復同一個元素，否則將混淆重點，重復太多，會讓人討厭！

重復小結根本目的：統(tǒng)一，增強視覺效果77對比（Contrast）對比（contrast）：如果2個項不完全相同，就應當使之不同，而且應該是截然不同。對比（Contrast）對比（contrast）：如果2個78兩個簡報，哪個感覺更想拿起看看？兩個簡報，哪個感覺更想拿起看看？79優(yōu)秀設計的4個基本原則課件80優(yōu)秀設計的4個基本原則課件81優(yōu)秀設計的4個基本原則課件82這本好書的摘要，至少增加了哪4種對比？這本好書的摘要，至少增加了哪4種對比？83這個是尋狗啟事嗎？這個是尋狗啟事嗎？84這樣看起來像個廣告了天壤之別的原因，只是因為運用了4大原則這樣看起來像個廣告了85對比小結根本目的：增強頁