主要内容
网页设计
我们已经向您展示了如何制作网页,但我们可能还没有向您展示如何让网页更美观。当然,怎样更美取决于观看者,所以最终是由您——和您的用户——来决定怎样的网页设计更悦目。
除了美观,您可能还希望您的网页不同于其他网页,使它可以从一众页面中脱颖而出。
这往往是最困难的部分——让您的网页看起来既美观又与众不同。也许您可以通过用斑马条纹覆盖一切并全部使用64像素大小的字体来让其变得不同,但您会这样做吗?
选择正确的字体
默认情况下,浏览器会为网页提供通用衬线字体,这往往会给访问者传达比较正式的感觉。您可能会想更换为无衬线字体,或者您可以指定一种大多数用户计算机上都具备的字体,比如微软雅黑或仿宋。
若要使网页具有更独特的外观,还可以使用自定义网页字体。例如,可汗学院所有页面都使用了Lato字体,这是一种不错的无衬线字体:
无论您从哪里获取您的字体,您应该注意字体过多。一般来说,您不应该在您的页面上使用超过两个或三个字体,而且您使用的字体应该很好的搭配在一起。这个 网站 提供了一些能够很好搭配在一起的谷歌字体的例子。
选择合适的颜色
在设计网页的时候,您可能会选取一个主色调——一系列能够很好地互相搭配并且可以被用于网页各部分的颜色。这些颜色可能来源于您公司的徽标,或者与当前页面的主题有关,又或者它们只是搭配起来很好看。
需要帮助挑选主色调吗?如果您已经决定了几个需要在调色板中的颜色,您可以去 Paletton网站,它可以让您体验不用类型的主色调: 单色调,三色调,邻近色,和四色。
如果您要从头开始,您可以在 COLOURLovers 上挑选几种颜色搭配。这是一个由热爱色彩的人组成的,共享色彩搭配和想法的社区。这是一个叫做巨型金鱼的调色板:
一旦您选好了您的颜色,您就可以进行最困难的部分了:为网页每个部分决定适合的颜色。网页标题应该是什么颜色?链接呢?正文呢?背景呢?Paletton 最方便之处就在于它为您提供了使用主色调的示例:
在决定您要如何将您的主色调转换为css的时候,请考虑以下几点:
如果您不确定您使用的颜色是否合适,把它发个几个朋友,征求一下他们的意见。他们能很容易的阅读所有内容吗?他们知道哪些内容可以点击吗?有任何的颜色让他们不爽吗?他们喜欢哪些颜色?
合理使用空白
我曾经问过我的同事——他现在是谷歌的设计师——他成功设计的秘诀是什么。他的回答?空白!
空白指的是两个元素之间的任何间隔,而且在CSS中,它经常来自于 padding (填充),margin (边距) 和 line-hieight (线高) 等属性。
我的朋友是对的——空白会对您网页的美观程度和可读性产生巨大的影响。我的设计师朋友经常花费几个小时调整空白来将它调整合适,因为他知道空白有多重要。
举一个极端的例子,以下是一个课程页面边栏有空白和没空白的比较:
这对您意味着什么?很难给出关于空白的硬性和快速的规则。每当您有一个元素位于另一个元素旁边时,请考虑他们之间的边距有多大。如果您有一个具有背景或边框的元素,请考虑它们有多少填充。在创建段落和列表时,请考虑额外的线高是否会提供一些额外的阅读空间。
从模板和框架开始
您可能在阅读了所有这些准则后被吓倒,特别是当您认为您不具备艺术眼光的时候。别担心,您不需要成为一个设计大师来制作一个精美的网页。您可以先从模板入手,享受其他设计师的设计成果。
模板是看起来已经像是一个完整的网页的HTML和CSS,里面通常已经填充了一些展示内容。您可以从 W3Schools或通过网页搜索找到“免费网页模板”,希望您需要的那些都是免费的!下载模板后,您可以替换内容并继续修改CSS以满足您的需求。
CSS 框架是 CSS 规则的集合。它为您创造华丽的网页提供了一个很好的起点。有很多流行的 CSS 框架可以使您更便捷地创建一个精美的网站—Twitter Bootstrap,ZURB Foundation, Pure CSS,Topcoat 以及很多。 您可以在可汗学院查看 Twitter Bootstrap 和 ZURB foundation 的例子。
一旦您下载了 CSS 框架以后,您就可以浏览 CSS 文档来查找示例——它们经常也包含模板!——并且找出哪个 CSS 类名称里包含了您所希望的外观。
当您使用模板或框架时,您将面临和其他网站看起来完全相同的风险,从而无法获得用户的重视。若要避免这种情况,请添加您自己的标志,并更改一些关键元素比如字体或者背景色。