04HTML5学习之网页设计

网页设计

1. 网站的组织结构

   下面列出三种常见的网站组织类型:

   • 分层结构
   • 线性结构
   • 随机结构（有时称为Web组织）

   网站组织的示意图又叫站点地图。创建站点地图是开发网站的初始步骤之一。

   分层结构

     这一类型的特点在于有清晰定义的主页，主页上有指向网站各主要组成部分的链接。组块化（chunking）和“三点击原则”

   线性结构

     当网站或一组网页的目的是提供按顺序观看的教程、导览或演示时，采用线性组织就比较合适。
     在线性组织中，网页按前后顺序逐一被浏览。某些网站总体而言是分层结构，但在一些小的区域采用了线性结构。

   随机结构

     随机结构没有提供清晰的网站遍历路径。通常没有明确的首页，也没有明显的结构。

2. 视觉效果设计原则

   四条视效设计原则：重复、对比、邻近、对齐。

   重复：在整个设计中重复使用视觉组件

     重复出现的细节使作品更为紧凑。无论是颜色、形状、字体或图像，重复有助于设计的统一。

   对比：提升视觉刺激效果，吸引注意力

     运用对比原则，可以强调页面元素之间的差异，让作品看起来更有趣、对访客的吸引力更大。网页的背景颜色和文本颜色应该有良好的对比度。

   邻近：组合相关的项目

     当设计者采用邻近原则时，相关的项目在物理上被放置在一起。无关的项目之间保持足够的分隔空间。

   对齐：将元素对齐形成视觉上的统一效果

     对齐有助于提升网页凝聚力，组织页面时将每个元素与页面上的其他元素对齐（垂直或水平）。

3. 无障碍访问设计

   四项原则：可感知、可操作、可理解、稳健的，可简写为POUR。

   • 内容必须是可感知的。可感知的内容也就是说容易被看到或者容易被听到。
   • 内容中的接口组件必须是可操作的。可操作的内容具有导航形式，或其它的交互功能，这些功能可以借由鼠标或键盘来实现或操作。
   • 内容和控件必须是可以理解的。易于理解的内容也易于阅读，按一致的方式组织，并在适当的时候提供有用的错误提醒。
   • 内容应当足够稳健，从而能够应对当前以及未来的用户代理使用，包括辅助技术。

4. 适用于Web的写作风格

   网页的最佳宽度是960px。

   字体选择

   常见字体：Arial、Verdana、Georgia，或Times New Roman等。

   字体大小

   建一张字号设置的原型页，以便测试不同浏览器与显示器设置下的表现。

5. 导航设计

   • 面包屑导航
   • 利用图形实现导航
   • 动态导航

6. 页面布局设计

   线框和页面布局

     线框（wireframe）是网页设计的草图或蓝图，展示了页眉、导航、内容区域和页脚等基本页面元素的结构。

   页面布局技术

   固定布局

   固定布局技术有时也被称为固体或“结冰”（ice）设计。在此设计中，页面内容的宽度是固定的。

   流式布局

   流式（fluid）布局技术，有时也称为“流体”布局，主要使用百分比来设置各个部分的宽，从而生成了能“流动”的页面，通常占据100%的浏览器窗口。不管浏览器大小如何变化，网页内容都会自动“流动”以填满整个浏览器视窗。

参考书籍：［1］Terry Felke-Morris.学习HTML5［Ｍ］.第七版.北京：清华大学出版社，2017