ui设计中的版式设计_设计中的版式-第3部分

最新推荐文章于 2024-10-08 20:27:53 发布

weixin_26732881

最新推荐文章于 2024-10-08 20:27:53 发布

阅读量263

点赞数

文章标签： python 算法 c++ 设计模式 java

原文链接：https://medium.com/swiggydesign/typography-in-design-part-3-fefb1cbe7b95

版权

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)使用相同的字体：这可能是匹配文本的最安全的方法(也可能是最无聊的)。但是，您需要确保标题和正文之间有足够的对比。但是，此技术的一个优点是，它可以以最少的错误促进更快的实现。这种方法在移动应用中也占主导地位，因为产品往往只使用一种字体作为其品牌指南的一部分。让我们看下面的例子

Image for post — Gilroy Extra bold(Heading) and Gilroy Light (Body)

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)配合得很好

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配合使用，这又使它具有不错的配对

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配合得很好

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)极高的对比度：互为极性相反的字体通常是很好的匹配。但是，这可能需要反复试验才能找到最佳的匹配项，因为每种字体可能与您的品牌形象不太吻合。好的显示字体和好的身体字体通常会很好地搭配使用，如果两个字体都属于同一家族，则效果会更好。让我们看下面的几个例子

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配对。

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

好了，您可以执行上述所有这些操作，或者仅访问如下所示的优质字体配对网站：

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/

结论 (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-grid https://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 /如何/为品牌选择正确的字体