交互設(shè)計(jì)精髓

重點(diǎn) (Top highlight)

什么是空間？ (What is Space?)

Space is the dimension of height, depth and width within which all things exist and move. Space or Empty space or White space or Negative space are alias given to describe intensional spaces made in design. In a

空間是萬(wàn)物存在和移動(dòng)的高度，深度和寬度的維度。 空格或空白空間或空白或負(fù)空格是別名，用于描述設(shè)計(jì)中的內(nèi)涵空間。 在一個(gè)

digital world, we live in limited dimension of screen. People tend to fill up empty spaces to get maximum benefit out of it but rather know the importance and beauty of it.在數(shù)字世界中 ，我們生活在屏幕的有限尺寸中。 人們傾向于填充空白空間，以從中獲得最大的利益，但他們知道其重要性和美麗。

Negative space creates a vacuum of content, which draws more importance and adheres attention to the existing content. Not only these they helps in readability, provide feedback and increase usability. These spaces creates room to breath and users feel comfortable looking or exploring it.

負(fù)空間會(huì)造成內(nèi)容真空，這將引起更大的重視并持續(xù)關(guān)注現(xiàn)有內(nèi)容。 它們不僅有助于提高可讀性，提供反饋并提高可用性。 這些空間為呼吸創(chuàng)造了空間，用戶在尋找或探索時(shí)都感到舒適。

“Good visual hierarchy isn’t about wild and crazy graphics or the newest Photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.”

“良好的視覺(jué)層次結(jié)構(gòu)與瘋狂的圖形或最新的Photoshop過(guò)濾器無(wú)關(guān)，而在于以對(duì)日常站點(diǎn)訪問(wèn)者可用，可訪問(wèn)且合乎邏輯的方式組織信息。”

Brandon Jones — Former Editor of Tuts+

布蘭登·瓊斯 ( Brandon Jones) -Tuts +的前編輯

Space takes its major role in other field of design as well like Architecture. Architects have their in-depth analysis of spaces which is widely called Space Planning. Its a in-depth analysis of how floor space is used without wasting space. But in context of digital spaces we just focus on how we do our layouts right.

空間需要它的主要作用在設(shè)計(jì)的其他方面，以及類似的結(jié)構(gòu) 。 建筑師對(duì)空間進(jìn)行了深入的分析，這被稱為空間規(guī)劃。 它深入分析了如何使用地板空間而不浪費(fèi)空間。 但是在數(shù)字空間的背景下，我們只專注于如何正確地進(jìn)行布局。

St. Peters Square Vatican-City梵蒂岡圣彼得廣場(chǎng)

In Graphic design, we generally see the term Negative space used. The graphical element used in graphics with any hidden shapes or identity inside design which can completely change the aesthetic of the element designed.

在圖形設(shè)計(jì)中 ，我們通常會(huì)看到術(shù)語(yǔ)負(fù)空間。 圖形中使用的圖形元素，在設(shè)計(jì)內(nèi)部具有任何隱藏的形狀或標(biāo)識(shí)，可以完全改變?cè)O(shè)計(jì)元素的美感。

If everything yells for your viewer’s attention , nothing is heard.- Aarron Walter “Design for Emotion”

如果一切都引起觀眾的注意，那么什么也聽(tīng)不見(jiàn)。-Aarron Walter“情感設(shè)計(jì)”

空間類型 (Types of Space)

The types of spaces in digital world can be classified by functionality and size. According to functionality it can be active or passive and according to size it can be micro and macro white space as well.

數(shù)字世界中的空間類型可以按功能和大小進(jìn)行分類。 根據(jù)功能，它可以是主動(dòng)或被動(dòng)的，根據(jù)大小，它也可以是微觀和宏觀的空白。

Micro Space: It is the space between the small elements like letters, lines, icons, forms, paragraph, buttons and graphical element. Adding micro space whenever our design needs a little more breathing room but you don’t have enough canvas left to work with. Tweaking the amount of space between our smallest elements will help us to express clearly and become noticeable which ultimately improve our design and look rather less over cluttered.

微小空間：它是小元素之間的空間，如字母，線條，圖標(biāo)，表單，段落，按鈕和圖形元素。 只要我們的設(shè)計(jì)需要更多的呼吸空間，但您沒(méi)有足夠的畫(huà)布可以使用時(shí)，就可以添加微空間。 調(diào)整最小元素之間的空間量將有助于我們清晰表達(dá)并變得引人注目，這最終改善了我們的設(shè)計(jì)，并且看上去不太凌亂。

Macro Space:It is the term given to larger volumes of white space. The space between bigger elements like text columns and graphics. It also refers to paddings and margins. These areas have a greater impact on the user’s journey through our product and macro space is often pretty accurately planned. It separates and groups elements giving visual clues of functionality and uplifts readability.

