网站建设时使网页设计美观的7个关键原则(下)

发布时间: 2019年10月16日

5.改善您网站的版式。

字体艺术是一个棘手的话题,因为它包含了许多元素。虽然可以将其视为设计的一个分支,但可以花一生来精通其所有方面。这里不是提供完整印刷参考的地方,因此我们将讨论范围限制在短期内。


与印刷字体相比,Web印刷字体存在缺陷。最大的区别在于,由于其动态特性,我们缺乏对Web类型外观的完全控制。显然,动态渲染有其优势,但是Web设计人员至少在目前还无法控制结果。用户计算机上字体的缺失,浏览器和平台呈现方式的差异以及CSS的一般支持不足,使Web排版成为一项艰巨的任务,即使这并不令人沮丧。但是,尽管我们可能要等待CSS 3才能实现Web排版的全部功能,但我们现在有办法使其变得有趣,更重要的是,漂亮

字体栈

有几种相当简单的方法可以明显改善您网站的版式,我们将在此处介绍其中三种。其中之一是字体栈


字体栈只是基本的CSS。它们使您可以定义字体的呈现顺序。确切地说,我们在这里所说的是字体,而不是字体。有关此内容的完整摘要,请参阅Jon Tan的Typeface!= Font

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }。上面的属性将为正文提供“Helvetica Neue”的字体。但是,这要求用户的计算机已安装该特定字体。如今,Mac电脑已预装了Helvetica(Neue),但大多数Windows计算机却没有。


字体堆栈的优点在于您可以定义“后备”,这意味着每当缺少定义的字体时,浏览器便会直接查找下一行。当然,这意味着每个人的外观设计都不尽相同,因此我们又失去了一些控制权。但是对于那些不想求助于其他解决方案(例如图像替换)的人,这是目前纯CSS提供的最佳功能


Wilson Miner使用了我们上面引用的字体栈。Helvetica Neue是Helvetica的改进。虽然Arial几乎安装在每台计算机上(至少在Windows和Mac计算机上),因此是Web的流行选择,但大多数设计人员都喜欢Helvetica而不是Arial。这样,您将两全其美:Helvetica(拥有者)和Arial(以防Helvetica不可用)。

为标题使用了另一个有趣的字体栈:

body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }

只有相对少量的访问者会在Baskerville中看到标头,但这不是问题。它使设计更具特色,同时又不会伤害任何没有它的人。同样,字体栈并不是一个完美的解决方案,但它们确实为您提供了优势

衡量与领先

度量是线的长度,而领先是线的高度(或垂直间距)。在CSS中,可以通过定义包含框的宽度(例如,段落元素)来控制度量。两者都会影响可读性。如果行太短或太长,用户将无法阅读内容。人们经常用流畅的布局看到这个问题。每行40至80个字符似乎很理想。


可以通过定义line-heightCSS属性来增加(或减少,如果真的需要)行距。通常,将线条高度设置为1.5可以很好地适用于段落。这意味着,当文本的大小为12点时,行的高度变为18点(12×1.5),这为文本提供了喘息的空间

悬挂行情和项目符号

提高可读性的第三种方法是使用引号和项目符号。不要将项目符号列表和引号的文本保留默认对齐方式,而是将其与页面上其余文本水平对齐

在最新的《Max Voltar》重新设计中使用了项目符号:


我们添加了红线以强调所有文本如何水平对齐。只需将padding-left项目符号列表的CSS属性设置为0,就可以实现相同的结果。

另一方面,提取悬挂式并不是那么简单。多数设计者都使用背景图片来引号,然后进行相应的对齐:

此处的悬挂引号不会干扰文本的流动这个细节不经常涉及,但值得投资。

不适用的打印规则


印刷和网络不一样。这似乎很明显,但是很多人都将它们视为相同。打印是固定的,Web是动态的。完全控制Web设计对所有人的外观是不可能的

