软件熟练度属于“器”的范畴，对主要靠作品集吃饭的设计师来说很难对外体现。但是我们不能说它不重要，软件的熟练度依然是设计是否能够产出的重要因素之一！！
今天结合我自己之前的经验，来谈谈AI中的一些相对比较冷门的小干货（很多是我最近才get到的- -），但愿这些快捷操作能帮助你进行产出～～
大纲：
AI中存在很多参数需要我们自己去调节。比如一个形状的宽高圆角，对形状进行变换的旋转、扭曲等参数等等。可能很多朋友跟我一样，要么一个个手动输入要么通过拖动滑块进行调节。
这么做造成的问题有两个，一个是交互的繁琐，一个是参数调节颗粒度过细，在进行往返调试时需要耗费大量的重复工作量。对于我们时间宝贵的设计师来说这种方法简直太弱了好嘛！！
不过这些完全可以通过一个方法来解决——快捷键调节即可！结合shift、cmd（即win系统的ctrl）以及上下方向键完完全全地提升效率。具体的方法如下：
比如对形状的变换，我们就可以使用上下方向键1px微调，结合shift以10px数调。键入位置通过tab切换。
再比如变换效果的参数，同样可以使用这种方法快速地调试，全程只需要快捷键操作即可。而且这种一边敲击键盘一边实时预览的赶脚也让人心情莫名得顺畅！
这种方法也可以迅速地让水平和垂直数值保持一致，比我以前的滑块拖动、数值输入的操作好太多了。
顺带一提，sketch参数数值调节也支持这种快捷操作哦。
我们在调节形状的圆角时，一般情况有两种方法，要么在菜单栏or变换工具中数值调整，要么直接在角落的圆角点上拖动。
但是对于平行四边形这种四个顶角度数不一样的形状，即使四个圆角大小是一致的，由于锐角和钝角的存在导致圆角看起来并不一样。
这时候，外观效果就派上用场了。
我们在效果-风格化中找到圆角选项，为平行四边形添加一个圆角外观效果。
风格中找到圆角选项就可以自己设置。这里给一个和刚刚一样的圆角10px。
最后（右图）得出的四个圆角看上去明显比之前的方案更加一致。
另外，这种外观的好处就是，后期随时可以在外观中编辑！
我们更多时候缩放是滚轮缩放，但是这样的缩放的颗粒度太大，尤其在小屏电脑上想要定在某个合适的窗口大小比较麻烦。
这时候我们可以利用快捷键Z激活缩放功能，然后通过左、右拖曳的手势进行快速而平滑的缩放操作。我们可以轻易定格在我们想要的窗口大小。一开始可能很多朋友和我一样习惯上下缩放，但是ai里的缩放并不是上下，而是左右。
一般我们画波浪线是通过扭曲与变换中的波纹效果来变换。
但是我们也可以使用钢笔来直接画。
向一个方向拖拽生成手柄（不知道有没有朋友和我一样用钢笔工具都有点一下去绘制形状的毛病），然后在合适的位置再拖拽一次即可绘制出波浪线。在对精准度要求不高的情况下完全可以采用这种办法，方便快速。
在以往，我在进行路径消除操作（比如绘制一些断线icon时），通过这样的步骤，添加锚点工具在路径上添加两个锚点，然后直接选择工具选中锚点间的路径删除。拜托，都2120年了，别用这么古老的方式了好嘛！！（好想乘时光机回去拯救年少迷茫的自己）
但其实压根不需要这么麻烦，一个工具就可以迅速解决，而且可以连续消除！
这个工具就是路径橡皮擦工具，说实话知道这个工具后我再也回不去了。
只需要激活它，你就可以在任意的路径中像使用橡皮擦那样，迅速地消除你想消除的地方。另外，我提前给这个工具设置了E这个快捷键，以便我能迅速调用它进行路径消除工作。
路径橡皮擦用在填充的色块中同样只能消除路径，但我们想要消除色块时，则可以用到另外一个工具——橡皮擦工具。
shift+E直接调用到它，按住shift即可直接在填充色块中进行切割。而且最后被切割出的图形都是互相独立的闭合形状。
当我们按住alt后，就可以随意地绘制出不同宽度的矩形进行切割，相比形状生成器或布尔运算更加方便点。
一点点平时积累的ai小干货，但愿能帮到你！！
文章来源：优设网 作者：转行人的设计笔记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
LOGO 是品牌设计当中最为重要的一环，LOGO 本身的设计不仅昭示了品牌的身份，甚至可以表现品牌的价值观和特点。你可能想开拓新的领域，或者重塑旧有的业务，又或者是基于 2020 或者2021 年的新趋势，将原本的 LOGO 升级，这些都是促使 LOGO 革新变化的契机。
和视觉设计不同，LOGO 的设计常规类型其实是相对固定的，通常不会有某种类型的 LOGO 占据主流，但是不同类型的 LOGO 呈现出不同的变化和趋势倾向，下面就是 LOGO 设计在 2021 年呈现出的 11 个趋势：
2021 年将会是 3D 在设计领域中彻底崛起的一年。而相应的，在 LOGO 设计领域，光影细节也成为了很多企业和品牌体现品牌价值和特质的一种设计策略。如果你正在寻找一种流行的风格，或者打算将已有的 LOGO 翻新升级，试试立体的 3D 设计，这可能是当下的一种设计风格。
这是最近2年又重新流行开来的一种设计风格，复杂的轮廓和阴影，笔触细节丰富，繁杂但是令人愉悦，手写和手绘都融入其中，从手写风格的文本到近乎手绘的图形图像，你能在这样的 LOGO 设计中感受到强烈的品质感，感知到精致的元素和独特的个性，整体其实是给人耳目一新的感觉。
文字 LOGO 一直是 LOGO 设计中的一个比较大的门类，只需要使用特别风格化的字体来呈现品牌的名称，就能够很大程度上传递品牌的主要信息和气质，它足够简明，不费吹灰之力就可以确保信息的传达，视觉的美观，气质独特，并且获得某种程度的认可。下面的 LOGO 都是2020年新设计的文字 LOGO 中，比较有特点和代表性的作品。
有很多品牌本身，和自然元素是有关联的。在今年这个大环境之下，大家对于自然的青睐是无与伦比的。这也是的很多和自然元素相关的品牌，会尽可能多地在设计的时候从自然汲取灵感，尽量创造富有识别度，有着平静协调气质，并且能够让人想到「自然」的设计，下面的案例就是典型：
黑白是永恒的经典。通常，黑白 LOGO 会更加考验设计师对于形体和构成的认知。优秀的黑白 LOGO 通常轮廓分明，优雅又颇具识别度。
有意思的地方在于，2021年的黑白 LOGO 并非和往常一样毫无新意，很多设计师会将 3D 效果、动画和黑白 LOGO 结合到一起来进行设计。
生动的色调，明亮的色彩，只有扎眼的设计才能够在第一时刻抓住用户的注意力。在 2021 年，反常规、大胆的用色会是 LOGO 设计当中相当合理且出彩的一种策略。用户会下意识地被品牌色吸引，这也能够让LOGO 和品牌最快发挥效用。
角色总是能够更容易引起共情，因为一个具体的角色总能够更加具象和立体地呈现特征、传达情感甚至在某些方面引起互动。
值得一提的是，在品牌设计方面，设计师将想象力和品牌特征加诸角色，也可以帮用户和观看者构建出想象空间。
使用角色或者吉祥物构建的 LOGO 可以更加轻松地应用到海报、标牌、广告、动画、社交媒体等地方。这类 LOGO 设计的重难点，是如何通过简单的角色传递出独特的气质和情绪。
在抖音风靡全世界之前，很少会有人在 LOGO 中玩故障效果。一方面是故障风并没有那么主流，虽然很赞很赛博朋克，另一方面是和故障风在气质上契合的品牌其实并没有那么多。
不过在这个注意力资源稀缺的时代，前有大厂带路，后有市场压力，很多品牌开始在条件允许的情况下，尽可能地采用更为大胆的故障效果，疯狂地、富有创造性地尝试这一效果。
总而言之，如果你正在寻找一些特殊的 LOGO 效果，来试试故障效果吧。
动效，或者我们称之为微动效，是在2020年之前就存在的东西，不过在 LOGO 设计领域的大范围流行，应该在 2021 年。在数字硬件性能过剩的今天，让 LOGO 动起来并不是什么大事，只要它能够吸引用户的注意力。
唯一的问题是在于，怎么动才会让它恰到好处？很简单，看看别人都是怎么做的：
和 3D 设计一样，渐变色也一直身处设计领域的话题中心。渐变本身会赋予 LOGO 以更强的体积感和立体感，让色彩更加有趣，即使 LOGO 不动的时候，依然具有足够的「动感」，这大概是渐变色最富有价值的地方。
值得注意的是，随着「拟物化」的「文艺复兴」，大幅度渐变色重新成为了设计师们的宠儿，虽然这是大趋势，但是在设计 LOGO 的时候，依然要注意坚守品牌色，同时控制好变化幅度，避免过犹不及的情况发生。
回归简约和基础可能也是 2021 年 LOGO 设计的一个重要的主题。很少有东西能像基础的几何图形那样具有启发性和趣味性。
将基础的几何图形进行重新的排列组合，可以创作出各式各样的图形，传达隐喻，还富有艺术性。在2021年，你可以尝试一下这种 LOGO 设计，它巧妙且有趣。这种设计还可以结合动画和色彩变换，创造出引人入胜的动画效果。
相比于其他的设计门类，LOGO 设计更加考验设计师的基本功和打磨的耐心，而与此同时还能拥抱变化的设计师，能够在接下来的 2021年，创作出更优秀的作品。
文章来源：优设 作者：Iveta Pavlova
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每年的双11在设计师们的眼里，都不仅仅是购物狂欢节还是一场视觉盛宴。这不，今年的双11重头戏来了。
天猫联合各品牌发布了超级符合“猫头海报”，一共55家下面让我们一次看个够。
1. 泡泡玛特，很有意思的创意
2. The North Face场景感十足
3. 好奇很温馨的设计
4. 外星人，一直都想买的电脑
5. VANS，我喜欢他家的黑格子鞋
6. Levi’s，我服了
7. 麦当劳，烟雾的创意很契合产品
8. 惠氏铂臻3，一团线织出来的创意
9. 拉面说，来碗面
10. 宜家家居，仔细看，是购物袋
11. 巴黎欧莱雅，万能的C4D
12. 朗仕，细节很多
13. 华为，冷暖对比很有冲击力
14. 乐高，积木的海洋
15. Marshall，燥起来
16. Jordan，乔丹
17. 肯德基，WOW好吃！
18. 林氏木业，俯视的构图角度，空间感很强
19. 元气森林，故事性很强
20. 强生，满是爱
21. fresh，高端的护肤品牌
22. 万代，为“酷”而生
23. 始祖鸟，化石来了
24. 三生花，旗袍肯定很漂亮
25. HOLLISTER，一起冲浪
26. 施华洛世奇，每个女孩都值得拥有
27. PINKO，乱的有创意
28. MINI，我有个进MINI车友群的梦
29. 孩之宝变形金刚，汽车人变形
30. Onisuka Tiger，日本的运动产品品牌
31. 优衣库，线下实体店的货架创意
32. 三顿半
33. OLAY
34. Dyson，很亲切的表达方式
35. 迪士尼商店，可爱、好玩
36. NIKE
37. 法国娇兰，看起来很贵气
38. 荣耀
39. LINE FRIENDS
40. M.A.C
41. 红星美凯龙，空间感很强
42. NET-A-PORTER，泡泡龙的感觉
43. 稀奇，太喜感了
44. 百威，哟哟切克闹
45. 芭比
46. 李子柒，依然还是熟悉的味道
47. 爱他美3，阳光帅气
48. 花西子，雕刻工艺品
49. 伊利谷粒多，太美了
50. Apple，表情包集合
51. 滴露，传统国风的感觉
52. Moleskine
53. 大疆，很喜欢无人机，有一起拼单的吗？
54. 绘儿乐，这个创意现实中我玩过
55. 乐事，好吃
每个品牌对于猫头的创意表达都不一样，很多都是生活中随处能见到的，但在设计师的眼中，就是创意灵感来源。
下面还有视频版，大家一起看看：
以下视频来源于
看完今年的猫头海报，让我更加期待接下来各品牌双11活动的玩法和创意。接下来让我拭目以待吧。
专注设计理论书籍，大多偏底层原理的知识，特意整理过往的笔记与设计心得分享一下。对设计的学习，要知其然，也要知其所以然。
以上都是近年来的几本阅读笔记和心得总结，一直在慢慢整理中。特意分享给各位作为参考交流，本文还有诸多不足，望各位批评指证。
此篇为构图与形状的第二节，开始深入原理的探讨，第三节是关于构图与形状与人类知觉关联的深层内容。
理论不同于软件和技法，短时间的学习就能看到进步，不能现学现卖。它是一种所谓的“种树”过程，靠的是日积月累，是一种学习、消化、迭代的过程，一种由量变到质变的过程。需要坚持不懈、持之以恒。
仅作免费交流与启发，请勿商用! 谢谢！
参考书籍：
《绘图构图学》常锐伦
《图像语言的私密》Molly.Bang
《摄影构图学》本.克莱门茨，大卫.罗森菲尔德
《图解艺术》郭书宣
《迷情黑白》Marcos Mateu-Mestre
《设计元素.造型与空间》丹尼斯.M.普哈拉
《艺术与视知觉》鲁道夫.阿恩海姆
文章来源：站酷网
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先看看我们的素材：
当拿到一张原始素材的时候！
怎么办？该怎么入手？怎么找方向？
来吧！
先来看看成稿：
最终设计成果还可以，那么是通过怎样的设计手法达到这样的效果呢？
下面我就来分享一下我的作图思路；
1.需求的梳理和信息收集：
理解核心需求，为设计方向做好前期准备
Slogan：传武（作品名） 副文案：幽府之力，逆转生死
我们漫画类的作品众多，内容风格繁杂，所以拿到需求之后,首先就是要对作品进行“调查”。通过对漫画作品的阅读，理解内容、故事、绘画风格来定性设计的方向。这样才能在设计过程中准确把握住作品调性，才能设计出最贴合作品风格内容的banner，才能把我们作品精髓的内容传递给用户。
比如上面这部作品，SLOGAN“传武”是我们要着重设计展示的。而副标题“幽府之力，逆转生死”也很重要，往往传达出了作品的卖点和调性。
再看看我们拿到的素材，一张单人的简单素材，看起来很单调，似乎没有可切入的地方。这个时候就体现出为什么要先对作品进行“调查”的重要性了！
2. 确定设计方向：
明确设计方向，精准展现作品调性
通过阅读，我们了解到这部作品是一部热血，古风，玄幻作品，还有大致的故事内容，再结合我们的副标题“幽府之力，逆转生死”。
脑子里就已经开始有画面了，“幽府”大概表达了一个场景，而“力量”和“逆转生死”又传达出了一种气势磅礴的场面。这就为我们设计的方向奠定了一个准确的方向。
首先就把我们的素材和文案拉进画框里，进行一个大致的排版找找感觉。第一个左右排版就太常规了，在场面和气势上有些弱。第二个添加了漫画框，想切入一些故事内容一起展示。但又有一些强调漫画框的存在了，磅礴的场景没有展示出来。但注意右边的部分，把主标题排在人物的两边似乎是一个不错的选择！我们就从这里入手。
重新尝试了一下，发现这样布局好像就是我们想要的感觉哈！那既然确定了框架，我们接下来就按照这个方向继续强化出“气势”“力量”的感觉。
我们以人物为中心，想象画面里有力量从人物背后向外“迸发”所以我们的字体可以设计得有一些趋势在里边，也是以一个圆弧为中心向外生长。以光从人物背面照射出来大逆光的视觉，营造一种“力量”迸发的感觉。
3. 颜色的选择：
跟随之前确定的设计方向，提炼选色搭配。
我的方法一般是先从素材本身出发，根据想要达成的视觉风格来延伸出想要的配色。这样得到的颜色更整体，人物素材能更好的融入背景氛围中，也方便后期调整。观察的素材，发现他的颜色都比较灰，缺乏对比，就会显得很“平”，难以营造出我们想要的感觉。所以从人物素材本身的颜色出发，提取同类色和提高饱和度。结合考虑到有利于运营推广的视觉需要“吸睛”。得出了后面一组对比更强烈的颜色。
4. 有主次地进行深入刻画：
画面中最主要的肯定是我们的SLOGAN和人物角色，是我们要重点刻画的对象。剩下的副标题、背景氛围次之。不仅是要在排版上做区分，在视觉感受上也要做出差异化。这样才能有远近虚实的感觉，增加空间感。
我们希望画面具有一定的质感，增加其冲击力。所以我们在刻画背景的时候可以选择一些漫画里比较好的场景，或扉页背景素材来做底图。再叠加上一些纹理材质，再一层一层地来给背景打光，用“叠加”“柔光”“滤色”等图层属性来慢慢提高亮度,最终达到我们想要的效果。
小技巧1：相同光源的照射，传达到不同的物体上时，它的视觉表现时不同的。并不是光源时什么颜色，照射的地方就会是什么颜色。
我们来对比一下两种颜色的实际效果，可以说是很直观了！
小技巧2：为了使素材更完美地融入到背景中，我们可以后期人为地给素材增加一圈高光/轮廓光。这样使画面更融洽的同时，也能让我们的人物变得立体起来！。
再来对比下没加轮廓光的感觉：
真的是少了些味道和细节哈哈，其实在很多时候我们都可以对我们的素材进行二次加工让其提升一定的品质，配合画面以达到更好的视觉效果。
5. SLOGAN的设计：
主文案在我们草图的基础上，结合整体画面的趋势进行细化。（增加毛笔笔触，和优化笔画）。
这里主要分了三层进行处理颜色层(文字层)：主要给一个基础颜色；
材质层：因为这两个字的占比比较大，所以可以增加一些纹理细节让画面更丰富耐看；
厚度层：让后面的光源，在我们的字上形成一圈高光，可以突出我们的文字。
增加一些光晕效果，再放上做好的SLOGAN看看效果，好像还不错。
有些同学可能会疑惑这里为什么字体要做一个厚度层，我们也上一下对比图先看下效果：
可以看少了一些些质感和重量，在轻量的风格里ok，但是在我们当前的画面里就差了些感觉，所以才做了厚度层来强调光线照射过来的视觉增强画面冲击力。
之后主要是做一些符合我们画面氛围的漂浮元素，丰富画面。有一定手绘功底的话就再好不过了！
完成，到这一步差不多达成了我们想要实现的效果，“气势”和“力量”的感觉在这么“朴实无华”的素材身上也基本表现到位了。还是比较满意的，差不多可以提审交稿了！
最后在观察观察整体的画面，审视一遍,查缺补漏。
发现我们的画面好像有些燥啊，红色和黄色饱和略微有些高。整体的感觉也不够清晰。最后再做一个调整吧。
降低一些红色和黄色饱和度，在暗部加一些紫色(主文案暗的部分和画面四周的暗部)。增加冷暖对比就好多了。
小技巧3：盖印整个图层——在滤镜里面找到其他——高反差保留，数值根据画面来调。
然后就得到这么一个图层
是不是很神奇？别慌，把这个图层的属性改成线性光看看,画面清晰了很多，也变得更有质感了！
最后看下过程演变图：
总结
1）梳理需求内容：通过阅读漫画作品，深入了解内容并收集整理信息；
2）提炼关键字延展：尝试多种可行方案，最终确定设计方向；
3）slogan的设计：一定要符合画面和作品调性，达到与画面相映成辉的效果；
4）细节把控：完成之后再回过头来审视整体画面，查漏补缺力求做到最好！
文章来源：UI中国 作者：腾讯动漫TCD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文字是界面中最核心的元素，是产品传达给用户的主要内容，它的承载体即是字体。
前半部分从字体的最基本属性（字族、字号、字重、大小写等）说起，熟悉字体的那些特征，了解字体在界面中的作用，以及iOS与Android系统字体的使用规范。
字体是界面设计的基石
字体是排版中最重要的元素，对用户的阅读体验有着至关重要的作用。一般来说，设计师需要了解的字体通常有中文字体和西文字体两种。西文字体由来已久，从最早的罗马字体到现在苹果手机中的SF-UI字体，经历了许多设计上的变革。而中文字体的发展并没有西文字体那么顺利，数量上也远远落后于其他字体。但中国设计正在崛起，我们也看到越来越多的设计团队和设计师加入字体设计的队伍，数量上正在呈指数级别增加。
设计是一门非常严谨的学科，里面蕴含了很多道理，就连最基础的字体选择和排版，都经过了将近千年的发展和演变，有非常多的专业知识。像平面设计一样，在UI设计中字体的使用也有相应的规范，设计师应懂得这些基础知识，才能将字体为自己所用。
本篇就从我们常用的设计软件（sketch、Figma、P hotoshop）字符面板开始，来聊聊有关字体与排版应用方面的知识。
Font 中文翻译为「字型」，是指字的粗细、宽度和样式，是一套具有同样风格和尺寸的字形。例如「Regular_16pt_SF-UI」。
Typeface 中文翻译为「字体」，是指一整套的字形，一个或多个字型的多尺寸的集合，例如「SF-UI」里有不同粗细（Regular、Blod、Light）和不同宽度（12pt、14pt、20pt）。
Glyph 中文翻译为「字形」，是指单个字的形体或是字体的骨骼。 同一字可以有不同的字形，而不影响其表达的意思，例如汉字中的「令」字，第三笔可以是一点或一撇， 最末两笔可以作「ㄗ」或「マ」。
Font和Typeface常常被混淆使用，其实可以这样理解，前者指一种设计，后者指具体的产品。
1. 族类 GenericFamily
族类就是不同字体类型，例如阿里巴巴普惠体、方正新书宋、站酷酷黑体等。
而这些众多字体又可分为「衬线体」和「无衬线体」。
衬线体
宋体就是衬线体，特点就是笔画开始和末端的地方都有额外的装饰，且笔画的粗细有所不同。在传统的正文印刷中，普遍认为衬线字体能带来更加的可读性。常见的衬线体有宋体、Times New Roman、Georgia等。
衬线体一般在APP中比较少见，文字阅读类偏爱这种衬线体，例如「单读」，大标题用的是「華康標宋體」、正文内容用的是「苹方-纤细」而英文用的是「XCross Traditional Bold」
黑体
黑体是无衬线字体，特点是笔画没有额外的装饰，且笔画的粗细差不多。相比严肃的衬线体，简单干净的无衬线体给人一种休闲轻松的感觉。因此大多数App都是使用黑体作为默认字体。如冬青黑体、思源黑体、Myriad等。
2. 字族 FontFamily
一个族类包含不同的字体，然而一个字体又可能有好几种字族。如果电脑安装了Helvetica，在Sketch字体选择器中会发现超过40多个前缀是Helvetica的字族。这是为了协助人们在不同的使用场景下表达合适的意思。
知识点：
基本字族包括细体、标准、粗体、斜体，值得注意的是，斜体字常用在引用文本上，代表「本段文字引用的是另一个著作」的含义。
例如：「若我们能以满怀新鲜的眼神去观照日常，「设计」的意义定会超越技术的层面，为我们的生活观和人生观注入力量。」（引自原研哉的《设计中的设计》）
3. X-height（X字高）
在西文字体中，x高度是指字母的基本高度，就是基线和主线之间的距离。它指一个字体中小写字母的x高度，在现代字体设计领域，x高度代表了一个字体的设计因素，因此在一些场合字母x本身并不完全等于x字高。
除了字母a、c、e、m、n、o等高度一样，还有一些小写字母的字高都比x字高要大，并分为两类：一是含有升部的字母，字母笔画含有向上部分，如字母b、d、h；另一类是含有降部的字母，字母的笔画向下超过了基线，如字母g、p、q。
4. 字号 Font-size
字号就是字体大小，通常在网页端使用px作为字号的单位。移动端兴起后，iOS字体单位是pt，Android是sp。
以iOS为例，正文字号不应小于11pt，这样才能被正常阅读，建议在14-18pt之间。在使用较大的字体来获得更好的易读性的同时，我们也应相应地减小字体的字重，考虑Light、Thin，因为过重的字体会太过醒目，影响其他内容的显示效果。
当字体大小为12-18pt时，建议使用Regular，18-24pt时，使用Light，24-32pt,使用Thin，当字体大小超过32pt时，建议使用Ultralight。
字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。
设计中的最小字号
我们都知道在界面设计中最小字号不能低于20px，那是因为，正常情况下，在手机距离眼睛30cm左右，使用视角计算公式，我们能识别到的的文字大小为h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我们经常使用iPhone7的尺寸1334×750为例。iPhone7的dpi为324，也就是一英寸上显示324个像素，1英寸为2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。
字号的基数关系
我们在做设计时，字号的单位最好使用一个基数作为倍增，如2、4、6、8、10 或者3、6、9、12。但其实我们在做移动端设计时，单位需要遵循偶数原则，因为开发中的单位是以一倍图的基数来进行计算。那么其实在制定字体规范中，使用2为单位会导致字号过多，且2号字体的差异化不大。所以在字号方面我们使用4作为单位是比较合适的：一是适配后在@2x跟@3x不会出现半像素，二是使用4为单位，能满足字体大小的均衡。
5. 字重 FontWeight
Weight，中文翻译为「字重」，是指字体笔画的粗细，字体中很重要一个概念，不同字重传递出来视觉感受完全不一样。一般在字体家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不同的字体厂商划分字重各有不同，例如「苹方」字体就有6种不同的字重。
一般都有细体、正常、粗体三种基本字族。在应用场景上，通常「细体」多用于超大号字体；「正常」用于正文内容；「粗体」表示强调，多用于标题；
两种字重属性
轻字重：传递出轻盈放松的视觉感受，常配合粗的字重使用，在一些辅助信息，说明文案时候使用；
重字重：视觉感受庄重，很重要，常用在重点强调的文字，页面大标题，数字，引导行动操作点上等；
例如百度网盘「发现」页就用了Regular、Medium、Semibold三种字重以拉开信息层次对比；
知识点：
需要注意的是：在进行界面设计时，不要用软件自带的文本加粗，它不仅破坏了字体本身的美感，还改变了文字原本的字宽，小字体下会模糊不清，合理的方式是使用字体本身的字重来控制粗细。
注意超细体的字体
字重超细的字体要谨慎使用。如果你设计的文本是装饰性倒还好，如果是需要用户能清晰阅读的，就要特别慎重，能不用就不用，否则在部分低分辨率的手机屏幕上看起来会非常糟糕。
6. 字色 FontColor
字色即文字对应的颜色，不做过多解释。需要大家注意的是 远离纯黑色和纯灰色！
纯黑色就像没有生命力的深渊，能吞噬所有细节，使用户陷入冷冰冰的极端情绪中。纯黑色还会与白色产生强烈的对比度，看久了就会感觉疲劳，让用户产生焦虑情绪。
还有就是真实世界中是不存在纯黑色的。尝试在色彩中加入一些色相，这样就不会让页面看上去死气沉沉的。例如iOS系统「设置」页面背景色就是加入了白色的低饱和度蓝色，看上去柔和自然。
7. 字符样式 FontStyle
除了以上几个最常用的文字属性外，还有几个使用频率比较低的字体设置。例如带下划线的、删除线的文本。「下划线文本」一般出现在「文字按钮」或带链接的网址，而「删除线文本」一般会出现在商品橱窗的现价、原价
例如「CCtalk」的课程现价和原价的区分，原价用删除文本，「微信读书」文章底部「加入书架 随时阅读」就是带链接的下划线文本。
8. 字符选项 Text options
Ps和Sketch都有文字（字符）选项一栏，主要针对西文字母大小写格式变换的设置。最常见有默认大小写、全部大写、全部小写和小型大写字母，Ps里面还有「上标」和「下标」。
默认大小写：即正常大小写格式，软件不做干预；
全部大写：如果输入的是小写字母，选择这个选项，软件会强制把小写改为大写；
全部小写：如果输入的是大写字母，或者只是首字母大写，选择这个选项，软件会强制把所大写改为小写；
小型大写字母：这个选项比较特殊，所谓「小型大写」就是，在字号一样的情况下，与小写字母一样高，外形与大写字母保持一致。
注意英文大写
纯大写的字母文本本身不太适合大篇幅阅读，会加大阅读障碍，用的时候注意要额外拉开字母之间的字间距，提升可读性。
9. 全角与半角 Full-width and half-width
全角是指一个字符占用两个标准字符的位置。中文字符、全角的英文字符、国标GB2312-1980中的图形符号、特殊符号都是全角字符。半角是指一个字符占用一个标准字符的位置。
通常情况下，英文字母、数字、符号等都是半角字符。半角和全角主要是针对标点符号来说的，因为正常情况下没有打全角英文的需求。
知识点：
在设计作品时也一定要记得中文搭配全角符号，英文使用半角符号。否则会出现诸如「你好.」或者「t h a n k s。」这样的错误。可按键盘「capslock」键切换全角和半角。这个小知识点虽然非常基础，却也是设计中经常出错的地方。
众所周知，iOS和Android两大阵营都有各自的设计系统，要作出符合平台规范的设计，设计师应熟读各平台的设计规则。因为本篇以讲字体为主，我们就来看看iOS和Android各自字体的规范是什么样的。
1. iOS字体规范
可用字体
在iOS系统规范中，中文字体是「苹方」字体。英文字体是「San Francisco」也简称「SF-UI」，英文还有另外一个衬线体「NewYork」。除了在iOS和Mac OS上，还单独为Watch OS单独对字体进行了调整，命名为 San Francisco Compact。
字体设置
因为在英文字体下，字体环境比较复杂，为了让字体在任何地方看起来都最佳，苹果官方针对不同字号开发了两套「SF-UI Text」和「SF-UI Pro」字体，而每套字体下面又分为Text（文本模式）与Display（展示模式）两种属性，Text只有6个字重，而Display则有9个字重。
这么多类型的字体我们该怎么用呢？iOS的建议是，在字号小于20pt时，使用SF-UI Text，大于或等于20pt时，则使用SF-UI Display。这需要我们在界面设计时手动切换。
对于「NewYork」，小于20点的文本使用小号，20到35点之间的文本使用中号，36到53点之间的文本使用大号，54点或更大的文本使用特大号。
苹方字体提供了6个字重供设计开发者使用。所以从iOS11开始，iOS使用Semibold中粗体、大字号作为界面的标题变的更为流行起来，较为明显的有 iOS 中的一些原生APP，比如App Store、Apple Music…
知识点：
在iOS中，默认字体单位是「pt」，正文字号不应小于11pt，建议在15-18pt之间。在使用较大的字体来获得更好的易读性同时，也应该相应地减小字体的字重，因为过重的字体会太过醒目厚重，影响其他内容的显示效果。
iOS更全面的文字设置
动态类型可以通过让读者选择他们喜欢的文本大小来提供额外的灵活性，除了标准的动态类型大小之外，iOS系统还为有阅读大字体的需求的用户提供了许多字号上的调整（可在系统字体显示大小设置）
iOS「显示与亮度」下设置「文字大小」模式
「苹方」和「SF-UI」字体可在iOS规范网站免费下载
网址：https://developer.apple.com/fonts/
2. Android字体规范
可用字体
在Android设备中，Android始祖Google为了更好的追求视觉效果，联合了Adobe设计发布了「思源黑体」(Noto)来作为中文默认字体，「Roboto」为英文字体。
字体类型
思源黑体，英文名为「NotoSans CJK」。该字体不仅仅在字形上更易于在屏幕阅读，并且拥有7种字重，充分满足了设计的要求。
英文「Roboto」字体，只有6个字重，视觉语言与思源黑体Noto保持一致。该字体具有「现代的」和「平易近人」的气质，是「Material Design」设计风格下的推荐字体。
字体设置
Material Design字体规范，字体类型比例支持的十三种样式的组合。它包含可重用的文本类别，每种类别都有预期的应用程序和含义。
注：Web浏览器根据根元素大小计算REM（根em大小）。 现代网络浏览器的默认值为16px，因此转换为SP_SIZE / 16 = rem。
△Material Design设计类型比例。（字母间距值与Sketch兼容。）
知识点：
值得注意的是，在安卓的字体单位中，不再以px，pt作为单位而是统一的使用了sp，换算方式是：
px = sp*ppi/160 ，sp = px / (ppi / 160)
以iPhone7为例，尺寸是750×1334，密度326ppi 来换算，那么Android的1dp = 1 * 326/160 ≈ 2px
「思源黑体」和「Roboto」字体可在GoogleFonts免费下载，并且可以商用。
3. 话题扩展
值得一提的是，越来越多的手机厂商，为了能够强化自身的品牌形象，推出了定制款的字体。
比如小米的「小米兰亭」：
OPPO的「OPPO Sans」：
三星的「SamsungOne」：
字体基础知识小结
正如开头所说，文字是界面中最核心的元素，字体作为基本语言，是设计中体现品牌很重要一点，字体选择非常重要，字体也是设计中占比（约 80%）最大的内容，所以我们一定要熟练掌握，接下来将从文字行高、字间距、行间距等说起，围绕字体排版继续聊。
设计中，好的排版能让用户愉快地阅读，而不好的排版则会给用户带来糟糕的阅读体验。因此排版的潜在重要性不容忽视。
无论是在西方国家还是亚洲国家，大部分人们的阅读习惯都是从左到右。这种阅读模式已经延续了几百年，因此如无特殊需求，你应该使你的文本左对齐，这样符合人们一贯的阅读习惯（阿拉伯地区除外）。人缺乏耐性，在阅读过程中更似是一种远近不定的跳跃「扫视」。枯燥的文字如果没有经过任何排版处理，会让读者瞬间失去阅读的兴趣，除非非读不可。所以通过改进文字内容的结构和排版来提高阅读性乃至「诱读性」，是一件十分必要的事情。
1. 字间距与字偶间距
字间距，英文名为「spacing」，即字符间的距离，事实上他是字符图形外边界框的尺寸和字符在方框中的位置的距离。
字偶间距，英文名为「Kerning」，也叫做「字距调整」，是在字间距的基础上，为实现不同字偶（一对字符）可以有不同字间距的调整值。我们都知道，不同的字母外形不同，所以只有同样的字间距是不协调的。例如，「NA」间是标准的字间距，而「WA」由于W和A的形状可以重叠，所以需要负字偶间距才能达到协调一致的外观。
在大段落文字排版时，我们一般不需要更改字间距和字偶间距，因为字体设计师已经对他们做过了最优处理。在对一组字符单独设计时，就需要考虑字偶间距，以达到更协调的视觉效果。总的来说，字号越小，字距应当相对越大，行高也应该相对越大。反之亦然。
西文字间距还分为：比例字体和等宽字体
比例字体：根据字符外形特点设置不同字宽的字体，使得字体外形协调，可读性更好；
等宽字体：每个字符设置相同字宽的字体，字符间距较大，它们经常被用于显示计算机代码示例；
2. 字间距的三种形式
标准间距：即默认的字间距，字与字之间的距离不大也不小，在设计中要根据不同的字号设置不同的字间距来排版，往往需要我们根据字号、字重的不同动态调节间距参数，避免千篇一律使用软件默认间距。
紧凑间距：字与字之间的距离向里缩进，在字符工具里的「字间距」数值为负数，一般在-5%~-30%不等，通常用在标题中。
宽松间距：与紧凑型间距相反，字与字之间间距向外扩大，在字符工具里的「字间距」数值为正数，一般在5%~30%不等，通常用在正文中。
知识点：
提示：字间距虽然有以上三种形式，但是在实际工作中也要具体问题具体分析，例如有些中文字体本身「外边框」的距离就比较大，如果再加大字间距，就会显得过于分散。
3. 西文词距
在西文阅读时，视觉上的自然界限是「词距」而不是「字距」。如果排版时需要进行例如「两端对齐」的行内间距调整，中文直接可以动「字距」，把调整量均匀地放到每个字间里；而西文却是动「词距」，只能把调整量加到词距里，而单词内部的字距依然是保持字体设计师预设的原始字距，这是保证西文易读性的关键所在。
4. 标点避头尾
在古代，书籍排版可以做到字间距恒定，原因是古代不存在「标点」，也就没有「标点避头尾」导致的种种问题。而现代汉语存在标点符号，有的标点不能放在行首(如逗号、顿号、句号等)，有的不能放在行尾(引号、前括号等)。处理方式叫做「优先推出式」标点避头尾，通过将本行内的标点宽度进行挤压后，腾出了空间给本来排不到的逗号，确保了字间距的恒定（篇幅限制，本文暂不谈文字编排具体调整方法）。更详细的介绍可移步字体设计与排印网站 Type is Beautiful 了解。
5. 文本框
在设计软件中，我们在添加文本时，就会创建一个文本区域，例如Sketch中文本区域有三种类型，自动宽度、自动高度、固定尺寸，而「固定尺寸」可配合「设置文字层垂直对齐方式」使用。
6. 对齐方式
文本的对齐方向有左、中、右三种对齐方式。文本对齐的标准是基于文本区域的边界决定的，只有设置固定的文本区域对齐才有意义。
7. 行高
行高或行距是文字排版的基础参数，也是排版品质的先决要素之一。行高是一行文本垂直方向的高度，这个高度和字高无关，文字内容水平居中，如下图所示：
8. 英文行高
英文的行高指的是一行英文的基线与下一行英文的基线之间的距离，基线（baseline）是英文字体结构中的概念，在css里文字的元素都是按基线来对齐的。西文基本行高是字号的1.2倍左右，字体有上伸部（ascender）和下延部（descender）可来创造行间空隙。
9. 中文行高
中文的结构属于方块字没有基线，所以中文的行高指的是一行中文的最底部与下一行中文最底部之间的距离。中文因为字符密实且高度一致，所以一般行高需要更大，根据不同用户人群（儿童、年轻人、老年人）以及使用环境，可达到1.5~2倍甚至更大。
知识点：
提示：不管是标题、正文还是注释文字，行高都不易过大或过小，会导致阅读困难。总的来说，字号越大行高应该越小，字号越小行高应该越大。
10. 行长
在《中文排版需求》里，明确写明了这项基本要求：
2.3.5 版心设计的注意事项：「一行的行长应为文字尺寸的整数倍，各行的位置尽可能头尾对齐。」
「一行的行长应为文字尺寸的整数倍」，这一基本的、理所应当的需求看似简单，但是在实际操作中，却往往由于单位换算等各个原因没有得到实现。对于后半句提到的「头尾对齐」，将另文讨论，但显然也和本文相关。正因为设计师想实现「头尾对齐」才会盲目地用软件的「两端对齐」功能，大家可以看看身边的印刷品，注意看一下每段的最后一行间距是不是统一，就可以知道设计师有没有按照这个原则排版。
中文的一个字占两个字符，英文一个字占一个字符。正文的行长通常在40到60个字符之间。在行长较宽的区域（例如桌面）中，包含最多120个字符的较长行将需要将行高增大。行长过长易读性就会变差，读者阅读时容易串行，造成阅读困难。合理的行长使用户在行间跳转时感到轻快和愉悦，反之则会使阅读成为一种负担。
11. 行间距
行距是指临近两行之间的距离。合适的行距让用户阅读舒服，阅读效率也高，行距太紧凑会让内容挤成一团，实现无法正常阅读；行距太宽松会让内容松散，产生了我们通常意义上的「河流」，阻断了行的视线，Photoshop中默认行距是1.2倍的字号，例如字号是30px，那么将行距设为36px和默认「自动」的效果一致。1.2倍的行距对中文排版来说通常过小，合适的行间距通常为1.5～2倍之间。文本字体越小，两行之间的行间距应该越大，确保字与行呼吸的空间。
12. 英文行间距
英文的行间距指的是一行英文的底部线与下一行英文的顶部线之间的距离。可以简单的理解为「行与行之间的距离」。另外英文文字底部和顶部都有对应的专有名词，英文顶部的那条叫「升部线」，底部那条叫「降部线」。
13. 中文行间距
中文的行间距就比较好理解了，是指一行文字的最底部与下一行文字的最顶部之间的距离。即行与行之间的距离。
14. 段间距
段间距：段落与段落之间的距离，可保持页面节奏，与字体、行高相互关联。
为保证文章易读性，正文段间距，可以简单地取一个空行（也就是一个行高），这是比较常规也比较合适的做法。举个例子：字号12，行高设定20，段间距 = 行高 + 行间距。行间距越大，段间距就越大；行间距越小，段间距就越小，行距与段间距成正比。段落之间首尾的行之间间距应该大于段内的间距，这时候就应该增加段间距，使得文本的阅读体验得到进一步的提升。
在任何一个设计中都需要把各个元素进行分级，分清主次，这样才能更好地抓住重点。为了能分清各元素的主次，就需要用到CRAP原则。这四个原则分别是对比、重复、对齐、亲密性。
1. 对比 Contrast （增强效果、组织信息）
对比的基本作用是突出重点，增加可读性。附加作用是有效增强视觉效果，打破平淡，吸引读者注意。
一些界面排版混乱，可读性非常差，用户的视线不知道集中在哪，导致这种情况的发生都是因为界面内容对比不明显造成。在同一个视觉区域内的逻辑不同的元素应该有所区别，以避免视觉上的相似，这样就可以有效的分清主次，为了使主要元素更突出，次要元素更弱化，可以尽量使它们的颜色，字体、大小，留白不同。如果两个元素不尽相同，那就让他们截然不同。比如，使用「14 号字」和「15 号字」进行对比，差异就很不明显，而使用「14号字」和「24 号字」，差异就明显得多，一眼就能看到大号的字体。
在这点上，「微信读书」的列表页就做得非常好，它通过标题与描述的字体粗细、大小、颜色进行对比，把最有用的信息直观地呈现在用户面前标题是吸引用户关注的关键，作者和评分只是给用户一种参考，不起决定性作用。因此，如果没有对比原则，标题和描述的字体同样粗细、大小，你就会发现视线总是会情不自禁的被评分所干扰。
大小对比
为了区分文字、图片、图标等元素的重要性，通常采用尺寸的大小来做对比。例如文章的正副标题，副标题一般用来解释主标题的内容，因此副标题的文字应该通过大小和颜色调整变成次级，让用户阅读时分清主次。
颜色对比
在排版中，首先要产生对比效果的就是背景和文字。文字与背景如果在颜色上很接近，那么就不容易区分开来吸引用户注意力，一般来说，人们习惯白纸黑字（也是因为人类有书写需求以来形成的），即白色背景和黑色文字。也有黑纸白字，例如现在APP都在做的DarkMode暗色模式，但其实暗色背景搭配浅色文字并不适合大量阅读。当然这也是为了配合用户使用场景，在夜晚光线较暗的环境下，深色模式或许更利于阅读。「冷知识：暗色模式其实就是厂商为了解决电池耗电量而出的计策，只是换了个噱头而已」总之，不管设计中使用黑白、红绿、蓝黄哪一种配色，一定要注意文字和背景的对比是否清晰便于阅读。
2. 重复 Repeated （统一有秩序）
重复是保持整齐的重要准则。既包括字体、字号的重复，也包括颜色、风格的重复。对于新人来说，要时刻牢记，尽量统一字体、字号、颜色等一系列元素，在统一的基础上，找出需要强调的部分，进行更改，通过对比原则进行强化。
如果相同内容（如标题）属于同一种逻辑关系，则应该使他们的字体、颜色、留白尽量保持一致。这样可以增加内容的条理性，并加强设计的统一性。在重复原则下，用户会因为视觉惯性继续选招设计线索，根据重复性设计线索顺场地浏览下去。
知识点：
重复不是单一的机械式的元素重复，我们可以理解为用统一的重复元素塑造一个新的元素。当然这是在保留基本的元素时所塑造出来的高度统一性的画面，从而增强我们所想要的设计效果。
3. 对齐 Alignment （统一而有条理）
在页面设计上每一元素都应该与页面上的另一个元素存在某种视觉联系，这样才能建立清晰的结构。任何元素内容在在版面上都应该尽量上下左右对齐，对于设计新人来说，最好严格遵循一种对齐方式，不然就会导致混乱，实在不行，至少保证在同一内容版块中遵循一种对齐方式。方法也很简单，就是找到一条明确的对齐线，并用它来对齐。
对齐包括左对齐、居中对齐、右对齐 3 种方式。
左对齐：页面中的元素以左基线对齐。左对齐是最常见的对齐方式，简洁大方，利于阅读；
居中对齐：页面中的元素以中基线对齐。居中对齐给人一种严肃与正式感，不过也会有呆板的感觉；
右对齐：页面中的元素以右基线对齐。相对少见的对齐方式，给人一种人为干预的感觉，加强了形式感，降低了阅读效率；
4. 亲密性 Proximity （实现组织性）
亲密性是实现视觉逻辑化的第一步，它是指关系越近的内容，在视觉上应该靠得越近，反之，关系越疏远的内容，在视觉上应该越远。简单的来讲就是要把画面中的元素分类，把每一个分类做成一个视觉单位，而不是众多的孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。
那做好亲密性有哪些方法呢，私以为有以下几点：
留白：留白是设计中通用的万金油原则，通过留白建立距离关系进行内容区分；
左图歌曲封面和歌曲名信息间隔比每首歌曲上下间距还大，导致用户的视线流呈垂直方向。
分割：简单来说就是分组，建立组合关系。常见的形式有线条分割，卡片分割等；
色相：通过颜色的对比，不同颜色的信息会暗示这是同一类。常见的日历行程就是通过不同颜色来区分时间和具体事项。
方向：不同的排版方式也可以很好的区分信息；
「信噪比」（Signal-to-Noise Ratio）原本是用在声音和图像领域的概念。在互联网产品中把 「信噪比」概念借用到了用户体验。合理的信噪比可改善与用户的交流。加大信号可以将有用的信息快速准确的传达给用户，减少噪音并使信号脱颖而出。
从人机交互角度，我们应该删除与任务不相关的内容或设计元素。你甚至可以将高信噪比的目标与极简主义联系起来。但是「信号」和「噪音」的确切含义会有所不同，一个人的信号可能是对另一个人的干扰，因此，用户界面的信噪比有低有高，取决于具体的用户和具体的任务。在用户界面中，信噪比所涉及的「信息」可以是任何内容，包括文本内容，视觉元素或动画等。为了提高设计传达信息的效率并帮助用户完成任务，需要提高信噪比。
知识点：
用户始终喜欢清晰、简单、自然、好用的设计和产品。但需要注意的是，除了交流必要信息之外，我们还希望界面在视觉上具备吸引力，以唤起用户的某些情感。有了额外的目标（比如品牌宣传、业务目标等），应该以合理的信噪比为目标，而不是以绝对的方式排除所有「无关」的信息。
例如iOS6到iOS7图标拟物到扁平到改变，让用户可以更快速准确的获取到有效信息。而这一过程，就是典型的放大「信号」。
还有虾米音乐的驾驶模式
我们都知道，在开车的时候操作手机是非常危险的。在40km/h的速度下，看手机3秒，相当于盲驶了35米。但有些情况下又不得不操作手机，比如紧急来电或者导航出错……这时，驾驶模式的界面就显得尤为重要了，让用户能够快速准确的识别信息并进行操作，可以大大提高行车的安全性。
在界面中无论是何种分割方式(分割线、卡片阴影、分割色块)，过于浓重的表现都会影响有效信息的获取，成为界面中的「噪音」，因此我们应该让它们细一点、淡一点来降低表现，或者干脆不要(留白分割)。
图版率就是页面中图片面积的所占比。在页面设计中，除了文字之外，通常都会加入图片或是插图等视觉直观性的内容。这种文字和图片所占的比率，对于页面的整体效果和其内容的易读性会产生巨大的影响。当然，除图片本身外，我们也可以通过填充底色，图形叠底等方式来提高界面中的图版率。
图版率高低的区别：同样的设计风格下，图版率高的页面会给人以热闹而活跃的感觉，反之图版率低的页面则会传达出沉稳、安静的效果。提高图版率可以活跃版面，优化版面的视觉度。但完全没有文字的版面也会显得空洞，反而会削弱版面的视觉度。
在没有图像素材的情况下想要呈现出高图版率，可以通过以下几种方式来实现：
通过填充页面底色，取得与提高图版率相似的效果，从而改变页面所呈现出来的视觉效果；
如果素材图像尺寸小，可以通过色块的延伸或是图像的重复来组织页面结构，同样可以提高图版率；
利用排版的节奏感以及跳跃率（文字和图片的跳跃率，是指版面中最大标题和最大的图与最小正文字体和图片大小之间的比率）让无趣的版面充满活力，富有节奏的设计也能间接优化页面的图版率；
增加页面中的图形也可以改善图版率低的问题。无论是数字、序号、图标，甚至是视觉处理后的标题文字，都能提高页面的视觉度，并给用户留下活跃生动的印象；
如果页面中没有图片和插图，那么通过对文字及其颜色的处理，也可以起到提高图版率的作用；
上面的例子中，对于标题文字都进行了视觉加工，起到了整体页面的装饰效果。借助对这种文字大小、颜色、形状的灵活运用，来突出页面的重点，避免视觉上的单调感。
1. 文字在代码中的实现
在开发落地的过程中，文字排版的开发实现是很重要的一个环节，也是经常让设计师和开发小哥哥头疼不已的地方。字体和排版在实现上经常会出现偏差，主要原因在于开发的标注方式和设计软件不一致。因此理解文字开发的实现方式，细节问题的解决方法至关重要。在Android中，文字开发工作是通过一个叫TextView控件来实现的，主要承担文本显示的任务，任何APP都不可避免的会用到它。TextView常用属性如下图：
2. 字体字重对应的font-weight值
在前文聊过，每种字体都对应有好几种字重（Regular、Normal、Medium、Light ），在给开发的 UI 设计稿中，我们给的字体标注通常有 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold，并不会直接给开发 font-weight 的值。虽然这需要开发去熟记，但作为设计师了解它们的对应关系，可以更顺畅的和开发沟通。
在W3C Fonts节章的规范标准中有给具体数值（100至900）：
这些有序排列中的每个值，对应字体的字重。其大致符合下列通用重量名称：
当然，并不是每一种字体都有这么多字重，那遇到有些字体只有2、3种字重，该怎么对应font-weight 值呢？W3C Fonts也给出了解决方案，例如字重和400大致符合将会归为Regular、Book、Roman；和700大致符合将会归为Bold。若一个重量所指定的字形不存在，则应当使用相近重量的字形。通常，较重的重量会映射到更重的字形、较轻的重量会映射到更轻的字形。下图所示：灰色表示该重量的字形不存在、使用的是相近重量的字形。
△ 只包含400、700和900重量字形的字体家族的对应字重
△ 只包含300和600重量字形的字体家族的对应字重
3. 文本框行高的问题
我们都知道在设计的时候，可能字体使用的24pt，但其实字体本身占用的距离是包含了升部及降部区域的，这样就导致其占用空间大于24pt，而变成了33pt。每个字体都有相应设定的「字高」比例，可以通过sketch选中字体后的height值来进行查看。线高越大，问题就越大。下面的示例显示文本框之间的距离设置为32px。如你所见，即使你将所有垂直间距都设置为相同的值，它们在视觉上也远大于32px。
△ 虽然标注出来的参数都是一样大，但视觉上间距却是不一样的
4. Leading-Trim：数字排版的未来
去年六月，Microsoft Design赞助了一个新的css规范，称为「Leading-Trim」。这个css方案能很好的解决上面这个问题。
我们常用的UI设计工具，例如Figma和Sketch，似乎已经采用了「half-leading」模式并以此方式渲染文本。因此，我们在设计工具和浏览器中都遇到了这个问题。
设计方面的解决方法相对容易：你可以忽略边界框，而直接根据文本的大写高度和基线来测量空间。这是一个手动过程，因为大多数设计工具没有上限高度和基线的参照目标，尽管设计师将尽一切努力使我们的设计看起来更好！但是，如果采用这种方法，开发人员仍将仅在CSS中实现边界框间距。因此，它们会出现随机的间距值。
为了缓解此随机性问题，开发人员可以在CSS中以负边距「裁剪」文本框。但是负边距将需要手动确定，并且是特定于字体的，因此是「随机的」。任何字体，浏览器，操作系统或语言环境的更改都将不可避免地导致你不小心设置边距。此外，该技术通常不是良好的编码实践，并且可能导致意外的副作用。
Leading-Trim新规范
Leading-trim是CSS工作组正在引入的新CSS属性。顾名思义，它就像文本框剪刀一样工作。你只需使用两行CSS，就可以从你选择的参考点中修剪掉所有多余的空间。
代码示例：
上面的示例首先使用text-edge（也是新属性）来告诉浏览器，所需的文本边缘是大写高度和字母基线。然后，从两侧修剪多余部分。请注意，采用修剪仅会影响文本框。它不会切断其中的文本。这两行简单的CSS创建了一个干净的文本框。这可以帮助你获得更准确的间距并创建更好的视觉层次。
使用后再来对比一下：
△使用新规范对比发现，右图文字上下间距舒服多了，也更合理。
Leading-Trim修复对齐问题
借助Leading-Trim，可以解决在APP上看到的所有奇怪的对齐问题。例如，即使文字位于文本框内，你的文本也不总是在容器中垂直居中。
默认行高中保留的多余空间会导致文本不总是在文本框中居中。使用Leading-Trim修剪，就可以很省心的使文本垂直居中。
知识点：
原因是每种字体的设计也不同。它具有自己的默认行高，并且其中的文本可以具有不同的大小和基线位置，并不都是水平居中对齐的。因此，有时即使字体大小，行高和文本框位置保持不变，更改字体也会改变文本的对齐方式，如下例所示，文字很明显没有对齐。
在第二个示例中，你可以看到Leading-Trim如何防止这种情况并使文本完美对齐。
一致性和工作流程的改进
Leading-trim修整超出了使间距和对齐更准确的范围。它在建立的间距系统，为设计准确性和一致性以及的设计到开发交接铺平道路方面发挥着关键作用。
拥有间距系统有很多好处。设计师可以更快地确定间距，开发人员可以设置相应的间距变量以消除代码中的随机间距值。但是目前，即使我们设置了间距系统，由于文本框中的额外空间，对于文本元素来说也不是很准确。如果我们尝试忽略设计中的边界框并在代码中「裁剪」文本框，则会遇到那些棘手的解决方法问题。
△应用于文本元素且没有Leading-trim修剪的间距系统
借助领先的文字间隔系统，从设计到开发的交接过程也将更加顺畅，因为开发人员将能够建立完全相同的系统，并且避免在布局错误上花费大量时间。最重要的是，领先的微调间距系统将帮助我们提供用户信赖和喜欢的外观更美观的产品。
5. 设计中修改文字行高的方法
上面我们介绍了利用Leading-trim修剪字高的先进方法，但是这个新CSS的规范还在编写中，还未世界范围的推进，不过有「微软」团队的扶持相信国际化也不会太远了。
在这之前，我们想要尽可能的解决字符多出的间距问题，就需要在设计软件里手动修改了，手动把文字行高与客户端系统默认行高保持一致，从而给出准确的文字间距。开发在实现的时候iOS使用系统默认行高，Android系统去掉文字上下padding。
这种方式虽会花费不少时间，但也最，你可以据此设置出最美观合理的间距，而不用担心上线稿的还原度问题，也便于我们后期的页面校对和调整。
△在Sketch中修改文字高度
6. 什么是弹性适配
文字弹性适配一般涉及的是宽度适配，宽度适配普遍使用的是间距适配，即定好左右页边距，中间弹性拉伸。这种方式可以做到较好的适配，也是做快速常用的适配方法。
7. 标注工具
设计师将设计文件交付开发之前，应站在程序员的角度着想，做好前期沟通，提供他们开发所需要的资源。设计文件的标注可以使用Sketch插件或直接上传「蓝湖」，拿Sketch插件「Sketch Measure」为例，它是一款十分智能的标注插件，主要功能包含两大块：标注和规范。
工具栏汇合了Measure所有功能的快捷工具，永远置于画布顶层，有了它就不用再频繁通过菜单栏去使用功能。
做好规范后，点击「导出规范」一键自动生成Html页面，浏览器打开页面点击其中任何元素都可以查看其属性和间距，还包括代码样式，交给开发开发工程师后，不用沟通都能看明白。
△Sketch Measure导出标注的网页界面
产品功能开发完成后，对产品对功能，视觉和交互操作进行测试和验收，确保产品的可用性。一般在功能模块验收完成后，就可以开始具体的视觉设计验收，这也是由主要设计师负责的模块，主要验收颜色、字体、图形、间距、控件和空状态等。
因本文主讲字体与排版，就拿这部分来说，需要检视的就有：
字体：是否用的平台默认字体，如果是内置字体检查字体显示有没问题；
字号：导航栏、栏目名称、分类页签、tab等字号大小是否符合规范；
字重：标题和正文字重是否正确，粗体用的是哪一种，是Medium，还是SemiBold；
字色：标题、正文、注释、提示等文字颜色；
字间距：检查中文间距和英文间距，段落文字标点有无避头尾；
行间距：段落文字行间距，有没有出现多余的行高 ；
……
在检视过程中如发现问题，截图标示问题所在，并出具检视报告。
△ 视觉检视表示例
视觉设计的验收要追求细节上的完美，因为设计上的细节是很容易被挑错的，同时需要耐性和细心，要有像素级的视角，只有这样才能完美的还原设计稿。
原本只是想结合工作积累，写一篇字体应用知识总结，没成想给自己挖了一坑，涉及的知识点真是超级多，很多地方都可以单独拿出来再另写一篇。另外其实在工作中，也建议大家对自己的经验进行总结，对关键信息进行提炼加以沉淀，一方面能让自己的知识更加牢固，另一方面也可以帮助后来者学习成长。字体与排版基础就分享到这里，希望对大家有所帮助。因为篇幅较长，几经修改，有细节不正确的地方，欢迎留言矫正，感谢阅读。
参考文献：
《W3C-CSS字体规范标准》
《从「行长为字号的整数倍」说起》
《Leading-Trim: The Future of Digital Typesetting》
《关于UI设计中字体应用的干货》
《字体与排版》
《深度剖析Baseline设计原理》
文章来源：优设网
