网页设计WebDesign72课件.pptxVIP

网页设计WebDesign

Webpagetext网页文字学习网页设计中的文字搭配之前，大家需要清楚文字的五个重要属性，他们分别就是：字体、字号、行宽、间距、背景，字体字号行宽间距背景

字体：即文字的不同书写体，是文字的风格与外衣。如汉字手写的楷书、行书、行草等，其艺术性体现在其完美的外在形式与丰富的内涵之中。欧阳询《心经》小楷王羲之《兰亭序》行书怀素《自叙贴》草书

字号：是中文字库中特有的一种单位，它表示字体的大小，在网页中我们通常会用pt(point，磅)、px(pixel，像素)、em(相对长度单位，相对于当前对象内文本的字体尺寸)等单位去界定，在网页设计中我们一般使用像素作为文字单位，以便于记忆和表述。字号、pt、px、em不同单位间的数值转换

行宽：即一段文字的总字数连起来的总宽度，段落宽度宜适中，不宜过宽，过宽会造成版面不灵活，且加重受众的阅读负担。

间距：既表示字间距、也表示行间距，网页设计中应设置合适的字间距与行间距，才能保证页面文字的可读性与舒适性。

背景：字体需要与背景结合或通过背景的衬托，才能让字体的风格特色与气质成倍彰显。

我们先看拉丁字母，拉丁字母主要分为有衬线字体与无衬线字体，有衬线体无衬线体

衬线字体，又被称为罗马体，因字母的笔画开始、结束的地方有额外的装饰，酷似罗马柱的形态，因此而得名。衬线字体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高，有调查显示，在书籍、报纸和杂志中大段落文字的排版，衬线体始终占据着压倒性的优势。所以衬线字体在设计中占据很重要的位置；

无衬线体就是没有衬线的字体，没有额外的装饰，笔画的粗细差不多。无衬线体的笔画简单因此其可塑性较强，可用作标题，当然在文字足够大的情况下，无衬线字体也可作为正文字体，但要保证其可读性；虽然无衬线字体种类比衬线字体多得多，选择余地也很大，但是必须保证以下原则：凡是在正文中使用无衬线字体的，必须保证其可读性，否则，使用衬线字体。

接下来我们看下中文字体，中文字体种类繁多，我们这里给大家归纳四种字体分别是：黑体、宋体、卡通体、书法体，

这几类字体又各自包含多种变体，如黑体有：微软雅黑、思源黑体、方正兰亭黑、汉仪中黑等；

宋体有：仿宋、新宋体、文星标宋等；

卡通体包含：方正喵呜体、包图小白体、方正卡通简体等；

书法体包含：楷体、沐瑶随心手写体、清松手写体等。

根据字体的不同特点与气质选择适合网页主题与气质的字体或变体，如黑体具有百搭、前卫、现代、科技、商业、运动的特点，因此与这些特点相关的网页主题可选择黑体字参与设计；

宋体具有复古、时尚、文艺、温柔、浪漫、女性的特点，因此传统、女性等网页主题可选择宋体及其变体参与设计；

卡通体具有趣味、可爱、清新、圆润、儿童的特点，因此一般儿童或甜品类的网页设计可以选择这类字体；

书法体具有历史、复古、意境、艺术、内涵、文艺的特点，由于这类字体的可识别性相对较弱，不会大量出现在正文部分，因此都会以标题或装饰性的文字形式出现，以此来烘托版面氛围。

为了让网页中文字的呈现更准确且更具设计感，我们还需要知道一些文字的编排技巧，第一是不要轻信软件的功能要相信自己的眼睛，例如“中”和“国”这两个字，将两个字设置成同一大小的字号，你会发现“国”字比“中”字看着大，这是由于文字本身结构给人带来的视错觉感，所以我们需要手动地再调整一下“中”字的大小，这样才能让两个字看着一般大小；

另外就是对齐功能例如“对”和“回”这两个字，我们设置其左对齐，虽然使用软件已然将其对齐，但从观者角度来看，好像又并未对齐，这也是由于字形结构给人造成的视错觉感，因此我们可以手动将“对”字再往左移一点，这样就能形成视觉上的左对齐；

其次字间距与行间距，字间距、行间距需要注意的地方大家请看

最后要想网页版面有设计感，需要学会应用对比，如大小对比、粗细对比、字体对比、

形态对比、方向对比、层次对比、纹理对比等，在网页设计中，使用文字各类对比的方法，即使是纯文字的版面也能设计出丰富的视觉效果，因此运用好对比能大大提升设计感。形态对比方向对比层次对比纹理对比

Webpagetext网页文字常规字体，无需刻意设计，主导航字体为修饰性标题，可用特殊字体（考虑版权问题）可当banner，字体绘制其中也可导出为PNG格式，前端技术引用，实现动效

Webpagetext网页文字Logo、大标题、特殊字体多采用图片形式或前端技术实现修饰作用大于信息传达导航、正文描述常规字体多采用宋体、雅黑、苹方等系统字体信息传达更为重要

Webpagetext网页文字提示性文字12px正文描述文字12px或14px栏目标题文字18px主导航文字14px-18px工具栏文字14px或16px版底文字12px-16px

最后给大家用文字总结一下网页设计