网站规划与首页的制作

《网站规划与首页的制作》由会员分享，可在线阅读，更多相关《网站规划与首页的制作（66页珍藏版）》请在金锄头文库上搜索。

1、第二次 网站规划与首页设计张在职构成网页的基本元素包括标题、网站 LOGO、banner、bottom、主体内容、 功能区、导航区、广告栏等。这些元 素在网页的位置安排，就是网页的整 体布局。首页的基本元素颜色搭配原则颜色原理 色彩所传达的涵义 网页安全色 艺术规律颜色原理色相：指的是色彩的名称。这是色彩最基本的特 征，是一种色彩区别于另一种色彩的最主要 的因素。比如说紫色，绿色，黄色等等都代表了 不同的色相。同一色相的色彩，调整一下亮 度，或者纯度很容易搭配，比如，深绿，暗 绿，草绿，亮绿。 颜色原理明度：也叫亮度，指的是色彩的明暗程度，明度 越大，色彩越亮。 比如一些购物，儿童类网站。用的

2、是一些鲜 亮的颜色，让人感觉绚丽多姿，生气勃勃。 明度越低，颜色越暗。主要用于一些游戏类 网站，充满神秘感；一些个人站长为了体现 自身的个性，也可以运用一些暗色调来表达 个人的一些孤僻，或者忧郁等性格。有明度 差的色彩更容易调和。颜色原理纯度(饱和度)：指色彩的鲜艳程度，纯度高的色彩纯，鲜 亮。纯度底的色彩暗淡，含灰色。Photoshop中对应属性Ctrl+U色相色相反差大人眼容易辨认饱和度饱和度高人眼容易辨认明度明度对比强人眼容易辨认色彩所传达的涵义红色 热情、浪漫、火焰、暴力、侵略、停止、警告、 禁止。 橙色 秋天、活跃、新鲜、愉快、能量、食欲 紫色 创造、谜、忠诚、神秘、稀有。 蓝色 忠

3、诚、安全、保守、宁静、冷漠、悲伤。 （忧 郁； 理智；冷静； 稳 重；成熟；诚信；商务） 绿色 自然、稳定、成长、忌妒、行（北美）、允许。 黄色 明亮、光辉、疾病、懦弱。 黑色 能力、精致、现代感、死亡、病态、邪恶。 白色 纯洁、天真、洁净、真理、和平、冷淡、贫乏、 死 亡（中国）。网页安全色网页安全色是指在不同硬件环境、不同操作 系统、不同浏览器中都能够正常显示的颜色 集合（调色板），也就是说这些颜色在任何 终端浏览用户显示设备上的现实效果都是相 同的。所以使用网页安全色进行网页配色可 以避免原有的颜色失真问题。网页安全色网页顏色共216色 红色分為0，51，102，153，204，255

4、绿色分為0，51，102，153，204，255, 蓝色分為0，51，102，153，204，255. 然后就是组合了，6*6*6216色了。是不是一定要用页面安全色？是不是一定要用网页安全色？本人觉得216种颜色毕竟有限，仅仅 为了保持统一严谨而采用安全色，会严 重限制了创作发挥，也扼杀很多精彩纷 呈的网页。 25625625616777216 216 所以网页安全色要用，但不必过分追求艺术规律色彩的鲜明性： 如果一个网站的色彩鲜明，很容易引人注 意，会给浏览者耳目一新的感觉。 色彩的独特性： 要有与众不同色彩，网页的用色必须要有自 己独特的风格，这样才能给人浏览者留下深 刻的印象。 艺术规

5、律 色彩的艺术性： 网站设计是一种艺术活动，因此必须遵循艺 术规律。按照内容决定形式的原则，在考虑 网站本身特点的同时，大胆进行艺术创新， 设计出既符合网站要求，又具有一定艺术特 色的网站。 色彩搭配的合理性 色彩要根据主题来确定，不同的主题选用不 同的色彩。颜色搭配方法色彩有心理暗示的作用，很多行业都有其行业色，很多品牌都有其 品牌色：例 如：就是麦当劳、肯德基这类快餐店不约而同的选择了红色作 为主基调，因为红色有增进食欲的效果。红色代表热情、革命和危 险；绿色代表希望、春天和环保；橙色代表活跃和快乐；紫色代表 华丽、妖艳、神秘。很多品牌都有一套自己的VI，里面颜色使用都 是有一套的，奥迪/

