视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
高品质的网页设计:实例与技巧系列之一(留白)
2020-11-27 18:53:34 责编:小采
文档
提升网页和博客设计品质的一些实例和技巧
“高品质”是所有人追求的目标,在网页设计的世界中也不例外。不过何为“品质”,如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧。

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

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

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

出色的留白处理的实例
Good.is
页面整洁而有开放感,全都得益于设计师对文字和图像之间留白量的准确把握。

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

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

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

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

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

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

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

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

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

留白并不是浪费空间
空白并不总是等着你去填充的。
没错,少就是多
与其用尽心思填满某个区域,不如就把它留空,只保留至关重要的信息就好。

下载本文
显示全文
专题