网页设计源于灵感，灵感源于借鉴则

网页设计基本步骤

设计源于灵感，灵感源于借鉴。 这是每个网页设计都应该牢记的“成功法则”。 以下是百分小编为大家介绍的网页设计基本步骤。 欢迎学习！

1.使用“原型法”细化网站设计要求

使用DW在最短的时间内搭建一个可以浏览和重定向的网站，然后与客户一起体验和评估原网站的结构、流程、布局、配色、文字等各个方面。

2. 网页链接的深度、广度和耦合度

超链接是网页设计中最重要的信息组织方式，也是整个网络世界的精髓所在。 但糟糕的链接设计——例如过度泛滥和随意的超链接——可能会导致冲浪者迷失在信息碎片的海洋中。

如果将网站的首页视为链接层次的第一层，则站点中从首页超链接获得的信息内容具有从属关系的页面为链接层次的第二层次； 从每一秒的一级页面可以不断得到三级网页； 依此类推，我们大概可以得到一个完整的树链接结构。 在这种树状链接结构中，整棵树的层数可以称为（站内）网页链接的深度，页面最多的层所包含的页面总数可以称为（现场）网页链接。 一般来说，一个网站的链接深度和广度应该有一个适当的平衡关系。 深度过大的网站不利于上网者快速获取相关信息。 不知所措。

当网页中的链接既不指向下一级网页也不指向上一级网页时，必然构成从当前页面到跨级网页或外部URL的“跳转”。 出现的频率可以称为网页链接的泛耦合程度。 泛耦合度低的网站无法有效利用上网的价值，网站过于死板； 另一方面，泛耦合度高的网站可能会造成信息内容碎片化，影响浏览者的正常阅读。 因此，网页链接的泛耦合程度应与网站的设计需要相适应——儿童或动漫网站应鼓励代表跳跃思维的泛耦合链接，而学术网站应支持泛耦合链接态度比较谨慎。

几乎每个网页都有导航栏。 对于同一个网站的所有网页，导航栏要力求统一的设计风格。 否则，浏览者需要分别适应每个页面的导航界面风格，这不仅会浪费大量时间，还会严重影响整个网站的美感。

但是这里所说的统一并不是要求我们网页设计。 一模一样的导航栏会让浏览者在浏览过程中因疲劳而麻木，因麻木而失去浏览网站的兴趣。 也就是说，我们应该在统一的整体风格下，在每个或每组网页的导航栏中寻找细节的变化。

例如，我们可以在保证所有导航栏的形状、布局、字体一致的基础上，改变不同导航栏的背景颜色； 或者，我们可以改变不同导航栏的背景颜色，同时统一颜色、形状和字体。 相对位置; 或者，我们也可以在不同的页面改变导航栏的背景图——当然，所有的背景图都应该属于某种统一的风格——同时保持其他设计元素不变。

“在统一的基础上寻求变化”——除了导航栏，当网页设计在同一页面或同一网站内处理其他设计问题时，这句话同样有效。

3、网页的基本布局

不难找到网页布局的灵感。 建议闲着没事多做折纸练习：拿起一张A4复印纸，然后根据自己的心情，将纸平行、斜向、或任意角度对折几次，再将纸对折摊开在你面前，纸上的折痕可能是一个不错的网页布局！

当然，网页设计应该尽量熟悉那些典型网页的基本布局方式，以便根据客户的需要进行选择和使用。 例如，为了展示尽可能多的信息，门户网页通常设计为三栏甚至四栏的垂直布局； 为了显示强大的企业实力，公司首页往往选择横向布局，“视野”更开阔； 为了彰显网站所有者的个性，其网页的布局会千差万别，常见的有轴向布局、网格布局、倾斜布局、放射状布局、多中心布局、离散布局、对比布局等个人主页布局方法。

4. 网络空间视觉引导

每一个网页都是一个神奇的视觉空间。 与我们熟悉的四维时空一样网页设计教程，网页空间也具有深度感、广度感、时间流逝感，甚至在设计元素诱发的“力”作用下，会产生运动或扭曲。

每当我们打开一个新的网页时，我们的眼睛首先会聚焦在网页上最引人注目的地方——我们通常称之为视觉焦点。 然后，我们的思路会受到视觉焦点周围设计元素的形状和分布的影响，不自觉地将我们的注意力转移到另一个值得停留的地方（例如，一条醒目的线条，一种颜色到它近似的颜色渐变，它们会让我们的眼睛按照设计师预先安排好的轨迹移动）。 如此下去，视线经过的所有兴趣点都可以连成一条完整的视觉路径。

利用视觉路径引导上网者按照一定的内在逻辑顺序浏览网页信息的过程，可以称为网络空间中的视觉引导。 能否自发自觉地使用面向视觉的设计方法，按照视觉路径的方向排列关键信息，是区分专业网页设计和业余网页设计的重要依据。

5、网络空间的秩序和运动趋势

网络空间的秩序是网络中所有视觉元素相互作用的结果。 在分析特定网络空间的顺序时，最好将视觉元素抽象为“点”、“线”和“面”三类，然后考察每一类元素之间以及不同类型元素之间的交互.

在设计师眼中，每一个视觉元素都可以看作是一种“力”的来源。 不同的视觉元素所释放的“力”的方向和大小是不同的。 向右倾斜的三角形可以同时释放类似“重力”的垂直力和向右的水平力。 视觉元素与视觉元素通过“力”相互作用，共同影响整个网页的空间秩序。

