本地司机最新招聘(百度手机助手安装)

编辑导语：字体是B端设计的重要组成部分。字体设计需要考虑很多问题，比如字体布局，风格等等。在本文中，作者详细介绍了如何在B面设计中正确设计字体。来学习吧。
1.前言在B面设计中，字体往往是出现频率最高的“原子”。因为它有不同的渲染方式(设计软件渲染和浏览器渲染)而且网页设计中会有两种桌面操作系统(Windows和Mac OS)，所以B端设计中的字体往往存在很多“变数”。
查了很多设计师的稿件，会发现他们往往有很多页面问题：缺乏层次，页面灰暗。
1.缺乏层次感，缺乏视觉层次感，这往往是一个设计师的主观感受。
在课堂上，我已经和大家聊过：作为一个B端设计师，我们其实更像是一个版面设计师。因为交互区域从移动到桌面的增加，也会带来信息区域的划分和视觉动线的引导。
但是缺乏层次性，往往就像我们在寻找出口的时候，遇到了一个让人摸不着头脑的“logo引导系统”，它把所有的信息都用一个版面给你显示出来。所以设计本身其实是相通的。
2.灰页这个词其实来源于“美术专业”，通常用来评价一副缺少重色或者重色比例太低的美术作品。你也可以理解，重点往往不在书页里。所以页面灰化往往是因为字体缺乏厚重的色彩造成的。
二、字体家族字体家族，又称字体回退。它是浏览器中字体的一个常见CSS属性。
其目的是保证字体在不同平台和浏览器下具有良好的适应性和可读性。
现实情况是，作为B端产品的提供者，我们不知道真实用户的电脑里安装了哪些字体，但是我们对字体进行了回滚，以保证页面显示的最佳效果。
字体系列需要在项目开始时定义，因为字体是B端页面中最基本/最底层的原子。如果随意更改，全局设计方案都会受到影响，所以有风险。
1.FamilyMac OS的常用字体为英文：San Francisco，中文：方平SC。在Windows下，英文是Segoe UI，中文是微软雅黑。显然，这些字体不是一成不变的，你可以根据用户的实际情况进行调整：
2.如何确定字体回退？查看竞品的字族代码，通过研究竞品的退货机制，建立基本的产品退货方案。将方案交付前端调试，通过调试结果确定方案(设计软件与前端实现的渲染方式不同，建议通过真机判断)。
三。字号和行高字号和行高是一对绑定关系。
对于字体大小，浏览器总是有一个最小限制。为了保证用户阅读，最小字体大小为12px。
在实际项目中，我们会设置高度为：12px、14px、16px、18px等。而行高会是字体的1.5-1.6倍，所以我做了一个常用字体和行高的表格。
最后说一下行高在B端项目中的重要性。这是一个同学问的问题。你能想想它是蓝色还是黄色吗？
正确答案是黄色。因为行高的出现，代表了更为统一的字符高度，而在实际间距的度量中，行高必须算作字体内部的一个元素。
四。字重字体字重分别是超轻、轻、正常、普通、中等、粗、重。当然，它也有一个数字名称：100，200，300，400，500.
我们可以通过重复单词来改变页面级别。因为字体越粗越注意阅读，整个信息层次会有很大的变化。粗体字通常表示我们的标题，这意味着您的标题概括了下面的所有信息。所以好的词权管理可以帮助我们区分信息层次。
5.字体灰度字体灰度色阶会直接影响页面是否为灰色。我们先来看看灰页存在的问题。
虽然“灰化”是我们设计师的主观感受，但如果我们想探索其中的逻辑，我们可以通过WCAG规范找到更合适的答案。
这里平铺常见的中性色，根据HSB色值的明度可以得到一个折线图，因为最后三个色阶经常使用字体，颜色的色值往往更陡。
其实色阶相对更陡的逻辑都来自于中性色的使用场景。浅灰色部分以“背景区分、分割线、输入框笔画”为主，通过浅灰色实现页面布局的关系。
深灰色主要用于“文本、标题和文本排版”。它需要改变亮度来引导视觉关系，进而营造界面的整体层次感。
对于浅灰色和深灰色，业内经常有“字体灰色可以通过透明度来控制，比如用#000然后随意增减透明度”的说法。
当我深入研究这个问题的时候，发现在各大系统中似乎都有这样的说法。这真的对吗？
通过查看SAP、Lightning、Ant Design、Element、Clarity Design等的设计规范。通过对比发现这个说法主要来自国内的Clarity Design和Ant Design，不了解规格的可以参考B端Design North (youthce.com)。
Clarity Design确实有一段描述了字体透明度的问题：
“我们使用透明度来区分字体级别。当字体应用于浅色背景时，基于# 000；调整透明度；当应用于黑暗背景时，基于#FFF
细读就能明白，它的核心在于表达字体的层次关系，让人们快速理解层次的概念，而不是鼓动人们用透明来使用字体。
我们再来看看蚂蚁设计。如果只看图片，似乎表达的意思真的是通过透明来控制文字颜色和背景颜色的关系，但是看看旁边的描述性文字：
“如果文字颜色与背景颜色太接近，会很难阅读。考虑到无障碍设计的需要，我们参考了WCAG的标准，在文字、标题和背景色之间保持了7:1以上的AAA对比度。”
但如果你仔细阅读，你会发现它只是通过透明来表达等级关系。我去翻看了阿里云、知更鸟、Teambition等线上产品，发现都没有使用透明。
透明度是否适用？使用透明字体有三个问题：
1.字体不适应很多场景。当字体在图片或有纹理的背景图片上时，透明度为65%的字体显然会有字体不可控的问题。
2.增加渲染负担。透明渲染会增加浏览器的负担。作为全局使用的内容，在用不到的时候尽量不要用，以免增加不必要的负担。
3.很难维持。因为字体颜色是透明的，脱离了颜色规范的范畴。因此，有必要维护一个单独的字体颜色组件库。
如果你之前有过原子设计和设计Token的经验，就会知道颜色和字体本身属于两种不同类型的原子，所以字体颜色一般适合中性色。
关于规范，我一直在跟同学说维护。这里有一个关于设计系统缺乏维护的小彩蛋：
其实字体本身是一个很简单的内容，但是作为设计规范中的基本“原子”，在设计中还是会出现很多小问题。也可以说一下你在B端设计中遇到过哪些“字体相关的漏洞”。
作者：CE青年，2B业界2B设计师；微信官方账号：CeDesign
本文由@CE青年原创发布。每个人都是产品经理。未经许可，禁止复制。
题目来自Unsplash，基于CC0协议。