Web设计原则

1.设计网站时要牢记自己的目标受众,遵循一定的设计原则

        浏览器友好性。浏览器使用统计数据来源:Net Market Share(http://marketshare.hitslink.com)

          屏幕分辨率。为使网页在多种分辨率下看起来令人满意,可居中整个网页

2.网站的组织结构图称为站点地图

       分级式组织结构:站点地图有一个明确定义的主页,它链接到网站的各个主要部分。

       线性组织结构:对提供需要按顺序观看的教程、导览或演示非常有用

         随机组织结构:没有提供清晰的导航路径。通常不用于商业网站上,在艺术类或原创网站上采用。

        

      三次点击原则:

             网页访问者最多只应点击三次链接,就能从网站的一个页面跳转到同一网站上其他任意页面。

3.四个视觉设计原则:重复、对比、近似和对齐

       重复:在整个设计中重复视觉元素。注意如何在重复的导航矩形中使用背景颜色区分链接的类型。

       对比:添加视觉刺激和吸引注意力。应用对比原则,应加大元素之间的差异。设计网页时,背景颜色和文本之间应该有很好的对比度。

      近似:分组相关项目。相关的项目在物理上应该放到一起,无关项目则应分隔开。

      对齐:对齐元素实现视觉上的统一。

4.无障碍设计:内容可感知,界面组件可操作,内容和控件可理解,内容足够健壮。

   搜索引擎的后台程序(一般称为机器人或蜘蛛)跟随网站上的链接来检索内容。

5.文本使用:使用短句,言简意赅,用标题和副标题组织内容,项目列表能充分吸引人的眼球,且易于阅读。

6.增强网页可读性的建议:

      使用常用的字体。英语字体使用Arial、Verdana或Times New Roman,中文字体使用宋体、微软雅黑或黑体。

       使用恰当的颜色组合。可从网站的图片或logo中选取颜色。

       检查对齐。居中的文本比左对齐的文本更难阅读。

       慎重选择超链接文本。不要将整个句子做成超链接。

7.RGB强度值是0~255的数值。年轻人通常喜欢深色背景(偶尔使用明亮对比)、音乐和动态导航。

8.面向“所有人”的网站通常使用白色背景和一些分散的颜色来强调页面中的某些区域并增添趣味性,通常还包含吸引人的图像。

9.文件大小和图片尺寸都要尽可能小。

   将网页和相关媒体文件的总大小限制在60KB缩短访问者等待时间。

   可将包含大型图片的页面分解成多个小一点的页面,以缩短访问者感觉到的加载时间。

10.每个页面都要有清晰的导航链接,应该在每个页面的同一位置。

     一般在站点标识logo下显示水平导航栏。

     大型网站采用面包屑路径让访问者不在网站中感到迷失方向,它会显示当前会话中的网页路径。

11.使用图片链接来提供网站导航,为了确保无障碍访问采用:

      每个image元素都配备替代文本;

       页脚区域提供文本链接。

12.线框是网页设计的草图或者蓝图,显示了基本页面元素的基本布局,但不包括具体设计。

     三种流行的页面布局技术:固定、粘着和流动。

     固定设计:采用固定设计的网页以左边界为基准,宽度固定。

     粘着设计:将内容配置成居中显示,而且可以指定固定宽度或者百分比宽度。

     流动设计:内容将占据100%的浏览器窗口,一个缺点是高分辨率下得文本行被拉得很长。        

你可能感兴趣的:(html5学习)