Skip to content

Commit 91875ab

Browse files
authored
Update 41.精读《Ant Design 3.0 背后的故事》.md
修正格式错误
1 parent d81e6d7 commit 91875ab

File tree

1 file changed

+6
-4
lines changed

1 file changed

+6
-4
lines changed

前沿技术/41.精读《Ant Design 3.0 背后的故事》.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,15 @@ Atomic Design 书中提到模块化思路以及原子级的模块抽象的方法
3131
体验策略的核心思路是以任务为导向的。主要通过四个方面去构建体验策略:流程与方法、度量体系、运营活动和最佳实践。
3232

3333
## 精读
34-
整个分享感受颇深,但就『自然』这个关键词才生了我自己的疑问主字号、字阶和行高是否存在关系
34+
整个分享感受颇深,但就『自然』这个关键词才生了我自己的疑问主字号、字阶和行高是否存在关系
3535

3636
在梳理的这层关系上,缺少了对字体的讨论,而字体又是非常关键的因素。我在之后,断断续续查阅了不少资料。写下关系背后还要考虑的问题。
3737

3838
1. 字体
39-
我在查阅资料的时候,发现 x-height 在西文字体中的概念。在英文字体的设计中,字体的高度体包含三部份,以基线 (baseline) 为中央,以上称之上行区域 (ascender area),基准线内称之为 x-height,以下称为下行区域 (descender area)。小写西文字母中的核心部件都位于 x-height 位置中,这一位置也被称为排版的核心位置,是引导视线流动的关键。放一张在 wikipedie 上的图:
4039

41-
[image:CCC0E19B-0E90-4989-BD91-A2B33D38E8CD-6272-000031C10BD416C0/820px-Typography_Line_Terms.svg.png]
40+
我在查阅资料的时候,发现 x-height 在西文字体中的概念。在英文字体的设计中,字体的高度体包含三部份,以基线 (baseline) 为中央,以上称之上行区域 (ascender area),基准线内称之为 x-height,以下称为下行区域 (descender area)。小写西文字母中的核心部件都位于 x-height 位置中,这一位置也被称为排版的核心位置,是引导视线流动的关键。放一张在 wikimedia 上的图:
41+
42+
![](https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/800px-Typography_Line_Terms.svg.png)
4243

4344
每一种西文字体的 x-height 是不一样的。非常幸运,Jukka Korpela 做了一网站专门可以测量 web 上字体的 x-height。其中,Arial 的 X-HEIGHT RATIO 是 0.519,而 Tahoma 是 0.545,Times New Roman 是 0.448。Arial 和 Times New Roman 之间的比例差距大概 17%。
4445

@@ -47,6 +48,7 @@ Atomic Design 书中提到模块化思路以及原子级的模块抽象的方法
4748
这是第一个问题,第二个问题是中文字体没有 x-height,也就是说中文字体就等同于西文字体的全大写,错落的美感都没有。而且中文有一个问题是因为字形之前的差异,每个字之间的留白都不尽相同,看上去又会差一些。一般情况下,靠行间距来弥补视觉差,但总体上要排版达到西文字体的效果要花一些功夫。
4849

4950
2. 屏幕
51+
5052
我们的字体大小使用的是 points(pt),points 是一个物理衡量,它的标准是 72 points per inch(PPI)。但我们不同设备的 PPI 都是不一样的,那么造成了同样的设定在不同屏幕下看到的字体也会有差异。
5153

5254
Macbook Pro 的 PPI 是 220,Dell XPS 的 PPI 是 165,iPhone 7 有 326,但 iPhone 7p 的 PPI 有 401,而一般 HDTV 的 PPI 是 30。其中,iPhone,Macbook 都是 retina 屏。
@@ -64,4 +66,4 @@ Macbook Pro 的 PPI 是 220,Dell XPS 的 PPI 是 165,iPhone 7 有 326,但
6466
## 总结
6567
曾经有国外的设计师有写文用黄金比例来构建字号与行高的关系,在一片喝彩中看到了资深设计师的反对,主要也是从以上和一些其它因素来说关系是比较难设定。
6668

67-
今天看到我们的设计与理性之间建立的关系,我还是比较坚信建立这种关系背后带来的是更大的价值。
69+
今天看到我们的设计与理性之间建立的关系,我还是比较坚信建立这种关系背后带来的是更大的价值。

0 commit comments

Comments
 (0)