Layout and composition. In a way, they're the foundation of design. They give your work structure and make it easier to navigate—from the margins on the sides to the content in between. Of course, it's not just about working with text. Composition matters in other mediums too, like graphic design, web design, and much more. Without a well-composed layout, your work would basically fall apart.
排版與構圖。某方面來說,它們是設計的基礎。它們讓你的作品有結構,比較容易瀏覽--從旁邊的邊界到中間的內容。當然,不僅只是處理文本內容。構圖在其他媒介中也很重要,例如平面設計、網頁設計和其它更多方面。沒有好的構圖和排版,你的作品基本上就會支離破碎。
The key to mastering layout and composition is to think like a designer. Luckily, it's easier than it sounds. There are five basic principles that can help you transform your work and sharpen your eye for design. Let's start at the top and work our way down.
掌握排版與構圖的關鍵就是像設計師一樣思考。幸運的是,這比聽起來更容易做到。以下有五個基本原則,能夠幫助你改變作品,讓你對設計有更敏銳的眼光。我們先從最上面的開始講,並往下一個一個介紹。
Proximity is all about using visual space to show relationships in your content. In practice, it's pretty simple—all you have to do is make sure related items are grouped together. For example, blocks of text or elements in a graphic. Groups that are not related to each other should be separated to visually emphasize their lack of a relationship. All in all, this makes your work easier to understand at a glance—whether it's purely text or something more visual.
「鄰近性」就是運用視覺空間傳達出內容之間的關聯性。實際操作起來其實滿簡單的--你要做的就是一定要把有相關的項目放在一起。例如,文字方塊或元素圖案。彼此不相關的群組要分開,以視覺的方式強調彼此缺乏關聯性。總而言之,這會讓你的作品更能夠一眼就清楚明瞭--不管是純文字或是更視覺化的東西。
White space is an important part of every composition. Now, this doesn't mean literal white space—it just means negative space, like the spaces between your content, between lines, and even the outer margins. There's no one way to use white space correctly, but it's good to understand its purpose. White space helps you define and separate different sections. It gives your content room to breathe. If your work ever starts to feel cluttered or uncomfortable, a little white space might be just what the doctor ordered.
「留白」也是構圖中很重要的一塊。這不是在指字面上的白色的地方--而是指「負空間」,如內容之間的留白、行列之間、或甚至外部邊界的空白。使用留白的方式沒有唯一正解,但要了解它的目的。留白能幫你定義和區分不同區塊。它給你的作品呼吸的空間。如果你的作品讓你開始覺得太混亂或不舒服,留一點空白也許就是解答。
Alignment is something you deal with all the time, even if you don't realize it. Whenever you type an email or create a document, the text is aligned automatically. When aligning objects by yourself—for instance, images or separate text boxes—getting it right can be tricky. The most important thing is to be consistent. Let's take a look at what that means.
「對齊」是你無時無刻都會遇到的事情,即使你不自覺。你寫電子郵件或建立文件的時候,文字已經自動對齊了。當你要自己手動對齊物件的時候--例如,圖片或獨立的文字方塊--好好對齊可能會有點難。最重要的事情是要維持一致性。我們來看一下是什麼意思。
It might help to imagine your content arranged inside of a grid. Notice how there's an invisible line centering each image to the text? Each grouping is also evenly spaced and aligned with equal-sized margins. It's that attention to detail that makes the composition easier to navigate. Without consistent alignment, your work could start to feel disorganized.
這可能會有點幫助,想像你的內容是編排在格線裡的。有注意到有一條隱形的線條讓圖案與文本置中對齊嗎?每一個物件組合也彼此對齊,中間的留白均等,到邊界的留白也是相等的。留意細節才能讓構圖容易瀏覽。對齊不一致的話,你的作品就會讓人覺得雜亂無章。
Contrast simply means that one item is different from another. In layout and composition, contrast can help you do many things—for example, catch the reader's eye, create emphasis, or call attention to something important. There are lots of strategies for creating contrast. You can use color, adjust the size, shape or visual weight of an object, or use contrasting styles of text.
「對比」,就是指一個物件和另一個不同。在排版和構圖上,對比能幫助你做到很多事情--例如:吸引讀者的目光、創造強調性、或讓人注意到重點。有很多策略能夠創造對比。你可以用顏色,調整大小、形狀、物件的視覺比重,或者文字使用對比的風格。
Contrast is also closely tied to hierarchy—a visual technique that can help the viewer navigate your work. In other words, it shows them where to begin and where to go next using different levels of emphasis. Establishing hierarchy is simple: Just decide which elements you want the reader to notice first, then make them stand out. High-level or important items are usually larger, bolder, or more eye-catching in some way.
與對比緊密相關的是「視覺層級」--一種視覺技巧能讓觀看的人更容易瀏覽你的作品。換句話說,不同層級的強調性能夠告訴他們要從哪裡開始看,再看哪個地方。建立層級很簡單:只要決定你想先讓讀者注意到哪些元素,接著凸顯它們。高層級或重要的物件通常都比較大、比較粗,或以某種方式比較顯眼。
Repetition is a reminder that every project should have a consistent look and feel. That means finding ways to reinforce your design by repeating or echoing certain elements. For instance, if you have a specific color palette, look for ways to carry it through. If you've chosen a special header style, use it every time. It's not just for aesthetic reasons—being consistent can also make your work easier to read. When the viewer knows what to expect, they can relax and focus on the content.
「重複性」是用來提醒每個作品都必須要有一致性的外觀和感覺。指的是找到方式增強設計,透過重複或呼應特定元素。例如,如果你有特定的色調配置,要找到方法讓這種配置貫穿整個作品。如果你挑了特別的標題樣式,記得每次都要用。不僅僅只是美觀上--前後一致也能讓你的作品更好閱讀。當觀眾知道會看到怎麼樣的配置,他們就能放鬆,好好專注在內容上。
In many ways, layout and composition are the unsung heroes of design. It's easy to overlook their role, but they're part of everything you do. A nudge here...some extra white space there...and voila! With a little attention to detail, you can create beautiful, professional-looking compositions.
以很多方面來說,排版和構圖是設計中的無名英雄。很容易忽略它們的角色,但它們在你的作品中無所不在。這裡微調一下...那裡多留白一點...你看!多注意細節,你就能創造出漂亮又專業的構圖了。
Thanks for joining us for the basics of layout and composition. Check out the rest of our design topics, including typography, color, and images.
謝謝你收看排版與構圖的基本原則。別忘了看看我們其它設計主題的影片喔,包含字體排版、顏色和圖片。