网页设计中负空间的有效使用

用户头像
上海/UI设计师/7年前/338浏览
网页设计中负空间的有效使用

本文介绍了网页设计中的负空间,通过几个案例介绍了使用负空间的作用,并提出了如何使用负空间的几个方法。


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


什么是负空间?


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


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


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


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



苹果


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



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








谷歌


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


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



Dropbox


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



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



如何使用负空间


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


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


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




2.内容理解方面的工作


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


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



3.创建视觉层次结构


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


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



4.明晰关系


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



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


本质内容


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


3
阅读原文
|
举报
|
5
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
智能家居中心 简约 UI设计组件库
新拟态风格 UI设计组件库
盲盒APP UI设计
钱包ui模板
【新年UI图标】体育icon
【新年UI图标】钱包icon
【新年UI图标】旅行icon
新拟态风格 UI设计组件库
UI 登录界面设计模板包
UI通用设计素材1
户外旅行飞机情侣假日出行
UI界面 组件
手表表盘UI系列
我的钱包-UI界面设计-app
【新年UI图标】礼物/活动icon
高级感金属拟物 UI设计组件库
【新年UI图标】体育icon
盲盒APP UI设计
【新年UI图标】秒杀icon
智能家居中心 简约 UI设计组件库
UI 登录界面设计模板包
【新年UI图标】汽车icon
【新年UI图标】30个图标
你可能喜欢
大家都在看
登录注册