-
Notifications
You must be signed in to change notification settings - Fork 5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
以排印为本:从内容出发 #1841
以排印为本:从内容出发 #1841
Conversation
5. **Buttons** — Start Now; | ||
1. **H1** ── TurnGrams 中最惹人爱的部分; | ||
2. **H2** ── 收件人姓名和使用指引; | ||
3. **H3** ── 面向海外用户和邮箱吗?; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
「邮箱」可能有歧义,「信箱」或许更好。
校对认领~ |
@osirism 好的呢 🍺 |
|
||
*First published on *[*Subvisual’s blog*](https://subvisual.co/blog/posts/138-typography-as-base-from-the-content-out)*. *This blog post was born out of my necessity to find a structure in which I could rely on when designing any kind of web project. | ||
**首发于 [Subvisual 的 blog](https://subvisual.co/blog/posts/138-typography-as-base-from-the-content-out)**。本文是为了寻找一种在设计任何 web 项目时都能依赖的结构。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“This blog post was born out of my necessity to find a structure in which I could rely on when designing any kind of web project.”
这段主要应该是描述作者写这篇文章的起因。我的理解如下,译者可以一起讨论下:
“这篇文章是起于我希望有一个结构能够支持我设计任何类型的Web项目。”
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
同意 +1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
第一稿的译法和 @osirism 的比较类似,但是毕竟是第一句,略显冗长,为了精练一下我就顺着作者的意思向前推了一步,的确不是特别忠于原文了。
校对认领+1 ~ |
@laiyun90 妥妥哒 🍻 |
|
||
*First published on *[*Subvisual’s blog*](https://subvisual.co/blog/posts/138-typography-as-base-from-the-content-out)*. *This blog post was born out of my necessity to find a structure in which I could rely on when designing any kind of web project. | ||
**首发于 [Subvisual 的 blog](https://subvisual.co/blog/posts/138-typography-as-base-from-the-content-out)**。本文是为了寻找一种在设计任何 web 项目时都能依赖的结构。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
同意 +1
|
||
I started my journey on design through graphic design. In college, I spent a lot of time creating posters, books, and magazines. To do these kinds of pieces, I always went through very thorough processes of selecting fonts, sizes, margins, grids, etc. and I had excellent teachers that showed me how to do it. I liked doing graphic design, and I still do, but the web called me, and here I am, giving my first big steps after some big web projects. I also find myself asking why it is that I am not using processes like the ones I used before, on books and magazines, to do websites and products. | ||
我入门设计这一行最开始是做图像设计。我在大学制作了很久的海报、书籍和杂志。要完成这些活计我总得事无巨细地搞定选字体、字号、页边距、网格等等的全部流程,好在有个出色的老师指导我。我喜欢做图像设计,现在也喜欢,但是 web 召唤了我,所以我转而做 web 了,搞了几个大项目之后终于算是迈出了重要的第一步。我发现自己在问,为什么没有用之前搞书籍和杂志的流程来做网站和产品。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
graphic design
“图像设计”=>"平面设计"
|
||
I started my journey on design through graphic design. In college, I spent a lot of time creating posters, books, and magazines. To do these kinds of pieces, I always went through very thorough processes of selecting fonts, sizes, margins, grids, etc. and I had excellent teachers that showed me how to do it. I liked doing graphic design, and I still do, but the web called me, and here I am, giving my first big steps after some big web projects. I also find myself asking why it is that I am not using processes like the ones I used before, on books and magazines, to do websites and products. | ||
我入门设计这一行最开始是做图像设计。我在大学制作了很久的海报、书籍和杂志。要完成这些活计我总得事无巨细地搞定选字体、字号、页边距、网格等等的全部流程,好在有个出色的老师指导我。我喜欢做图像设计,现在也喜欢,但是 web 召唤了我,所以我转而做 web 了,搞了几个大项目之后终于算是迈出了重要的第一步。我发现自己在问,为什么没有用之前搞书籍和杂志的流程来做网站和产品。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“要完成这些活计我总得事无巨细地搞定选字体、字号、页边距、网格等等的全部流程,好在有个出色的老师指导我。”
出色的老师指导我 和 上面的内容是两句话 建议用 句号隔开
|
||
I started by googling and reading everything that could be interesting. I found some excellent articles, especially [this one from Zac Halbert](https://medium.com/tradecraft-traction/harmonious-typography-and-grids-10da490a17d) that ended up being an inspiration for this post and a formula that I used in my work ever since. I asked some friends that are working on graphic design how they are doing their stuff nowadays and found some books that helped me a lot in my quest. | ||
我开始谷歌搜素,同时阅读了很多有意思的东西。我找到了一些极好的文章,尤其是[Zac Halbert 的这篇文章](https://medium.com/tradecraft-traction/harmonious-typography-and-grids-10da490a17d),直接促使我写了现在这篇文章,还让我形成了工作中一直在用的准则(formula)。我还询问了一些从事图像设计的朋友,想看看他们现在的工作方式,由此收获了一些对我的研究帮助极大的书籍。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
我开始谷歌搜素,同时阅读了很多有意思的东西。
=>"我开始搜索并阅读任何可能有意思的东西"
|
||
I started by googling and reading everything that could be interesting. I found some excellent articles, especially [this one from Zac Halbert](https://medium.com/tradecraft-traction/harmonious-typography-and-grids-10da490a17d) that ended up being an inspiration for this post and a formula that I used in my work ever since. I asked some friends that are working on graphic design how they are doing their stuff nowadays and found some books that helped me a lot in my quest. | ||
我开始谷歌搜素,同时阅读了很多有意思的东西。我找到了一些极好的文章,尤其是[Zac Halbert 的这篇文章](https://medium.com/tradecraft-traction/harmonious-typography-and-grids-10da490a17d),直接促使我写了现在这篇文章,还让我形成了工作中一直在用的准则(formula)。我还询问了一些从事图像设计的朋友,想看看他们现在的工作方式,由此收获了一些对我的研究帮助极大的书籍。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
graphic design
“图像设计”=>"平面设计"
|
||
I’m going to take you through the process of bootstrapping a project using typography as base. We will start by the art direction and finish on the typography scale. Our project is TurnGram, a service that delivers your photos to your loved ones on a regular basis, hassle free. The design sprint has ended, our prototype is done and tested, and the first version will be born. | ||
下面我就带你了解一下以排版为基础的项目启动程序。我们从艺术目标开始,到排版尺度结束。我们的项目是 TurnGram,一个定期将自己的照片寄给所爱的人的服务,非常省事。设计冲刺已结束,原型完成并通过了测试,第一版即将面市。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“下面我就带你了解一下以排版为基础的项目启动程序。”
=>"下面我就带你了解一下以排版为基础引导项目的过程"
个人理解是 这个项目是由排版为基础引导的,而非已排版为基础的项目
|
||
I’m going to take you through the process of bootstrapping a project using typography as base. We will start by the art direction and finish on the typography scale. Our project is TurnGram, a service that delivers your photos to your loved ones on a regular basis, hassle free. The design sprint has ended, our prototype is done and tested, and the first version will be born. | ||
下面我就带你了解一下以排版为基础的项目启动程序。我们从艺术目标开始,到排版尺度结束。我们的项目是 TurnGram,一个定期将自己的照片寄给所爱的人的服务,非常省事。设计冲刺已结束,原型完成并通过了测试,第一版即将面市。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“我们从艺术目标开始,到排版尺度结束。
[排版尺度] 这个翻译有点奇怪,参考极客学院的翻译”http://wiki.jikexueyuan.com/project/material-design/style/typography.html 他们用了“字体排版的缩放”,供参考
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
typography scale 我考虑了许久,查了一些资料,李如一将字体排版中的 scale 译为「尺度」,觉得还不错就拿来用了,不过想到这里 scale 主要表「缩放」之意,还是有些不妥。
@cdpath 两位校对者都已经校对好了~ 可以来根据校对意见进行调整了哈 ┏ (゜ω゜)=☞ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, 没有什么大问题。
|
||
Let’s start with the Art Direction or goals, of the project. This is where we think about the mood of the project, the feel that we want users to have when looking to our website. Take the time to read the project’s copy carefully and to look at its images, if possible. We want to understand our project’s personality through its content. As you do it, write it down: **cozy, familiar and nostalgic**. | ||
从这个项目的美术设计或者说艺术方向开始谈起。这时要考虑定下项目的基调,也就是想传达给看浏览我们网站的人的感觉。花点时间仔细阅读项目素材,最好能看看其中的图像。我们想通过内容来了解项目的气质,然后写下想到的词:**「温馨,亲密和怀旧」**。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『温馨,亲密和怀旧』=>『温馨、亲密和怀旧』
|
||
**“Choose fonts that will survive, and if possible prosper, under the final printing conditions.”** From this, we must bear in mind what sizes our typefaces will be rendered in, a question of legibility. Before choosing the typeface, go for its specimen and check what sizes it is best rendered in. Our example has some long text blocks so we should aim for a base font size of 20px. If you are designing a blog post, for instance, you will want to be using a base font size between 20px and 24px with a good x-height(the height of the lowercase). This is a rule that I regularly apply in my work, but like all rules, it can be broken when we feel it can work differently. | ||
「**选择能存续下来的字体,最好是发展比较好的,在最终打印出来的条件下**。」根据这则建议,我们必须牢记选用的字体会被渲染到什么字号,这事关可识别性。在选择字体之前,看一下样本,了解其最优的渲染字号。我们的例子有很多长文本块,所以我们的目标字体的基础字号是 20px。如果你在设计博文页面,举个例子,你会想要使用基础字号在 20px 到 24px 之间,x 高(小写字母高度)合理的字体。这是我经常应用到我的工作中的一条规则,但是和所有规则一样,如果我们觉得可以采用其他方式,规则也可以打破。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
「选择能存续下来的字体,最好是发展比较好的,在最终打印出来的条件下。」
=>「选择能存续下来的字体,最好是在最终打印出来的条件下,有可能发展较好的。」
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Choose fonts that will survive, and if possible prosper
这两句似乎联系更为紧密。不过 under the final printing conditions 的确可以前置符合汉语习惯。
选择在最终打印出来条件下能存续下来的字体,最好是发展比较好的。
|
||
**“Choose fonts that will survive, and if possible prosper, under the final printing conditions.”** From this, we must bear in mind what sizes our typefaces will be rendered in, a question of legibility. Before choosing the typeface, go for its specimen and check what sizes it is best rendered in. Our example has some long text blocks so we should aim for a base font size of 20px. If you are designing a blog post, for instance, you will want to be using a base font size between 20px and 24px with a good x-height(the height of the lowercase). This is a rule that I regularly apply in my work, but like all rules, it can be broken when we feel it can work differently. | ||
「**选择能存续下来的字体,最好是发展比较好的,在最终打印出来的条件下**。」根据这则建议,我们必须牢记选用的字体会被渲染到什么字号,这事关可识别性。在选择字体之前,看一下样本,了解其最优的渲染字号。我们的例子有很多长文本块,所以我们的目标字体的基础字号是 20px。如果你在设计博文页面,举个例子,你会想要使用基础字号在 20px 到 24px 之间,x 高(小写字母高度)合理的字体。这是我经常应用到我的工作中的一条规则,但是和所有规则一样,如果我们觉得可以采用其他方式,规则也可以打破。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『如果你在设计博文页面,举个例子』=>『举个例子,如果你在设计博文页面』
举个例子 放在前面更适合中文阅读习惯
|
||
**“Choose faces that suit the task as well as the subject.”** This project’s personality is cozy, familiar and nostalgic, so we should pick a typeface that reflects this. | ||
「**选择同时适合任务和主题的字体**。」我们项目的气质是温馨,亲密和怀旧,所以我们应该选择能够相称的字体。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『温馨,亲密和怀旧』=>『温馨、亲密和怀旧』
|
||
**“Choose faces that can furnish whatever special effects you require.”** If your content has a lot of numbers in the text, for example, you want to choose a typeface that contemplates [text figures](https://en.wikipedia.org/wiki/Text_figures). The same goes to texts that need some emphasis where you could use italic, bold or even [small caps](https://en.wikipedia.org/wiki/Small_caps). | ||
「**选择可以提供你想要的特殊效果的字体**。」如果你的内容中含有带有大量数字的文本,举个例子,你就想要一个仔细打磨了不齐线数字[^2]的字体。同理,如果想要强调,可以使用意大利体、黑体甚至小型大写字母。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『意大利体』=>『斜体』
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
其实直译过来是意大利体啦,不过的确斜体在这里更合适一些。
5. Take advantage of the typeface resources. | ||
1. 确保字体是为在屏幕上呈现而设计的; | ||
2. 字号为 20px 时看上去不错; | ||
3. 字体要利于显示长文本,能够体现温馨,亲密和怀旧的特质; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『温馨,亲密和怀旧』=>『温馨、亲密和怀旧』
他。 |
@cdpath 已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接,方便及时添加积分哟。 |
…slate # By sqrtthree (4) and others # Via 根号三 * 'master' of https://github.com/xitu/gold-miner: 你不需要基于 CSS Grid 的栅格布局系统 (xitu#1863) 更好的表单设计: 每一页,一件事(实例研究) (xitu#1862) 你会给想学习机器学习的软件工程师提出什么建议? (xitu#1861) 以排印为本:从内容出发 (xitu#1841) WAR 还是 JAR,你应该用哪种格式打包? (xitu#1839) 🚀 添加文章『你不需要基于 CSS Grid 的栅格布局系统』到文章列表 🚀 添加文章『开发者眼中 iOS 11 都更新了什么?』到文章列表 🚀 添加文章『Node.js 子进程:你应该知道的一切』到文章列表 🚀 添加文章『Android 中的定时任务调度』到文章列表
对应 Issue 地址:#1762