网站网页设计技巧

一个好的网页设计不光只是看起来好看而已，还要是用户友好型的，通常来说，一个干净、简单的网页设计最终会成为一个可用性高的网页设计。下面介绍网站网页设计技巧，希望可以帮助到大家。

1.优化使用的图片，会获得更好的页面加载速度

使用正确的网页格式图，能让网站访问速度提升一半。这里有个选择适合的文件格式的技巧：如果图片是单色，那最好储存为PNG或者GIF格式图片;如果是连续性的色调图则最好储存为JPG格式的图片。

网上还有很多的辅助工具可以帮助你进一步优化你的图片，降低他们的文件大小。可以参考这些辅助工具列表来帮助优化你的图片。尽量把图片数量减到最低，并且灵活使用图片，并且尽可能地减小文件大小。如此一来，将可以大大的减少页面的读取时间和改善网页的性能。

2.保持干净和简单

一个好的网页设计不光只是看起来好看而已，还要是用户友好型的。通常来说，一个干净、简单的网页设计最终会成为一个可用性高的网页设计，因为它在与用户的交互中不会使其产生混淆。当页面上有太多的网站功能和组件时，将会分散网站用户的注意力而失去原本浏览网站的目的。确保每个页面元素都有其目的，然后问自己以下问题：

◆是否真的需要这个设计么?

◆这是什么组件是做什么用，它如何协助用户浏览?

◆如果我突然删除这个组件，大多数人会希望它“回来”吗?

◆如何把这些元素和目标、消息和网站的宗旨互相结合?

此外，尽管它可能是一个超酷的新概念或界面设计模式，但你还是要确保对你的用户而言该设计仍然是方便和直观的。人们习惯于通用性的交互模式、网站功能、和网络接口，如果你的设计的确很独特，确保它不是太模糊和晦涩。 要有创意，但还要保持简单。

3.页面的导航栏是最重要的设计

一个网站最重要的部分就是整个网站的导航。没有它，无论在哪个页面中，用户都会发生卡在这个页面离不开的状况。有了这明显的实际方向，我们将讨论一些建构网站导航时重要的点。

首先，在网站的导航结构上，投入足够的时间和很多规划是非常重要的。虽然这是常识，但仍然有很多设计师想当然地设计网站导航。摆放位置、风格、所用技术(javascript或CSS)、可用性和网页易读性，这些是你制作导航设计时需要考虑的。

在没有CSS的状况下，你的导航设计应该也是可用的，这是基于文字基础的浏览器相容性。你可以尽量去嘲笑文字基础的浏览器，但它们在很多的移动设备上还是流行的。也许更为重要的是，对屏幕用户来说(99.99%的情况下)，没有CSS的导航功能照样可用访问。 在没有客户端技术情况下(如JavaScript或Flash)，导航功能应该容易进入和使用的。用户可能因安全性或公司政策而没有开启或安装。

所以，制定一个导航系统可以放置的良好位置是必须的，例如放在一个显眼可见的地方。一个好的导航功能，只要网页载入就出现，而不需要鼠标再向下滚动。这是为什么页面要保持干净和简单的重要作用，一个复杂且非常规的设计可能会让用户困惑。哪怕只有一瞬间，用户也必定不会纳闷：“网站导航在哪里?”

最后，对网站建立阶层结构，多层次的管理。确保它在父层与子层之间易于导航。此外，不管在哪一个网页当中，也应该能很容易到达最高层的页面(例如网站首页)。

最主要的目标就是你的网站导航，尽可能减少操作(动作)，努力而让用户到达他想要浏览的内容。

4.明智和有条理地使用字体

虽然有成千上万的字体，但你真的能用的只是一小部分(至少要等到主要的浏览器完全支持CSS3)。 所以坚持使用网页安全字体。如果你不喜欢网页安全字体，可以考虑利用sIFR或Cufon逐步增强的网页设计。保持字体的一致性，确认标题和段落的内容看起来有所不同。使用空白、调整行高、字体大小和字母间距属性，使用户轻松愉快地阅读和扫描内容。

也许一个网页设计师常常犯的错误就是使用不对的字体大小。因为我们想尽可能的将内容都塞在一个网页中呈现，所以我们有时设置字体大小而让用户感觉到不舒服。如果可能的话，尽量保持字体大小12像素以上，特别是对段落内容。虽然很多没有遇到因为字体太小而造成阅读上的困难，但是想想老人家、近视眼和其他类似视觉障碍的族群吧。

5.理解色彩无障碍性

说完字体后，我们还需要指出使用正确颜色的重要性。例如，黑色文字在白色背景，如果使用高对比度，橙色背景上的红色文字会令你的眼睛感到紧张。此外，使用一些对特殊形式色盲的用户友好的颜色(检查工具名为Vischeck，可以测试某些类型的色盲)。

