如何在网页设计中正确使用负空间的技巧?

2019-06-25 10:35:55

资讯专题 / 圻谷观点 00

  很多设计师都犯了一个大错误,他们创建了过于复杂、繁忙和丰富多彩的网页。如果不是有意的,你应避免创建复杂的接口,并使用更多的空间。空间是网页设计的一个基本方法,因为它可以给网页上的所有元素带来很大的差异。在这篇文章中,我们阐明了负空间的重要性,并分享了如何在网页设计中正确使用负空间的技巧。

  第一、什么是负空间?

  在我们开始之前,让我们先定义什么是负空间。负空间,或空白区域,是指网页上未使用的空间。任何在页面上没有引起用户注意的东西都是负空间。这并不意味着空间必须是白色的:它可以是任何颜色、图像或任何其他背景。

  “空白应被视为一个活跃的元素,而不是被动的背景。”-- Jan Tschichold

  负空间有两个层次:微观和宏观。微观负空间与线条、词语、字母等小元素之间的空间有关,而宏观负空间则是较大块或元素之间的空间。这两个层次对于网页设计的整体有效性都很重要。

  二、让我们来看看下面的网页设计,它很好地利用了负空间。

  苹果

  苹果一直非常关注设计,他们自己的网站也不例外。看看他们如何巧妙地使用微观和宏观负空间,其网站布局清晰,拥有一个极为明确的行动号召(CTA)。

  你的注意力通常集中在核心功能,即产品本身,没有什么可以分散你在这一页上的注意力。在页面中央查看单个对象是吸引用户注意力的完美方式。

  

  谷歌

  谷歌可能是网页负面空间的鼻祖。这家搜索巨头使用了大量的负空间和干净的设计来吸引我们对搜索栏本身的注意。

  谷歌只是引导用户进入页面中最可操作的领域,即Gmail、图片和搜索栏。为了避免混淆,设计保持清晰和简单。

  

  Dropbox

  Dropbox主页结合了完美的微观和宏观的负空间,自然的调色板和和谐的字体,营造了平静的氛围,提供了流畅的用户体验。由于使用了适当的负空间,网站看起来非常复杂,而反过来又创造了简洁和整洁的特性。

  

  你可以看到,负空间字面上允许你的设计空间有呼吸感。现在让我们来看看如何在你的网站上正确使用这个负空间的技巧。

  三、如何使用负空间?

  1.使用负空间来分解页面

  打破网页上的空间是设计中最基本的视觉组件之一。当一个网站信息太多而空间太少的时候,访问者很难专注于主要信息。

  负空间让用户有时间吸收他们在页面上看到的信息。有一些规则可以帮助设计师在页面上创建对称的构图,并确保人们能够感知信息。组件之间的相等空间设置了适当的设计结构,帮助用户清晰地感知信息。根据网页设计的组成规则,这些微块之间的空间应占宏块之间空间的三分之一。

  

  2.内容理解方面的工作

  内容可读性和易读性是网页设计中一个非常重要的方面。负空间可以优化两者。正确使用线条、词语和字母之间的空间可以使阅读理解能力提高好几倍。

  在优化内容理解的同时,段落边距和行距是两个主要的考虑因素。每一行之间的空间,或简称行间距,增加了正文文本的整体可读性,如下面的示例所示:

  

  3.创建视觉层次结构

  负空间不仅仅是页面中元素之间的空白,它还是构建视觉层次结构的重要工具。负空间可以组成或分离ui元素,从而创建有效的页面设计。

  它提供了一个温馨的布局,使访问者在页面上的访问时间更长。 此外,负空间也会引起用户对重要元素的注意,并为眼睛提供短暂休息。

  4.明晰关系

  格式塔心理学家在学习人们如何组织视觉信息的同时,制定了“邻近法则”。该定律指出,所有彼此相邻的视觉对象看起来与人眼相似。

  

  在网页设计中,适当的负间距是实现邻接原则、使设计更具视觉吸引力的有效途径。例如,这一原则对博客架构非常适用。通过将大量文本和谐地分割成段落和块,设计人员可以实现更易于消化和更令人愉快的布局。

  四、本质内容

  正如你所看到的,负空间是网页设计中最强大的工具之一。通过遵循本文中给出的一些简单规则,设计师可以创造出一个完美的视觉上的吸引人的设计,会得到任何访问者的欣赏。

来源:淄博网站建设 / 编辑:淄博网站设计

上一篇:没有了

下一篇:2019年最实用的11个网页设计技巧

返回列表

延展阅读

更多相关案例,更多借鉴,更多优化!

16年时间,圻谷深入100多个细分行业,从建筑、建材、装修、到工程、服饰、电子电器...资深的行业产品营销经验与专业的推广运营能力,给您更好保障!

文章点评

点评文章,写评论得积分,赢礼品!

  • 暂无如何在网页设计中正确使用负空间的技巧?点评 + 登录后点评
  • Contact Us

    多一份参考,总有益处。

    联系QIGOO,免费获得专属《策划方案》及报价。

    走过十六年历程的互联网整合营销机构,以技术与思想,提升您网站的广度传播与深度。

    咨询问题或预约面谈,可以通过以下方式联系我们。

    网站首页

    圻谷案例

    建站方案

    网站建设

    电商平台

    系统开发

    资讯专题

    了解圻谷

    联系圻谷

    淄博网站建设微信

    关于我们 | 联系我们

    © 2019 圻谷网络 All Rights Reserved.

    技术支持:圻谷网络

    关注圻谷网络获得全面的咨询服务!
    淄博营销型网站建设
    微信号:15589330185