Skip to content

Latest commit

 

History

History
47 lines (22 loc) · 3.18 KB

41.精读Ant Design 3.0 背后的故事.md

File metadata and controls

47 lines (22 loc) · 3.18 KB

精读《Ant Design 3.0 背后的故事》

Atomic design 提到的模块化思路和原子级的模块抽象方式启发设计师,设计体系是一个包容性极强而充满生命力的东西,从组件库到设计语言到设计方法和产品设计相关的概念都会涉及到,生命力为非静态的内容,是可以应对不同变化的环境或场景,是一个不断演化的过程

Antd system

  • 核心三块内容: 设计语言、设计资产、体验策略

  • 对应: 便利性(可控性: Consistency),效率性和更高要求的 UX 交互设计

    • 设计价值观: 微小,确定,幸福感 分别代指在细节上的微创新、模块化思路和研发体验上的追求,3.0 又提出了自然的思想,在设计哲学上有了进一步的升华,一切自然的事物都是建立在数学/物理规律上

    • 字阶,主字号,行高自然问题: 每一个字号之间间隔为 16px,行高和字体之间相差 8px

    • 布局和色彩都是基于对肉眼和物体之间的观察而完成的设计,来源于斐波那契双数组的启发,帮助设计师在布局设计决策中更好的实现动态的秩序感

      设计资产

      • 以模块化为核心思路展开, 形成符合自身提点的 E(example). T(template). C(components). G(global styles)的抽象思路

      体验策略

      • 核心思路以任务为导向,通过 流程与方法,度量体系,运营活动和最佳实践

自然

  • 主字号、字阶、行高的关系疑惑?
    • 西文字体中字体高度包括三部分,以基线(baseline)为中心,以上称为上行区域(ascender area),基准线称之为 x-height,以下称为下行区域(descender area) ,小写西文字母的核心组件位于 x-height 位置中,称为排版的核心位置,引导视线流动的关键
    • 中文字体没有 x-height, 中文字体就等于西文字体的全大写,没有错落的美感,每一种字体在同一字号下的字体大小有一定的差距,字形间的差距,使得每个字之间的留白都不相同,所以一般情况下要靠行间距弥补视觉差, 总体上达到西文排版的效果
    • 屏幕字体大小使用的是 points, 他是一个物理衡量单位, 标准是 72 points per inch(PPI),不同的设备 PPI 不一样,所以同样的设定在不同屏幕下的字体差异也有不同(设备兼容性问题)
    • 视觉角度下,虽然定义的是绝对 14px, 但是不同视觉下 14px 是不一样的,这个原始值是基于人和设备一定角度下算出来的, 不同环境下屏幕距离和角度不易, 所以字体物理大小不等于视觉大小
  • 结论: 普适的字体基准是不存在的,只能在多重条件的约束下给出一个定值,对于公式也是一样,在一定的范围内,用公式表达出一种自然的特征,在自然的基准下给与一个标准

summary

  • 曾经有国外的设计师写文用黄金比例构建字号和行高之间的关系,但是反对声音不少,主要在主观意识下因素判断很难有统一的标准,生命力和差异性的体现就出来了
  • Antd 在设计和理性之间建立的关系,在背后一定有其强大的价值出现。