星点互联素材资源下载

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





欢迎光临 星点互联素材资源下载 (http://47.100.112.22/demo/sucai/) Powered by Discuz! X3.5