有些色彩组合只适合运用在前景色的部分，而不适合做背景色。举个例子来说，深蓝色的文字搭配粉红色的背景与粉红色的文字搭配深蓝色的背景，都是使用两种一样的颜色，但用在不同的部分则影响了它的可读性和阅读的舒适度。重要的是，不仅要使用良好的色彩组合，而且要把它用在页面中的合适元素上。

6.要了解如何编写代码

随著各种所见即所得的网页编辑器充斥市场，网页设计已经成为简单的1-2-3步骤就能设计好一个网站。然而，大多数网页编辑器掺杂了不必要的代码，使你的HTML结构设计不当，难以维护和更新，导致网页膨胀。

通过自己编写的网页代码，能得到简洁的代码，能够愉快方便地阅读和维护。你可以自豪地说是自己写出来的代码。但知道如何使用所见即所得的IDE或预览功能并不会妨碍学习HTML和CSS。你要知道发生了什么事情，才能创造有效并高度优化的网页设计。

7.谨记搜索引擎优化是非常重要的

在设计网站时，一个好的网页设计师应该永远牢记基本的SEO概念。例如，网页内容结构、用文字表示标题(即网页的标题和标志)。此时，以前学习的如何合理编码的能力就派上用场。认识正确、语义和基于标准的HTML/CSS后，你会很快认识到Div比表格布局好得多，不仅更为准确地展现内容，而且对搜索引擎排名也有帮助。另外，知道用CSS更换背景、文字和图片也是一个好主意。

8.要明白人都是没有耐性的

普通人用几秒钟就决定是否要阅读更多网页内容或到另一个网站。因此，作为一个Web设计师，要有个好方法，能在这珍贵的几秒钟鼓励用户选择前者(看更多内容)。 要知道，如果用户在网页头部看不到感兴趣的内容，没有多少人会向下滚动，去查看整个网页的内容。所以，在网页头部很容易看到的地方放置网站上的重要元素，但也不要过度拥挤在上半部分网页，否则会吓到用户，而不会往下继续看内容。记住上半部分网页设计的卖点：视其为推销员，使人们有购买想法，即他们想在你的网站上看到什么。

9.清楚的了解浏览器的兼容性

当一个网页设计师必须要知道的一件事，就是你的工作环境(浏览器)是挑剔和难以预料的。如果你的网页设计只能运行在的几种网页浏览器，那是不够的，你需要尽可能多浏览器下测试。这里有一款工具Browsershots，可以测试浏览器兼容性。

10.使设计有灵活性和可维护性

一个好的网页设计师可以确保以后可以很容易更新或修改网站。设计一个有可塑性、易于维护的网站，是一个伟大网页设计师的标志。让你的工作尽可能从结构化转向模块化。 网页设计这个行业是动态的，而且还很“年轻”。事情往往在短暂中变化。牢记这种思想，将推动建立更加灵活的网页设计。

1.保持主页简约，无杂乱

我们很少在网站上阅读每一个字。相反，我们快速浏览网页，挑出关键字和句子。考虑到这些已知的行为，最好是诉诸情感而不是文字计数。在你的网站上浏览的人越少，点击或记住，他们就越能更好地处理和评估他们面前发生的事情。这使得他们更有可能做你想让他们做的事情。当然，文本和号召行动是必要的，但一定要用更大的副标题和清晰的段落来打破它们。我们也建议使用图片或图标来表达你的观点。

2.设计时考虑视觉层次

我们已经在石碑上走了很长一段路了。随着电脑屏幕和智能手机的出现，随着信息显示技术的不断发展，设计师的工作仍然是清晰地安排内容。你只有几秒钟的时间来吸引别人的注意力，告诉他们你的网站是什么。如果你为你的信息建立了一个清晰的层次结构，读者就会情不自禁地跟着你留给他们的面包屑。然后应用颜色、对比度、大小和间距来进一步强调，保持对页面上吸引注意力的注意，并确保它总是有意的。我们发现创建一个强大的视觉层次结构的最佳设计元素之一是:这些将有助于将您的网站组织成清晰易读的内容。

3.创建易于阅读的网站内容

“可读性”衡量人们识别单词、句子和短语的容易程度。当您的站点的可读性很高时，用户将能够高效地扫描您的站点并在文本中不费力地获取信息。

实现网站可读性比较容易;试试这些关键的规则:

对比是关键

在文本和背景之间有充分的对比是非常重要的，这样文本就很清楚了。你最有可能选择的颜色是你的品牌身份的一部分，他们应该在你的网站上代表。自由地玩颜色，不要牺牲可读性。

