• 400-123-4567

    工作时间

    周一至周五:9:00-21:00

    周末及节日:9:00-18:00

  • 手机版二维码

    随时手机查素材

  • 扫描二维码

    加入官方微信群

单丹丹SHAN 版主
  • 未知地域
  • 推广达人

  • 灌水之王

  • 突出贡献

  • 优秀版主

  • 荣誉管理

  • 论坛元老

  • 42发帖数
  • 42主题数
  • 0关注数
  • 1粉丝

[综合讨论] 如何在界面设计中使用留白

[复制链接]
单丹丹SHAN 发表于 2019-9-12 15:15:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
留白是一个活跃的元素,而不是被动的背景。它是界面设计中最宝贵的资源,页面上的留白,虽然经常被忽视,但它跟UI元素所占用的空间一样重要。
01 .认识留白
在介绍如何使用留白提升用户体验之前,我们需要先明确留白的意义。
留白是页面元素与元素之间,以及元素周围的空间。当设计师谈论留白时,实际上说的是负空间,术语“负空间”起源于传统艺术形式,它让我们更准确地捕获物体的形状。
“Suprematism: Self Portrait in two dimensions”
负空间就是元素之间的部分  by Kasimir Malevich
虽然我们称之为留白,但并不意味着就是白色的。只要该空间没有任何的文字和图像,即使被填充了任何颜色,这也算是一个留白。所以留白与实际的白色并没有关联,“留白”就是“负空间”。
02 . 为什么留白很重要
留白是一个好设计的基本要素,与传统艺术一样,物体在GUI里也需要负空间,文字,Button,Logo,和其他元素需要空间去呼吸,所有优秀的用户界面里,从顶部到底部,页面中所有的元素都有适当的留白。
空白可分为两种类型:大留白和小留白。
大留白
小留白
Note小留白:文本和网格之间的空白,它有助于内容的可读性。大留白:页面上主要元素之间的空白,与小留白不同,大留白是整体设计的容器。
03.七种影响用户体验的留白
留白是平衡设计元素的好工具,帮助我们更好得组织内容,提升视觉信息传达的体验。
— 1 强调特定元素 —
强调某种元素,是设计师最常见的任务之一,虽然设计师可以用许多视觉方法让用户聚焦在某些特定元素上,在焦点的周围运用留白往往都能获得比较好的效果。
距离和注意力之间有特定的联系,较大的距离能吸引人的注意,周围的缺失使现有的元素更佳突出。设计师会运用合适的留白去强调重要的元素,例如一段内容,较大的Padding值会加强这个区域的吸引力,因为屏幕上没有其它元素可关注。
物体周围的留白越多,就越容易吸引眼球。
在下面的例子里,Google在设计中大力倡导留白,留白很好地传达了设计的意图,我们的注意力在页面的主要目标上,不会分散给其他区域。
MailChimp的主页运用了相同的方法,来突出操作按钮(call to action),你会注意到“Sign Up Free”这个按钮立刻吸引了人的注意。
— 2 链接相关元素 —
当我们在检查元素布局时,通常把它看做是一些对象的组合,这是因为我们的大脑会根据物体之间的相对位置,来创造一个关系模型。格式塔的法则解释了,临近的物体会被看做是一个整体。留白也提供了一种视觉线索,看一下这张图:
很可能你看到的是两组点阵,而不是12个原点,这是12个相同的点,唯一不同的是他们的间距不同。
这个法则也可以用于交互设计,我们来看下面的Web表单。
  • 相关元素成组:我们知道,一组元素靠在一起时,看上去是有关系的,所以相关的标签要靠得近。左图较难传达出标签与输入框的关系,而通过调整间距,如右图,表单的可浏览性提高了。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

猜你喜欢
全国统一客服电话
400-1234-7788

24x7小时免费咨询

  • 官方在线客服

    QQ客服:小西

    点击交谈

    QQ客服:良子

    点击交谈

    QQ客服:闵月

    点击交谈
  • 上海市虹口区海伦中心B座4F4055-4056室

  • 手机扫码查看手机版

    手机查找资源更方便

  • 扫一扫关注官方微信

    加入官方微信群

Powered by Discuz!X3.5 ©2001-2013 Comsenz Inc.星点互联设计( 鲁ICP(324534562) )营业执照