ui設計中的版式設計

and how not to suck at it

以及如何不吸吮它

This is the 3rd and last part of the series. Here we take all our learnings from Part 1(Click to read) & Part 2(Click to read) and put to good use. Lets begin!

這是本系列的第三部分也是最后一部分。 在這里，我們將從 第 1 部分 (點擊閱讀) 和 第2 部分 (點擊閱讀)中學到的 所有知識 并充分利用。 讓我們開始！

選擇字體 (Choosing a typeface)

“Type is hugely expressive: making the right choice is crucial.”

“類型非常具有表現力：做出正確的選擇至關重要。”

The whole process and perhaps the most imporant one starts with choosing a typeface. Use the following pointers as thumb rules while deciding a typeface. Ahtough there are other factors that you could consider but these are generally a good place to start with :

整個過程，也許是最重要的過程，始于選擇字體。 在確定字體時，請使用以下指針作為拇指規則。 盡管您可以考慮其他因素，但通常是一個不錯的起點：

Decide the characteristic of your brand : Deciding what characteristics you want your brand to convey. To start with, try and answer the most salient qualities of your brand. What’s your brand personality — is it serious and trustworthy, or jovial and fun? What do you stand for, and what do you want to communicate to your users?

決定您的品牌特征：決定您想要品牌傳達什么特征。 首先，嘗試并回答您品牌最突出的品質。 您的品牌個性是什么-是認真又值得信賴，還是快樂又有趣？ 您代表什么？您想與用戶交流什么？

Also think about your target market. What are their interests and aspirations? How do they communicate? This knowledge will help shape your brand identity

還考慮一下您的目標市場。 他們的興趣和愿望是什么？ 他們如何溝通？ 這些知識將有助于塑造您的品牌形象

Align typeface with your brand’s personality : Make sure the typeface you choose aligns with your brand’s personality. For instance, if you wan’t to convey “premiumness” you don’t want to be stuck with a font that is short, round and exhibits a playful personality. (Remember when we learn’t the various characteristics of typeface in Part 1? That’s how it’s going to come into play now)

使字體與您的品牌個性對齊：確保選擇的字體與您的品牌個性對齊。 例如，如果您不想傳達“溢價”，那么您就不想被那種短而圓且表現出俏皮個性的字體所困擾。 (還記得我們在第1部分中不了解字體的各種特征嗎？這就是現在要發揮作用的方式)

Legibility : Don’t put precedence to aesthetics over usability, EVER! No matter how good your fonts look, if they aren’t legible it’s not going to work. The internet if full of fancy websites that use very “aesthetic” looking fonts but are a pain to read through.

易讀性：永遠不要將美學放在可用性之上！ 無論您的字體看起來有多好，如果字體不清晰，都將無法正常工作。 互聯網上滿是花哨的網站，這些網站使用非常“美觀”的字體，但閱讀起來很痛苦。

“Tip — In terms of legibility, Humanist fonts with larger x- height are considered to be the most legible”

“提示-就易讀性而言， x高度較大的 人文主義 字體被認為是最易讀的”

配對字體 (Pairing font)

Great font pairings are essential to great design. But picking great fonts can be quite tricky and time consuming if you don’t do it correctly. We often tend to go by the judgement of our eyes (which is a great thing to do) but inevitably ends up taking a lot of time time.The truth is if you approach this methodically it can be done quite qucikly. Yes yes, i get that designers are rebels, they aren’t restrcited by methods but hey, there always should be a method to madness. Isn’t it?

出色的字體配對對于出色的設計至關重要。 但是，如果操作不正確，選擇出色的字體可能會非常棘手且耗時。 我們經常傾向于用自己的眼睛去判斷(這是一件很棒的事)，但是不可避免地要花費很多時間。事實是，如果您有條不紊地進行處理，就可以很輕松地完成。 是的，我知道設計師是叛逆者，他們沒有被方法束縛，但嘿，總應該有一種瘋狂的方法。 是不是

選擇一個助手： (Choose an achor :)

This means deciding on your primary typeface. Once you have finalised your primary typeface you start the hunt for your seconadary and tertiary typefaces.

這意味著決定您的主要字體。 一旦確定了主要字體，便開始尋找次要和第三種字體。

Its not uncommon to see one typeface being used across one product entirely. While there is no harm in that, the problem with this approach is that it’s too safe and often fails to elicit the emotion that a beautiful typography does.

看到一種字體完全用于一種產品的情況并不少見。 盡管這樣做沒有什么害處，但是這種方法的問題在于它太安全了，常常無法引起人們對精美字體的印象。

查找輔助字體： (Find a secondary typeface :)

“Contrast is one of the most important principles in typographic design. Any shift in typeface, type size, or type weight should be emphasised.”

對比度是版式設計中最重要的原則之一。 應強調字體，字體大小或字體重量的任何變化。”

