如何设计网站： 9 步骤（包含图片）

设计一个优秀的网站可能看起来像一个巨大的挑战，但只要遵循设计的基本要素，你就会发现这个过程很有趣而且令人愉快。这不仅仅是听起来很好！我们将会说明进行设计的基本要素和一些一般性的指导方针，以帮助你设计有用户粘性的网站。规则1：倾听你的客户。你可以设计一个"有史以来世界上最好的网站"，具有丰富的黑色精细字体、大胆的有艺术色彩的网站，仿佛在召唤"现在就来浏览我吧！"。很不幸，你的客户想要的却是具有大块粉色和橙色这种风格的菜单条。你被解雇了，你有史以来最好的网站，再也没有机会...

方法 1 ：3个基本规则

1、规则1：倾听你的客户。

你可以设计一个“有史以来世界上最好的网站”，具有丰富的黑色精细字体、大胆的有艺术色彩的网站，仿佛在召唤“现在就来浏览我吧！”。很不幸，你的客户想要的却是具有大块粉色和橙色这种风格的菜单条。你被解雇了，你有史以来最好的网站，再也没有机会面对用户，客户会把它们搁置在他们的备份硬盘里。

研究客户的企业形象。有客户会告诉你一些他们真正喜欢的网站。这不仅会提示你迎合他们的想法，它也会给你一些自己未想到的设计灵感。
如果你以为橙色和粉色的网站是在开玩笑，试想一下这个有史以来最酷的网站如何推动它们的产品：

2、规则2：了解你的用户正在寻找什么，并进行相应的设计。

人们建立自己网站的原因是希望其他人看到他们。这个网站可能用来提供信息，有商业用途，或者供特定受众娱乐。作为设计师，你要知道在为谁设计网站，并让他们打开你的网站后就一直待在上面。

你可能会认为，“如果网站看起来很漂亮，用户就会留下来。”，其实这不一定。让我们看看房地产的例子。这里是一个网站，具有整洁，有趣的设计。它有大量的开放式的白色空间，大胆的色彩和一个强烈现代感的宽屏格式，超链也被突出显示了：
现在想想如果用这种做法在同一位置销售不动产的效果：页面凌乱，花哨的颜色，大量的广告。
想一想哪个网站可以更好地为人们寻找家园呢？没错，就是把“家”罗列出来供人浏览的那个！当人们正在搜索“圣莫尼卡待售房产”时，他们并不关心网站的美学。他们不想了解房地产经纪人，或是看到漂亮的城市景色图片。他们想看的就是房产。

3、规则3：倾听自己。

你了解客户喜欢什么，你知道市场需要什么。现在是时候关注你自己，网站的设计者！

就你的选择在绘图软件中建立一个模板。在不同的层（这样做可以后续再修改而不破坏整体的模板）上创建页面元素。这些因素可能包括：
页头。它将在网站的每个页面上共用。组成页头的包括网站的名称和标志，以及到其他下级网页（比如关于、联系人等）的链接。不管是视觉上还是实际操作，页头都会把网站的各部分整合起来。把菜单栏上的第一个按钮设置为返回主页也是很好的做法。
让我们来看看苹果公司的网站，如下：
与大多数苹果产品一样，他们的首页设计得非常干净、整洁。注意横穿网页顶部的菜单栏，每个按钮都有与内容相符的标题，还有一个搜索框，如果你的网站也支持，就能很友好地到达各个所需的网页。现在，让我们来看看iPad按钮对应的页面，有几个页面元素：
菜单栏的变化只是将iPad按钮变暗。
页面的主题在左上角以黑色大字体显示。
出现了一个新的子菜单栏，这样使用户可以了解更多关于产品的信息。如果点击那些子菜单，你会看到每一页都会提供新的主题相关的内容，但在布局和设计风格上都是统一的。
可能你的网站上，会有菜单栏主标题下包含多级子标题的情况。你可以考虑不用二级菜单栏，而使用弹出菜单的方式，例如下面这个音乐家之友网站 :
边栏。这种设计在网站上很常见，但不一定所有网站都需要, 记住--内容为王。但它也是一个非常重要的元素，需要精心设计，以保证直观，避免不必要的混乱。不像菜单栏，边栏的内容可以是动态的。考虑下面两个边栏，它们来自房地产营销网站Trulia，首先是给买家的：
第二个是给租客的。请注意它们有非常类似的信息，但是关注点完全不同，并且这些关注点都显示在边栏的相同位置：
页面主体。这是网站的主要部分，也是你的设计中变化最多的部分。如果你正在设计一个电子商务网站，可能某个页面上会进行产品的展示，还有二十个待售项。你的工作是把这两部分整合在一起，使他们不显得杂乱。你可以使用相似的颜色，字体和界面元素把它们融合在一起。
页脚。这部分并非每个网站都有或需要。它经常用来整理杂项，或是集中网站中非焦点的部分以供访问。如下是一个来自Groupon网站的例子：

