网站设计中的字象乾坤——字体的排版设计


  作为设计师的我们,每天都在与字体打交道,我们常常希望能很好的使用他们,为设计加油添彩。我们常常纳闷,电脑里这么多的字体,要用哪一个?文字有这么多,怎样排版才能表达内心深处的思想?

  常常说,艺术是相通的。将文字排版与音乐结合起来,用视觉化的音乐和文字排版相结合,会让我们的字体排版更容易组合,更能体现我们的设计情感。

  将普通的文字赋予音乐的艺术形式,将文字排版赋予听觉的美感和视觉的美妙,更容易传递信息,表达其深层次的涵义。

  当音乐响起时,电脑播放器里变化雀跃的频谱图,音响喇叭发生震动产生的声波,跳动的五线谱和乐器发生引起的变化图(A-01),都是我们体现情感的视觉化形式。


  将文字排版用一个视觉化音乐的片段体现出来,从视觉上形成高度错落、疏密聚散、轻重缓急的效果,就具备了曲调的功能。

  而一个优秀的字体排版设计,则成为一段具有节奏和韵律的音乐,我们可以理解为是一首凝固的音乐。

  (一) 文字分析: 了解字体的结构和字体的特性,是我们排版优秀的字体的依据。

  字体排版设计中,点线面结合成的设计群体,高低错落、疏密聚散,是构成形式美的重要因素。26个英文字母,根据字体的粗细设定节点组合,每个单独的字母就构成了音符。

  如图(B-01),大写的I=1个长节点,O=4个长节点;如图(B-02),小写的a=3个短节点,b=1个长节点+2个短节点。


  单行文字排版的横向韵律:根据字体的粗细设定节点的粗细和排布疏密,就能产生轻重缓急高低错落的节奏感和韵律感,如图(B-03)。


  多行文字排版的纵向韵律:根据单行文字的长短和字体的粗细产生节奏和韵律,如图(B-04)。


  当我们将文字音符化之后,就可以开始整理出字体排版的规律,使我们的字体设计更富韵律感。

  (二)文字的韵律: 优秀的字体排版,具有其独特的美。由文字的律动演绎出米美妙的音乐。

  文字本身的韵律:按照客观字体的变化、运用常态的字体字符进行连续地排列,形成一种律动形式。

  一段文案,不采用任何修饰与变化,字体字号颜色都不变,所产生的节奏是就是单词与单词之间的间隔,字体是唯一能体现情感的依据。

  如下图,字体字号方向均相同,节点音符不断的重复出现,节奏就是单词之间字母之间的间距,而大小写的区分,则产生了高低起伏的韵律,字体的粗细使文字发散出欢快还是稳重的气息,如图(C-01)全部大写是平缓稳重的韵律,如图(C-02)采用大小写,则产生了高低起伏的韵律,而因为节点比之左边文字节点要细,所以会显得活泼一些。


  如图(C-03)所有字母都大写,单词间的间隔形成节奏,而单词间的颜色轻重形成韵律,文字排版在横向韵律的基础上又形成了纵向韵律。采用的字体稳重而不失活泼,加上下方的斜体字,使得整个文字排版透露出男性的稳重基调而又不失轻松愉快的韵律。


  字体排版设计的韵律美表现在重复上:可以是间距不同、形状相同的重复;也可以是形状不同、间距相同的重复;还可能是别的方式的单元重复。这种重复的首要条件是单元的相似性,或间距的规律性;其次是节奏的合逻辑性。

  (三)如何赋予文字韵律: 在文字本身涵盖的韵律节奏基础上,人为赋予其新的韵律和节奏

  使用基本的字体和字号,在不进行其他特意变化的情况下,根据文字本身的特点进行调整,使文字排版在横向上和纵向上都产生客观自然的韵律变化,使字体排版的律动更加连贯顺畅,赋予设计师所想体现的情感,如同音乐的曲风。

  如图(D-01)字体相同,不同字号,不同粗细,不同颜色,形成效果不同的韵律。节点的粗细间距都可以给人不同的韵律感,欢快的、稳重的、活泼可爱的还是紧张舒缓的,更由于韵律的不同而有更明显的对比。


  案例分析:


  图(D-02),文字采用大写,以单词的间距为节奏,字号大小进行对比形成韵律的强弱,文字排版理性而有秩序,由细微的韵律引导,突然变化成强烈的声调,主题震撼,醒目突出。


  图(D-03),词间距为节奏,字号大小进行强烈对比突出DENIM,又因为采用的细线字体,使整个画面的韵律时尚又圆润,符合女装的主题。

  图(D-04),词间距为节奏,字号大小进行强烈对比。首先以轻柔的高低起伏的音乐进入,继而以强烈的音乐震撼全场,后续仍以轻柔的音乐做为补充,交响曲的韵律突出重点,节奏震撼明朗。


  图(D-05),横向上看,词间距为节奏,字体的粗细对比形成音律强弱,字体颜色深浅加强了音律效果,纵向来看字体大小颜色形成强-弱-强-中-弱的韵律。

  (三)如何赋予文字韵律-基线、特效: 通过改变排版方式,添加一些特别效果如倾斜或者是手写,使文字更具趣味性。

  常用的方式如增加斜体使文字具有动感和趣味,如字行间进行叠加使文字产生双基线进而形成二重奏或者多重奏的韵律,如图(D-06)。


  案例分析:

  图(D-07),左边的字体排版主要以基线的变化为主韵律,由单基线变双基线,单曲变重奏。大小写的高低起伏变化,让文字突出了重点表达了主要内容,节奏又变的明快。


  图(D-08),如果这个文字排版是一首曲子的话,从左到右,先是轻快的斜体韵律开头,突然变化出明快的细线条大曲调,吸引人注意,最后出现一连串低调的曲子补充,让人看到这个文字就明白,是时尚的饰品。特别是开始的斜体,让画面在女性的稳重中透露出活泼。


  图(D-09),以斜体为主旋律,由文字的大小写为起伏,韵律优美。

  (三)如何赋予文字韵律-长短句、字距: 通过文字的大小对比和字距,添加纵向韵律。

  如图(D-10),单词间字体大小悬殊,文字大小写以及单词的断点形成横向韵律,但从字行来看,字行的长短不同、高度不同、间距不同则形成了纵向韵律,因此这类型的字体排版则具有双重韵律。


  案例分析:

  图(D-11),从纵向上看,长短句的排版方式,让人感觉这就是歌曲的旋律,加上富有重短轻长的旋律和轻松趣味的手写字,让画面透出一股趣味。


  图(D-12),我们平常排版,总是喜欢用对齐的方式,而这个文字的排版则另辟蹊径,左右都不对其或者居中。但是从左边的节点来看,旋律由轻柔递进到重调,然后渐隐再轻柔,呈现出一股递进的变化关系,让画面旋律轻松透气,韵味十足。


  图(D-13),这种字体排版的组合方式,既有横向韵律又有纵向韵律。横向上看,句子的字号对比,重-轻-微重-再轻以及单词间的节奏,纵向上看,句子长短的起伏和画面所体现的情感相呼应。


  不做干扰韵律的设计:一套字体排版设计,字体采用两种最佳,最多不超过3种,在这个基础上对字体进行调整和变化,如大小写,字号、粗细、行间距以及一些特殊变化如斜体和双基线,就可以产生一系列的排版变化,使文字排版具有序列、对比、参差、强弱等等具备设计情感的节奏和韵律。

  (四)韵律设计范例 : 字体排版的创作过程,自始至终伴随的是一种理性的情感体验。

  字体排版的分析已经告一段落,如何将这种排版方式运用到我们的字体排版当中,下面用一个例子来说明。

  图(E-01),一行没有变化的字,虽然有秩序,但是太长没有重点没有主次,只能依靠字体本身所具备的特性产生节奏,韵律平淡不出彩。


  图(E-02),将平淡的句子断开,在原有的韵律基础上,赋予新的节奏。


  图(E-03),但新的节奏不能够突出我们想突出的重点,我们要进行调整。这是一个注入我们情感关注的过程。


  图(E-04),付诸我们主观意识希望赋予的情感,强调突出。改变字体大小、粗细对比等,调整节奏,形成新的韵律。将重点词汇调整突出,赋予情感,使节奏更加突出,旋律更加流畅。


  图(E-05),细节调整,使韵律更加流畅。添加颜色能让韵律分出轻重刚柔,再加上斜体特效使得整个严肃的文字添加了一丝动感。


  图(E-06),如此这般,因为节奏的不同,赋予的情感不同,可以产生不同的韵律。 根据以上的排版方法,我们就可以排列出具有不同特点的文字。


  文字本身是千锤百炼的结晶,本身具有很美的韵律。经过设计和选用作为排版的基础,将字母用节点的方式代替,通过节点的长短粗细间距,让文字通过粗细高矮的变化以及字距行距的变化产生出重复、大小、颜色、基线形状、长短句的音乐,赋予文字节奏和韵律,就能产生出丰富多彩的视觉效果。

  原文:http://www.aliued.com/2013/02/02/1532/

