qq空間網(wǎng)頁設計

Written by Alan Smith

由艾倫·史密斯 ( Alan Smith)撰寫

Negative space is a key design element that you may come across in the fields of art, architecture, interior design, landscaping and web design. Rather than serving as awkward, empty areas with no purpose, properly implemented negative space directs a viewer’s attention and contributes to a seamless user experience.

負空間是您在藝術， 建筑 ，室內(nèi)設計，美化環(huán)境和網(wǎng)頁設計領域可能遇到的關鍵設計元素。 正確地實現(xiàn)負空間可讓您毫無目的地呆在笨拙的無用區(qū)域中，而可以引導觀看者的注意力并有助于實現(xiàn)無縫的用戶體驗。

擺脫空白是不好的想法 (Getting Past the Idea That Blank is Bad)

Those who commission websites may use reasons such as a desire to do more with fewer pages or a desire to maximize advertising inventory, to advocate for a “more is more” website design. Unfortunately, websites that follow that approach tend to create online spaces that are difficult to read, understand, and enjoy. When approached correctly, users who reach a well-designed web page with negative space will not notice the blank areas.

那些委托網(wǎng)站的人可能會出于諸如用更少的頁面做更多的事情或最大化廣告庫存的愿望之類的理由來提倡“更多就是更多”的網(wǎng)站設計。 不幸的是，采用這種方法的網(wǎng)站往往會創(chuàng)建難以閱讀，理解和享受的在線空間。 正確使用時，訪問設計良好的網(wǎng)頁時帶有負空格的用戶將不會注意到空白區(qū)域。

Instead, they can easily focus on the point and purpose of the subject matter. As in many other areas of life, web design is all about striking a balance. To get the most out of a website investment, every company should consider how negative space impacts the user experience. In the majority of cases, “l(fā)ess is more” is the right approach.

相反，他們可以輕松地專注于主題的重點和目的。 與生活中的許多其他領域一樣，網(wǎng)頁設計也要保持平衡。 為了從網(wǎng)站投資中獲得最大收益，每家公司都應考慮負面空間如何影響用戶體驗。 在大多數(shù)情況下，“ 少即是多 ”是正確的做法。

案例：五金店網(wǎng)頁設計 (Case in Point: Hardware Store Web Design)

Balancing negative space is as much an art as it is a science. What works for one website may not provide the best experience for another. However, looking at two similar websites illustrates the importance of using negative space to convey key messages.

平衡負空間既是一門藝術，也是一門科學。 對于一個網(wǎng)站有效的方法可能無法為另一個網(wǎng)站提供最佳體驗。 但是，查看兩個類似的網(wǎng)站說明了使用負面空間來傳達關鍵信息的重要性。

Harborfreight.comHarborfreight.com

The above website is filled with very bright colors, fine print, and navigational cues. The only negative space appears in the coupon-like section around certain tools. With so much going on, users who want to check out the company and see what they have to offer may have a difficult time finding what they need.

上面的網(wǎng)站充滿了非常鮮艷的色彩，精美的印刷品和導航提示。 唯一的負數(shù)空間出現(xiàn)在某些工具周圍的類似優(yōu)惠券的部分。 進行了如此多的工作后，想要結帳公司并查看要提供的產(chǎn)品的用戶可能很難找到所需的信息。

Acehardware.comAcehardware.com

Using the same type of store as the basis of comparison, the second approach to hardware is sleek, drawing the reader’s attention to key elements, including particular brand logos, sale items, and store information. The site contains an abundance of white space, highlighting certain visual cues. An overcrowded website design can create confusion and distraction that prevents a user from diving deeper into the content. Negative space also allows marketers to carefully craft an inviting message in a calm and focused space.

使用相同類型的商店作為比較的基礎，第二種硬件處理方法是時尚的，吸引讀者注意關鍵元素，包括特定的品牌徽標，銷售商品和商店信息。 該站點包含大量空白 ，突出了某些視覺提示。 過度擁擠的網(wǎng)站設計會造成混亂和分散注意力，從而阻止用戶深入研究內(nèi)容。 負空間還使營銷人員可以在一個安靜而集中的空間中精心制作邀請信息。

將負空間視為主動元素的好處 (Benefits of Thinking About Negative Space as an Active Element)

Some website design elements, such as flat design and parallax scrolling, may or may not add value to the overall experience, but the strategic use of negative space is an essential component of modern web design. Keep negative space on your list of must-haves because it:

一些網(wǎng)站設計元素，例如平面設計和視差滾動，可能會或可能不會增加整體體驗的價值，但是負空間的戰(zhàn)略性使用是現(xiàn)代網(wǎng)站設計的重要組成部分。 在必不可少的清單上保留負數(shù)空格，因為：

• Creates a break in the page: When too many items or messages appear in one space, a reader may not easily discover the purpose of the page or the key information needed to take action (and all websites are designed to inspire some sort of action).

  在頁面上造成混亂 ：當一個空間中出現(xiàn)太多項目或消息時 ，讀者可能不會輕易發(fā)現(xiàn)頁面的目的或采取行動所需的關鍵信息(并且所有網(wǎng)站都旨在激發(fā)某種行動) 。

