恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
网页设计中负空间的有效使用
0.0°
2018-12-09 自译外文 经验/观点 原作者: Anastasia Diachenko 举报 2432 2 1 0

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

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


什么是负空间?


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


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


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


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


苹果


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


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


Image title




谷歌


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


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


Image title




Dropbox


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


Image title



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


如何使用负空间


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


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


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


Image title




2.内容理解方面的工作


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


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


Image title



3.创建视觉层次结构


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


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


4.明晰关系


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


Image title



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


本质内容


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

更新:2018-12-09

收藏

2人已收藏

zyl0127

https://www.zcool.com.cn/u/13561

  • 16

    作品

  • 92

    粉丝

  • 1

    关注

  • 给设计师的12个最佳UX/UI工具
  • 找到合适的UX/UI工具&四个可选项使资源更易获得
  • 你现在就该使用的三个最好的原型工具
  • 即将登录页的技巧和最佳实践
相关标签
经验设计ui

    猜你喜欢

      2018-12-09 自译外文 经验/观点 原作者: Anastasia Diachenko 举报 2432 2 1 0

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

      0.0°

      你确定要举报网页设计中负空间的有效使用

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年12月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录