宏空間：這是賦予大量空白空間的術(shù)語(yǔ)。 較大的元素(如文本列和圖形)之間的空間。 它還指填充和邊距。 這些區(qū)域?qū)τ脩羰褂梦覀儺a(chǎn)品的旅程產(chǎn)生更大的影響，并且通常非常準(zhǔn)確地計(jì)劃了宏空間。 它對(duì)元素進(jìn)行了分離和分組，從而提供了可視化的功能線索并提升了可讀性。

Active White Space:This is the space that you make a conscious effort to add to your design for emphasis and structure. Active white space is often asymmetrical, which makes the design look more dynamic and active. It draws a user’s attention and to emphasize certain elements like a headline, logo or graphic inside our design.

活動(dòng)空白空間：這是您有意識(shí)地努力添加到設(shè)計(jì)中以強(qiáng)調(diào)和結(jié)構(gòu)化的空間。 活動(dòng)空白通常是不對(duì)稱的，這使設(shè)計(jì)看起來(lái)更加動(dòng)態(tài)和活躍。 它引起了用戶的注意，并強(qiáng)調(diào)了我們?cè)O(shè)計(jì)中的某些元素，例如標(biāo)題，徽標(biāo)或圖形。

Passive White Space:The space between small objects that goes unnoticed. The designers use it to create texts or arrange paragraphs or icons. It generally occurs naturally, such as the area between words on a line or the space surrounding a logo or graphic element. Though it goes without being noticed, this white space is intentionally added there in a very subtle way, to allow the eye to easily read the design/text.

被動(dòng)空白：小對(duì)象之間的空間不被注意。 設(shè)計(jì)師使用它來(lái)創(chuàng)建文本或安排段落或圖標(biāo)。 它通常是自然發(fā)生的，例如行中單詞之間的區(qū)域或徽標(biāo)或圖形元素周圍的空間。 盡管沒(méi)有引起注意，但還是有意以非常細(xì)微的方式在其中添加了此空白區(qū)域，以使眼睛能夠輕松閱讀設(shè)計(jì)/文本。

https://medium.com/https://medium.com/

空間的重要性 (Importance of Space)

Designers love it, website owners want to fill it. Whitespace seems to be one of the most controversial aspects of design.

設(shè)計(jì)師喜歡它，網(wǎng)站所有者想要填充它。 空白似乎是設(shè)計(jì)中最具爭(zhēng)議的方面之一。

— Paul Boag

保羅·波格

The importance of space are countless. The problem I mostly face during times is lack of realisation among business stakeholders is they want to squeeze more into the screen as mentioned in the quote.

空間的重要性無(wú)數(shù)。 我有時(shí)遇到的主要問(wèn)題是業(yè)務(wù)涉眾之間缺乏意識(shí)到，因?yàn)樗麄兿胂駡?bào)價(jià)中所提到的那樣擠進(jìn)屏幕。

Separation and Grouping of elements can be clearly seen and users can easily distinguish and differentiate between elements based on proximity.

可以清楚地看到元素的分離和分組 ，并且用戶可以輕松地基于接近度來(lái)區(qū)分和區(qū)分元素。

Adds luxury and sophistication to the element as a whole. White space can actually become a central element in a design when it’s used to create a certain mood or look.

整體上增加了奢華感和精致感 。 當(dāng)空白空間用于營(yíng)造某種氛圍或外觀時(shí)，實(shí)際上可以成為設(shè)計(jì)中的核心元素。

Adding emphasis to the design can be really helpful with space. The negative space is giving you visual clues about where you should be looking, providing plenty of buffer room around an element so that your brain can quickly process it.

在設(shè)計(jì)上增加重點(diǎn)對(duì)于節(jié)省空間確實(shí)很有幫助。 負(fù)空間為您提供視覺(jué)提示，讓您知道應(yīng)該去哪里，并在元素周圍提供足夠的緩沖空間，以便大腦可以快速處理它。

Spaces invokes imagination, when we see space in design, it allows us to imagine and roam free.

空間激發(fā)了想象力 ，當(dāng)我們看到設(shè)計(jì)中的空間時(shí)，它使我們能夠自由想象和漫游。

It creates visual hierarchy to the elements when gaps are created to ensure that the users can find and digest information presented more easily.

當(dāng)創(chuàng)建間隙時(shí)，它會(huì)為元素創(chuàng)建視覺(jué)層次結(jié)構(gòu) ，以確保用戶可以更輕松地查找和消化所呈現(xiàn)的信息。

Enhancing the usability in a sense where users will be able to easily read and comprehend the content you want to serve them. They should not be intimidated by a large amount of text — when its spacing is not big enough, it will look difficult to comprehend and it will result in a higher rate of leaving the website or application. Whereas enough white space will prevent that happening.

從某種意義上說(shuō)， 增強(qiáng)了可用性 ，使用戶能夠輕松地閱讀和理解您想要為他們提供的內(nèi)容。 它們不應(yīng)被大量文本嚇倒–當(dāng)其間距不夠大時(shí)，將難以理解，并且導(dǎo)致離開(kāi)網(wǎng)站或應(yīng)用程序的比率更高。 而足夠的空白將阻止這種情況的發(fā)生。