• Highlights a centralized message: Negative spaces give users the ability to hone in on specific items and develop a strong emotion or insight associated with the page’s message. Effectively used negative spaces can make a page more readable, without changing a font style or size.

  突出顯示一條集中的消息 ：負空格使用戶能夠磨練特定項目并形成與該頁面消息相關的強烈情感或洞察力。 有效使用負號可以使頁面更具可讀性，而無需更改字體樣式或大小。

• Directs the flow of a page: Will your reader move from the above-the-fold section of your website to a different landing page, scroll down for more information, or view elements in a certain pattern? The way a designer places negative space can subtly redirect movement, signify importance and create visual relationships between subjects on a page.

  指導頁面的流動 ：您的讀者是否會從網(wǎng)站的折疊部分移動到其他著陸頁，向下滾動以獲取更多信息，或以某種方式查看元素？ 設計師放置負空間的方式可以巧妙地重定向運動，表示重要性并在頁面上的主題之間建立視覺關系。

• Makes specific visual elements ‘pop’: When studying negative space, most students come across an optical illusion known as Rubin’s vase. As you can see from the image below, the use of negative space affects how your brain interprets the same subject matter. How a designer uses negative space can completely change the visual message a reader sees.

  使特定的視覺元素“流行” ：研究負空間時，大多數(shù)學生會遇到一種被稱為魯賓花瓶的錯覺。 從下圖可以看出，負空間的使用會影響大腦解釋同一主題的方式。 設計師如何使用負空間可以完全改變讀者看到的視覺信息。

Wikimedia CommonsWikimedia Commons

While some negative space actively shapes a user’s experience, beware of empty spaces that act passively. The screen grab of the second hardware store example shows some well-placed negative space, but it also contains some passive spaces. These spaces may make a reader wonder if the website glitched as it loaded or if the web designer misplaced a line of code, creating an offset visual element. In short, passive negative space appears unprofessional — even to the untrained eye.

盡管某些消極空間會積極影響用戶的體驗，但請注意會被動起作用的空白空間。 第二個硬件商店示例的屏幕抓圖顯示了一些放置良好的負空間，但其中還包含一些被動空間。 這些空間可能使讀者懷疑網(wǎng)站加載時是否出現(xiàn)故障，或者網(wǎng)站設計者是否放錯了一行代碼，從而創(chuàng)建了偏移的視覺元素。 簡而言之，即使對于未經(jīng)訓練的人來說，被動的負空間似乎也不專業(yè)。

負空間創(chuàng)建引人注目的網(wǎng)站的提示 (Tips for Creating Compelling Websites with Negative Space)

Understanding the visual impact of negative space is different from developing it within a design layout. Most laypeople can identify the effective use of negative space, but designers must have a practiced eye to create thoughtful negative space during website development. Use these tips to compose active negative space elements that support the overall design of a page:

了解負空間??的視覺影響與在設計布局中開發(fā)負空間不同。 大多數(shù)外行人都可以確定負空間的有效利用方式，但是設??計人員必須具有實踐的眼光，才能在網(wǎng)站開發(fā)過程中創(chuàng)建周到的負空間。 使用這些技巧來構成支持頁面總體設計的活動負空間元素：

Remember that negative is not equal to white. While negative space can appear white in the background, it can also include other non-active colors. You may notice that particularly modern websites such as Apple.com use a combination of white and light gray negative space to break up the page without losing visual interest.

請記住，負數(shù)不等于白色 。 負空間在背景中可以顯示為白色，但也可以包含其他非活動顏色。 您可能會注意到，特別現(xiàn)代的網(wǎng)站(例如Apple.com)使用白色和淺灰色負空格的組合來破壞頁面，而不會失去視覺吸引力。

Take an art or photography class. Many designers start to get a feel for negative space as they work. If creating balance with negative space is difficult for you, consider taking a short art or photography class. Sometimes viewing negative spaces through a different medium can enhance the creative thinking process.

參加藝術或攝影課 。 許多設計師在工作時開始對負空間有一種感覺。 如果您很難在負空間上保持平衡，請考慮參加短期美術或攝影課。 有時，通過不同的媒介查看負面空間可以增強創(chuàng)造性思維過程。

Look for negative space in everyday life. Identify negative space in logos on storefronts, on the websites you visit every day and in art pieces. Additionally, be on the lookout for the ineffective uses of white space — visual elements that appear too cluttered and confusing with a lack of visual flow. Try to envision how the elements would appear in a properly-balanced piece.

在日常生活中尋找負面空間 。 在店面徽標，您每天訪問的網(wǎng)站上以及藝術品中找出負空間。 此外，請注意空白空間的無效使用-視覺元素顯得過于混亂和混亂，缺乏視覺流動。 嘗試設想元素將如何正確平衡。

Go minimalistic. Minimalism, by nature, uses negative space to create focal points. Use a few, carefully arranged website elements to create a strong emotional reaction/connection in readers. Minimalism is a particularly effective approach for designers working on content that readers may access from multiple devices with varying screen sizes.

