产品经理B端设计指南字体.docx

产品经理B端设计指南字体.docx

《产品经理B端设计指南字体.docx》由会员分享，可在线阅读，更多相关《产品经理B端设计指南字体.docx（9页珍藏版）》请在冰豆网上搜索。

产品经理B端设计指南字体

B端设计指南–字体

在B端设计中，排版字体是其中重要的组成部分。

在设计字体需要考虑许多问题，比如字体的布局、样式等等。

本篇文章中，详细介绍B端设计中如何正确设计字体，快来学习一下吧。

在B端设计当中，笔画往往是出现频率速率最高的一个“原子”。

因其拥有不同的渲染方式（设计软件渲染软件产品与浏览器渲染）并且在Web设计当中，会出现两大桌面操作系统的情况（Windows与MacOS）也就造成在B端设计当中的字体，往往存在着许多“变数”。

而在查看很多查找设计师的稿件过后，会发现他们往往可以存在许多页面问题：

缺少层级、页面发灰。

1.缺少层级

缺少视觉层级，这往往是作为一个设计师的主观感受。

在课上，我有和大家聊过：

作为一名B端设计师，其实我们更像一个版式尽可能美术设计。

因为在移动端到桌面端，跨平台面积增大的同时，也会带来信息区域的划分，视觉动线的引导。

而缺少层级往往就像我们去寻找出口时，遇到了让人迷惑的“标识引导系统”，在一个刊版式上为你平铺密密麻麻展示所有信息。

所以说设计本身，其实也是相通的。

2.页面发灰

页面发灰一词其实源于“美术专业”，通常用于评价一副美术作品缺乏重色或者重色比例过低，你也可以为页面当中往往找不到重点。

因此页面发灰往往是字体重色缺失所导。

字体Family，也叫做字体回退。

是浏览器常见的字体CSS属性。

手写体其目的是保证字体在不同的平台及浏览器内，虽然有着良好的适应性和可读性。

总的来说是因为作为我们作为B端产品提供方，不知道真实用户究竟在电脑中安装了哪些，而通过字体回退，来保证页面显示的最佳效果。

字体Family是需要在投资项目之初就能有所明确，因为字体最为B端页面当中最实践经验/底层的原子，如果随意变化，全局的设计方案都会受到波及，因此风险较大。

1.常见的字体Family

显然这些字体不是一成不变，你可以根据实际用户的情况进行相应调整：

2.字体回退究竟如何确定？

字号与行高是一对绑定的关系。

对于字号，浏览器一直都有一个最小限制，为了保证用户的阅读，字体的最小字号为12px。

在实际项目中，我们会设定有：

12px、14px、16px、18px……等高度，而行高会是字体的1.5-1.6倍，因此我将常见的字体与行高做了一份表格。

最后我们再说说，行高在B端项目当中的重要性。

这是一位同学问我的结构性问题，大家可以想想究竟是蓝色还是黄色？

正确答案是黄色。

因为行高的出现，他代表着有文字有着更为统一的高度，并且在实际间距的测量中所，必须把行高算为字体内部的元素当中。

字体字重分别有ExtraLight、Light、Normal、Regular、Medium、Bold和Heavy，当然它还有一个数字名称：

100、200、300、400、500……

我们可以通过字重来改变页面层级。

因为字体越粗，代表阅读视线更加特别注意，整个信息层级会发生较大变化。

而粗字体通常表示字型我们的标题，也就意味着你的书名是概括下面的所有信息内容。

因此通过良好的字较重管理，能够帮助我们进行信息层级资料的区分。

字体灰色的色阶会直接影响页面是否发灰，我们先来看看页面发灰的页面所存在的问题。

虽然“发灰”是纯粹一种我们美术设计的主观感受，但是想要深究其中的逻辑，我们可以通过WCAG规范当中找到更为合适的解答。

这里我们将罕见的中性色进行平铺，可以根据HSB色值当中的明度得出中多一个折线图，因为字体使用往往都往往在后三个色阶，颜色的色值走向也相对更陡。

色阶相对陡的逻辑其实都是源于中性色的使用场景。

浅灰色部分主要包括是以「背景区分、分割线、输入框描边」为主，通过浅灰色来实现对于页面布局暧昧关系的关系。

深灰色则主要用于「文字、标题、正文排版」可见度它需要拉开明度的变化来引导光影关系，进而营造界面的整体层次感。

而对于浅灰色与蓝灰色，行业当中往往存在着一种传言说法，即「字体灰色可以通过进行控制变化，比如使用#000然后将透明度进行随意降低降低」。

当我深究这个环境问题，发现好像在各大系统当中都会存在这样说法，这真的对吗？

通过查看SAP、Lightning、AntDesign、Element、ClarityDesign等设计规范，对比发现这种说法主要源自国内ClarityDesign与AntDesign两家，不清楚规范的小伙伴可以查阅B

ClarityDesign确实有描述关于透明度的问题的一段话：

“我们使用透明度来区分字体层级。

当字体应用于浅色背景时，以#000合理化来调整透明度；当应用于深色背景时，以#FFF为基础。

”

仔细阅读可以理解到其核心在于表达字体层级隔阂，让大家能够快速理解层级的概念同学们而并非教唆大家使用透明度进行字体的使用。

我们再看AntDesign，如果只看配图，好像表达的含义确实虽然是通过透明度控制文本颜色和背景颜色之间的关系，但是详细描述看一下旁边的描述文字：

“文本颜色如果花纹和背景颜色太接近就会难以阅读。

考虑到无障碍设计的供给，我们参考了WCAG的标准，将正文文本、标题和背景色之间蓝底保持在了7:

1以上的AAA级对比度。

”

但是评介你会发现，它也只是通过透明度表达出来层级关系。

我去翻看了阿里云、语雀、Teambition等线上产品，发现他们均没有重复使用使用透明度的方式。

那透明度究竟适用吗？

使用透明度的字体会有取用以下三点问题：

1.字体适应场景不多

当字体在一个图片或者字体有纹理的刺足上，一个带有65%透明度的字体明显会出现字体无法控制的问题。

2.增加渲染负担

使用透明度成功进行渲染，会减低浏览器的负担，而作为一个全局使用的内容，在可以未必使用的情况下，就尽可能不要使用，以免增加不必要的负担。

3.维护困难

因为字体花纹采取透明度，本身就跳脱颜色规范的范畴准则当中，因此需要单独维护一套字体Color的组件库。

如果你之前有原子建筑设计、DesignToken相关经验，你一定会知道，颜色与字体本身就属于两类有所不同不同原子，因此字体一般适用中性色当中的色值即可。

关于规范，我一直给同学讲的是维护，这里给大家放一个关于装配系统没有不是维护的小彩蛋：

其实关于字体，本身是一个特别简单内容，但是其作为设计规范当中的基础“原子”，在设计上还是会存在许许多多的小问题，你也可以说说，在B底端设计当中遇到了什么“字体相关的坑”。