— Rob Carter27

—羅伯·卡特27

Contrast, uniformity & harmony are basic principles that you have to look for when it comes to typography. Sometimes harmony is achieved by contrast sometimes through uniformity. Lets try and understand a few tried and tested techniques that can be used to achieve harmony.

對比度，均勻性 和和諧性是排版時必須注意的基本原則。 有時通過對比，有時通過統一而達到和諧。 讓我們嘗試了解一些可用于實現和諧的久經考驗的技術。

1) Using the same typeface : This is probably the safest approach to match a text (also probably the most boring). However, you need to ensure there is sufficient contrast between your heading and body text. However, one advantage with this technique is that it promotes faster implementation with minimal errors. This approach is also pre dominant in mobiles applications as products tend to stick with just a single typeface as a part of their brand guidelines. Lets have a look at an example below

1)使用相同的字體：這可能是匹配文本的最安全的方法(也可能是最無聊的)。 但是，您需要確保標題和正文之間有足夠的對比。 但是，此技術的一個優點是，它可以以最少的錯誤促進更快的實現。 這種方法在移動應用中也占主導地位，因為產品往往只使用一種字體作為其品牌指南的一部分。 讓我們看下面的例子

Gilroy Extra bold(Heading) and Gilroy Light (Body)Gilroy Extra粗體(標題)和Gilroy Light(身體)

2) On the basis of x-height : You can create harmony between two different typeface on the basis of their x-height. x-heights that are a complete match or totally different from each other are good candidates, anything in between not so much.

2)在x高度的基礎上：您可以在兩個不同字體的x高度的基礎上創建和聲。 完全匹配或彼此完全不同的x高度是很好的候選者，介于兩者之間的任何東西都不是很多。

In the first example, Oswald( heading) which is a tall sans-serif typeface goes pretty well with Roboto Slab(Body) which has a standard x-height serif typeface

在第一個示例中，高高的無襯線字體Oswald(標題)與具有標準x高度襯線字體的Roboto Slab(Body)配合得很好

Oswald(Heading) & Roboto Slab(Body)奧斯瓦爾德(標題)和機器人板(車身)

In the second example i have tried to pair two fonts with the same x-height. Roboto Slab( Heading) has been used with Neuton which again makes for a decent pairing

在第二個示例中，我嘗試將兩個具有相同x高度的字體配對。 Roboto Slab(Heading)已與Neuton配合使用，這又使它具有不錯的配對

Roboto Slab(Heading) & Neuton(Body)Roboto平板(標題)和Neuton(車身)

3) Super typefaces : Some typefaces are meant to be together. They are called super typefaces. Typefaces that come in both sans- serif and serif styles.You simply can’t go wrong by using the styles of one super family. This can be a great way to start developing your typeface-combining skills.

3)超級字體：某些字體應組合在一起。 它們被稱為超級字體。 無襯線和襯線兩種樣式的字體。使用一個超家族的樣式絕對不會出錯。 這可能是開始開發字體組合技能的好方法。

In the example below, Freight Sans Pro(Heading) goes very well with Freight Text Pro

在下面的示例中，Freight Sans Pro(Heading)與Freight Text Pro配合得很好

Freight Sans Pro (Heading) & Freight Text Pro(Body)Freight Sans Pro(標題)和Freight Text Pro(正文)

4) Extreme contrast : Font that are polar opposites to each other are generally a good match. However, this might need a little bit of trial and error to find the perfect match as every font may not go very well with your brand image. A good display typeface and a good body typeface will generally go well with each other, better if both the typefaces belong to the same family. Lets have a look at a couple of examples below

4)極高的對比度：互為極性相反的字體通常是很好的匹配。 但是，這可能需要反復試驗才能找到最佳的匹配項，因為每種字體可能與您的品牌形象不太吻合。 好的顯示字體和好的身體字體通常會很好地搭配使用，如果兩個字體都屬于同一家族，則效果會更好。 讓我們看下面的幾個例子

Lobster(Heading) & Muli(Body)龍蝦(標題)和木里(身體) Cinzel(Heading) & Pt Sans(Body)Cinzel(標題)和Pt Sans(正文)

5) Same foundry : Fonts pairings from the same author or same foundry are a good option. Type foundries commonly use a base underlying structure to produce different fonts. It’s probably even more common for font authors to do that. If you are a fan of Erik Spiekermann’s work like I am, you would understand what i am saying ;). In the example below FF Meta has been paired with FF Meta Serif, both by Erik Spiekermann.

5)同一鑄造廠：來自同一作者或同一鑄造廠的字體配對是一個不錯的選擇。 類型代工廠通常使用基本的底層結構來產生不同的字體。 對于字體作者來說，這樣做可能更為普遍。 如果您像我一樣是Erik Spiekermann的作品的粉絲，您將理解我在說什么;)。 在下面的示例中，Erik Spiekermann均將FF Meta與FF Meta Serif配對。

