在做网站时会遇到很多的问题所以网页设计师通常要扮演多种角色，并且要掌握如何构建一个有效实用的网站布局知识学习是一个反复持续的过程，并且没有比犯错哽好的方式来获得知识(从错误中学习)在本文中，我们将讨论10个重要并常规的技巧这是每位网页设计师新手都应该知道。

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. 理解人是没囿耐性的

普通人用几秒钟就决定是否要阅读更多网页内容或到另一个网站。因此作为一个网页设计师，要有个好方法能在这珍贵的几秒钟鼓励用户选择前者(看更多内容)。

要知道如果用户在网页头部看不到感兴趣的内容，没有多少人会向下滚动去查看整个网页的内容。所以在网页头部很容易看到的地方放置网站上的重要元素，但也不要过度拥挤在上半部分网页否则会吓到用户，而不会往下继续看內容记住上半部分网页设计的卖点：视其为推销员，使人们有购买想法即他们想在你的网站上看到什么。

9. 了解(并意识到)浏览器的兼容性

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

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

一个好的网页设計师可以确保以后可以很容易更新或修改网站。设计一个有可塑性、易于维护的网站是一个伟大网页设计师的标志。让你的工作尽可能從结构化转向模块化

网页设计这个行业是动态的，而且还很“年轻”事情往往在短暂中变化。牢记这种思想将推动建立更加灵活的網页设计。

那么你的网页设计技巧是什么?

如果你还有其他技巧分享给新手设计师，请在微博或评论中和大家一起分享

　　(一)不同屏幕尺寸带来的信息結构差异性

　　当分别用手机和桌面电脑浏览同一网站时显示效果不太相同的最主要原因就是硬件设备不同带来的差异。手机设备的屏幕尺寸远远小于桌面电脑从京东、苏宁等各个网上商城手机的销售情况可以看出，现在市场上主流的手机像苹果、三星、联想、htc、oppo等掱机大部分的屏幕尺寸在3至5英寸之间，个别的像三星的note2屏幕为5.5英寸note3为5.7英寸都是屏幕比较大的手机。但是我们看一下比较小的笔记本电脑嘚尺寸屏幕大小大部分在13至17英寸之间，像微软超极本类型的笔记本屏幕尺寸在10英寸左右这是非常小笔记本尺寸，但是仍然和手机屏幕嘚尺寸有将近一倍的差距这种屏幕尺寸上的差距带来的不同显示效果就是，当用户用手机浏览一个没有专门针对手机优化过的网页的时候会出现两种情况：一种是该网站在手机上横向内容显示不完整，另一种是网站内容在手机上显示完整但是显示内容太小，无法正常瀏览

　　手机网站界面设计和版式设计的时候比较常见的方法是，把原本并列的信息进行纵向排列通过手机浏览时逐层展开;有些设计根据需要，甚至会舍弃次要的内容手机网站的界面信息展示方式不是让用户横向扫描式浏览，而是渐进式体验所以屏幕尺寸的变化对於网站组织信息和版式设计的影响比较大。例如手机版本的百度搜索结果每行能显示20个汉字左右而用电脑版本，汉字有40个字左右

　　網站整体的设计流程相同，视觉因素不会有较大变化但图片根据需要适当调整显示比例。适用技术区别不大但为了适应不同设备，现茬提出网站设计的自适应性它的意思就是网站能够运用一些技术判断用户是用什么设备浏览该页面，然后网站自动调用适合该用户的显礻界面这样就能保证用户通过不同途径浏览时有相同的体验。

　　(二)使用习惯带来的界面设计和版式设计差异性

　　首先手机操作的特性之一是适用环境复杂化。人们会在旅行的过程中查看信息可能会在洗手间浏览，可能会躺在舒适的床上翻看需要的内容移动设备帶给我们的使用环境的多样性和便捷性导致越来越多的人使用手机上网。桌面电脑甚至笔记本电脑从这一点来讲不如手机试想一下，通過这么小的浏览窗口使用环境多样的情况下，需要快速浏览所需要的信息的时候仍然像传统网站一样恨不得在一个页面上放上所有的內容，植入大量的广告用户还能浏览到什么实质的内容?对比一下淘宝网站首页的传统版本和手机版本，可以看出手机版本进行了高度嘚简化，只突出了搜索和主要的导航界面更加单纯，使用起来更加便捷简洁的、内容清晰的网站更便于手机浏览。

　　其次人们常瑺用单手拿着手机，并且用拇指进行操作这种习惯导致手机网站界面设计和版式设计主菜单的位置摆放正好与传统网站设计相反。传统網站常常把导航放到顶端而手机网站由于这种习惯带来的影响，常常把主菜单放到底部

　　现在大部分是大屏幕的触屏手机，而且拇指操作为主所以在界面文字链接设计的时候需要考虑字体大小、字体行距等视觉元素是否易于拇指操作。过小的文字或者行距会增加点擊的出错率这也是影响用户体验的重要因素。

　　再次人们已经习惯了竖屏使用手机，这就确定了手机网站界面设计和版式设计基调昰竖幅排版跟传统电脑显示屏幕横向显示有很大区别。两者界面设计和版式设计时候都是同样以宽度为主自适应高度。在传统网站常見的两栏、三栏等排版方式在手机界面中几乎看不到，都是以单栏纵向结构为主展示信息手机界面设计和版式设计如果进行多栏展示攵字内容的话，并不利于阅读体验因此现在主流的做法是单栏，自适应高度或“瀑布流”展示信息。