第1章 网页艺术设计基础知识-设计元素-bak课件.ppt

宋体，港台地区或称明体，日文中称之为明朝体，是因为这种字体起源中国宋明时期，当时中国的雕版印刷术已经广泛传播，而用于制造活字的木纹多为水平方向，因此造成在刻字时横画细，竖画粗；而且为了防止边缘破损，横画在两端也被加粗，根据运笔习惯而形成三角形的装饰。 正因为衬线体在笔画始末的地方有额外的装饰，且笔画的粗细会因直横的不同而有所区别，所以强调出字母笔画的走势及前后联系，使得前后文有更好的连续性，更适合走文阅读。即更适合作为正文字体。相反的，无衬线体笔划粗细基本一致，强调的是单个字母。容易造成字母辨识的困扰，常会有来回重读及上下行错乱的情形。因此，适合用作标题之类需要醒目但又不被长时间阅读的地方。 * 事实上，在设定行距的时候，排版上有个原则，就是行与行之间的空隙一定要大于单词与单词之间的空隙， 否则的话，阅读者在阅读的时候容易“串行”，造成阅读困难。充足的行距可以隔开每行文字，使得眼睛容易区分上一行或下一行。近几年Web上对于正文的排 版，大多喜欢1.5em的行距，尤其是中文网站。也就是如果使用了12px的字体大小，那么设计师常常喜欢18px的行距。1.5em确实是一个很好的经 验值。事实上，中文的论文的规范也是使用1.5em的行距。 * W3C提供的建议，它认为默认的行距应该在1.0em到1.2em之间。事实上，在设定行距的时候，排版上有个原则，就是行与行之间的空隙一定要大于单词与单词之间的空隙， 否则的话，阅读者在阅读的时候容易“串行”，造成阅读困难。充足的行距可以隔开每行文字，使得眼睛容易区分上一行或下一行。近几年Web上对于正文的排 版，大多喜欢1.5em的行距，尤其是中文网站。也就是如果使用了12px的字体大小，那么设计师常常喜欢18px的行距。1.5em确实是一个很好的经 验值。事实上，中文的论文的规范也是使用1.5em的行距。 * 欢快、正面及专业的感觉 * 要考虑的问题包括：是否使用动态效果？在哪几个元素和位置使用动态效果？具体动态效果是什么？动态效果实现的技术手段是哪种？一般有动态效果的有：导航、按钮、图片切换、页面切换以及其他。 * 等宽字体(Monospace) 等宽字体事实上只针对西文字体。因为英文字母的宽度各不相同。例如i就要比m窄很多。中文基本上等款字体。 手写体(Calligraphy) 顾名思义，手写体就是手写风格的字体。有时我们也叫它书法字体。中文的书法字体大多都比较生硬。 符号体(Symbol) Windows里最著名的符号体就是Webdings 字体的样式 常见的字体的样式分为：正常Normal、粗体Bold、斜体Italic 粗体与斜体要慎用！ 间距 （1）行距(Line-height、Leading) 指两个相邻的行之间，基线的距离。行间距的单位em，也就是根据字体大小来定义行距。 （2）字间距(Letter-spacing、Tracking) 指一组字母之间相互间隔的距离。字间距影响了一行或者一个段落的文字的密度。 （3）段间距： 段间距离 （4）行长(Measure)：指一段文字的宽度。 文字排版原则 （1）W3C标准：行距在1.0em到1.2em之间。 （2）实际运用标准：1.5em。 （3）行距一定要大于字间距。否则影响可读性。 （4）在一行内文字也不能太多，一般在40到70个字母。一般在通栏内，不要超过35个中文，否则会影响阅读。 文字排版原则 （5）正文一般是9pt或是12px，特殊情况下使用14px（如儿童网页）。低于11px的文字易读性就会降低。 （6）确保文字与背景之间有相当强烈的对比度，否则会降低文字易读性。在暗色调的背景色上使用亮度高的色彩。白底黑字是网页上所惯用的文字和背景的色彩搭配方案，也是最不容易造成视觉疲劳的配色方案 网页设计之字体排版原则 1.是否具有高辨识度 2.是否适合长时间阅读 3.是否适应终端 5、图片（影像、音效） “一张图片胜过千言万语”。 要寻找图片时，我们要问几个问题： 图片和网站相关吗？--相关性 图片有意义吗？---趣闻性 图片能吸引人吗？--吸引力 图片类型：相片、插画、图像。 大张照片做背景示例 适当的图片传达情感 使用插画元素增加趣味性 图像（图标）是重要的设计手法 图形的处理 边框的处理 边框颜色与图像颜色接近 边框宽度不要过宽，有些只需要1PX 图片间距要保持整体 6、动态效果 动态效果是设计中的最后一部分内容，也是需要慎重考虑的部分。 动态效果设计的原则：细微与适度 一般使用动态效果的位置有：导航、按钮、图片切换、页面切换以及其他 导航 导航中的动态效果（互动）是最常见的。同时导航也是设计的重点。 导航互动效果分为：展示菜单（链接）动态