哈尔滨财富通科技发展有限公司,黑龙江网站建设,哈尔滨网站制作,哈尔滨网络运营,哈尔滨微信营销

高品质的网页设计: 实例与技巧

来源:笨活儿       更新时间:2016年05月30日    点击:364       分享新闻到:

提升网页和博客设计品质的一些实例和技巧

“高品质”是所有人追求的目标,在网页设计的世界中也不例外。不过何为“品质”,如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧。

接下来我会给大家列一些要点,并附上相应的例子,与大家分享一下我在别人的网页设计中寻找“高品质”的过程。

quality in web design

01. 留白

在好的网页设计中我留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式,能让你的设计的整体感官大不一样,从而提升设计的品质。

我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。

出色的留白处理的实例

Good.is

页面整洁而有开放感,全都得益于设计师对文字和图像之间留白量的准确把握。

good spacing

Digital Mash

在大空白上展示的元素往往更具吸引力。Digital Mash的网站创造了极佳的亲和力。

screenshot

Creatica Daily 的大量空白

优秀的留白运用又一次让网页内容成为焦点。每篇文章中都有大量内容,不过该站点的设计师们并不惮于给这么多内容之间填上大量留白。并不是说你的文字不够多,就不能用很多留白。

screenshot

Postbox 上也有很多空白


仔细观察Postbox的网站,你能看到边缘处的留白应该如何处理。它的方框边缘有60像素的边内留白。听起来似乎挺大的,实际看起来效果却好极了。

screenshot

留白时的错误

大家在设计留白时的常见问题就是各个区块的内容到边缘距离太小。不论你的设计多么有风格,如果你硬要把东西塞得紧紧的,这些风格连同设计的品质,就都流失了。

留白不够的例子

我们已经看到PostBox的网站那些大留白创造了多么动人的效果,所以下面我们修改一下它的页面,看看减少留白会是什么效果:

screenshot

品质感明显下降了。留白的影响就有这么大。

高效控制留白的技巧

各种不同情况下,留白要求都不尽相同。你需要不断训练自己,做到对留白所能带来的改变时刻心中有数,从而有效地利用留白满足设计需求。这要靠个人感觉的,不过都能从实践中锻炼出来。

使用网格辅助设计

利用网格当然能帮助你理解元素之间的空白。

不断尝试

不断尝试—失败—尝试,直到找到佳方案。

留白并不是浪费空间

空白并不总是等着你去填充的。

没错,少就是多

与其用尽心思填满某个区域,不如就把它留空,只保留至关重要的信息就好。

02. 像素级的完美

有一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节,一些别人几乎无法察觉的细节。我所说的“像素级的完 美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线,不如多加一些细节。细节可以是细微的渐变,也完全可以只是一条1像素宽的细线(用作表现阴影或高光)。有了这些细节, 你的设计会大不一样。有些设计师在这方面特擅长: Collis Ta’eed, David Leggett 以及 Wolfgang Bartelme.

像素级完美细节的实例

Envato的细节鉴赏

下图的Example 1 (例子1)中,绿色内容框的边缘有一条更亮的绿色线。而Example 2处,区块内边缘有柔和的渐变阴影,而边缘之上还有一像素的白色描边。这做法非常聪明,用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果,有助于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。 尽管这种做法并不是总能让设计看起来更加精致,不过它们的确能帮助你赋予设计以三维的真实感。于是设计元素就成了镶嵌在页面上的宝石,而不是平铺在上面的一张毫无动感的纸。

screenshot

Tutorial9.net上的细节

David Leggett 对于如何制造 单像素顶边条 有很深的理解。他近重新设计的 tutorial9 集合了很多非常棒的像素化技巧。 Example 1 处你能看到,他是如何仅仅通过添加一条1像素的高光,而将导航标签变得更有质感。Example 2 处使用的技巧则更多了。相机图标的投影,下方白色区域的阴影与高光,以及导航条上的1像素高光。

screenshot

RedBrick Health上 按钮和分割线上的完美像素级细节


这个漂亮的导航菜单,由Ryan Scherf 创造,是使用完美像素级细节提升设计品质的绝佳实例。红色按钮有1像素的高亮,链接之间的分割线也有同等的品质与细节。正如你所看到的,他没有满足于只用一条灰色线分割,Ryan还在下面添加了一条1像素宽的高光线,避免了设计看起来过于平坦。

screenshot

完美像素级细节也适用于Grunge风格: AvalonStar

译注:Grunge风格有“做旧”、“迷幻摇滚”、“做脏”等几层意思在里面,算是平面艺术中的一个流派。

下面的例子是漂亮的AvalonStar:Distortion(扭曲)主题博客,有着极赞的grunge风格。不过,即便是肮脏做旧的grunge风,利用1像素高光也能创造大不同。下图的Example 1 处,上面的棕色区域有一个渐变阴影,下面的绿色区块的顶部则有着一条1像素高亮线。阴影与1像素线的结合,让这些区块显得更为精致。

screenshot

完美细节小贴士

要在这一技巧上达到完美,不断的实践尤为重要。如您所见,一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变,费尽心力做一些实实在在的置于某对象之上的效果。

一定得是细节

小细节完善内容感官是关键。

思考像素级问题

描边、渐变、线条、阴影等等,不用太宽大也能有效增强设计

前后对比

应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。

03. 文字排列与字体选用的诀窍

尽管设计师大都不会亲自撰写网站的实际内容,不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。有很多方法能保证你的字体易读易用,不过我不会给大家列一些该做什么或者不能做什么的规矩和条款,我带给大家的是一些聪明运用字体的实例和分析。

仔细考虑了字体的实例

The Netsetter上大而漂亮的字体

网页设计中,标题很重要,对于博客设计来说尤为如此。近流行在标题上使用大而粗的字体。这样做有很多好处,不仅能提高特定内容区块的可用性,而且有助于组织设计中的空间和结构。 Netsetter 在这方面做得非常好,如您所见,标题字体很大,周围有大量留白,十分易读。

screenshot

行间空白和字符间距

Viget 的网站是字体究竟对网页设计有多重要的完美实例。下面的截图来自他们的作品集展示页,再一次展示了大字体是如何帮助创建开放空间的。即使是这种清爽的细线体,他们也使用了宽阔的空白。另一个值得称道的地方是他们对于行高 (line height) [行间空白]的的绝妙选择。行间距被设定得比默认值大很多,大大增强了文字可读性。也许下次你可以在自己的设计中也试一试这个技巧。

screenshot