如何把页面排版的更好看些呢?

写在前面:

假设你没有足够的时间去学习设计和排版技术、但又很想知道怎样才能让页面看上去更舒服一些、或者看到一个设计得不好的页面时却对于如何修改仍旧毫无头绪,那个这本书绝对是你的不二之选,我归纳整理了这本书最核心的内容,读完这本书给我的最大收获就是之前的一些零碎的理论知识更加系统化了,此外、虽然本书后面作者对字体设计这块讲的很笼统,但后续我会陆续再细致的看一下其它的书补充一下……


约书亚树的小故事引出一个道理:

一旦能够说出什么东西的名字,就会很容易注意到它。你就会掌握它拥有它,使它在你的控制之中。

我们总是对关注自己熟知喜欢的事物,而且不知你发现没有 你喜欢的事物总会莫名期妙的出现在你眼前,比如我不知何故对广告越来越感兴趣了之后,走在大街上总是有意无意的去关注各种各样的广告,去思考它的内容去评判它的设计排版等等,而在此之前我对大街上的广告总是熟视无睹的;

一、设计原则:

设计的基本原则概括为CRAP原则;即对比(contrast)、重复(repetition)、对齐(alignment)、亲密性(proximity)。

对比

对比的核心:截然不同;找出最有意思的东西或最重要的东西加以强调

对比的目的:增加页面视觉效果(更具可读性);有助于信息的组织。(以何种方式组织)

对比的重要原则:想实现有效的对比,对比必须强烈,不要畏畏缩缩,不要丝毫犹豫,加大力度去做便可。///若两项不完全相同,应使之截然不同。

对比方式:要增加有意思的对比,最容易的方法就是实现字体对比;还有利用线宽、颜色、形状、大小、空间、元素之前的间隔、材质等进行对比。【对比一定要强烈】

新闻类文档排版时,标题常用又大又粗的字体,正文也用小字体。这便体现了对比的原则。

注:如果你想形成对比,就加大力度!不要将一种 粗线与一种更粗的线进行对比、要避免使用两种类似的字体,如果各项不完全一样,干脆让它们截然不同!

重复

重复的目的:统一增强作品的视觉效果,就像强调你的衣着,比如一位女士穿着一件可爱的黑色晚礼服,戴着一顶别致的帽子,那么她可能会用红色高跟鞋、红色口红来突出她的晚礼服,

从字面意思理解即为“反复出现”,可加上统一性,

如:做ppt时,从头到尾应该有统一的风格,(风格符合演讲的主题)、(某些基础设计元素 :字体、颜色、符号、)每一页都是统一的风格这个ppt看起来才协调统一 故重复也可以理解为“一致性”

重复元素:可能是一种粗字体、一条粗线、某个项目符号、颜色、设计要素、某种格式、空间关系等

你在看一个页面的时候,最先看的是带粗体的标志性文字,当读完后,如果下面继续出现类似重复使用粗体这种方式修饰过的文字时,你就会不自觉的把视线跳回到之前的文字,并试图找出它们之间的某种联系,因为直觉告诉你页面之所以设计成这样应该存在某种内在的联系。

在排版一份多页文档时,重复出现的元素可以让读者轻松判别和理解一个整体;如果一个重复元素很明确,(比如一个圆),难道可以采取多种不同的方式(比如变换大小),重复这个圆,

重复不等于重复完全相同的东西,比如这位女士想穿着黑色晚礼服、配红帽子、红耳环、红口红、红色手提包 红色高跟鞋、一个件红色外套,重复就太泛滥了,太多的重复容易让人混淆重点

     对齐

对齐:即不要在页面空间随意安放,尽管很多时候需要表现出随意的感觉,但优秀的设计看似随意实际运用了很多原则和设计知识。

对齐方式:“左对齐”,“右对齐”,“居中对齐”

页面中任何一项都不是随意放置的,每一项都与页面上的另一项存在某种视觉上的联系;找一条明确的对齐线,坚持以它为基准,如:文本是左对齐,那么标题,副标题也应该是左对齐。

这些都可以算作规则,在你打破规则前就是要清楚的掌握这些规则,然后有意的打破,这样才能显示出排版设计的创意性。/

同一个页面内不要用多种文本混合方式。分明的黑白对比,更能吸引读者的眼球。

亲密性

亲密性:把有相关性的设计性的设计元素归组到一起,

亲密性目的:减少出现多个独立的元素从而导致混乱。

亲密性真实含义:在一个页面上,物理位置的接近就意味着存在关联,或相互之间存在某种关系,那么这些元素视觉上也应当有关联。

此外,页面设计时需要适当“留白”,这样做能让读者的眼睛及心灵适当休息,比如文本排版的时候常留一行或几行的空白。

【小结】

a.如果项彼此相关,就把它们分开在一组、建立更近的亲密性;同时相互之间没有直接关联的项要分开;

b.要注意放在页面上的每一个元素,要保证页面上是统一的,将每个对象与另外某个对象的一个边界对齐。

c.重复是更能保证一致性的一种方式。可以看看重复的元素(项目符号、字体、线条、颜色等),是不是可以让其中的某个元素更加突出