簡約化 。 極簡主義本質(zhì)上是利用消極空間創(chuàng)造焦點。 使用一些精心安排的網(wǎng)站元素在讀者中產(chǎn)生強烈的情感React/聯(lián)系。 對于設計者來說，極簡主義是一種特別有效的方法，讀者可以從屏幕大小不同的多個設備訪問內(nèi)容。

Pay attention to micro negative space. A micro negative space appears within individual design elements rather than broad spaces between elements. Line spacing and letter spacing both profoundly affect the visual experience. Text (including headers, footers, and button text) should never appear constricted and difficult to read. Navigational menus and links should also include micro negative space that enhances readability.

注意微小的負空間 。 微小的負空間出現(xiàn)在各個設計元素中，而不是元素之間的寬大空間。 行距和字母間距都深刻影響視覺體驗。 文本(包括頁眉，頁腳和按鈕文本)不應顯得狹窄且難以閱讀。 導航菜單和鏈接還應包含微負片空間，以增強可讀性。

Layer elements in order of importance. Differentiate a value proposition from actionable information on how to get started to different product offerings with balanced negative space. Place the key messages near the top of the page and use negative spaces to guide a reader’s eye from one content asset to another.

按重要性順序分層 。 將價值主張與關于如何開始使用的可行信息區(qū)別開來，以平衡的負空間來提供不同的產(chǎn)品。 將關鍵消息放在頁面頂部附近，并使用負號來引導讀者將目光從一種內(nèi)容資產(chǎn)轉移到另一種內(nèi)容資產(chǎn)。

Avoid monotony. Negative space requires balance and not necessarily symmetry. Even a website built entirely of blocks of images, such as Pinterest, will likely avoid using images of the same size. The negative space all appears even surrounding the elements, but the elements themselves vary in size. Negative spaces only work with well-designed positive spaces. Keep your positive spaces interesting, natural and layered or surrounded with negative spaces for a stunning visual display.

避免單調(diào) 。 負空間需要平衡，而不必對稱。 即使是完全由圖像塊構成的網(wǎng)站，例如Pinterest ，也可能會避免使用相同大小的圖像。 負空間甚至出現(xiàn)在元素周圍，但元素本身的大小各不相同。 負空間只能與設計良好的正空間一起使用。 使您的正空間有趣，自然，分層或被負空間包圍，以實現(xiàn)令人驚嘆的視覺效果。

Negative space is not a website afterthought. It is a strategic method of enhancing visibility, readability, flow, and depth. Every website has negative space. Take advantage of yours to take your design practice to the next level. Think about how to use empty space as you create each visual element to make an effective, functional, and aesthetically pleasing web design that readers will come back to time after time.

負空間不是經(jīng)過深思熟慮的網(wǎng)站 。 這是一種增強可見性，可讀性，流程和深度的戰(zhàn)略方法。 每個網(wǎng)站都有負數(shù)空間。 利用您的優(yōu)勢將您的設計實踐提高到一個新的水平。 在創(chuàng)建每個視覺元素時，請考慮如何利用空白空間來制作有效，實用且美觀的網(wǎng)頁設計，讀者會不時地回來。

想了解更多？ (Want to learn more?)

If you’re interested in the intersection between UX and UI Design, then consider to take the online course UI Design Patterns for Successful Software and alternatively Design Thinking: The Beginner’s Guide. If, on the other hand, you want to brush up on the basics of UX and Usability, you might take the online course on User Experience (or another design topic). Good luck on your learning journey!

如果您對UX與UI設計之間的交叉點感興趣，請考慮參加在線課程“成功軟件的UI設計模式”和“ 設計思維：初學者指南” 。 另一方面，如果您想了解UX和可用性的基礎知識，則可以參加有關用戶體驗 (或其他設計主題 )的在線課程 。 祝您學習愉快！

(Lead image: Alexis via Pixabay)

(圖片： Alexis通過Pixabay )

Originally published at UsabilityGeek by Alan Smith, who is an is an out of the heart writer voicing out his take on various topics of social media, web design, mobile apps, digital marketing, entrepreneurship, startups and much more in the cutting edge digital world. He is associated with SPINX Digital a Los Angeles web design company & digital marketing agency.

最初由艾倫·史密斯 ( Alan Smith)在《 可用性》雜志上發(fā)表，他是一位發(fā)自內(nèi)心的作家，他在社交媒體，網(wǎng)頁設計，移動應用，數(shù)字營銷，企業(yè)家精神，創(chuàng)業(yè)公司以及新興數(shù)字世界等諸多主題上發(fā)表自己的見解。 。 他與SPINX Digital(洛杉磯網(wǎng)頁設計公司和數(shù)字營銷代理)相關聯(lián)。

翻譯自: https://medium.com/usabilitygeek/effective-use-of-negative-space-in-web-design-cf440dc7445d

qq空間網(wǎng)頁設計

總結

以上是生活随笔為你收集整理的qq空间网页设计_网页设计中负空间的有效利用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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