你看不见你看不到的东西

早期的网站有小字体，但随着时间的推移，人们意识到12pt字体很难在网上阅读。当屏幕离某人的脸只有24英寸时，大多数人都很难看到更小的字体。你在网上看到的一个典型的经验法则是保持你的肢体语言至少16 pt。这是一个很好的起点，但要记住，这个数字完全取决于你使用的字体。

衬线和无衬线字体

你可能不会选择你的家庭，但你会选择你使用的字体类型。Serifs是一些字体在字母的末端有一些突出的点或线，例如，Times New Roman，来自Serif字体家族。Sans Serif字面意思是“没有衬线”。这些字体通常是在线文本的最佳选择——就像你目前正在阅读的。边注:我们知道脚本字体(那些看起来像字迹的字体)真的很酷，所有的花哨的曲线和东西，但是请考虑你的访客的眼睛——给他们一个休息!

有太多的字体

一般来说，在一个网站上不要使用超过三种不同的字体。有些项目可能需要更复杂的字体组合，但如果你选择使用各种字体，整体效果应该是和谐的，而不是混乱的。

4.确保你的网站很容易导航

也许你的设计是为了打破常规，但是网站导航并不是一个前卫的地方。在浏览你的网站时，不要给访问者发送一个疲惫的搜索结果。一个有坚实导航的网站帮助搜索引擎索引你的内容，同时提高观众的体验:

把你的logo链接到你的主页上:这是你的访客习惯的惯例，并将为他们节省一些珍贵的点击。

注意你的菜单:它应该在你的网站的顶部(在标题栏)，并根据每个部分的重要性进行结构化。

提供一些垂直导航:如果你的站点是长滚动的，尝试使用一个锚菜单。只要点击一下，观众就可以快速返回到顶部，下到底部，或者直接到网站的任何部分。

在你的页脚上工作:你的页脚可能是你的网站上看到的最后一件事，所以记住把所有重要的链接都包含在你的网站上。这可能包括你的菜单的缩短版本，社会图标和其他重要的链接(使用的术语/ FAQ /联系/博客等)你的访客可能需要。

保持你的重要内容“超越折叠”:这不是一个“导航”技巧，但它对这个问题仍然很重要。记住，你的访客应该了解你的网站的内容，而不需要滚动。

5.保持移动友好

我们生活在一个移动的社会里，这使得我们有必要问一个问题:当访问者访问我的网站时，他们看到了什么?不要害怕!Wix自动为你创建了一个移动友好型站点，这样你就可以与日益移动的世界同步。一定要把自己置于用户的位置，并测试每个页面、用户操作和按钮。如果你想确保你的移动网站却开足了马力,看看我们的手机网站的最佳实践。

最后一条：永远不要停止寻找灵感!当谈到网页设计时，灵感是创作过程中必不可少的一部分。熟悉什么是可能的是很重要的。需要一个地方开始吗?我们的探索部分是在Wix平台上寻找令人惊奇的网站的最佳地点。

为企业用户创建网站始终是一个挑战，人们创建网站来共享信息或者宣传品牌，所以你的主要目标是让用户尽可能容易的寻找必要数据，确保你的访问者是快乐的，这是网站设计的第一步。竞争世界决定了它自己的规则，所以你需要找到一些方法来让访问者在更长的时间内浏览你的内容，并让用户有重新打开你的网站的想法。在这篇文章中，我将与大家分享五个简单的网站设计技巧，如何获得更多的网站流量。

1、网站的可读性

可读性是产生更大数量的转换和参与的关键点。如果你的网站有一个小到几乎不可读的字体，那么恭喜你有一个失去访客的机会。这就意味着你会失去潜在客户。确保你网站上的所有文本清晰可读：空白的空间，要点显示列表、背景清晰突出显示文本。此外，你甚至可以把所有的广告元素，横幅拆除，不要让用户阅读内容的时候被这些分心。

2、建一个视觉效果

视觉滚动是一个网页设计的趋势，它提供了一种可视化的方式来吸引眼球并传达信息。换言之，它会帮助你讲一个关于你的产品和服务的故事。视差使用几个设计元素，在一个网页内单独滚动。这样的结果在奇妙的动态体验，鼓励用户滚动更多。

3、确保你的网站加载速度快

没什么会像在你的网站上加载缓慢的时间一样杀死你用户参与。如果你的网站需要太长的负载，游客将离开网站，没有人有耐心等待它。因此，页面上的图像数量会影响加载速度。为了提高用户参与性和可用性，您应该优化您的图像，并使他们尽可能快的加载。为了解决巨大的图像大小的问题，你可以使用PS图象处理软件。把你的图像存储为Web和设备图像。使用80%“JPEG–高”预置设定，–它不会大幅度降低图片质量。此外，有很多的在线工具，以减少您的图像的大小，而不会丢失质量。

