Passive and Active Space
被動式和主動式空間
The application of white space all depends upon context.
空白空間的應用全由情境決定。
As we said above, the more space used, the stronger the pull. But you don’t always want the strongest pull possible for every element on a page, not to mention how much screen real estate that would consume.
如同之前所說的，越多空間使用，拉力就越強勁，但您不總是盡可能想要在頁面上的每個元素有最強大的拉力，更別提及會消耗掉螢幕上多少資產。
Let’s look at how passive and active space help create balance in negative space.
咱們來看看被動式和主動式空間如何幫助負形空間創造平衡。
1. Passive Space
被動式空間
Think of passive white space as the bare minimum.
想像被動式空白空間成基本的最低限度。
Without enough white space, a site becomes illegible and frustrat- ing to navigate, as effort is required to make sense of the jumble. Passive white space is however much white space is required to make the site comprehensible.
沒有足夠的空白空間，網站會變得難以辨認、折騰瀏覽，所以下功夫讓這混亂地網站變得有意義是必備的。 然而被動式空白空間需要更多地空白空間讓這個網站容易理解。
Couldn’t load preview
The file may have been moved or deleted, or is temporarily unavailable.
https://paper-hackpad-attachments.dropboxusercontent.com/uimarathon.hackpad.com_aUQ7UEdkmVD_p.424384_1439936815706_Background.png?fit=max&w=882
Source: Resonate ‘15
In the above example, take a look at the spacing between the words/links at the top navigation bar. Also, look at the text at the bottom and the spacing between the letters, words, and lines. Do you notice anything out of the ordinary? You shouldn’t, they’re all spaced so as not to draw attention. That’s passive spacing.
看看上面例子裡頂端瀏覽列的文字和連結之間地間距。也看看底端文字和字母、單詞、行之間的間距， 你有注意到任何與眾不同的地方嗎？ 應該沒有，它們都被間距開以致於沒吸引到目光，那就是被動式空間。
For macro white space, passive spacing means adding enough borders and margins to clarify the distinctions between elements and avoid confusion. For example, putting enough space between a login navigation bar and a site navigation bar at the top of the screen.
對於宏觀式的白色空間，被動式間距意味著增加足夠邊框和邊距來澄清元素間的區別避免混淆。舉例來說，在螢幕頂端的登入瀏覽列和網站瀏覽列之間放入足夠的空間。
For micro white space, this means spacing out letters, lines of text, and paragraphs to maximize readability, and spacing items in a list or menu to make them individually easy to spot when scanning (in other words, removing clutter).
對於微觀式的白色空間，這意味著間隔出字母、文字行、段落來最大化可閱讀性，在列表裡間隔出項目或選單讓他們在迅速瀏覽時容易個別地被識別出來（換句話說，移除凌亂）。
Passive applications should feel organic and natural. In fact, the main purpose of passive white space is that it goes unnoticed. What makes it passive is that it doesn’t draw attention to itself. It simply looks “normal.”
被動式應用應該令人覺得原始自然，實際上，被動式空白空間的主要目的是讓它沒有被注視到，本身沒有吸引到目光讓它成為被動式，它只是看起來「正常」。
The moment when enough space is used that it starts to stand out, then it becomes active.
當使用足夠的空間讓它開始脫穎而出的時刻，它就成為主動式了。
2. ActiveSpace
主動式空間
Using white space actively is attempting to influence your user’s visual flow. Surrounding an element with a large amount of white space is a great way to get it noticed.
使用主動式空白空間企圖影響使用者的視覺流程。大量的空白空間圍繞在一個元素上是種非常棒的方式讓此元素獲得注目。
Couldn’t load preview
The file may have been moved or deleted, or is temporarily unavailable.
https://paper-hackpad-attachments.dropboxusercontent.com/uimarathon.hackpad.com_aUQ7UEdkmVD_p.424384_1439998022316_Background1.png?fit=max&w=882
Source: 1000: Chrome Experiments
There are actually a lot of elements on the above page: navigation tabs, social media links, even legal information. However, the most prominent is clearly the interactive “1000” graphic that’s dead cen- ter. By shrinking and pushing the other elements to the corners, the designers at Chrome Experiments actively maximize the space around the element they want the users to interact with most.
實際上有很多元素在上面的頁面：導覽標籤 、社交媒體連結，甚至於法律資訊，然而最清楚顯著地是在正中心互動式的「1000」圖形。藉由縮小和推擠其餘元素到角落，在Chrome Experiments 的設計師們在他們想讓使用者有最多互動元素的周圍主動地把空間最大化。
Likewise, minimizing the amount of space between a smaller line and the one proceeding may be a good way to “hide” it, as is often seen with legal requirements or copyright information. See how, below, the line “FiberSensing is an HBM Brand” is displayed without drawing too much attention.
同樣地，在較小的行線和接下來的元素之間，最小化空間量也許是種好方法將它「隱藏」起來，就如同我們經常在法律需求或是版權資訊中所看到的。看看下面這行 “FiberSensing is an HBM Brand”是如何在沒有吸引太多目光下展示出來。
Couldn’t load preview
The file may have been moved or deleted, or is temporarily unavailable.
https://paper-hackpad-attachments.dropboxusercontent.com/uimarathon.hackpad.com_aUQ7UEdkmVD_p.424384_1439998208359_Background.png?fit=max&w=882
Source: HBM FiberSensing
Macro white space is often used actively to draw attention to the page’s single main focus, or to separate more important elements from the pack.
宏觀白色空間經常主動地用在頁面的主要重點，或是從包裝中分離出更多重要的元素。
However, it can also be used with micro white space. Mark Boul- ton explains in an A List Apart piece that he sometimes applies active spacing around a particular quote or paragraph within a block of text in order to draw attention to it. This is great way to emphasize the most useful points of your content to users who are just scanning.
然而，它也可以當成微觀白色空間使用。Mark Boul- ton 在A List Apart piece說明了，他有時候會在特殊引用句或是整個文字區塊地段落裡頭採用主動式區隔來吸引目光。這是非常棒的方法，可以讓只是速讀的使用者注重到你的內容裡最有用地點。
At this point, we’re getting into the strategic use of varying amounts of white space. This could be thought of as different degrees of minimalism, which we’ll explain below.
此時，我們將進入策略性地使用變動式白色空間量，可以把它想成不同程度的極簡主義，我們將在下面說明。