方法 2 ：方针

1、践行良好的用户界面设计。

定位网站的各种元素，如标题，边栏，标志，图形和文字，把它们放置在每一页的同一个位置上，这样会让你的网站很直观且导航性良好。

在每一页的顶部保持相同的页头。无论你的网站内容本身是否有很多重复的元素，都必须确保每一页都有统一的页头。
使你的设计保持逻辑性。应当保证一个页面上的元素按照重要性或主题有逻辑地排列;网站的各个页面也都要这样做。

2、建立一致的风格。

统一的布局能够给网站带来结构上的一致性，统一的风格带给网站的则是主题的和谐一致。

坚持使用两个或三个主色调，并确保他们协调统一。
避免使用太多的字体样式或尺寸，如果你打算交替使用几种不同的设置，就要确保在每一页上以同样的方式使用它们。
使用层叠样式表（CSS）来管理统一的风格，它也使修改整个网站的元素更加容易，不必再去每一个页面修改了。

3、使可读性最大化。

为了让文字更容易阅读，需要把它们分解成较小的几部分。

使用小标题和适当的间距以使各部分分开。
使用粗体或不同尺寸的字体，这样可以显示主题的层次结构和重要性。
注重文本处理。不要使字体太小，并扩大行距，使大块的文本更具可读性。大块的文本更难阅读，所以最好把它们分解成小段落。

4、使你的网站具有普遍的可读性。

使用标准的HTML，避免使用只适用于某个品牌或浏览器版本的标签、功能和插件。

尽管大部分当代的浏览器和电脑都可以处理复杂的图像，如果能保持图片具有较小的尺寸并为网络做过优化，也会加快对这些网页的访问。在质量和速度之间要进行平衡。

5、测试你的网站。

确保每一部分运行正常，图像显示正确。

你也可以实施一些可用性测试：请一些目标受众成员测试网站的清晰度和易用性，并在网站上进行反馈。

6、发布您的网站。

如果你还没有做，就需要先买一个域名。定期检查链接，以确保它们仍然存在，并浏览网站访问者通过电子邮件发送的建议。

小提示

不要用艳丽，花哨的图形轰炸观众。Flash动画，明亮的色彩，有图案的背景以及每次页面加载都会自动播放的音乐，这些在20世纪90年代是一个有趣的体验，但会赶走今天的网络用户。要坚持用简单的、与文字颜色有反差的背景，以最大化地增加可读性。
为了适应有听觉和视觉障碍的访问者，你可以给视频加上字幕，转录音频，并对可访问性进行说明。虽然表格是一种组织信息的有效方式，但当弱视访问者使用屏幕阅读程序时，他们可能无法有序地听到表格中的内容。
你可能有自己的设计感觉，或者也有一些已经在其他网站上应用的颇受喜爱的设计，你可以以它们为基础来设计布局，但是购买一个现成的模板可能是更容易的方法。
要保持不浪费游客的打印油墨，就需要在打印时使用一个单独的样式表来格式化你的网站。
当设置打印参数时关闭背景图片。
在白色背景上使用黑色文本。
移除菜单栏和任何不必要的图片。

总是可以使用CSS保持适合的段落间距。

注意