𝙰𝚣𝚎𝚛𝚒𝚕对《写给大家看的设计书(第3版)》的笔记(1)

𝙰𝚣𝚎𝚛𝚒𝚕
𝙰𝚣𝚎𝚛𝚒𝚕 (明朝即長路 惜取此時心)

读过 写给大家看的设计书(第3版)

写给大家看的设计书(第3版)
  • 书名: 写给大家看的设计书(第3版)
  • 作者: [美] Robin Williams
  • 页数: 210
  • 出版社: 人民邮电出版社
  • 出版年: 2009-1
  • 全书概要
    Az.:設計的四大基本原則 親密性、對比、對齊和重複。的確是簡要而準確的提法 可以作為設計 包括平面版式排版與網頁設計的一個準則。後半部分 字體設計的內容因為以西文字體為例講 與中文字體設計差異還是不小。略知一二即可。
    1 约书亚树
    有哪些设计原则,知道它们的名字,然后你将逐步控制页面。
    4大基本原则
    基本设计原则的概述,每一个优秀的设计中都应用了这些设计原则。……它们实际上是相互关联的。只应用某一个原则的情况很少。 对比(Contrast) 对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。 重复(Repetition) 让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。 对齐(Alignment) 任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。 亲密性(Proximity) 彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。
    2、亲密性
    亲密性原则是指:将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。 如果某些信息项或组彼此之间并无关联,这些元素就不应存在很近的亲密性(即不应靠近),这样就能为读者提供一个直观的提示,使读者马上了解页面的组织和内容。 如果多个项相互之间有很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。就像实际生活中一样,亲密性(即紧密性)意味着存在关联。 如果把类似的元素组织为一个单元,马上会带来很多变化。首先,页面会变得更有条理。其次,你会清楚地知道从哪里开始读信息,而且明白什么时候结束。另外,“空白”(字母以外的空间)也会变得更有组织。 你可能会很自然地利用位置的紧密程度来反映元素间的关系,而亲密性实际上就是更有意识地这样做,并把这个概念更向前推进一步。一旦了解了各元素之间的关系是何等的重要,就会注意到亲密性的效果。而一旦开始注意到这种效果,就会利用它,掌握它,并施以充分的控制。 亲密性小结 如果多个项相互之间存在很近的亲密性,它们将成为一个视觉单元,而不是多个孤立的元素。彼此相关的项应当归在一组。要有意识地注意你是怎样阅读的,你的视线怎样移动:从哪里开始;沿着怎样的路径;到哪里结束;读完之后,接下来看哪里?整个过程应当是一个合理的过程,有确定的开始,而且要有确定的结束。 根本目的 亲密性的根本目的是实现组织性。尽管其他原则也能达到这个目的,不过利用亲密性原则,只需简单地将相关的元素分在一组建立更近的亲密性,就能自动地实现条理性和组织性。如果信息很有条理,将更容易阅读,也更容易被记住。此外还有一个很好的“副产品”,利用亲密性原则,还可以使空白(这是设计者们最喜欢的)更美观(也更有条理)。 如何实现 微微眯起眼睛,统计你的眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过3~5个(当然,这取决于具体情况),就要看看哪些孤立的元素可以归在一组建立更近的亲密性,使之成为一个视觉单元。 要避免的问题 不要仅仅因为有空白就把元素放在角落或中央。避免一个页面上有太多孤立的元素。 不要在元素之间留出同样大小的空白,除非各组同属于一个子集。标题、子标题、图表标题、图片能否归入其相关材料?在这个问题上一定要非常清楚(哪怕只有一点含糊都要尽量避免)。在有很近亲密性的元素之间建立关系。 不同属一组的元素之间不要建立关系!如果元素彼此无关,要把它们分开。
    3 对齐
    对齐原则是指:“任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系”。 如果页面上的一些项是对齐的,这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的,但在你眼里(以及在你的心里),它们之间也会有一条看不见的线把它们连在一起。尽管你可能通过分开放置某些元素来指示它们的关系(使用亲密性原则),但对齐原则很“神奇”,它会告诉读者,即使这些项并不靠近,但它们属于同一组。 空间里,存在3组对齐方式不同的元素:左对齐、右对齐和居中。 有时,你可能会在居中布局上增加一点小技巧,如将文本居中,但是文本块本身不居中。或者将文本放在页面的上方,增加紧张性。或者在一个很正式的居中布局中设置一种非常随意、有趣的字体。 如果文档的外观差强人意,可能最大的毛病就是缺乏对齐。我们的眼睛喜欢看到有序的事物;这会给人一种平静、安全的感觉。此外也有助于表达信息。 作为优秀的设计,都可以在对齐的对象间画出“对齐线”,即使这些设计总体表现为汇集了大量奇特的内容,甚至动感实足,这种“对齐线”也很明确。 如果设计中的对齐很明确,那么可以有意识地打破对齐,而且一定要表现出这是有意的。技巧就在于,打破常规对齐时不要怯懦,一定要干脆一些,要么全部采用一种方式,要么全都不采用这种方式。千万不要保守。 规则都是用来打破的。但是必须记住,关于打破规则本身也有一条Robin规则:在打破规则之前必须清楚规则是什么。 对齐小结 任何元素都不能在页面上随意摆放。每个元素应当与页面上的另外一个元素存在某种视觉联系。在设计中,统一性是一个重要的概念。要让页面上的所有元素看上去统一、有联系而且彼此相关,需要在各个单独的元素之间存在某种视觉纽带。尽管这些孤立元素在页面上的物理位置可能并不靠近,但是通过适当放置,可以让它们看上去是有联系而且相关的,并且与其他信息统一。可以看看你喜欢的那些设计。一个精美的设计不论最初看上去多么杂乱无章,总能找出其中的对齐方式。 根本目的 对齐的根本目的是使页面统一而且有条理。其效果类似于把客厅里四处零落的洋娃娃捡起来,并把它们放在一个玩具箱中。不论创建精美的、正式的、有趣的还是严肃的外观,通常都可以利用一种明确的对齐(当然,要结合适当的字体)来达到目的。 如何实现 要特别注意元素放在哪里。应当总能在页面上找出与之对齐的元素,尽管这两个对象的物理位置可能相距很远。 要避免的问题 要避免在页面上混合使用多种文本对齐方式(也就是说,不要将某些文本居中,而另外一些文本右对齐)。另外,要着力避免居中对齐,除非你有意识地想要创建一种比较正式、稳重(通常也更乏味)的表示。并不是完全杜绝使用居中对齐,有时可以有意地选择这种对齐方式,但是不要把它做为默认选择。
    4 重复
    重复原则指出,“设计的某些方面需要在整个作品中重复”。重复元素可能是一种粗字体、一条粗线,某个项目符号、颜色、设计要素,某种格式、空间关系等。读者能看到的任何方面都可以作为重复元素。 可以把重复认为是“一致性”。 不过重复还不只是自然的一致,这是一种统一设计各个部分的有意识的行为。 如果哪个元素引起了你的兴趣,就可以拿来用作重复元素!也许这是一个剪贴画,或者是某种图片字体。为了实现重复,完全可以为此增加一些全新的东西。或者,也可以选择一个简单的元素,然后以多种不同的方式加以使用,比如说指定不同的大小、颜色或角度。 有时重复的项并不一定完全相同,而只是存在明确关联的紧密相关的对象。 重复小结 设计中视觉元素的重复可以将作品中的各部分连在一起,从而统一并增强整个作品,否则这些部分只是彼此孤立的单元。重复不仅对只有一页的作品很有用,对于多页文档的设计更显重要(对此我们通常称之为保持一致)。 根本目的 重复的目的就是统一,并增强视觉效果。不要低估页面视觉效果的威力,如果一个作品看起来很有趣,它往往也更易于阅读。 如何实现 重复可以认为是保持一致性,而且我相信你早已经这样做过。现在,需要把现有的一致性更向前推进一步。可不可以专门做一个图片设计,并且将某些一致元素(如标题)作为这个图片设计的一部分?在每个页面底部或每个标题下面使用一条粗细为1点的线吗?或者是不是使用一条更粗的线(4点),使重复元素显得更明显,更生动? 再看看有没有可能增加一些纯粹为建立重复而设计的元素。是不是有一个编号项列表?可不可以使用另外一种字体或逆序数字,然后对出版物中的每一个编号列表都重复同样的处理?最初,可以只是找出现有的重复,然后将其加强。熟悉了这种思想之后,再开始创建新的重复元素,来增强设计的效果并提高信息的清晰度。 要避免的问题 要避免太多地重复一个元素,重复太多会让人讨厌。要注意对比的价值(请看下一章以及有关字体对比的章节)。
    5 对比
    对比是为页面增加视觉效果的最有效的途径之一,很容易吸引读者去看一个页面;另外对比还能在不同元素之间建立一种有组织的层次结构。要记住一个重要规则:要想实现有效的对比,对比就必须强烈。千万不要畏畏缩缩。 如果两个元素不同,就会产生对比。倘若两个元素存在某种不同,但差别并不是很大,那么你做出的效果并不是对比,而是冲突。这就是关键,Robin对比原则指出:“如果两个项不完全相同,就应当使之不同,而且应当是截然不同。” 可以采用多种方式产生对比。如大字体与小字体的对比;典雅的oldstyle字体与粗体sans serif字体产生对比;细线与粗线的对比;冷色与暖色的对比;平滑材质与粗糙材质的对比;水平元素(如很长的一行文本)与垂直元素(如又高又窄的一列文本)的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比,等等。 复。它们相互协作,建立了整体效果。设计页面时很少只使用某一种原则。 该传单是黑白打印的,所以我们采用不同灰度的装饰并为标题增加点花样。让你的眼睛随意在文档中浏览——你能感到是如何被吸引到粗体内容上的吗,你是如何下意识地去读这部分内容的?如果你能吸引与你的内容无多大关系的人,那么他们当中许多人都会下意识地去读更多的内容。 对比小结 在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事物。如果页面上放两个不完全相同的元素(比如有两种不同字体,或者有两种不同线宽),它们就不能类似。要实现有效的对比,这两个元素必须截然不同。 根本目的 对比的根本目的有两方面,这两个方面相辅相成,无法分开。一个目的是增强页面的效果,如果一个页面看起来很有意思,往往更有可读性。另一个目的是有助于信息的组织。读者应当能立即了解信息以何种方式组织,以及从一项到另一项的逻辑流程。对比元素不能让读者混淆,也不能错误地强调重点(即本不该是重点的元素)。 如何实现 可以通过字体选择(见下一部分)、线宽、颜色、形状、大小、空间等等来增加对比。增加对比很容易,途径有很多,这可能是增加视觉效果最有意思也最让人满意的方法了。重要的是:对比一定要强烈。 要避免的问题 不要犹豫。如果你想形成对比,就加大力度。不要将一种粗线与一种更粗的线进行对比。不要将棕色文本与黑色标题建立对比。要避免使用两种或多种类似的字体。如果各个项不完全一样,干脆让它们截然不同!
    6 复习
    有关设计(同时也是有关生活)的一个更一般的指导原则是不要畏畏缩缩: 不要害怕在设计(或生活)中留有空白,这能让你的眼睛(以及心灵)稍作休息。不要害怕设计是不对称的,使用非居中的格式,不居中往往能使效果更强烈。尽管不建议使用居中,不过有意这么做也无不可。 不要害怕把单词设置得非常大或非常小,不用担心说话声太大或者太小。在合适的场合这都是可以的。只要最后的结果能支持或强调你的设计或观点,不要害怕让图片太大或太小。 如果你还没有读过The Mac is not a typewriter 或The PC is not a typewriter这两本书,强烈建议你读一读。如果你还有下面这些不好的习惯,比如在点号后面键入两个空格,在文本下面加下划线,还没有使用真实撇号或引号(即应当使用“和”,而不是"),那你确实需要好好读读这些书了。 读完这本书并且掌握了所有概念之后,可以再看看Robin Williams Design Workshop一本。这是一本彩色图书,涵盖了更高级的设计概念。
    7 颜色运用
    色轮 互补色 三色组 愉悦的颜色(彼此等距的三种颜色 红黄蓝、橙绿紫、橙红蓝绿蓝紫、橙黄水绿紫罗兰色 分裂互补三色组(split complement)。从色轮的一边选择一种颜色,再在色轮上找出它对面的互补色,不过并不直接使用这个互补色,而是使用该互补色两侧的颜色。 <图片3> 纯色(色调)、暗色(色调加黑)、亮色(色调加白)。 单色组合 色质(tone):色质是指某种颜色的特定明暗度、深浅度或色调。如果色质很接近,看上去会有些模糊不清,对比太过微弱。 暖色与冷色 CMYK:印刷四色处理。 RGB:Red、Green、Blue,显示器&屏幕 传单设计:创建一个重心点,使用有对比的子标题,重复,对齐。 明信片:与众不同、成系列、明确具体、力求简练、尽可能使用颜色 报纸广告:空白、机敏、清楚、简洁、尽可能使用颜色 注意点:对比,字体选择,反色文字 网站:最重要的两个因素:重复原则。要有一致的导航系统和图片风格,使访问者总能知道他们仍在同一个网站中。 不要对文本或图片链接使用默认的蓝色。这绝对是业余水平页面的标志。 不要把文本链接放在有边框的粗笨表单元格中。 正文不要采用粗体,也不要占据整个页面的宽度。 不要使用荧光背景色,特别是不要使用荧光文字! 不要让访问者移动滚动条!页面最大宽度不要超过800像素。特别是不要让表的宽度超过600像素,否则访问者想打印页面时会很恼火。 设计要素:重复和清晰(最重要的两个因素)、重复、可读性
    字体设计
    不要保守、尽量明确地说出你看到了什么。如果可以用语言说清楚这种关系的变化,说明你确实已经掌握。看到一种让你不舒服的字体组合时(你下意识地感觉这些字体不能很好地结合),也要用文字明确地分析问题出在哪里。 试图找出一个更好的解决方案之前,必须发现问题所在。要找出问题,必须努力寻找相似性,而不是差异。彼此竞争的两个字体有什么相似之处?它们都是全大写吗?它们笔划中都有强烈的粗/细对比吗?粗细对比是否有效?大小的对比呢?结构对比呢? 或者也许是中心点冲突,如果较大的字体比较细而较小的字体反而比较粗,这样一来它们相互之间就会产生冲突,因为每个字体都想显得比另一个字体更重要,是不是存在这种情况? 指出问题,你就能找出解决方案
    做一个设计或者重新设计时,先从哪里开始?
    从中心点开始。确定希望读者最先看什么。除非你已经决定要建立一个非常协调的设计,否则就应该创建一个有强烈对比的中心点。 将信息分组。按逻辑进行分组, 确定这些组之间的关系。通过组之间的靠近与否(亲密性)来显示这些关系。 在页面上组织文本和图片时,要建立并维护明确的对齐。如果能看到一个明显的边界,如照片边界或垂直线条,可以通过其他文本或对象的对齐来加强这个边界。 创建重复,或者找出可以重复的项。为建立重复,可以使用粗字体、线、装饰符号或者某种空间布局。看看哪些元素已经自然地重复,再看看是否适合加大重复力度。 除非你已经决定创建一种协调的设计,否则一定要建立强烈的对比,这样会吸引读者的视线。要记住,对比要黑白分明。如果页面上的所有一切都又大又粗,很华丽,那么根本不存在任何对比!不论通过更大更粗来建立对比,还是通过更小更细形成对比,关键是要有所不同,这样才能引人注目。
    2014-08-29 15:48:22 4人喜欢 回应

𝙰𝚣𝚎𝚛𝚒𝚕的其他笔记  · · · · · ·  ( 全部307条 )

從0到1
1
三少爷的剑
1
极简主义
1
生命最后的读书会
1
火并萧十一郎
1
趣味生活简史
1
你要如何衡量你的人生
1
箭术与禅心
1
“偷”师学艺
1
银河英雄传说
1
星之海洋
1
罗马人的故事13
1
罗马人的故事 14
1
罗马人的故事 15
1
奇石
1
他们来到巴格达
1
斯泰尔斯庄园奇案
1
悬崖山庄奇案
1
大脑也有这么多烦恼
1
小王子心灵之旅
1
人类简史
1
盲眼钟表匠
1
最好的告别
1
必然
1
禅与摩托车维修艺术
1
阅读的故事
1
知日·料理之魂
1
植物的记忆与藏书乐
1
寻找家园
1
我的阿勒泰
1
惜别
1
云中命案
1
知日·家宅
1
知日·妖怪
1
饮膳随缘
1
坟场之书
1
江城
1
悲观主义的花朵
1
甲骨文
2
孤筏重洋
1
深夜加油站遇见苏格拉底
1
我读2
1
活着活着就老了
1
坛经释义
1
最后的耍猴人
1
常识与通识
1
神们自己
1
知日·太喜欢漫画了
1
在建筑中发现梦想
1
逝去的武林
1
往事并不如烟
1
人格裂变的姑娘
1
访问
1
雨天的书
1
世界上所有的夜晚
1
增广贤文
1
味道·味觉现象
1
陶庵夢憶 西湖夢尋
2
国境以南 太阳以西
1
且听风吟
1
味道·人民公社
1
知日·铁道
1
厨房里的人类学家
1
中国好人
1
设计,无处不在
1
共产党宣言
1
幸福旅行箱
1
幻夜
1
走夜路请放声歌唱
1
白夜行
1
迎面撞上禅1
1
劝学篇
1
走神
1
我爱问连岳Ⅱ
1
自然英语学习法
1
罗辑思维
1
小心轻放的光阴
1
鱼和它的自行车
1
眼睛
1
超级时间整理术
1
不安的生活
1
目送
1
噪音太多
1
时间之书
1
那个姐姐教我们的事
1
统计陷阱
1
时间,会用才能身价倍增
1
NLP速讀術
1
拖拉一点也无妨
1
想念你的陌生人
1
你早该这么玩Excel
1
黑暗的左手
1
厨房里的哲学家
1
湖上闲思录
1
我承认我不曾历经沧桑
1
满满的书页
1
改变我生命的那本书
1
点石成金
1
我想遇见你的人生
1
人生需要揭穿
1
在漫长的旅途中
1
穷查理宝典
1
云中人
1
厨房
1
卢布林的魔术师
1
哲学家们都干了些什么?
1
我读
1
禅的行囊
1
1分钟能做什么
1
How to Live on 24 Hours a Day
1
永远和三秒半
1
香港有个荷里活
1
大山里的人生
1
台湾念真情
1
东京塔
1
空谷幽兰
1
阿勒泰的角落
1
九篇雪
1
让男孩听进去,让女孩说出来
1
一个一个人
1
礼物
1
天平之甍
1
远远的村庄
1
不必读书目
1
伪自由书
1
海伯利安的陨落
1
英雄无泪
1
世说新语译注
1
曾文正公嘉言钞
1
智慧书
1
私人藏书
1
写在人生边上
1
失败之书
1
河岸
1
冷记忆2
1
敬重与惜别
1
飛刀.又見飛刀
1
致D
1
舞!舞!舞!
1
有一天啊,宝宝……
1
神鞭
1
独立,从一个人旅行开始
1
我们仨
1
ABC谋杀案
1
牛棚杂忆
1
真怕你是个乖孩子
1
小国王
1
生命的奮進
1
夹边沟记事
1
城门开
1
上课记2
1
第56号教室的奇迹
1
莱茵河的囚徒
1
此生未完成
1
早晨从中午开始
1
少年迈尔斯的海
1
Charlie and the Chocolate Factory
1
一半是海水一半是火焰
1
The Diving Bell and the Butterfly
1
Private Peaceful
1
Winnie the Pooh
1
伤心咖啡店之歌
1
风铃中的刀声
1
边城浪子(上下)
1
你一定爱读的极简欧洲史
1
绝版魏晋
1
旁观者
1
夜航船
4
惶然录
1
论语别裁(上下)
1
中国古典诗词感发
1
音乐课
1
富兰克林自传
1
青灯
1
永不止步
1
新千年文学备忘录
1
论证是一门学问
1
夜航
1
1
你不孤单
1
骆驼祥子
1
给青年诗人的信
1
呐喊
1
谁来跟我干杯
1
幽梦影
1
The Alchemist
1
再见,老房子
1
此生
1
小李飞刀1:多情剑客无情剑(上中下)
3
上课记
1
爱情是个冷笑话
1
万里无云
1
Charlotte's Web
1
最大的一场大火
1
迷恋记
1
圣诞忆旧集
1
Flipped
1
绿光往事
1
漫步遐想录
1
The Painted Veil
1
Demian
1
为什么中国人勤劳而不富有
1
心学大师王阳明大传
1
少年巴比伦
1
追随她的旅程
1
上学记
1
爸爸爱喜禾
1
过于喧嚣的孤独
1
时与光
1
七日谈
1
哈姆莱特 罗密欧与朱丽叶
2
一路两个人
1
时间简史(普及版)
1
人生不设限
1
机场里的小旅行
1
I, Steve
1
The Lover's Dictionary
1
史记(全三册)
1
孟子译注
2
政府论
1
局外人
1
我不是完美小孩
1
荣格的精神
2
近思录(中华思想经典)
1
颜氏家训
1
那些年,我们一起追的女孩
1
大唐新语
1
这些人,那些事
1
世界尽头的目标先生
1
爱的地下教育
1
你在天堂里遇见的五个人
1
三体Ⅲ
1
星星都已经到齐了
1
儿子与情人
1
温柔的叹息
1
生活十讲
2
妞妞
1
東坡志林
1
都柏林人
1
我爱问连岳
2
蚁族
1
积极思考的力量
1
小规模荡气回肠
2
圣诞欢歌
1
高效学习
1
裸阳
1
机器人与帝国(上下)
1
谈幸福
1
爱上浪漫
1
伤离别
1
零时
1
太阳马戏团的魔力
1
小王子
1
第八日的蝉
1
我在雨中等你
1
踮脚张望的时光
1
孩子你慢慢来
1
杀人不难
1
窗灯
2
决定要幸福
3
三体Ⅱ
1
三体
1
姐姐的守护者
1
小猫杜威
1
记得
1
杀死一只反舌鸟
1
等待野蛮人
1
毒舌钩
1
世界尽头与冷酷仙境
1
殡葬人手记
1
嫌疑人X的献身
1
月亮和六便士
1
陆上行舟
1
艺术地生活
1
亲历死亡
1
退步集续编
1
微物之神
1
雨啊,请你到非洲
1
抉择
1
世界在你不知道的地方运转
1
我执
1
岁月的泡沫
1
不许联想
2
现在,只想爱你
1
冰屋
1
比悲伤更悲伤
1
风之影
1