时间: 2024-11-16 18:43:49

网站设计中的字象乾坤——字体的排版设计的相关文章

网页设计中的 serif 和 sans-serif字体应用_经验交流

Howdy, 大家好,又是我~  上一次我们简单的谈了一下font set和一些要注意的基本问题.今天我们继续字体这一话题,深入讲讲上次提到的"通用字体族".首先是最常用的 serif 和 sans-serif 这两个通用字体族.   - serif Serif 在印刷学上指衬线字体.为了理解衬线字体的概念,大家先看几个典型的衬线字体的例子: My Georgia字体 King Times New Roman 字体 汉字 宋体 单词 My 中的字母 "M"上下方突出

在App设计中怎样优雅的运用字体

  我有个小小的心得可以分享给你--好的字体等于成熟的设计.直至几年前,网页设计师们都还没有对字体表现出足够的关注.如今这个领域已日趋成熟--字体繁荣发展,成为一股巨大的设计潮流. 好的字体在文本的易读性上起了决定作用,却不止于此,它也传递出设计师分享的意图.它是整个用户体验的重要部分.从另一方面讲,缺乏好的字体,是整个产品不专业的表现.文字是主要界面的基础元素--如果它设计得很糟,为何还要深入下去? 本地应用第一年在iOS和Android平台上的发展,简直惨不忍睹.似乎大多设计师和开发者根本没

