美文网首页
如何把页面排版的更好看些呢?

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

作者: 林莜儿 | 来源:发表于2018-10-03 20:50 被阅读156次

    写在前面:

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

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

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

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

    一、设计原则:

    设计的基本原则概括为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)、细字体;粗细对比是为页面增加视觉效果且有效组织信息的方式最有效的方法之一

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

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

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

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


    相关文章

      网友评论

          本文标题:如何把页面排版的更好看些呢?

          本文链接:https://www.haomeiwen.com/subject/gettaftx.html