More spaces makes the experience of the user more lightweight, easy and comfortable to explore.

更多的空間使用戶的體驗(yàn)更輕便，易于探索。

明顯的用法 (Noticeable Usage)

The industry leaders and leading tech companies have been using this actively to get the advantages provided by the power of space. Let’s see some of the example in real world.

行業(yè)領(lǐng)導(dǎo)者和領(lǐng)先的科技公司一直在積極使用此功能，以獲取太空力量所提供的優(yōu)勢(shì)。 讓我們看看現(xiàn)實(shí)世界中的一些例子。

https://www.zendesk.com/https://www.zendesk.com/

Zendesk has awesome use of white space into their design despite use of awesome color combination. We can see that our eyes flows into the design and it’s obvious to see the text with high visual weight and spaces creates more attention to it.

盡管使用了很棒的色彩組合， Zendesk在設(shè)計(jì)中還是大量使用了白色空間。 我們可以看到我們的眼睛進(jìn)入了設(shè)計(jì)，很明顯看到具有高視覺(jué)重量和空間的文本會(huì)引起更多關(guān)注。

https://www.dropbox.com/https://www.dropbox.com/

Dropbox have moved to a vast surprising rebrand. The colors and whitespaces used to make the content separate out from each other is awesome and well achieved. The separated blocks help keep the copy contained while still providing ample breathing room for the content, we’ll see whitespace is also used on a micro-level through the line-height, font size, and kerning are all taken into consideration.

Dropbox已經(jīng)改頭換面了。 用來(lái)使內(nèi)容彼此分離的顏色和空白很棒，而且效果很好。 分隔的塊有助于保留副本，同時(shí)仍為內(nèi)容提供足夠的喘息空間，我們將在行高度，字體大小和字距調(diào)整等所有方面都考慮到了空格的空白。

https://www.apple.com/https://www.apple.com/

Apple are the early adopters of whitespace. The screen of apple would always have more focus to product and declutter the UI with empty spaces. Also one of the most noticeable thing they do is interactivity as well.

蘋(píng)果是空白的最早采用者。 蘋(píng)果的屏幕將始終將更多的精力放在產(chǎn)品上，并用空白填充UI。 他們所做的最引人注目的事情之一就是交互性。

Not only does Apple execute active whitespace throughout the website well by placing imagery strategically to draw the users eye to specific elements down the page, but the company also uses passive whitespace to guide the user through the content without a hitch.

蘋(píng)果公司不僅可以通過(guò)戰(zhàn)略性地放置圖像來(lái)吸引用戶注意頁(yè)面上的特定元素，從而在整個(gè)網(wǎng)站上很好地執(zhí)行主動(dòng)空白 ，而且該公司還使用被動(dòng)空白來(lái)引導(dǎo)用戶瀏覽內(nèi)容而毫不費(fèi)力。

https://www.wealthsimple.com/en-us/https://www.wealthsimple.com/en-us/

WealthSimple homepage is just to its notch. Its so simple and pleasure to navigate through the screens and also an excellent example of how to use whitespace as well. The angles used in images also provides generous whitespace. Users eyes are also drawn into the animation used and distinguished CTA sections.

WealthSimple主頁(yè)即將到位 。 在屏幕上導(dǎo)航是如此簡(jiǎn)單和愉快，也是如何使用空白的一個(gè)很好的例子。 圖像中使用的角度還提供了寬敞的空白。 用戶的眼睛也被吸引到所使用的動(dòng)畫(huà)和出色的CTA部分中。

As a designer we cannot neglect one of its core fundamental principle. It’s really useful for the basic functions of a site or app like readability and navigation. But making smart use of whitespace can drive to success of the product and make users happy in making the interaction with the product.

作為設(shè)計(jì)師，我們不能忽略其核心基本原則之一。 對(duì)于網(wǎng)站或應(yīng)用程序的基本功能(如可讀性和導(dǎo)航)確實(shí)非常有用。 但是，聰明地使用空白可以推動(dòng)產(chǎn)品成功，并使用戶高興地與產(chǎn)品進(jìn)行交互。

So, we should bear in mind that the power of white space goes far beyond aesthetics and can be strategically used to further more enhance business related goals and making users engaged.

因此，我們應(yīng)該記住，空白的作用遠(yuǎn)不止于美學(xué)，而且可以在戰(zhàn)略上用于進(jìn)一步提高與業(yè)務(wù)相關(guān)的目標(biāo)并吸引用戶的參與。

參考閱讀 (Reference Reading)

翻譯自: https://uxdesign.cc/the-essence-of-space-in-design-b71f42166b82

交互設(shè)計(jì)精髓

總結(jié)

以上是生活随笔為你收集整理的交互设计精髓_设计空间的精髓的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。