《写给大家看的设计书》课件

TheNon-Designer'sDesignBook写给大家看的设计书第一讲:设计原则TheNon-Designer'sDesignBook1优秀的设计就这么容易学习4大基本原则。它们比你想像得要简单。2认识到自己没有运用这些原则。形诸文字--陈述问题。应用基本原则。结果将使你大吃一惊。优秀的设计26设计的四大原则■对比(Contrast基本思想是,避免页面上元素太过相似。如果元素,如字体、颜色、大小、线宽、形和空间等不相同,就让它们截然不同。■对齐(Alignment每个元素都应与页面上另一个元素有某种视觉联系。在对齐很明显的基础上,可以偶尔打破对齐规则。■重复(Repetition)可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片等,增加条理性和加强统一性■亲密性(Proximity)彼此相关的项应当靠近,归组在一起。若多个项之间存在很近的亲密性,它们会形成个视觉单元,而不是多个孤立的元素。6设计的四大原则3亲密性原贝实现组织性亲密性原贝4亲密性也许光从字面上来说,版式设计中的“亲密性”似乎不太好理解,正常的情况下,我们都会把“亲密性”理解为人与人之间的关系的一种表现,事实上在版式设计中的“亲密性”的确也有类似人与人之间的关系的意思也正是印证了那句话物以类聚,人以群分亲密性”的原则即是将逻辑上存在关联的元素排列组合在一起使其被看作是一个密切相关的整体,而不是一堆杂乱无章的元素亲密性5亲密性LearntoDancee!Scones:LearntoDance?RosettaDuneSttdo-100JweLa.Sounder9aatapaHipHopSaisaClownFonkBoleroFoxtrotRumbaSaturdaysQuickstep109JiveLaneMamboLindyHopChachaKrumpwithorwithoutapartner!RosettaDancestudioPrizes!FreeTeaandScone!■从书中所给的例子,可以看出版式设计中的“亲密性”实际上是对信息的分类整理。即是通过这个“亲密性”原则,对页面中出现的杂乱无章的元素重新组合,使其有一个清晰明了的结构,可以让读者在最短的时间内获取页面中的正确的内容。亲密性6亲密性进行“亲密性”原则设计的第一步,即是对元素的归类组合,将页面中所需要出现的元素按照某种逻辑进行归类划分,对于同一组合内的元素在物理位置上赋予其更近的距离,而不同组合之间的物理位置显然要更远。这也是页面留白设计的一个核心然而对于一个页面的设计来说,仅仅只是依靠“亲密性”原则并不能解决问题,除了“亲密性”之外,在页面的设计中还需要使用到对齐对比、重复等原则,“亲密性”只是版式设计的第一步,更多的意义是在于对元素的组织性上。亲密性76亲密性WanttobeanWanttobeanUNDERSTANDER?UNDERSTANDER?wwrayeasliketewardandeverynaaneeinashakespeareplay?nyo1ntanguarou?hNgthatsgoiniomWhatifyouoouldwhattfyou如是图,I.fwantedleTvarwantedteuaynryouknowanplayandhayourntalkingbatyouretalkingaboul?WouldyoulikesotruroandhavepeopleadmireandevenesteemyoubytellingBassaniowhiehcaskettochooseIt'sallpossible.InallpossibleLiethelifeyou'vedreamedabout!nrmoretrfonahostowisen甲aoTbeUndersdanderntoe6亲密性8亲密性小结如果RalphRoisterDoister(17)555-1212sm,而不是多个你是MermaidTavernMermaidTavern怎样阅谚接下来看哪916BreadStreetooM里的BreadstreeM且要有确定的结束根本目的实现组织性。将相MermaidTavern阅读,更容易被记住,还可以使空白更美916Breadstreet17551213亲密性小结9亲密性小结如何实现眯起眼睛,统计眼睛停顿的次数,来数数页面上有多少元素;要避免的问题不要仅仅因为有空白就把元素放在角落或者中央避免一个页面上出现太多的孤立元素不要在元素之间留出同样大小的空白,除非各组属于同一个子集;在有很近亲密性的元素间建立关系不属于一组的元素不要建立关系,分开。亲密性小结10《写给大家看的设计书》课件11《写给大家看的设计书》课件12《写给大家看的设计书》课件13《写给大家看的设计书》课件14《写给大家看的设计书》课件15《写给大家看的设计书》课件16《写给大家看的设计书》课件17《写给大家看的设计书》课件18《写给大家看的设计书》课件19《写给大家看的设计书》课件20《写给大家看的设计书》课件21《写给大家看的设计书》课件22《写给大家看的设计书》课件23《写给大家看的设计书》课件24《写给大家看的设计书》课件25《写给大家看的设计书》课件26《写给大家看的设计书》课件27《写给大家看的设计书》课件28《写给大家看的设计书》课件29《写给大家看的设计书》课件30《写给大家看的设计书》课件31《写给大家看的设计书》课件32《写给大家看的设计书》课件33《写给大家看的设计书》课件34《写给大家看的设计书》课件35《写给大家看的设计书》课件36《写给大家看的设计书》课件37《写给大家看的设计书》课件38《写给大家看的设计书》课件39TheNon-Designer'sDesignBook写给大家看的设计书第一讲:设计原则TheNon-Designer'sDesignBook40优秀的设计就这么容易学习4大基本原则。它们比你想像得要简单。2认识到自己没有运用这些原则。形诸文字--陈述问题。应用基本原则。结果将使你大吃一惊。优秀的设计416设计的四大原则■对比(Contrast基本思想是,避免页面上元素太过相似。如果元素,如字体、颜色、大小、线宽、形和空间等不相同,就让它们截然不同。■对齐(Alignment每个元素都应与页面上另一个元素有某种视觉联系。在对齐很明显的基础上,可以偶尔打破对齐规则。■重复(Repetition)可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片等,增加条理性和加强统一性■亲密性(Proximity)彼此相关的项应当靠近,归组在一起。若多个项之间存在很近的亲密性,它们会形成个视觉单元,而不是多个孤立的元素。6设计的四大原则42亲密性原贝实现组织性亲密性原贝43亲密性也许光从字面上来说,版式设计中的“亲密性”似乎不太好理解,正常的情况下,我们都会把“亲密性”理解为人与人之间的关系的一种表现,事实上在版式设计中的“亲密性”的确也有类似人与人之间的关系的意思也正是印证了那句话物以类聚,人以群分亲密性”的原则即是将逻辑上存在关联的元素排列组合在一起使其被看作是一个密切相关的整体,而不是一堆杂乱无章的元素亲密性44亲密性LearntoDancee!Scones:LearntoDance?RosettaDuneSttdo-100JweLa.Sounder9aatapaHipHopSaisaClownFonkBoleroFoxtrotRumbaSaturdaysQuickstep109JiveLaneMamboLindyHopChachaKrumpwithorwithoutapartner!RosettaDancestudioPrizes!FreeTeaandScone!■从书中所给的例子,可以看出版式设计中的“亲密性”实际上是对信息的分类整理。即是通过这个“亲密性”原则,对页面中出现的杂乱无章的元素重新组合,使其有一个清晰明了的结构,可以让读者在最短的时间内获取页面中的正确的内容。亲密性45亲密性进行“亲密性”原则设计的第一步,即是对元素的归类组合,将页面中所需要出现的元素按照某种逻辑进行归类划分,对于同一组合内的元素在物理位置上赋予其更近的距离,而不同组合之间的物理位置显然要更远。这也是页面留白设计的一个核心然而对于一个页面的设计来说,仅仅只是依靠“亲密性”原则并不能解决问题,除了“亲密性”之外,在页面的设计中还需要使用到对齐对比、重复等原则,“亲密性”只是版式设计的第一步,更多的意义是在于对元素的组织性上。亲密性466亲密性WanttobeanWanttobeanUNDERSTANDER?UNDERSTANDER?wwrayeasliketewardandeverynaaneeinashakespeareplay?nyo1ntanguarou?hNgthatsgoiniomWhatifyouoouldwhattfyou如是图,I.fwantedleTvarwantedteuaynryouknowanplayandhayourntalkingbatyouretalkingaboul?WouldyoulikesotruroandhavepeopleadmireandevenesteemyoubytellingBassaniowhiehcaskettochooseIt'sallpossible.InallpossibleLiethelifeyou'vedreamedabout!nrmoretrfonahostowisen甲aoTbeUndersdanderntoe6亲密性47亲密性小结如果RalphRoisterDoister(17)555-1212sm,而不是多个你是MermaidTavernMermaidTavern怎样阅谚接下来看哪916BreadStreetooM里的BreadstreeM且要有确定的结束根本目的实现组织性。将相MermaidTavern阅读,更容易被记住,还可以使空白更美916Breadstreet17551213亲密性小结48亲密性小结如何实现眯起眼睛,统计眼睛停顿的次数,来数数页面上有多少元素;要避免的问题不要仅仅因为有空白就把元素放在角落或者中央避免一个页面上出现太多的孤立元素不要在元素之间留出同样大小的空白,除非各组属于同一个子集;在有很近亲密性的元素间建立关系不属于一组的元素不要建立关系,分开。亲密性小结49《写给大家看的设计书》课件50《写给大家看的设计书》课件51《写给大家看的设计书》课件52《写给大家看的设计书》课件53《写给大家看的设计书》课件54《写给大家看的设计书》课件55《写给大家看的设计书》课件56《写给大家看的设计书》课件57《写给大家看的设计书》课件58《写给大家看的设计书》课件59《写给大家看的设计书》课件60《写给大家看的设计书》课件61《写给大家看的设计书》课件62《