网页设计中的极简主义

  由于其永恒的优雅和清晰的内容呈现方式,极简主义一直被视为是Web设计中最持久的视觉框架之一.虽然设计思潮来来去去,但极简主义设计却变得日益经典,它的视觉和设计理念被身处不同专业和行业的设计师共同接受. 作为一种艺术风格,极简主义并非是网页设计独有的,简约设计运动的根源可以追溯至20世纪初.自那时以来,极简主义设计理念一直长盛不衰,仿佛是一种可以经历时间考验的永恒模型. 每个时代的设计师都会发现自己与简约设计的原则多少有些关联,更不用说我们现在这个极简主义爆炸的时代.在这一篇文章中,我们将探讨

《众妙之门——网页排版设计制胜秘诀》——第3章 设置网页字体的5 项原则和方法3.1 系统地进行网页版式设计

第3章 设置网页字体的5 项原则和方法 设置网页字体时,有一些基本的方法.指南和目的.总体来说,网页的版式应当具有可读性.易访问性.可用性和品牌特色.这四个方面相互作用,使网页设计达到与用户沟通和交互的目的. 为使网页富有表现力并给人留下深刻的印象,网页版式的设计有许多方法.让我们进一步看一些网页版式设计的原则.规则和方法-当你学习如何在网页上完成有效的字体设置时,可以把它们当作一个开端. 3.1 系统地进行网页版式设计 在网页设计中,每个版面上的元素都需要同时实现各种各样的目标.创建的每个标题

网页设计中常用的技巧:最常见的固定浮窗设计

文章描述:固定浮窗在设计中的使用. 固定浮窗是网页设计中常用的技巧,指一定区块固定在浏览器的响应位置而不随滚动条的移动而改变位置的设计. 最常见的固定浮窗设计是固定在浏览器底部的弹窗广告,比如新浪首页会有新浪视窗的弹窗广告. 最近当当网首页广告力度很大,其中大部分都是固定在浏览器底部和两边. 由于固定浮窗总是显示在网页内容的最上端,有时候甚至覆盖了用户想要的价值内容,这种设计确实不讨人喜欢.有时候,有的固定浮窗会提供"关闭"按钮,但是这明显不能消除用户的反感情绪,因为在一片广告上找关闭

在别人的网页设计中寻找“高品质”

提升网页和博客设计品质的一些实例和技巧 "高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧. 接下来我会给大家列一些要点,并附上相应的例子,与大家分享一下我在别人的网页设计中寻找"高品质"的过程. 01. 留白在好的网页设计中我最留意的是那些对设计元素之间

让网页设计中的图标更具吸引力的几大要素

图标在网页设计中的作用 图标在网页设计中用途广泛,几乎每个网站中都存在着图标.通过这些小小的图标,可以方便的实现视觉引导和功能划分.如果选用恰当,图标能和页面 中的 图片有机融合,保持视觉上的一致性,同时也能够和整个网站的风格相契合.图标并不是华而不实的小玩意儿,小图标有大用处.在网页设计中,如果设计师并不擅 长图标设计,那么就需要在图标选择上下功夫了. 一般来说,根据使用手法.使用场合的不同,一张图像可以有多种解读,图标亦如此.图标不但能够吸引用户的注意力,还能分割页面中的区域,最为重要的事,

分享网页设计中寻找“高品质”的过程

"高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧. 接下来我会给大家列一些要点,并附上相应的例子,与大家分享一下我在别人的网页设计中寻找"高品质"的过程. 01. 留白 在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用.留心不同内容区块之间的

总结设计中已有的复用思想

网页制作Webjx文章简介:设计中的的重复使用. 技术上有软件复用的理论,作用在于缩减软件开发和维护的花费,其中包括了代码的复用.设计的复用.分析的复用和测试信息的复用.复用的思想是相通的,广告设计.建筑设计.工业设计.交互设计和信息架构等领域中都有所体现,只是在各个领域中表现形式和运用方式不同. 日常生活中最低俗但有效的广告设计复用恐怕要数脑白金的广告,每年都是同样的人物角色和广告词.设计优秀有绝对伏特加的广告,对酒瓶外形的不同展现方式,达到的效果是即使只有酒瓶的线条,也能让人联想起产品. 建