4、使用图标

通常情况下，你需要大量的文字来描述信息丰富的网站上的一切。这对设计师来说是一个具有挑战性的任务。图标的使用可以帮助用户快速找到正在寻找的内容。这些天，设计师使用图标字体使象形文字一样的文字：通过CSS他们无限的可扩展性，和可定制的基于矢量。在早期，图标必须被实现为位图图形，这是繁琐的实现和修改。与动态排版图标相结合，将使您的网站易于阅读和导航，有助于参与。

结论

我上面所描述的事情总是发生在网页设计中，你应该考虑他们，同时创建你的下一个Web项目。确保你的网站是动态的，快速的，用户友好的。

凡事一分为三：首先，我们定好总体的尺寸(比如，尺寸为 900 × 600px )。同时，将宽及高同时一分为三，你可以将下面占三分之一的底部区域加上一种较深的颜色。同时，链接区域的颜色与标志区域的颜色略有不同(我们在上面所选择的链接区域颜色为标志区域颜色的 90% )，这样使人看起来仍然浑为一体。如果象小图那样，下面的颜色反差较大，则形成一种分离感，应该避免。

将刚才三分之一的区域的宽与高再分成三等分，使到左边距与上边距设为该区域的三分之一的距离。留意白色区域中，上下的页边距比左右的页边距更窄一些。( 2 )，将刚才左边确定的页边距加宽 150% 来作为右边的页边距(也意味着，右边的页边距与左边的页边距比例仍为 3 ： 2 )。顺便提一下，这些数值并不需要精确到像素，我们这样分配，只是为了尽可能让各种比例统一，从而使观看时更加一致和谐。通过刚才的两个步骤，我们就形成一个放置信息的区域(上图虚线处)。

元素的安排应该以底线为基准(与我们设计一般的网页刚好倒过来，道理何在?因为一般的网页中，标志及链接都是放在上面，而在这里，它们是在底部，所以我们安排元素应该从下到上来配合这种转变)。无论是文字还是图片，都需要与加亮的这一点为准。也意味着，所有的文字与图片都要接触到这个基线。左侧的文字为右对齐，这样文字与图片的交接处才显得整洁。

放置文字与图片：每一个网页可以放置少量的文字或少量的图片，当然，也可以同时放置文字与图片。主要信息放在右边，次要的信息放在左边。

网页设计都是同一尺寸，同一种字体样式，但标题是粗体，颜色也是采用底部区域的颜色，这样可以与底部区域形成协调感。通过加大段落之间的空间而不是采用首行缩进的形式来区分各个段落。这些文字的底部应该去到我们刚才所确定的底线。文字不应该过于拥挤，如果你意犹未尽，还有文字要加上，那就加多一页，不要硬塞进去。同时，在下面加上各个页面的链接(箭头处)。

放置图片：将一张小图片放置在左侧的区域中，留意，图片的底部与上述所定的基准水平线接触，特别留意一点，上图中，无论是图片还是文字，都没有将信息区域完全填满。这是一种设计技巧，最后出来的效果就是一个呈拱形的开阔空间包围着信息元素。漂亮而且容易阅读。这个版面无论是在放置一张图片或者多张图片时都非常适用。这些图片可以是你的产品图，说明图及其它宣传图片等。

小元素产生大的冲击力：善于利用白色空间，一张小图片放在一个大空间时可以产生一种力量感(也更清晰)。效果比放上一张大图片要好得多，更容易吸引读者的眼光。 LOGO 同样具有这样的力量，绿色的空间引导你的眼睛去到上方的标志中，提醒标志的存在。网站设计也要注重小元素。

放置多张图片：每一个网页可以同时放置两张，三张、四张甚至更多的图片。将整体的图片安排成矩形的形状。所有的图片都是同一尺寸或同一形状效果最好，如果你希望图片尺寸不一样，那就让它们的尺寸反差大一点。图片与图片之间要有间隔，不要连在一起。

其它细节：除了标志之外，还有什么东西能够让这个网页在网站建设中传达独特的个性?我们还要对文字、字母、链接等很多细节进行精心安排。

Verdana 是一种常见的非衬线字体，这种字体的线条较细，与这个小网页版面非常搭配。在上面，我们采用的字体大小为 11px ，行距为 16px ，颜色较浅(大概 50% 灰)。标题为粗体，为了形成对比，标题文字的颜色可以是黑色或与底部区域的颜色一样。避免文字环绕图片的形式。图片与文字应该径渭分明，图片在一边，文字在另一边。