高手进阶:网页设计中的文字运用
作者:薛亚峰 纪光熙 来源:赛迪网 发布时间:2008-10-05 08:58:00
如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈现,无非就是通过文本、图像、Flas * 等,其中, 文本是网页中最为重要的设计元素。
对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见。
文字的格式化
1.字号、字体、行距
字号大小可以用不同的方式来计算,例如磅#quotel.quoter#或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅,所以,建议采用磅为单位。
最适合于网页正文显示的字体大小为12磅左右,现在很多的综合性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。
网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。例如:粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。
从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到,这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方,可以将文字制成图像,然后插入页面中。
行距的变化也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点,则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。
除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。例如,加宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独到的匠心。
行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。例如:{line-height:20pt}、{line-height:150%}。
文字的整体编排
页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式,它在个性和情感方面对人们有着很大影响。在网页设计中,字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲,所有的设计元素都可以理解为图形。
1.文字的图形化
字体具有两方面的作用:一是实现字意与语义的功能,二是美学效应。所谓文字的图形化,即是强调它的美学效应,把记号性的文字作为图形元素来表现,同时又强化了原有的功能。作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,一切都应围绕如何更出色地实现自己的设计目标。
将文字图形化、意象化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心。
2.文字的叠置
文字与图像之间或文字与文字之间在经过叠置后,能够产生空间感、跳跃感、透明感、杂音感和叙事感,从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性,但是能造成页面独特的视觉效果。这种不追求易读,而刻意追求“杂音”的表现手法,体现了一种艺术思潮。因而,它不仅大量运用于传统的版式设计,在网页设计中也被广泛采用。
3.标题与正文
在进行标题与正文的编排时,可先考虑将正文作双栏、三栏或四栏的编排,再进行标题的置入。将正文分栏,是为了求取页面的空间与弹性,避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题,但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理,甚至可以直接插入字群中,以新颖的版式来打破旧有的规律。
4.文字编排的四种基本形式
页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。
两端均齐:文字从左端到右端的长度均齐,字群形成方方正正的面,显得端正、严谨、美观。
居中排列:在字距相等的情况下,以页面中心为轴线排列,这种编排方式使文字更加突出,产生对称的形式美感。
左对齐或右对齐:左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线,很容易与图形配合。这种编排方式有松有紧,有虚有实,跳动而飘逸,产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯,显得自然;右对齐因不太符合阅读习惯而较少采用,但显得新颖。
绕图排列:将文字绕图形边缘排列。如果将底图插入文字中,会令人感到融洽、自然。


猜你喜欢
- 前言层次聚类是流行的无监督学习算法之一。层次聚类所做的就是找到数据集中具有相似属性的元素,并将它们组合在一个集群中。最后,我们得到一个单一的
- 引言:今天又双叒搞新电脑的环境,对于我这个.Net程序员,那就肯定离不开安装 SQL Server 了,网上没有找到很详细的教程,所以决定自
- Win7或Windows server 2008中IIS7支持ASP+Access解决方法:1. 让IIS7支持ASPWin7或Window
- 在运用xmlhttp组件编写程序中,会碰到 "msxml3.dll 错误 ‘800c0005’&nb
- 基本思路使用GDAL创建Shapefile数据的基本步骤如下:使用osgeo.ogr.Driver的CreateDataSource()方法
- 1. 权限管理Casbin是用于Golang项目的功能强大且高效的开源访问控制库。1.1.1. 特征Casbin的作用:以经典{subjec
- 背景本文主要给大家介绍了关于在Python一段程序中使用多次事件循环的相关内容,我们在Python异步程序编写中经常要用到如下的结构impo
- 相关代码:JavaScript写的日期时间控件,很好用 13个超酷的js显示时间效果 <html><head><
- 本文使用pygame实现播放mp3,文中用到pygame及mutagen库,安装:pip install pygamepip install
- 线上有个需求,格式化,从一堆s1,s100-s199中找出连续的服并且格式化显示出来,如:神魔:S106-109,s123,s125御剑:
- 本文实例为大家分享了OpenLayers3实现图层控件的具体代码,供大家参考,具体内容如下1. 前言在实际应用中,我们将加载到地图容器中的图
- 对象:是抽象的概念 如列表 元组 字典 集合 皆为对象序列化:一种方法。目的:把对象存储在磁盘上(即,将对象转换为字节数据/字符数据)。这一
- 如何发送一个XMLHttpRequest的检索的特定部分HTML标题数据。<html> <head> <tit
- 一、前言装饰器:本质就是函数,功能是为其他函数添加附加功能原则: 1、不修改被修饰函数的源代码 
- 写了个小程序:功能1.测试远程ssh连接是否成功,2.批量执行远程ssh命令效果如下:代码如下:#-*- coding:utf-8 -*-i
- 一,十进制(decimal system)转换函数说明 1,十进制转二进制 decbin() 函数,如下实例 echo decbin(12)
- Python 3.8是Python语言的最新版本,它适合用于编写脚本、自动化以及机器学习和Web开发等各种任务。现在Python 3.8已经
- 上篇关于Go模板库应用 的文章最后我们留下一个问题,页面模板是通过 CDN 引用的 BootStrap 的 css , js 文件。到目前位
- 本文实例为大家分享了python实现nao机器人身体躯干和腿部动作的具体代码,供大家参考,具体内容如下跟上一篇类似,代码没什么难度,可以进行
- 我们通常说的双机热备是指两台机器都在运行,但并不是两台机器都同时在提供服务。当提供服务的一台出现故障的时候,另外一台会马上自动接管并且提供服