高端响应式模板免费下载

响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

什么是响应式网页设计?

2024年网页设计留白教程(推荐3篇)

网页设计留白教程 第1篇

事实上,留白在不同需求中概念是不同的。例如,着陆页上可能有大量的留白,以便将指引按钮(“下载”或“了解更多”等)或其他主要信息突出。

苹果官方网站是最好的例子

另一方面,由于还有很多需要精简的内容,电商类网站并没有那么多可以留白的地方。

虽然不会像其他案例中使用地那么频繁,但这类网站仍需要留白。

不只是Bill Blass这类时尚的电商类网站,像沃尔玛这种大型电商网站也需要利用留白保持精美,使产品信息更清晰、易读、吸引人。

简而言之,联系上下文我们能够明白,留白的应用没有固定的规则。但是有一些小技巧我们可以记住:

设计师 Paul Boag建议你可以将页面的注意点限制在15个以内。

他说:每当你向页面里添加一个元素时,消耗一个关注点。如果屏幕中的一个元素比另一个元素更重要,则需要向它分配格外的注意,使它脱引而出。

只提供有限注意点的结果就是:很明显你不能说所有的东西都要放在页面上,空白不需要被排除在等式之外。

让我们用MailChimp 网站举个例子 (让我告诉你为什么我个人很喜欢他们的网站!)

这是14个用户关注点在页面上的放置方式,任何额外新增的元素只应取代较其他次要的东西。这是确保肯定不会在页面里塞入太多内容的一种方法。

在开始设计前先建立一个界面元素库,它是你的界面片段和元素的合集。这不仅为一个健全的设计系统奠定了基础,促进了一致性,而且可以告知设计师界面内容的范围。

下一步是创建大致内容框架,用来评估易读性(如何使用户能辨别字母和单词)和可读性(如何使用户扫描到内容)对空间的要求。

在优化文本内容的段落边距和行间距时,有两件事情需要牢记。调整行间距可以大大提高文本正文的易读性。一般来说,越大的行间距在阅读时会给用户提供越好的阅读体验,但是行间距太大时会打破页面的统一,使设计断开。再次,调整间距只在寻找完美的平衡。

Medium在这方面是最好的例子

使用对比色、不同字体大小和不对称的白色空间将额外的样式添加到设计中。留白是灵活性的设计元素,它会影响用户对周围所有元素的感知。

当有疑问时,我总是看看其他设计师如何在设计中使用留白。Awwwards是我个人最喜欢的灵感来源。

美观只是留白的一个方面,更重要的是使主要内容和指引按钮突出。一个设计是否做到这点,只能通过用户测试来验证。

CanvasFlip是一个可以帮助设计师验证他们的设计是否达到了预期的效果的工具!对于一个设计师来说,一个具有高交互作用的热图显然是一个A +的成绩单:)。

Designed by | 使用 CanvasFlip测试

留白并不是指一张空白的画布,它是一个强大的设计工具。留白可能很难掌握:它是科学和艺术同时的应用。真正了解应该怎样在设计中较好地使用留白需要练习。熟能生巧(The more you design, the more you’ll learn)。

网页设计留白教程 第2篇

用好留白,任何网站的可读性与易读性都会得到改善。如果一个页面上的文字过于拥挤,它就会妨碍舒适的阅读体验,从而阻碍整体用户体验。更多的留白使文字更易浏览,从而提升阅读体验,也更易理解。

Information Highwayman是个掌握这项原则的个人站点,是D Bnonn Tennant——一名文案和市场专员的个人网站。擅长夸耀的他,知道什么样的网页内容对任何小本经营管用,令人欣慰的是,Tennant在他自己的网站上实践了他所宣扬的东西。标题的字间距、文字段落和菜单栏间距,有利于确保可读性和易读性。

网页设计留白教程 第3篇

像绿色、橙色和红色这种简单的颜色,能够创造出令人愉快同时吸引注意的外观。上面提到两个网站,都采用了极简的用色方案,因为有如此大面积的留白。因此,用色非常机智得当,使用户赞赏有加。

留白不是浪费空间

网页设计师们越来越多抛弃之前的误解——认为设计页面时应该尽可能在屏幕内填塞每个元素、每种颜色。正如上面例子解释过的,留白被用于突出品牌内容、提升可读性与易读性、突显极简色彩时,展现出了强大的影响力。

俗话说“少即是多”,不论你怎么看,它的确适用于关于留白的一切观点。广义上讲,网页设计中的这种极简处理方式,如今正越来越盛行,这项趋势肯定能持续下去。

:更多精彩教程请关注三联 栏目,

猜你喜欢