6、灰,可口可乐/红,百事可乐/蓝根据页面风格以及产品本身的诉求确定主色借鉴 你懂的感情与经验根据主色确定配色网页配色很重要，网页颜色搭配的是否 合理会直接影响到访问者的情绪。好的色 彩搭配会给访问者带来很强的视觉冲击力 ，不恰当的色彩搭配则会让访问者浮躁不 安。同种色彩搭配 邻近色彩搭配 对比色彩搭配根据主色确定配色同种色彩搭配同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。网页例子： 蓝与浅蓝（蓝+白），绿与粉绿（绿+白）与墨绿（绿+黑 ）特点： 色相相同、明度或纯度不同优劣： 对比效果统一、文静、雅致、含蓄、

7、稳重，但易产生单调、呆板的弊病同种色彩搭配相近色色彩搭配例子： 红橙与橙与黄橙色特点： 色相环上相邻二至三色对比，距离大约30度左右 ，为弱对比类型优劣：效果感觉柔和、和谐、雅致、文静，但感觉单 调、模糊、乏味、无力，必须调节差来加强效果相近色搭配类似色色彩搭配邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。例子： 红与黄橙色对比等等特点： 色相距离约60度左右，为较弱对比类型。优劣：效果丰富活泼，但又不失统一雅致、和谐的感觉。类似色色彩搭配对比色彩搭配一般来说，色彩的三原色（红、黄、蓝）最能体现色彩间的差

8、异。色彩的强烈对比具有视觉诱惑力，能够起到几种实现的作用。对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用。对比色彩搭配例子： 黄绿与红紫色特点： 色相对比距离120度左右，为强对比类型优劣：效果强烈、醒目、有力、活泼、丰富，但也不易统一而感 杂乱、刺激、造成视觉疲劳。一般需要采用多种调和手 段来改善对比效果对比色彩搭配对比色彩搭配补色色彩搭配是广义上的对比色。在色环上划直径，正好相对（即距离最远）的两种色彩互为补色。特点： 色相对比距离180度左右补色色彩搭配例子： 红色是绿色的

9、补色；橙色是蓝色 的补色；黄色是紫色的补色。优劣：两种颜色互为补色的时候，一种颜色占的 面积远大于另一种颜色的面积的时候，就可 以增强画面的对比，使画面能够很显眼。一 般情况下，补色运用有得有失。 补色色彩搭配暖色与冷色色彩搭配暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。这种色调的运 用可为网页营造出稳性、和谐和热情的氛围。冷色色彩搭配冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配，这 种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色点 色彩与白色搭配一般会获得较好的视觉效果。暖色系暖色比冷色更有亲近感。因此说来，一个较暗的暖 色可能看起来和一个在数值上较亮的冷色一样亮。红色动力

10、，力量，热情，爱橙色快乐，热情，吸引力，成功黄色欢乐，刺激，焦点冷色系冷色比比暖色更有距离感。因此说来，一个较亮的 冷色可能看起来和一个在数值上较暗的暖色一样亮。绿色清爽，新鲜，威望，凉爽，冷静，蓝色可靠，可信，可依赖，宁静紫色灵性，仪式，神秘，转生，皇权中性色中性色对情绪的影响更小，因此常被考虑用来做客 观介绍。然而，若用得好，中立色依然可以有自己的暗 示。“纯”黑和“纯”白是我们的理想的“光明”和“黑 暗”的色彩代表。黑色性感，神秘，服从，危险白色纯洁，无辜，恢复，中立，永恒搭配消色所谓的消色，就是指黑白灰（也有说是黑白金银灰），这类颜色由于本身没有色性，所以可以说是万用搭配色。当然，说是

11、说万用搭配色，但是也是有一些需要注意的地方：首先，由于本身没有色性，他们必须和色性比较强的颜色搭配会比较出效果；其次，消色与其他颜色搭配的时候，比例一定要控制好，尤其是灰色，灰色是一种很“高档”的颜色，但是问题是使用的过多，会使得页面灰蒙蒙没有质感。主颜色：主要颜色，起到在整体上显示出站点整体内容和风格的重要作用。背景色： 用于背景的颜色。辅助颜色：辅助主颜色的次要颜色，用于协调主颜色凝造整体气氛。突出颜色：用于突出，强调显示，主要使用于占用范围较小的按钮、标签等处主颜色、背景色、辅助颜色、突出颜色页面尺寸： 分辨率在800x600的情况下，页面的显示尺 寸为：780x428个象素； 分辨率在

