地图基础知识及通用设计原则
Part 1. 地图的发展
地图作为记录地形传递路线信息的载体，在人类文明中一直扮演着重要的角色。其承载形式一直紧跟着时代技术的发展而变化，从石板、动物皮革，到丝绸、纸张。当互联网走进千家万户，地图也步入电子化时代。
相较于纸质地图，电子地图优势显著：更新速度快、获取信息效率高、更清晰、可交互等。电子地图（后文简称地图）的出现也影响着人们的出行方式，尤其当智能手机普及，我们可以随时查询地点、发起导航，再也不需要提前记下高速出口和转向路口了。
Part 2. 地图在滴滴的重要性
滴滴拥有网约车、代驾、骑行、公交、自驾导航等众多业务，是一站式出行平台。而地图作为承载出行服务的重要载体，横向支撑着各业务线的发展。以网约车业务为例，调研结果显示绝大部分乘客都会关注并使用地图。
随着各业务线对体验的要求不断提升，单一的地图模式已经不能满足业务诉求及用户需求，需要进一步细分场景、精细刻画地图样式，于是地图的设计也变得愈发重要。
Part 3. 解构地图
地图承载的信息种类复杂、数量巨大，初期可能会找不到设计切入点。我们可以先了解下它的定义和实现方式，或许就能从中找到答案。
定义：地图是依据一定的数学法则，采用地图语言，经过制图综合来表示地球表面的图形。
实现流程：
采集真实世界的地点信息，经过编译转化成数据
数据信息中包含了地点的坐标、分类、名称等
数据经过渲染形成可视化雏形地图
雏形地图经过设计最终变成策略完整、视觉美观的电子地图。
结合“从雏形到完整地图”这一步流程的实现方式，进而可将地图拆分为基础层、策略层和感官层。帮助各职能角色找到对应切入点。
基础层，指的是地图的数据和能力。数据大家已经有所了解了，能力指的是引擎渲染能力、定位能力、图像识别能力等。有了数据及各类能力作为基础，才能设计出信息精准、交互明确的地图。
策略层，则指的是如何使用这些基础数据和能力。地图数据量非常庞大，无法全部展示，需要结合不同的场景及用户需求，有重点的呈现。
感官层，便是我们给数据穿上的衣服，会根据品牌调性、对应场景诉求等去设计最终的配色、图标等。
解构地图后，我们不难看出，感官层是设计侧需要关注的重点层级。
Part 4. 地图设计原则
面对如此复杂的地图信息，为了梳理出清晰的思路，我们会对地图元素进行分类：根据数据的类别和呈现状态，可拆分为点、线、面三类元素。
点元素：地名、POI*等。数量庞大，是城市规模的体现，尤其POI信息，它是地图中颗粒度最细的位置信息。
线元素：道路、地铁线、水系线、铁路线、航线、边界线等。线元素呈现了道路的走向、区域的划分等，描绘出了城市的样貌。
面元素：陆地、草地、湖泊海洋、AOI*。面元素以色块形式出现，很大程度上决定了一张地图的色调。
*名词解释：POI, Point of Information的缩写，即“信息点”。一个POI可以是一栋房子、一个商铺。
*名词解释：AOI, Area of Interest的缩写，即“信息面”。指的是区域状的地理实体，如医院、小区等。
- 核心设计原则
从定义可以看出，地图是一种特殊的图形语言，是以上所有元素的集合体。相比我们所了解的UI设计、运营设计，地图有属于自己的设计原则。以下为大家总结了一些核心的原则：
1、符合制图学和公众认知
地图发展到现在已经成为了一门学科，我们会发现即使语言不通，拿到一张地图时也能看懂，这是因为有制图学和公众认知在规范着地图设计。如地图默认北向上、草地水系基本遵循物理世界的颜色、省界线是实线、停车场图标大多用P来代表等等。符合制图学和公众认知，大大降低了用户的学习成本和记忆负担，使地图可以作为一种世界通用语言流通起来。
2、保证识别度
地图属于信息类工具，其上出现的元素均需清晰可识别，保证可读性是最基本的设计原则。所以在设计时会限制颜色对比度、最小字号等，而具体规则会根据场景确定。
3、清晰有层次
地图的层次清晰包含了两个方面：信息主次清晰，视觉具有整体性。
信息主次清晰，地图信息庞杂，没有主次关系会影响用户的读图效率。在设计时需要考虑元素本身的特点、重要性，可通过颜色、icon/文字大小、线形宽窄等表达。做到同类元素有关联性，不同元素有差异性。同时，信息主次也会根据比例尺的变化有所调整。
视觉具有整体性，在滴滴的业务场景中，地图通常作为最底层组件出现，上层还会有很多业务组件。因此在设计时需克制用色，既要保证地图中各元素之间的区隔度，又要保证地图整体与其他业务组件拉开视觉层级。这样才能更好的突出当前业务模块的重点，提升整体的使用效率和体验。
4、细分地图模式
地图在各业务模块中应用广泛，用户需求也不尽相同，设计时需要根据使用场景区分不同模式。以网约车场景为例，业务信息始终处于上层，地图用来帮助用户定位、快速发单。因此，网约车场景的地图整体性强、色调偏冷、视觉层级后退，能更好的搭配网约车模块的整体设计，保证用户的操作效率。
5、具有品牌特性
品牌调性一直是滴滴设计层面非常关注的原则，品牌基因贯穿了所有产品，始终具有独特的视觉风格。遵循品牌的视觉语言，使地图可以更好的融合到产品中，保证了设计的统一性。
文章来源：站酷 作者：CDX创意设计中心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
很多朋友面对AE表达式望而生畏，不过再难的东西都会有它最本质的规则，如果你理解了基本的原理和常用的表达式命令，这也许会提高你的工作效率。我通过自己对AE表达式的理解，尝试用最简单的语言解释一些看似复杂的操作，如果此篇文章能给你带来一些启发，不胜荣幸~
表达式就是AE内部基于JS编程语言开发的编辑工具，可以理解为简单的编程，不过没有编程那么复杂。其次表达式只能添加在可以编辑的关建帧的属性上，不可以添加在其他地方；表达式的使用根据实际情况来决定，如果关键帧可以更好的实现你想要的效果，使用关键帧就可以啦，表达式大部分情况下是可以更节约时间，提高工作效率的。
A.表达式开关 B.表达式图表 C.表达式关联器 D.表达式语言菜单
由于AE里不同的属性的参数不同，常用的我们可以分为：数值（旋转/不透明度）、数组（位置/缩放）、布尔值（true代表真、false代表假/0代表假、1代表真）这三种形式来进行书写表达式。对于表达式AE也有很多内置的函数命令，直接可以在表达式语言菜单里面进行调用。
原理:
time表示时间，以秒为单位，time*n =时间（秒数）*n （若应用于旋转属性，则n表示角度）
举例:
若在旋转属性上设置time表达式为time*60，则图层将通过1秒的时间旋转60度，2秒时旋转到120度以此类推（数值为正数时顺时针旋转，为负数时逆时针旋转）
注意事项:
time只能赋予一维属性的数据。(位置属性可进行单独尺寸的分离，从而可单独设置X或Y上的time)
wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)
原理:
freq=频率（设置每秒抖动的频率）；amp=振幅（每次抖动的幅度）；octaves=振幅幅度（在每次振幅的基础上还会进行一定的震幅幅度，很少用）；amp_mult=频率倍频（默认数值即可，数值越接近0，细节越少；越接近1，细节越多）；t=持续时间（抖动时间为合成时间，一般无需修改）；一般只写前两个数值即可
举例:
若在一维属性中，为位置属性添加wiggle(10,20)，则表示图层每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，为缩放添加n=wiggle(1,10);[n[0],n[0]]，则表示图层的缩放XY在每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，想单独在单维度进行抖动，需要将属性设置为单独尺寸后添加wiggle(10,20)，表示图层的缩放X轴在每秒抖动10次，每次随机波动的幅度为20。
注意事项:
可直接在现有属性上运行，包括任何关键帧
原理:
为每间隔多少数值来产生多少变化
举例:
若为图层1的旋转属性添加表达式index*5 ，则第一个图层会旋转5度，之后按Ctrl+D去复制多个图层时，第2个图层将旋转10度，以此类推；若想第一层图形不产生旋转保持正常形态，复制后的图形以5度递增，表达式可写为(index-1)*5
原理:
在当前时间输出当前属性值
举例:
若对位置属性添加表达式为value+100，则位置会在关键帧数值的基础上对X轴向右偏移100（正数向右侧，负数像左侧）；若想控制Y轴的位置属性，则可对位置属性进行单独尺寸的分割，从而可单独控制Y轴（正数向下，负数向上）
注意事项:
更多的使用场景是结合其他表达式一起应用
5. random表达式（随机表达式）
原理:
random(x,y)在数值x到y之间随机进行抽取，最小值为x，最大值为y
举例:
若为数字源文本添加表达式random(20)，则数据会随机改变，最大值不会超过20；
若为数字源文本添加表达式random(10,100)，则数据会在10<数值<100之间随机改变； 若为数字源文本添加表达式seedRandom(5, timeless = false)，random(50)，则数据会在50以内随机改变（前面的5是种子数，如一张画面中需要多个相同区间的数值做随机变化，就要为他们添加不同的种子数，防止两者随机变化雷同）,若希望数字随机变化为整数则应添加表达式为Math.round(random(2,50))，表示在2和50之间随机改变无小数
注意事项:
随机表达式不仅局限于数据上的使用，其他属性也可以应用，若数值为整数Math的M要大写
原理:
以此类推
举例:
如下图gif
原理:
timeRemap*n，n以帧为单位
举例:
将图层设置为timeRemap*10，代表每隔10帧就抽掉1帧画面，(根据要抽取的速率决定)
注意事项:
使用timeRemap表达式之前要启用时间重映射，否则无法使用此表达式
原理:
举例:
见下图均以(time,0,3,131,1000)为例，若为数字的源文本属性添加此表达式可以制作出倒计时的效果n=linear(time, 0, 3, 3, 0)表示从0-3秒数字从3到0，希望数字为整体需添加Math.floor(）
注意事项:
倒计时的用法比较常用，整数M要大写
原理:
degreesToRadians(degrees) 角度转为弧度（degrees度的变量或表达式）radiansToDegrees(radians)弧度转为角度（radians弧度的变量或表达式）
举例:
常用语数学中的一些计算sin，cos，tan，sec，csc，cot等
原理:
layer(index)中index 是数值，按照编号检索图层；layer(name)中name 是一个字符串，按照名称检索图层（若没有图层名称，则根据源名称）；layer(otherLayer, relIndex)中otherLayer 表示图层对象，relIndex 表示数值，检索属于图层对象的数值图层
举例:
原理:
marker.key(index)中index 是数值；marker.key(name)中name 是一个字符串
举例:
thisComp.marker.key(1).time表示返回第一个合成标记的时间;thisComp.marker.key(“我叫注释名称”).time表示返回具有名称”我叫注释名称”的合成标记的时间
原理:
width表示返回合成宽度；height表示返回合成高度
举例:
[thisComp.width/2, thisComp.height/2]表示宽度和高度为合成的一半也就是居中的位置
原理:
param(name)中name表示字符串；param(index)表示数值
举例:
effect(“高斯模糊”).param(“模糊度”)效果控制点始终位于图层空间中
原理:
复制粘贴表达式使用就可以，amp表示振幅,freq表示频率,decay表示衰减（根据不同需求做不同的调整）
举例:
n = 0; if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){n–;}}
if (n == 0){t = 0;}else{
t = time – key(n).time;}
if (n > 0){
v = velocityAtTime(key(n).time – thisComp.frameDuration/10);
amp = .03;
freq = 2.5;
decay = 4.0;
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value;}
上述内容复制粘贴使用即可
注意:motion2脚本也带此功能，方法不唯一
原理:
k表示反弹最终结果，a表示反弹阻力，b表示反弹变化时间
举例:
k=500; a=8; b=30; x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x]（根据不同情况调节kab的数值即可）
原理:
StartNumber表示开始时的数值，EndNumber表示结束时的数值，StartTime表示开始的时间，EndTime表示结束的时间，和前面的linear表达式相对应
举例:
StartNumber=1;
EndNumber=20;
StartTime=0;
EndTime=3;
t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)
原理:
spd表示挤压拉伸的速度，maxDev表示挤压拉伸的大小，decay表示衰减
举例:
spd =20;maxDev =10;
decay = 1;
t = time – inPoint;
offset = maxDev*Math.sin(t*spd)/Math.exp(t*decay);
scaleX = scale[0] + offset;scaleY = scale[1] – offset;
[scaleX,scaleY]
原理:
delay表示要延迟的帧数
举例:
为位置属性添加表达式delay = 0.5;
d = delay*thisComp.frameDuration*(index – 1);
thisComp.layer(1).position.valueAtTime(time – d)；
如想要实现不透明度拖尾需为不透明度属性添加表达式opacityFactor =.80;
Math.pow(opacityFactor,index – 1)*100(调整好一个图层后复制多个)
文章来源：优设 作者：凌旬
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一转眼，夏天就来了，设计中需要清新又抓人眼球的图片，老板又要求使用各年龄段都喜欢的插画风格，应用场景要广，但是预算又没有那么多，该怎么办呢？这也不是熬夜就能熬出来的，不要烦恼，下面这个网站立马解决你上面所有需求的同时，还能帮助提升你的工作效率，延缓你秃头的时间。
这个创造性超强的插画制作网站就是 BLUSH ，你可以根据自己的想法进行元素的替换，也可以直接使用 8 位网站合作设计师的现有作品，超清新的颜色和多样的搭配空间，绝对会让你十分满意的，无论是做 Banner、海报还是用作文章中的插图都十分合适。最重要的是，可以免费商用！接下来就跟着我一起，走进这个网站吧。
网站内拥有 12 大种类的插画图库，包含人物、城市风景、植物、甜点、涂鸦等等。选择你喜欢或者需要的一类，就可以开始你的创作。操作类似于换装游戏，在各个你需要改变的地方更换你喜欢的元素就可以。如果你要摸清整个网站可以产生多少种搭配的话，可能需要花上你不止一天的时间哦。
从上图可以看出，单在人物上，网站就提供了不同的风格，有像儿童形象的「Friendly ones」，也有极简线条的「Big Shoes」，还有夸张超炫的「Power Moves」等等。接下来，为了更好的理解网站提供的服务和操作的方式，我选取实用多变的「Croods」来演示。
首先在栏目左侧选择「Croods」，就会看到下面这样的界面。最上面是设计师的作品，下面则是可以由你自由创造作品的入口，造型可以选择站着或者坐着，场景可以选择谈话、聚会、公园等等，整体的背景也有五大类供你选择。
这里我选择点击「Peaceful Place」。网站出现的作品很符合现在多数人在家办公的状态，如果你不想自己动手，那直接选择这张图片或者点击「Randomiza」再随机生成一张图片，自己满意之后，点击「Download」便可以获取 PNG 格式的图片，不过，高品质 PNG 和 SVG 格式则需要付费。
当然，你也可以通过改变图片上的各个元素，生成你所需要的场景插画。例如想要一个盘着腿坐在沙发上发消息，和朋友聊天聊的很开心的一个形象，就可以通过下方给予的元素进行个性化定制，把表情改成开心，电脑换成手机，右上方替换成聊天框，最后导出为下图的样子。如果想要多人的场景，在上一步选择多人的场景进入就可以了。
同时，网站也支持下载插件，方便众位设计师在 Figma 中更好的运用。在首页点击右上角的「Get Plugin」进入页面，注册账号就可以顺利安装插件。大家可以根据自己的需要选择下载插件或者直接在网站上在线制作。
最后，不得不提的一点是，网站图库在兼顾多样性和平等性上做了很大的努力，人物的肤色可以随你改变，残疾人也有一席之地，可以选择为人物匹配轮椅，或者给人物戴上假肢，涵盖尽可能多的人物情况和场景。相信这样的网站一定能满足你丰富的设计需求，快去使用吧！
文字来源：优设 作者：山楂
距离上一次介绍 The Stocks 已经超过五年，前段时间无意间浏览到这个网站，才想起我以前好像也写过文章，不过网站现在变得不太一样而且内容又更完整了，非常推荐加入收藏，因为真的很方便。如果你还不知道 The Stocks，它整合各种设计相关免费资源，最早只有将一些免费图库整合在一起，让找图的使用者透过侧边栏选单快速切换各个不同图库网站，加速搜寻图库的效率。
在全新的 The Stocks 2 除了免费图库，加入配色工具、免费图标、免费影片、免费字体和 Mockups 素材网站共六种项目，相较于早期来说在资源数量上增加不少，现在一样可以从网站侧边选单选取你要浏览的素材类型，The Stocks 就会出现一整排的网站列表让使用者直接选择，再从这些网站去寻找你要的免费资源。
对于平常会需要搜寻设计相关资源的使用者来说，The Stocks 是很好用的工具。
不过 The Stocks 现在会加入一些赞助商「推荐」内容，如果使用者进入这些服务，也有付费购买的话 The Stocks 开发者就能获得回馈（其实就是 Affiliate），网站主要还是以收录免费服务为主。
网站链接：http://thestocks.im/
使用教学
开启 The Stocks 网站后会随机显示一个免费图库，The Stocks 主要功能列在左侧，点选选单上的网站名称会将网页显示于右侧，方便在各个外部网站跳转和搜寻，不过有些网站不允许被嵌入其他页面，这时候就会以开新分页方式替代。
左上角是 The Stocks 收录的免费资源类型，包括免费图库、配色工具、免费图标、免费影片、免费字体和 Mockups 素材网站，点选后下方的网站列表就会实时更新。
有些标示为 Featured 就是本文前面提到的赞助商推荐内容，大多都是付费服务，例如销售相片图片的 Shutterstock、iStock 图库，如果有在找图的朋友应该不陌生，其实很多免费图库也是透过刊登付费图库广告来获取收益。
当然 The Stocks 收录的网站仍以免费资源居多，点选后就能快速浏览网站，如果操作上发现有些问题或无法正确显示，亦可搜寻该网站名称直接在浏览器开启。
最近因为疫情关系，很多公司改为在家上班，如果要开会就会透过一些视频会议软件例如 Zoom ，The Stocks 也有提供 Zoom 适用的免费虚拟背景（特别是家里背景很杂乱的朋友可以稍微隐藏一下），这些素材可以在网站右上角 Zoom Virtual Backgrounds 找到。
值得一试的三个理由：
文章来源：优设 作者：Pseric
有时候做国风的设计作品，如果选择黑体和宋体可能太过端正，但选择书法字体的话，可能因为飞白或过度连笔导致字体不容易识别，那选什么字体呢？我建议大家选择楷体，注意不是选系统自带的楷体，而是今天推荐的演示悠然小楷，字体手稿由一位美丽女生书写，其字体有着悠然自得、闲情逸致的气质。
「演示悠然小楷」是由 keynote 研究所 x 秋叶 PPT 联合发布的一款免费商用字体，推荐设计师们收藏或下载。下载地址见文末。
1. 青春/知识
△ By@伟崇
2. 文学/历史
△ By@伟崇
3. 游戏/小说
△ By@小敏
4. 中式地产
△ By@伟崇
5. 商务风
△ By@伟崇
8. 主视觉设计
△ By@画生
△ By@画生
9. 海报物料
△ By@画生
△ By@画生
△ By@画生
10. 电商广告
△ By@画生
△ By@画生
△ By@画生
11.文字排版
△ By@画生
△ By@画生
12. 品牌形象设计延展
△ By@画生
△ By@画生
△ By@画生
1. 思源宋体
△ By@澄音
2. 方正宋刻本秀楷
清刻本悦宋用得多了，不如试试这款有些相似但又有不同的「方正宋刻本秀楷」，较之前者字形更为周正，笔画更为果决，娟秀之中蕴藏力量。
△ By@画生
3. Garamond
Garamond 是一款古朴传统的衬线字体，在西文体系中历史悠久，恰因没有特殊的个性而被广泛使用，是老式衬线体中最具代表性的字体，与同样以端正工整为名的楷书作搭，最能相互映衬。
△ By@画生
4. 阿里巴巴普惠体
基础黑体的字体没有复杂的修饰，进一步弱化次要信息，强烈对比下让主角得以更好的突显，也让画面层次感更加丰富，而基础型的黑体，必然首推阿里巴巴普惠体。
△ By@画生
下载地址：https://pan.baidu.com/s/1ohOK2RSEA9vsfHAbfvpZmw 提取码：ypae
本文6000字上下，反复校对6遍以上，初步阅读完大概需要25分钟，若是深入理解并完全吸收则建议“先收藏再反复的品，细细的品”。希望对各位朋友有所帮助，不足之处望校正，祝阅读愉快。
双20年终究还是来了，互联网产品对于这个时代不是什么新鲜事了，互联网人也从未停止对优秀产品的探索和创新。而做为一个设计人的我们，在前行的脚步中也应该温故知新，就让我跟大家一起来对iOS、Android的设计规范、适配问题做一次全面的梳理和复习吧。
iOS设计规范
苹果自07年1月9日正式发布iPhone到目前为止的iPhone11Pro Max，已经历了十三代产品。19年9月11日推出的11、11Pro、11Pro Max并没有新增尺寸，所以对设计师而言也就没有额外新增工作量了，还是按照以前的做法：750*1334px（@2x）或（375*667pt，@1x）做设计稿，再提供@2x、@3x切图。
以下为苹果手机历代产品明细（话说你拥有过那几代产品，欢迎留言交流）
一代：iPhone
二代：iPhone3G
三代：iPhone3GS
四代：iPhone 4
五代：iPhone 4s
六代：iPhone 5
七代：iPhone 5s、iPhone 5c
八代：iPhone6、iPhone6 Plus
九代：iPhone 6s、iPhone 6s Plus
十代：iPhone7、iPhone7 Plus
十一代：iPhone8、iPhone8 Plus、iPhone X
十二代：iPhone XS、iPhone XS Max、iPhone XR
十三代：iPhone11、iPhone11Pro、iPhone11Pro Max
如何有效记住iOS设计规范，这里我总结了一个方法“iOS五点两图记忆法”，也就是五个点+两张图。
1、设计尺寸：375x667pt @1x（750x1334px @2x）为基准设计。
2、设计工具：Sketch、Adobe XD、Photoshop
3、预览效果：Sketch Mirror、Adobe XD或Ps Play
4、切图输出：@2x @3x两套
5、标注工具：蓝湖，摹客
两图psd下载链接：https://pan.baidu.com/s/15g2x0vDd1yZevADuUj1V3g 提取码: i4ai
考考你：
1、iPhone8尺寸的设计稿如何快速变成iPhoneX的设计稿？
2、@2倍图被当作@3倍进行开发，会导致什么样的后果？
3、为什么要用375x667pt @1倍图进行设计？（后文也有详细答案哦）
4、iPhone8显示为34px的文字在iPhone11 pro Max里面是不是也是34px？
这里我们首先重点理解下PX和PT这两个单位， 弄清楚为什么建议使用一倍图进行UI设计，才能在设计中以不变应万变。（说明：该部分内容优化自静电老师的总结。公众号@静Design）
PX大家可能比较熟悉，就是像素，英文pixel的简称。最通俗的理解就是找一个放大镜（不是电脑中的放大镜，是真实的放大镜），然后对准自己面前的显示器或者手机屏幕观看，大部分显示器会在放大镜下出现一个个点。这就是我们平时所说的像素概念。在一台物理分辨率为1080x1920px的显示器中，横向分布1920个点，纵向则有1080个点。这些点通过显示器的光学特性，为我们组成不同的图像。
请注意， 在不同尺寸的显示器上，这些点的单位面积并不是一样的。比如一台22英寸的1080p液晶显示器与一台27英寸的1080p液晶显示器，可以发现这两台显示器的像素分布就是27英寸的显示效果明显逊于22英寸显示器的效果，一个重要的原因就是两台液晶面板中的“像素”颗粒大小不一。
由此可见，像素这个单位是一个相对单位，不能用厘米、毫米等这些绝对度量单位来衡量他的长度或者宽度，因为1像素只代表一个单位的“点”。
另一个重要单位是PT，英文point的简称，这个单位也是iOS开发过程中使用的单位，与px这样的相对单位不同，PT（Point）是一个绝对单位，中文名字是“磅因（或者磅）”（1PT=1/72英寸）。
同样用简单直观的例子来演示，拿两台不同型号的iPhone，比如一台ip11和一台ip11pro Max，打开同样一款应用（如QQ音乐），准备好一把尺子，使用尺子分别测量最上方title“音乐馆”文字尺寸。经测量，可以发现不同型号的“音乐馆”文字的尺寸都一样。也可以请iOS开发人员分别写两个针对不同尺寸机型适配的同一个文件，并在两部手机安装，确保这个文件中的字体使用一个字号（30PT）。在两个手机中运行并用尺子测量，我们发现他们的物理尺寸完全一样。
请大家记住一点，px是相对单位，pt为绝对单位（类似单位为厘米，毫米等等）。在不确定屏幕密度的情况下，px与pt没有任何可比性。
在开发工程师眼中，你如果使用750px的分辨率作图，那么按原大小标注设计稿中的尺寸的话，他们同样在开发环境中是要换算为一倍尺寸的，比如你标注了字号为40px，那么最终开发工程师写在代码里的就是20pt，除以2的关系。但是呢，如果使用一倍基准分辨率作图，那么就不用除以2啦，所有尺寸开发工程师直接拿过去随取随用。
sketch作为一款纯矢量的移动端ui设计软件，不管是设计还是后期与开发工程师的配合，都严格遵从开发原理，这种设计方法可以最大限度保证设计稿的复现，同时也可以减小文件体积和系统资源消耗，不管是从哪个方面看，都是设计师制作ui界面的明智之选。
最后总结一下原因，设计师使用一倍基准尺寸作图，主要是单位转换方便，输出切图方便，理解简单。对于工程师，他们不用再进行复杂的换算，有助于完美复现设计稿。
我们继续熟悉iOS中一些必不可少的页面规范细则。
一、引导页
引导页是一张完整图，不能适配，因此需要单独出设计图，iOS共需提供6套尺寸，当然也支持视频形式。（目前5以下的适配基本淘汰）
二、图标
以1024x1024px尺寸进行图标创作即可。再通过现成尺寸模版资源，一键生成整套尺寸导出即可。（模版链接：https://developer.apple.com/design/resources/Template-AppIcons-iOS）
注意：最终提交给到程序员的切图是直角，非圆角图标。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
其他设备图标尺寸
三、状态栏和导航栏（具体尺寸见五点二图）
状态栏：显示时间、运营商信息、电池电量等信息区域。(齐刘海区域)
导航栏：状态栏下面的区域，含页面标题、功能图标等信息区域。
状态栏跟导航栏一般会进行一体化设计。现在流行大标题导航栏设计，也就是加大导航栏的高度，融入页面内容的标题，当内容上滑时，大标题再回归到常规导航高度。（大标题导航栏的高度一般为116pt（232px），这里包括了20pt（40px）状态栏的高度，同时也能放得下34pt（68px）的大标题和辅助信息（如返回等图标）。
导航栏中的元素必须遵守如下几个对齐原则:
1、返回按钮必须在左边对齐。
2、当前界面的标题必须在导航栏正中。（可无）
3、其他控制按钮必须在右边对齐。
四、标签栏（具体尺寸见五点二图）
标签栏：即Tab栏，为底部快速入口，iOS规范中Tab栏一般有五个、四个、三个图标的形式。分为“纯图标标签”和“图标加文字标签”两种形式。
五、iTunes 上传页面
在程序上传App Store时我们需要提供多张App截图，供用户了解APP的功能。这里我们需要提供1242 x 2688px和1125 x 2436px两套截图。也支持视频形式。（微信目前采用的是五张静态页面形式）
微信iTunes上传用截图
六、 字体
中文字体：PingFang SC，英文字体：SF UI Text 、SF UI Display，其中SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。
链接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取码: hd35
七、色彩
在iPhone上显示的色域要比我们作图时的RGB色域要广。所以在iPhone上设计怎样的颜色都可以，只要符合产品气质并且在色彩心理学理论范围内。官方建议的系统色彩如下：
iPhone的系统色
八、控件
控件包括：输入框、按钮、滑杆、页卡、开关等，在设计模板中已经全部列出。（下载地址：https://developer.apple.com/design/resources/）为了让设计更符合整体产品品牌调性，这些控件可以做二次设计。
但得注意两件事：第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm，适合手指点击。第二，要设计操作的不同状态，不要只设计一种状态。
默认控件
控件中无处不在的44pt（88px）
之前我们介绍过，人手指点击区域为7mm - 9mm，在@2x中就是44pt（88px）。苹果的导航条、列表、工具栏都充满了44pt（88px）这个神秘数字。我们在设计时一定也要考虑到手指的点击区域。
无处不见的44pt（88px）
九、界面设计原则
1.边距和间距（@2x）
在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、通透和边距、间距的设计规范紧密相连。
（1）全局边距（iOS13，@2x）
全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语言，全局边距的设置可以更好的引导用户竖向向下阅读。还有一种是不留边距，通常被应用在卡片式布局中图片通栏显示，这种图片通栏显示的设置方式，更容易让用户将注意力集中到每个图文的内容本身。
微信和支付宝的边距都是32px。（@2x）
（2）卡片间距
在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，过小的间距会造成用户紧张情绪，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。
以iOS（750*1334px）为例，设置页面卡片间距为70px，而通知中心承载了大量的信息，因此采用了较小的16px作为卡片的间距。
总结：卡片间距的设置是灵活多变的，一定要根据产品的气质和实际需求去设置，平时也可以多截图测量一下各类APP的卡片间距都是怎么设置的，看的多了并融会贯通，卡片间距设置自然会更加合理，更加得心应手。
（3）内容间距
一款APP除了各种栏（状态栏、导航栏、标签栏、工具栏）和控件icon，就是内容了，内容的布局形式多种多样，这里不去探讨内容具体应该如何去布局，我们来说一说内容的间距设置问题。
格式塔邻近性原则：
单个元素之间的相对距离会影响我们的感知，互相靠近的元素看起来属于一组，而那些距离较远的则自动划分组外。来看下图，左图中的圆在水平方向比垂直距离近，那么，我们看到了4排圆点，而右图则看成4列。
在UI设计中内容布局时，一定要重视邻近性原则的运用
2.内容布局
在APP的设计中内容的布局形式多种多样，这里介绍最常用的两种布局形式，列表式布局和卡片式布局。
（1）列表式布局
列表式布局方式非常普遍，随便打开一个APP，基本都存在这种布局方式。特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。这也是一种非常容易理解的展示形式。
（2）卡片式布局
这种布局形式相对灵活。其特点在于每张卡片的内容和形式相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。卡片式布局相对时尚、前卫，很多to C产品经常用到。另外，双栏卡片的布局形式，也常见于以图片信息为主导的App，例如一些商城的商品陈列页面。这种形式能在一屏里显示更多的内容（至少4张），同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。
3.界面图片设计比例
在UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。
4.APP版式设计规范
版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素（文字、图片、控件）根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感，在UI设计中版面设计的基础原则有哪些呢？
（1）对齐
对齐是贯穿版式设计最基础，最重要的原则之一，它能建立起一种整齐规矩的外观，带给用户有序一致的浏览体验。
（2）对称
对称是对立统一规律的本质属性，呈现出一种和谐自然的美，在应用界面的设计中，引导页设计、注册登录输入框和按钮等无一不是对称的设计。
（3）分组
物以类聚，人以群分。分组是将同类别的信息组合在一起，直观的呈现在用户面前，这样的设计能够减少用户的认知负担，在移动端界面的设计中最常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。
十、切图命名规范
切图最后需要命名成规范格式，方便程序员查找。切图命名的格式建议全英文，如果大家英文不好需要想办法提升一点简单的词汇量。借由上述工具切图后，需要整理切图命名，或在切图之前对图层命名亦可。以下是切图元素的中英文对照：
切图命名对照表
然后我们要按照”功能_类型_名称_状态@倍数”来命名每个切图，比如我们导航条上有一个搜索图标，那么它的名称就是：
navi_icon_search_default@2x.png
(导航_图标_搜索_正常@2x.png)
Android设计规范
接下来，再一起来看看Android设计规范，这里只是把安卓规范中一些关键信息做了汇总，更详细的不过多赘述，网上已经有很多大佬产出过此类文章，大家可自行搜索。
一、安卓开发单位是DP、SP
DP：安卓专用长度单位。
以160 DPI屏幕为标注，则1DP=1PX
计算公式：dp x dpi/160=px
例：以720x1280px （320dpi）为例， 1dp x 320 dpi/160=2px
SP：安卓专用字体单位。
以160 DPI屏幕为标注，则1SP=1PX
计算公式：sp x dpi/160=px
例：以720x1280px （320dpi）为例， 1sp x 320 dpi/160=2px
二、安卓设计尺寸：以1080x1920px作为设计稿标准尺寸
1.从中间尺寸向上、下适配，界面调整幅度最小，最方便适配。
2.大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。
3.用主流尺寸来做设计稿尺寸，极大的提高了视觉还原和其他机型适配。
三、安卓图标尺寸
四、安卓字体
中文：思源黑体 / Noto Sans Han
英文：Roboto
大小：主题文字 36-34px 正文 28-26px 提示文字 24-22px
链接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取码: hd35
五、切图规范
1.切图尺寸必须为双数
2.单像素的图会出现边缘模糊的情况
一般情况下，我们只需要提供3套切图资源就可以满足安卓工程师的适配，分别是HDPI、XHDPI、 XXHDPI 3套切图资源。
如何用iOS的设计稿适配安卓
现在绝大多数公司限于人力物力的限制，不能把iOS和安卓的设计稿全部执行出来，因此就存在一稿两用的情况；设计师以iOS版本的设计稿来适配安卓，下面我们来看一组有趣的数学换算题：
1080/1.5=720，720/1.5=480，1242*2208/1.15=1080*1920，也就是说，1242*2208（iOS@3倍尺寸）与1080*1920（安卓尺寸）是可以等比缩放的，所以，iOS与Android的尺寸是可共用1242*2208px。因此，以iOS设计尺寸进行设计是可以适配Android的。（前提是必须和安卓工程师沟通清楚）
另一种方式，就是把750×1334px等比例调整尺寸到安卓1080×1920px，对各个控件进行微调，重新提供标注（用dp标注）。也就是需要提供两套标注，一套给iOS，一套给Android。
iOS开发语言
作为iOS开发工程师，最重要的三个工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的语言；而Swift开发非常。一般iOS工程师会在这两个语言中选择一种作为开发工具。UIKit是苹果系统自带的一套框架，这个框架里有设置按钮、滑竿、状态栏、电池电量、键盘等接口可供调用。所以我们看到很多第三方APP的界面中，有许多控件和苹果自带程序是一致的，这就是UIKit的功劳。
iOS开发里单位是pt
750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。（这也是为什么建议设计师用@1倍图做设计稿的原因）
转自：站酷-蜗牛和笔
未来荧黑是一个基于思源黑体、Fira Sans和Raleway的开源字体项目，支持简体中文、繁体中文与日文。
思源黑体的7种字重被扩展为9种字重，并增加了5种字体宽度，全家族共包含44款字体。
相比于思源黑体，未来荧黑的造型更加简明现代，版面效果清新轻快。未来荧黑的中宫与字面更加收敛，重心在字重之间经过了重新配置；笔画细节上处理得更加干练，简洁而平直化。
开发者：Celestial Phineas
字体文件以SIL Open Font License 1.1发布，构建字体开发的代码以MIT License发布。
发布地址：github.com/welai/glow-sans
网盘地址：https://pan.baidu.com/s/1f2UuFO8ZxWa8v5XXYUEmig 提取碼 2e8w
备份下载链接：https://pan.baidu.com/s/1E1woRsZX91bCrq5FT1SAzg 提取码: 92t2
文章来源：优设 作者：GrayDesign
各行各业的设计师每天都在和颜色打交道，UI 设计师设计用户界面也不例外。
用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制，界面可能会显得花哨而没有主次；但过于拘谨又容易使界面保守，难以激发用户情绪。所以如何让色彩的搭配平衡，是 UI 设计师需要修炼的一课。
但色彩毕竟是感性的元素，我们总是仰慕一些对色彩天赋异禀的设计师，总能不拘绳墨给作品带来惊艳的视觉效果。我们难以偷习他们的天赋，但或许你有没有想过，干脆我们另辟蹊径，用理性推导来制定一套色彩系统？
那么今天我用我的项目示例，教给大家一个科学推导颜色搭配的方法。也许能够带你发现一些色彩背后的数学秘密。
在此之前我们需要先熟悉一下颜色模式。
在 PS 菜单栏的「图像-模式」下可以看到非常多的颜色模式：RGB、CMYK、Lab 等等。那是因为 PS 是一个需要满足设计行业水平领域的软件，要解决各类设计师需求，所以涵盖的颜色模式非常丰富。
但 UI 大多数时候需要关注的是线上场景，成果的展示渠道一般是自发光设备。所以弄明白垂直领域软件 Sketch 中的几种颜色模式，其实就足够了，分别是 RGB、HSB 和 HSL。
RGB 是指通过 R（Red：红）、G（Green：绿）、B（Blue：蓝）三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色。三个通道分别有「0-255」这 256 个值，这些值分别代表着各通道的亮度层级。
虽然 RGB 在机器表现上很友好，但并不够人性化。因为人们判断颜色，往往是通过「这是什么颜色？是不是太鲜艳了？亮了还是暗了？」这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGB 衍生出了 HSB 模式和 HSL 模式。
HSB 是指通过 H（Hue：色相）、S（Saturation：饱和度）、B（Brightness：明度）来控制颜色。Hue（色相）的取值范围是色环上 0-360° 的圆心角度；而 Saturation（饱和度）与 Brightness（明度）是在 0-100% 的量占比。
HSL 中的 H、S 与 HSB 相同，都是指 Hue（色相）、Saturation（饱和度）。但 L 所指的则是 Lightness（亮度）。
HSL 和 HSB 稍微有一些不同，我们在两个颜色模式下输入相同的数值，会发现颜色实际是不一样的。虽然 H、S 指代的都是色相和饱和度，但 L（Lightness：亮度）与 B（Brightness：明度）分别被认为是「颜色中白色的量」和「颜色中光线的量」。
Lightness 和 Brightness 的概念要深度研究下去的话其实是计算机算法领域的问题了，感兴趣的朋友可以查阅更多资料，但我个人认为对于 UI 来说没有太大必要。
关于 HSB、HSL 的使用场景，记住以下两点即可：
支付宝 Alipay Design 团队提出过一个配色原则：
以同色系配色为主导，多色搭配为辅。
同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。
那么知道了这个原则，我们又该如何科学、合理地得出产品的色彩系统呢？接下来我就用我的一个项目示例给大家做讲解。
步骤一：找到符合产品调性的品牌色
我负责的该项目主要业务与高校支付、缴费相关，所以希望整个产品视觉风格首先要给用户带来安全感。又因为主要用户群体是高校师生居多，新潮、年轻化是主要用户的一大标签，所以我们选择了用饱和度较高的蓝色来作为品牌色。
最终选择品牌色的 Hex 值为 #1585FF ，HSB = （211,92,100）。
步骤二：提取24色
选定了品牌色之后，以品牌色的 H（色相）为基础，不断地递增、递减 15，在 0-360 之间可以得出 24 个颜色，也就是将 360° 色环分割为 24 份，可以得到 24 色。
为什么要提取 24 色，并且以 15 为公差呢？
我们知道，想得到邻近色、类似色、互补色这一系列的颜色，我们就会使用到色环。
而 24 色色板是帮助我们提取辅助色的便捷工具。
步骤三：找到同色系配色
同色系是指与品牌色 H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生的色组。同色系色组的推导需要借助拾色板坐标。
我们建立一个基于 S（饱和度）与 B（明度）的平面坐标系，设定当前品牌色为色值为（S₀，B₀），连接品牌色色值点与右上纯白点（0，100）、右下纯黑点（100，0），得到两条线段。
我们各在两条线段上均分取得 5 个点坐标（包含首位两点）。这样两条线段一共就会产生 11 个（S，B）坐标值，对应着 11 个同色系色组。
经过上图的计算，我们可以得到基于品牌色的同色系色阶。
步骤四：多色搭配
用于搭配的辅助色应满足以下两个条件：
于是根据以上条件，基于品牌色可衍生出 3 个辅助色：一个与品牌色传递调性有明显区分的类似色；两个互补色的邻近色。
步骤五：感官明度校准
经过计算后，我们已经得出了品牌色和三个辅助色。
可以看出，虽然我们提取出的辅助色明度色值都一致，但因为颜色本身自带的感官明度属性有所区别。为了让辅助色和品牌色的感官明度尽量一致，我们要对第一次提取出的辅助色进行感官明度校准。
校准方式是：依次在辅助色上叠加一层纯黑图层，将该纯黑图层颜色模式调整为 Hue（色相），就可以通过无彩色系下的明度色值，进行对比。
这样我们终于得到以品牌色为基准的 3 个辅助色了。
步骤六：全色系输出
将得到的辅助色依次进行步骤三的计算，可以得到辅助色的同色系色阶。
但因为明度过低时，颜色已经非常接近于黑色，色相在肉眼上几乎已经趋于一致。所以删除最左边的三种同色系颜色。最后得到基于品牌色推导出的全色系色阶色板。
完成了以上的工作，当然还不算结束。一套标准的色彩系统还会包含中性色规范、颜色的使用规范等等。但相信解决了大部分的需求，剩下的工作也难不倒大家了。毕竟以上的方式只是给大家提供了一个理性科学的方法，色彩的使用最终还是要融合设计师个人的共情能力。
比如许多产品有了一套自己的色彩方案后，设计师还会根据具体的业务场景去赋予 icon、卡片背景等元素不一样的色彩方案。
希望这个方法能够带你发现一些色彩背后的数学秘密。
文章来源：优设 作者：UCD耍家
知名的免费图标网站 Iconfinder 要和大家一起对抗新冠病毒，和图标设计师联手推出一系列「防疫免费图标集」（Coronavirus awareness icons），超过 200 个与公共卫生、病毒传播相关图标，这些图案包括常见的 PNG 和 SVG 格式，可以将它们加入标志、海报、传单或类似的内容使用。
如果你想要制作广告牌，提醒在这个区域要洗手或戴口罩，这里有免费图标可让信息更容易被阅读。
依照 Iconfinder 网站说明，这些图标可用于洗手说明、卫生建议或是其他预防病毒传染散播的提醒信息，所有图标采用 Creative Commons BY-SA 3.0 授权释出，使用时需要标示出处，并以相同方式分享。
网站链接：https://www.iconfinder.com/p/coronavirus-awareness-icons
值得一试的三个理由：
前往 Iconfider 的「Coronavirus awareness icons」网站，就能看到这套专为对抗新冠病毒提供的免费图标集，点选 Download all icons 下载打包好的完整图标。
在网站中展示一些收录在这套图标集的防疫相关图案，每套图案都有不同风格，例如以单纯线条为主的设计，或是采用平面化设计的彩色图标，可以依照自己的需求选择。当然你也可以按下右上角的按钮前往 Iconfinder 找到这套图标的完整版本。
下载后就能取得完整的图标集，依照不同名称分类，有些是 SVG 格式，有些则包括 SVG 和不同大小的 PNG 文件，其中有个 iconfider_freebies.zip 在解压缩后还能取得一些和防疫相关的图标。
值得一试的三个理由：
文章来源：优设 作者：Pseric
最近方正集团负债千亿，被银行申请破产重整的消息让众多设计师兴奋不已，心里暗自在想，那方正字库一万多款字体是不是就可以免费使用了？醒一醒，不太可能，身为设计工作者，尊重他人的设计和拥有版权意识是很重要的。
方正字库属于北京北大方正电子有限公司，而这个公司是方正集团的子公司。就算方正集团真的破产倒闭了，根据我国法律，方正字库何去何从也跟这两家公司的法人是否一致有关，如果一致，那么就可能被收购重组，如果不一致，那么就继续独立运营。关键是，无论是什么结果，方正字库里所有的字体都是有版权的，如果随意商用，就会导致侵权，乃至把整个公司都赔进去。
直接去网页搜索，便有数不清的方正字体侵权案例。大到电影和游戏的宣发，小到淘宝店铺的页面，只要你使用了方正字库的必须购买版权才可商用的字体，都有可能收到来自方正字库的律师函。那么该如何避免字体侵权呢？其实最好的方法就是使用免费可商用的字体，或者乖乖去买下字体的使用权。
一篇文章告诉你，该怎么判别字体是否侵权：
如果你实在要免费用方正字库的字体的话，那么就选择「方正黑体简体、方正书宋简体、方正仿宋简体、方正楷体简体」这四种字体吧，已经向方正字库授权服务官方求证过，这四款字体可以直接免费商用，不需要书面授权。
不过有那么多免费、适用度广、并且可以商用的字体，为什么要执着于方正呢？优设标题黑和优设好身体这两款字体，无论是做 banner、海报还是文字设计都很合适，还没拥有的设计师们快来下载。
优设标题黑：
优设好身体：
还有优设精心为大家挑选整理成的 2020 年免费可商用中文字体最全合集，链接给你们，正好需要的话，就快去下载使用。
最后，介绍两个可以查询和下载免费可商用字体的网站。
1. 字由网
网站链接：https://www.hellofont.cn/home
第一个是字由网，虽然需要下载客户端激活字体进行使用，不过截至今日，字由拥有 511 款免费可商用字体，对比一下乱用字体可能产生的侵权费用和烦恼，还是下载客户端性价比比较高。
网站及使用介绍：
2. 猫啃网
网站链接：http://novicehou.gz01.bdysite.com/
第二个是猫啃网，是免费开源可商用的公益字体网站，截至今日，网站上共有 155 款字体，可供设计师们选择和下载使用。
文章来源：优设
蓝蓝设计的小编 http://www.lanlanwork.com