当网页空间中的所有力量都处于平衡状态时，空间秩序最为稳定，整个网页看起来更加和谐平衡； 反之，当所有的力都能够在某个方向上形成合力时，空间秩序就会处于不稳定状态。 状态，整个网页会显得动感、动感。

6. 网页中的空白

网页中的留白犹如情感小说中的心理描写或动作片中的抒情段落，可以使网页的视觉效果更加自由流畅。 不幸的是，许多网页设计不明白这个简单的道理。 他们要么是迫于客户需求的压力，要么是受不良设计习惯的驱使，用图片、文字、链接或广告填满了整个页面。 以至于所有的视觉元素都不得不在拥挤的空间中徘徊挣扎。

空白并不是特指网页上的空白区域。 事实上，网页中任何不受前景元素干扰的可视区域都可以称为空白区域。 横向中的留白可以让网页有横向流动感； 竖向留白可以平衡文本、导航栏等视觉元素在水平方向的受力； 标题区的大面积留白可以突出公司名称或网页标题信息； 文字区大面积的留白，不仅可以丰富页面布局的内涵，还可以缓解浏览者阅读时可能产生的视觉疲劳。

七、文字信息的设计与排版

在网页上安排文本信息时，需要考虑字体、字号、字符间距和行间距、段落布局、段落间距等诸多要素。 从审美的角度，评价此类作品是最高标准，不仅要保证网页整体视觉效果的和谐统一，还要保证所有文字信息醒目易识别. 从技术角度来看，当今的网页设计大多使用CSS样式来控制和安排文本信息，但在使用客户端可能未安装的特殊字体时，设计者通常将文本信息保存为图片或Flash ，以确保所有设计元素都在客户端浏览器中正确显示。

“对比”是在设计和排列文本信息时必须考虑的另一个问题。 不同的字体、不同的字号、不同的文字颜色、不同的字符间距，都能在视觉效果上形成强烈的对比。 精心设计的文字对比可以为网页空间增添活力网页设计教程，而过多的对比因素也会让整个网页显得混乱。

8. 图片和动画

在网页上使用图像时，既有审美方面的考虑，也有技术方面的考虑。 首先，图片的颜色、形状、风格等要与网页的整体风格相适应，图片所要传达的思想或信息内容要尽可能清晰、准确——这是一种审美考虑。 其次，网页设计必须了解二值、灰度、256色和真彩色图片的区别，了解矢量图片和位图图片的优缺点，尽量优化图片的位大小，减少网页的传输时间pages————这是技术上的考虑。 只有在美学和技术上令人满意的图像才有资格出现在网页的整体设计中。

动画元素通常是网页上最吸引人的视觉焦点，因为运动的东西总是比静止的东西更容易吸引人们的眼球。 也正是因为这个原因，我们需要用更加谨慎的态度来决定何时何地使用动画元素。 我见过太多被动画元素“搞砸”的网页，而那些网页的设计者也不约而同地犯了滥用动画的错误。 其实，判断一个动画元素是否有必要，可以使用以下简单的规则：如果一个动画元素只是起到装饰网页的作用，而不能使信息的展示更清晰、更生动，那么你应该删除它而不用犹豫。

9. 网络空间的运动趋势线

许多网页在视觉空间中隐藏着一条动态趋势线。 当你看一个页面的时候，如果你的直觉不断告诉你页面上的某些设计元素（比如一些相连的色块，一些相互影响的图片，尤其是一些暗示性很强的线条）构成了一组若隐若现的元素在移动朝某个方向，那么不妨用画笔画出一条能反映出该组元素运动趋势的线，就像画家在画人体素描时通常画一条线一样。一条反映人体运动趋势的线——我们可以称这条线为网络空间的运动趋势线。

从运动趋势线的方向和形状出发，我们很容易找出各个视觉元素与整体视觉空间的交互关系。 一旦我们发现某个视觉元素对运动趋势线没有任何贡献，但可能会阻碍运动趋势线的平滑延伸，那么这个视觉元素很可能就没有存在的必要了。

另外，在开始一个新的网页设计之前，如果设计师可以先根据灵感的暗示在纸上画一条运动趋势线，然后根据运动的延伸规律来设计所有视觉元素的形状、颜色和位置。趋势线，这样得到的网页设计更容易呈现出非凡的视觉效果。

10. 使用网络标准设计网页

很多网页设计只考虑网页的视觉效果，而从不关心网页的具体实现技术。 因此，现在的网络世界中有太多足够漂亮但不符合技术标准的网页。 它们要么不支持非IE浏览器，如 等，要么在用户更改默认字体大小时不能保持原来的外观。 更可怕的是，这些不符合技术标准的网页，大多是一堆塞满标签和标签的“意大利面条”。 没有浏览器会喜欢这些下载和显示效率极低的代码，也没有程序员愿意去维护这些毫无头绪的数字垃圾。

【网页设计基本步骤】相关文章：

网页设计的基本步骤和设计方法10-06

网页设计的基本步骤和技巧09-14

制作网页的基本步骤07-22

网页设计制作步骤11-14

网页设计配色步骤12-09

网页设计详细操作步骤09-27

网页设计教程：设计步骤和思考 11-14

关于用07-20制作网页的基本步骤

简化移动网页设计的步骤 10-09

网页设计：网站布局的 23 个步骤12-07