12、640x480的情况下，页面的显示尺 寸为:620X311个象素； 分辨率在1024X768的情况下，页面的显示尺 寸为：1007x600。网页的布局只要可能，就要避免滚动。用户在浏览新页面时，常常大致扫一眼 页面的内容区域，而不理会导航菜单条。如 果页面看起来和用户的需要无关，那么两三 秒后用户总会点击“后退”按钮。 重复：在整个站点中重复实现某些页面设计 风格。 重复的成分可能是某种字体、标题logo 、导航菜单、页面的空白边设置、贯穿页面 的特定厚度的线条等。 颜色作为重复成分也很有用：为所有标 题设置某种颜色，或者在标题背后使用精细 的背景。用对比来吸引读者的注意力。 通过对比来抓住读

13、者的注意力，例如， 你可以让标题在黑色背景上反白，并且用大 的粗体字（比如黑体），这与下面的普通字 体（比如宋体）行成对比。另一个方法是在 某段文本的背后使用一种被景色不要使用闪烁的文本。除了在一些及其少见的情况下，闪烁的 文本会使用户厌。 动画文本也是这样的，一定要非常有节 制地使用。尝试使用文本的布局协助导航。如果页面里包含几十个链接，那么， 就要把这些连接分类，并且用不同的标题 和颜色块来区分它们。心里时刻想着站点的观众。哪种人会访问这个站点？他们为什么要 来访问，他们的主要知识背景是什么？页面 的设计和布局需要反映这些群体的不同需 求。 一旦你了解了客户群体的需要，就可以分析 出他们最

14、希望看到的标题，并且利用页面布 局使这些标题突出出来。当然，作一个客户 调查，是很好地掌握他们关心内容的方法。一个好的网页设计作品就必然有一个号的网 页布局，那么我们来分析一下，在网页设计 过程中有哪些布局类型？网页布局大致可分 为“国”字型、拐角型、标题正文型、左右 框架型、上下框架型、综合框架型、封面 型、Flash型、变化型，下面分别论述。1.左右框架型：这是一种左右为分别两页的框 架结构，一般左面是导航链接，有时最上面 会有一个小的标题或标致，右面是正文。我 们见到的大部分的大型论坛都是这种结构的 ，有一些企业网站也喜欢采用。这种类型结 构非常清晰，一目了然。 2.上下框架型：与上面类

15、似，区别仅仅在于是 一种上下分为两页的框架。3.综合框架型：上页两种结构的结合，相对复 杂的一种框架结构，较为常见的是类似于“拐 角型”结构的，只是采用了框架结构。 4.封面型：这种类型基本上是出现在一些网站 的首页，大部分为一些精美的平面设计结合一 些小的动画，放上几个简单的链接或者仅是一 个“进入”的链接甚至直接在首页的图片上做 链接而没有任何提示。这种类型大部分出现在 企业网站和个人主页，如果说处理的好，会给 人带来赏心悦目的感觉。5. Flash型：其实这与封面型结构是类似的 ，只是这种类型采用了目前非常游戏行的 Flash，与封面型不同的是，由于Flash强大 的功能，页面所表达的信

16、息更丰富，其视 觉效果及听觉效果如果处理得当，绝不差 于传统的多媒体。6.“国”字型：也可以称为“同”字型，是 一些大型网站所喜欢的类型，即最上面是网 站的标题以及横幅广告条，接下来就是网站 的主要内容，左右分列一些两小条内容，中 间是主要部分，与左右一起罗列到底，最下 面是网站的一些基本信息、联系方式、版权 声明等。这种结构是我们在网上见到的差不 多是最多的一种结构类型。7.拐角型：这种结构与上一种其实只是形式上 的区别，其实是很相近的，上面是标题及广 告横幅，接下来的左侧是一窄列链接等，右 列是很宽的正文，下面也是一些网站的辅助 信息。在这种类型中，一种很常见的类型是 最上面是标题及广告，左侧是导航链接。8.标题正文型：这种类型即最上面是标题 或类似的一些东西，下面是正文，比如一 些文章页面或注册页面等就是这种类。 9.变化型：即上面几种类型的结合与变化 ，比如在视觉上是很接近拐角型的，但所 实现的功能的实