FF Meta(Heading) & FF Meta Serif(Body)FF Meta(標題)和FF ??Meta Serif(正文)

Well, you can do all of these mentioned above or just go to a good font pairing website such as these below:

好了，您可以執行上述所有這些操作，或者僅訪問如下所示的優質字體配對網站：

https://giphy.com/gifs/dIZ81xNSpqzDUUuzGOhttps://giphy.com/gifs/dIZ81xNSpqzDUUuzGO

https://www.canva.com/font-combinations/

https://www.canva.com/font-combinations/

Well, jokes aside, don’t rely entirely on a font pairing website. They are a good place to start but they are definitely not a substitute for experience.

好吧，開個玩笑，不要完全依賴字體配對網站。 他們是一個很好的起點，但是絕對不能替代經驗。

Train your eyes : This bring us to the final and the most important part of the series “Training your eyes”. This will ofcourse require time and effort from your part to be able to judge between good and bad typography. You want to reach a stage where you can tell the difference without having to refer to specifications

訓練您的眼睛：這使我們進入“訓練您的眼睛”系列的最后一個也是最重要的部分。 當然，這將需要您付出時間和精力來判斷字體的好壞。 您想達到一個無需參考規格就能分辨出差異的階段

Good typorgaphy is closely related to three factors — 1) Font Size2) Line Height3) Line Width

良好的打字技巧與三個因素密切相關— 1)字體大小2)線高3)線寬

The ability to judge a typogrphy will improve tremendously when you can see and understand the co-relation between all the three factors. Matej Latin, has spoked about it in length in his book “Better Web Type” .

當您看到并理解所有三個因素之間的相互關系時，判斷印刷技術的能力將大大提高。 Matej Latin在他的著作“ Better Web Type ”中談到了這一點。

He has also created a type game which will help amateurs like us train our eyes and get us up to pace in no time. I highly recommend that you go and play the game a few times if you haven’t already. Its actually quite fun.

他還創建了一款類型游戲，它將幫助像我們這樣的業余愛好者訓練我們的眼睛，并讓我們立即掌握節奏。 我強烈建議您去玩幾次(如果還沒有的話)。 它實際上很有趣。

https://betterwebtype.com/triangle/

https://betterwebtype.com/triangle/

結論 (Conclusion)

Typography for me has been rather intimidating. But once i dispelled the doubts that i had in my mind, it became an extremely pleasant affair. The process of writing the article has been extremely enriching as well, as i learnt a lot of things while rummaging and collating the contents for this piece. I hope there are at least a few takeaways that you’ve had from this article. If it did help you in anyway, do let me know in the comments. It will motivate me to write more!

對我來說，排版非常嚇人。 但是，一旦我消除了我心中的疑慮，那便成為一件極其愉快的事情。 撰寫本文的過程也非常豐富，因為我在翻閱和整理本文的內容時學到了很多東西。 我希望您至少可以從本文中學到一些東西。 如果確實有幫助，請在評論中讓我知道。 這會激勵我寫更多東西！

Also, I would like to take the opportunity to thank and share some brilliant references without which this piece would not have been possible. You guys make this world all the more awesome. Cheers!

另外，我想借此機會感謝并分享一些精彩的參考文獻，沒有這些參考文獻，就不可能實現。 你們讓這個世界變得更加精彩。 干杯!

Better Web Type by Matej Latinhttp://thinkingwithtype.com/grid/https://www.toptal.com/designers/typography/typeface-classification

Matej Latin的“更好的Web類型” http://thinkingwithtype.com/grid/ https://www.toptal.com/designers/typography/typeface-classification

https://viljamis.com/2012/modular-grids/http://www.verse-co.com/journal/2016/1/27/design-tip-1-use-a-baseline-gridhttps://www.indesignskills.com/tutorials/letter-spacing-tracking-typography/

https://viljamis.com/2012/modular-grids/ http://www.verse-co.com/journal/2016/1/27/design-tip-1-use-a-baseline-grid https：/ /www.indesignskills.com/tutorials/letter-spacing-tracking-typography/

https://www.canva.com/learn/kerning/https://www.shutterstock.com/blog/3-tips-for-picking-the-right-font-for-your-businesshttps://www.creativebloq.com/how-to/choose-the-right-typeface-for-a-brand

https://www.canva.com/learn/kerning/ https://www.shutterstock.com/blog/3-tips-for-picking-the-right-font-for-your-business https：// www .creativebloq.com /如何/為品牌選擇正確的字體

翻譯自: https://medium.com/swiggydesign/typography-in-design-part-3-fefb1cbe7b95

ui設計中的版式設計

總結

以上是生活随笔為你收集整理的ui设计中的版式设计_设计中的版式-第3部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。