d.设计的过程,应坚持把四条原则贯穿起来;

    从中心点开始,确定希望读者最先看到什么-----   按逻辑进行分组-----   建立并维护明确的对齐---- 找出重复项 创建重复

     良好的排版是你享受文字的前提,出色的设计是让你爱不释手的理由

二、颜色运用

这部分简单阐述了色轮,如果你需要经过深思熟滤来决定一个项目使用哪些颜色,色轮会非常有用。

色轮基础:黄、红、蓝 三原色构成,这是唯一无法创造的颜色

若将色轮上相邻的颜色等量地混合,会得到三间色:

黄+红=橙

红+蓝=紫

黄+蓝=绿

利用上面的12色色轮,可以创建彼此非常协调的颜色组合,后面可介绍几种可行的做法:

互补:色轮上完全对立的颜色称为互补,正因它们如此对立,故最佳搭配是一种作为主色,另一种用于强调。

如:​

三色组:彼此等距的三种颜色通常会形成一个让人愉悦的三色组,红黄蓝就是一种极其流行的颜色组合,儿童产品常用这种组合 。还有绿色、橙色、紫色构成的间色三色组。

分裂互补三色组:从色轮的一边选择一种颜色、再在色轮上找出它对面的互补色、不过并不是直接用这个互补色,而是用该互补色两侧的颜色。

类似色:色轮上彼此相邻的颜色组成。不论组合两种颜色还是三种颜色,它们都有相同的基础色,最后的效果是相当醒目的,你可以试试用不同的亮色和暗色组合一组类似色喔、


暗色和亮色:色轮上的每一个颜色,增加黑色颜色会越来越暗构成暗色,同样增加白色颜色会越来越亮构成一个亮色

例:由一种色调及其相应的多种亮色和暗色组成的效果:

冷色与暖色:

冷色趋于做背景,暖色趋于前进,暖色不用费多大功夫就能产生效果,红色和黄色能立即映入你的眼帘,所以要组合冷色和暖色,一定要少用些暖色。不要让冷暖色太过于均衡。

CMYK与RGB颜色模式:

需要印刷的项目应该使用CMYK,需要在屏幕上看的内容则应使用RGB

PS中最好先用RGB处理图像再把它们转为CMYK

三、 所有伟大平面设计的基础——字体设计

一、字体类别

字体类别:旧式体;现代体;粗衬线体;无衬线体;手写体;花体

旧式体 Oldstyle :所有曲线笔画都 有一种从粗到细的变化;且若在曲线笔划的最细部分画一条线,这条线将是对角线,这条对角线也称为对角强调线; 此外衬线也是倾斜的。 


现代体 Modern:强调线完全垂直


粗衬线体 Slba serif:粗衬线体的粗/细过渡很小甚至没有; 衬线水平;


无衬线体Sans serif:无衬线体的粗细几乎是单一的,几乎没有可见的粗细过渡 字体的粗细都一样。


手写体 Script:利用一个书法笔或刷手写的所有字体、


花体Decorative:名人名言用花体非常合适.


Oldstyle和Sans serif是比较适合文字文本,Slab serif适合儿童读物,Script字体类似书法,适合在蛋糕上或者其他艺术标题,而Decorative一般就比较特别的广告字,艺术字了。字体的对比主要体现在大小,粗细,结构,形状,方向,以及色彩上。

【衬线体的结构中有一定的粗细对比,无衬线体则往往有一致的粗细。】

2、字体对比的方法

大小:大字体和小字体的对比非常 明显,为有效地使用大小对比,绝对不要保守;12磅和14磅大小的字体无法形成明显的对比,大多数情况下,它们只会产生冲突。

粗细:字体的粗细是笔划的粗细度、大多数字体系列都设计为多种不同的粗细:常规(regular)、粗体(bold)、半粗体(semibold)、极粗(extra bold)、细字体;粗细对比是为页面增加视觉效果且有效组织信息的方式最有效的方法之一

结构:即字体是如何建立的,

形状:全大写和全小写是一种形状的对比;罗马体和斜体是一种形状的对比;

方向:文本有一定的倾斜方向、更多地认为方向对比是指水平文本与瘦高文本列的对比。

颜色:暖色是前进型的、会引起我们的注意;冷色刚是远离型的、总是在我们的视线中后退。





©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容

  • 本书讲了什么 复杂的设计原理在本书中凝炼为亲密性、对齐、重复和对比这4个基本原则。作者以简洁明快的风格,将设计所必...
    少穻阅读 2,098评论 0 14
  • 目的:UI设计的目的是为了更好服务用户;能让用户快速完成自己的目标; UI设计的发展趋势:全链路和复合化的设计人才...
    quantre阅读 10,988评论 9 83
  • 字体动态关系:协调、冲突或是对立(对比)的关系。协调关系:如果只使用一个字体系列,在样式、大小、字体粗细等方面没有...
    正版书呆子阅读 2,426评论 0 13
  • 内容框架 为什么要学设计 很多人认为只有设计师才要学设计,那就大错特错了,其实我们每天的生活都离不开设计。不管是作...
    voidsky_很有趣儿阅读 1,843评论 3 51
  • 五莲县实验小学四年级三班 王宇 尊敬的妈妈: 您好!我想对你说一件事,但是我太胆小了,不敢当着您的面对你说,所以...
    宇淼阅读 299评论 0 5