垂直节奏,适当的对正文本(带有连字号且不带河流)和多列布局只是Web上几乎(几乎)不可能的一些打印功能。因此,我们对CSS 3充满了期待。但是,CSS 3可能不是一个全面的解决方案,而要完全利用它,可能还要再过几年。我们现在只需要接受这些差异即可:不要将Web视为印刷版的在线版本;而是充分利用网络的内在潜力。

关于图像替换的一句话

图像替换(用图像替换字体的技术)呢?我们已经讨论过字体栈,但是它们不劣于图像替换吗?好吧,这取决于您认为更重要的事情:能够显示所需的确切字体还是具有动态,可访问且对SEO友好的内容?某些图像替换技术已经相当先进,但仍不如纯文本灵活。图像替换很适合标题和摘录,但它并不是正文的解决方案。

6.通过在元素周围添加空白使元素脱颖而出。


白色空间,或负空间,有做什么是存在。像小节和前导一样,空白为文本提供了喘息的空间和空间的宁静。您可以通过在元素周围添加空白来使它们脱颖而出。例如,复制不应显得局促。为确保可读性,请确保段落具有足够的填充。

香水广告因使用空白空间而闻名。以及衬线字体,效果很好。

上面的截图是网站Shift(px)。设计在很大程度上依赖于版式和空白。空白可能会占据页面的大约50%。空白是最简单的方法之一,也是创建视觉上令人愉悦和可读的设计的最有效方法。


空白为设计增加了很多层次。不要害怕留下一些漏洞,甚至是大漏洞。经验不足的设计师很想在每个小角落摆一些东西。设计是关于传达信息。因此,设计元素应支持此消息,而不是增加噪音。


大量空白的另一个很好的例子:

 

令人满意的设计并不需要太多。有些人可能将“极简主义者”与“简单主义者”混为一谈。但是,要实现这样一种风格既不简单也不容易(即使不一定对图形或插图很满意)。

7.网站建设中连接所有元件。


“连接”在这里是一个虚构的术语。这里的连接是指具有统一性和一致性的Web设计。这两个属性证明了设计(以及设计者)的专业性。它们是非常广泛的属性。设计在颜色使用,字体范围,图标等方面应保持一致。设计看起来不错,但仍然会出现不一致的情况。


当设计不一致时,其统一性可能会丢失给用户。整体与一致性略有不同。统一是指设计中的不同元素如何相互作用和融合在一起。例如,颜色和图形是否匹配?一切都有助于一个统一的信息吗?另一方面,在设计的页面之间可以找到一致性。


一致性也许是两者中更重要的。没有一致性,很难有一个好的设计。但是,不一致可能看起来有点“草率”,但可能不会使设计变得“糟糕”。

在本文讨论的七个原则中,连接是最重要的。连接与所有元素的组合方式有关:平衡,网格,颜色,图形,类型和空白。它是将所有东西粘合在一起的胶水没有这种胶水,设计就会崩溃。您可能拥有漂亮的字体和精妙而精心挑选的调色板,但是如果图形太糟糕或根本不匹配,或者如果所有内容都被塞满了,那么设计就会变差。

这是设计中最难的部分。这不是容易被教导或必须被教导的东西。需要一点自然的能力和经验。但这就是事实,它会使设计看起来非常好。


WebDesigner Wall是因为它可爱的图形,但这也是连接的一个很好的例子。当您仔细查看一般的图形和样式时,所有内容都带有手绘水彩外观:文章的图像,水彩的背景图像,手绘的涂鸦和图标,民意测验的样式等等上。对细节的关注使该设计出类拔萃。

 

结论

好的Web设计不限于这里讨论的七个关键原则。可访问性,可读性和可用性等方面也发挥了作用。

这就是为什么Web设计如此困难的原因。借助众多内容管理系统,博客工具和主题,可以轻松进行设计,尤其是在今天。但是真正掌握Web设计的所有方面都需要时间,而老实说,这是人才。能够制作漂亮的设计只是一个方面,但很重要。

在此也为您推荐一款易营宝云智能建站营销平台,符合网页设计7项观点的上千套模版,为您省去设计的烦恼,不懂代码也可以创建网站哦,咨询热线4006552477 15600002121.有惊喜!!!

相关内容