字体 英文 海报 大家好，我是和你们聊设计的花生~ 前几天向大家推荐了 5 款精致优雅的英文字体，作为装饰运用到海报设计中，可以营造浪漫优雅的氛围。海报设计如何更优雅？加上这个元素准没错！（附素材下载）大家好呀， 我是和你们聊设计的花生~之前和大家分享了纤细的手写英文字体在海报中的运用，他们可以丰富画面层次并烘托氛围，让海报不再沉闷呆板。阅读文章 > 然后有小伙伴在评论去问到有没有比较有偏男性气质的英文字体推荐，当然有啦~今天就继续和大家聊聊具有力量感的英文字体在海报设计中的运用，并为大家推荐 7 款可以免费商用的相关英文字体，一起来看看吧~力量感字体在海报中的运用说到具有力量感，在英文字体上最直接的表现就是超粗线条。同一个字体家族，线条越粗，字体的厚重感和力量感越强，视觉冲击力也越大。除了字体家族中的大字重字体，还有很多本身就是为标题（Headline）设计的粗线条的英文字体。这样的字体形式感会更强，适合大字号的展示。在外文海报中经常直接作为主视觉，运用到在与体育运动相关的主题中，突出健壮有力的感觉。此外，粗线条字体也适合作为一种装饰图形铺在海报中背景，与其他元素形成空间对比，呈现出成强烈的视觉冲击。菲律宾设计师Benedicto Cernal III 的系列字体海报。图片来源：https://benedictocernaliii.com/这样的设计方法也常用在表现健身运动或者潮流主题的中文海报中，一方面是粗壮的字体气质符合海报主题，另外也可以与主体人物形成遮挡穿插关系，丰富视觉层次。7 款力量感字体推荐下面为大家推荐 7 款粗线条的英文字体，都是专门为标题设计的，字形坚实有力，适合大字号展示。字体都是免费商用的，字体资源包下载链接在文末或者开头都有，喜欢的小伙伴可以自行下载~TheaterTheatre 是一款字宽较窄的无衬线字体，它具有大胆的风格，易于阅读，非常适合吸引注意力。BerdBerd 是一种基于简单几何形状的大胆而有力的显示字体（Display font）。该字体具有坚实的外观，是海报标题、标志、包装等设计的完美选择。PhycoPhyco 是几何感很强的字体，适用于作为标题、海报、标题、品牌、T 恤衫印刷和其他图形设计。ThunderThunder 是线条极度夸张的无衬线系列字体，有 36 种字形。适合电影海报、标题、专辑插图等任何需要干净的无衬线字体的设计项目。SuperLineSuperLine Font 是一款具有现代感的全大写显示字体，提供常规、斜线条和轮廓三种形式，适合品牌项目、具有视觉冲击力的海报的设计，以及作为 Web 或应用程序的专用字体。Akira ExpandedAkira Expanded 在高度上被压缩，显得更加沉稳，能为设计带来现代而大胆的印象。适合作为网页设计中的标题文本。HancaHanca 的线条并没有那么粗，非常优雅。它包括 Regular、Bold 和 Outline 三种样式，非常适合标题、杂志封面、标志设计等。就是今天的推荐，希望对大家的设计有帮助，更多字体推荐文章可以戳下方文章链接。5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 海报版式太单调？用好这个元素提升99%（附素材下载）大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。阅读文章 > 如果你有关于设计的其他问题，可以加入优设官方设计交流群（入群二维码见文末BANNER），和优设主编、设计总监及其他热爱设计的小伙伴一起探讨学习~ 文件名 如何下载使用 文件大小 提取码 下载来源 力量感字体资源包9Mqfrq 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/design-with-a-sense-of-force
字体 儿童节 点此 我整理了 9 款无版权可商用的儿童节字体，超实用！来拿！马上就是儿童节啦，谁还不是个宝宝呢~好身体的详细介绍看这篇：优设好身体开放下载！优设网出品的第二套免费可商用字体2020年元旦前一天，我们发布了第一套免费可商用字体《优设标题黑》，点此下载：[link https://www.uisdc.com/uisdc-first-free-font]字体一经发布便收获了无数好评，从人民日报、观察者网等官方媒体，到说唱新时代、青春有你等娱乐综艺，以阅读文章 > 想要获取全球最新好用好看的可商用字体？收藏优优教程网的 免费可商用字体频道 ，每周更新不要错过哟。 文件名 如何下载使用 文件大小 提取码 下载来源 儿童节字体74.34MBsvuq 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/childrens-day-font
字体 英文 海报 大家好呀， 我是和你们聊设计的花生~之前和大家分享了纤细的手写英文字体在海报中的运用，他们可以丰富画面层次并烘托氛围，让海报不再沉闷呆板。海报版式太单调？用好这个元素提升99%（附素材下载）大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。阅读文章 > 最近在逛设计灵感网站的时候，我又发现了一类很好看的海报。这些海报设计并不复杂：用精致的英文衬线字体作为主视觉，配合图片元素进行简单排版，就营造出优雅浪漫的感觉。仔细观察的话，会发现这类字体虽有衬线体的特征，但是装饰性更强：笔画的粗细对比非常强烈，衬线形状精致，这使字体现代感很强；细如游丝的笔画还会延展连接，或者一些附加的装饰元素，别致优雅。进一步了解之后，我发现这类装饰字体可以统称为 Display Font，即用于展示的字体。Display Font 适合用大字号展示，如书籍、网页、海报等的大标题。由字体铸造厂 Nikolas Type 制作的 Grand Slang，就是一款非常经典的 Display Font。Grand Slang 有 Roman、Itali 和 B-side 三种字形，设计灵感来源于 20 世纪中期美国非常流行的手写字体，经过数字化重塑后，字体线条更加流畅精致，被广泛运用到杂志和产品包装上。这种 Display Font 气质浪漫优雅，非常适合文艺、典雅或者与女性相关的主题。在设计海报时，无论是作为主视觉使用，还是作为装饰，都能让主题更加突出。我为大家找了 5 款相关的英文字体，个人可用，但不可商用，一起来看看吧~VensfolkEmileaLevausBranchVindea5 款字体都打包好了，下载链接开头及文末，需要的小伙伴可以自取~如果需要更多免费可商用的英文字体，大家上优优教程网的 「免费字体」 里看看，里面收录了很多高质量中英文字体，下载也非常方便。我就在上面找到了「TheNightWatch」和「Branic」2 款装饰性很强的 Display Font，喜欢的小伙伴可以戳下面的链接去下载哦~「TheNightWatch」 https://uiiiuiii.com/software/355400.html「Branic」 https://uiiiuiii.com/software/463870.html以上就是今天的分享，希望对大家日常进行海报设计与有帮助。如果你有关字体设计或者海报设计的其他问题，欢迎在评论区提出交流~ 文件名 如何下载使用 文件大小 提取码 下载来源 5款精致优雅的英文装饰字体 资源包553KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/poster-design-5
数据 图表 字体 上期给大家普及了可视化大屏设计的概况，从硬件、GIS 数据、三维建模、动效设计、图形技术、渲染引擎的技术架构等六个方向的总结。今天给大家分享可视化中 UI 设计相关知识的总结。可视化大屏设计快速入门指南，看这篇就够了！大家好，我是小六。阅读文章 > 可视化大屏 UI上文说到可视化设计是一个综合类交叉学科，同样在大屏 UI 设计中也是一个相对复杂的流程，我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑，推导设计方案。设计前：一定要对用户需求充分分析和理解，要知道大屏的展示场景及设计分辨率，大屏的拼接方法都要有一定的了解，最后是跟开发沟通下实现的工具与方法。设计中：构思布局，可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析，方便自己找参考。颜色上背景深色为主，为了更好地聚焦，数据可以采用亮色，有一定的对比关系，便于业务信息传达。字体上可以采用系统默认字体，数字采用特殊字体包的形式（这块根据实际需求，切记不要照搬）。图表选择恰当的展示形式，同时保证视觉上的统一（分清页面的主次关系，图表的展示切莫设计过度，容易造成抢主体）设计后：再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确，与技术同步沟通下技术的实现性。最后开发完成后，要拿演示 demo 去现场测试，看下整体展示效果，测试输出是否有问题，有无拉伸问题，拼接缝与内容有无穿插，及时与开发进行页面的校验工作，最终才算是设计完成。下面针对可视化设计中布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解。1. 布局通过硬件设备信息可以得到可视化的设计尺寸，基于尺寸新建设计画布后，第一件事就需考虑页面的整体布局。可视化大屏设计从信息布局到数据表达，都需要设计师对业务深入了解后才能用数据助力业务决策。常见的大屏布局：居中结构、左右结构两种常见的布局形式以常规的 16：9 模板为例，下面列举的一些常见的布局形式，供大家参考。居中结构异形超宽拼接屏幕。左右结构布局的原则一定要主次分明，根据业务需求抽取关键性的指标，提取主要信息。可以在纸上大概画一下，然后在软件里具体细化布局。避免次要信息的面积过大，喧宾夺主，影响整体的视觉效果。2. 风格提起可视化大屏，大家都会联想到：科技感、FUI、HUD 这些关键词，可以说可视化大屏跟科技、数据这两词是强关联的，风格上也基本是这一类方向。定义设计风格：一般会基于业务需求场景去定义几个设计关键词，根据关键词去找一些参考图，推导出贴合业务的设计风格。我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例，我们在做设计的时候，只需调整卡片和标题的装饰，就能够展现出不同的设计风格。3. 主视觉主视觉部分大致分为：地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。地球：粒子地球、地图贴图、地球模型。地图：第三方在线地图（百度、高德、腾讯、谷歌）基于地图开放平台进行个性化配置。或者通过地理位置数据建模：如全国和各个省份的轮廓模型。数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps大家好，我是灰色执照。阅读文章 > 智慧城市：GIS 参数化生成简模和重点楼宇定制化建模。行业类：多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。以下图片源于 DATAV主视觉是可视化设计中的一大难点，不光是设计落地的时候也会有需要注意的点，这里建议大家在做之前一定要充分跟开发沟通，确认好技术选型，方便后期输出跟开发更加高效的对接。4. 信息图表图表的设计原则是易理解、可实现，能够准确表达数据意图，给用户传达明确信息。8000 字深度长文！B端数据可视化设计指南（信息图表篇）在如今的工作中（尤其是 B 端）越来越多的会开始出现数据可视化的身影，对于一部分小伙伴来说这个概念是较为陌生的，面对这道无形之中提升的“门槛”我们常常会表现的手足无措。阅读文章 > 以下图片源于网络，如侵删上图通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图，选择对应的数据图表。比较两个及以上变量数据，一是基于分类不同的对比，二是基于时间维度的对比。常见的图表：条形图、柱状图、雷达图、玫瑰图、桑基图等联系两个及以上数据之间的相关性，随时间变化比较关联。常见的图表：散点图、气泡图、多级饼图、热力图、力导向图等。构成指标里的数据都由哪几部分组成、每部分占比如何。常见的图表：饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。分布指标里的数据主要集中在什么范围、表现出怎样的规律，想表达两个数据点之间数量的演变过程。常见的图表：阶梯折线图、面积图、直方图等。基于图表的类型可分为：饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。饼图适合展示分类的占比情况，不适合展示分类过多（超过 9 条数据）或者差别不明显的场景。线形图折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时，不适合使用折线图。同样，当折线的条数过多时不建议将多条线绘制在一张图上。柱状图柱状图提供了分类数据的可视化展示，基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组，例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。混合图折线图和堆叠柱状图的组合图表。同时显示两个坐标轴，用于展示两种不同类型的数据。适用于带有细分分类的累计数据大小以及与之相关的趋势数据，例如在过去十年全国三大产业的具体产值，以及 GDP 增长率。面积图面积图强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。散点图散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合，每个点都有一个变量的值决定水平轴上的位置，另一个变量的值决定垂直轴上的位置。通常用于显示和比较数值，不光可以显示趋势，还能显示数据集群的形状，以及在数据云团中各数据点的关系。极坐标图基于直角坐标系的径向变形（相当于把直角坐标卷起来）。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。关系图可以展示数据的占比情况，还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系。树图树图是一种流行的利用包含关系表达层次化数据的可视化方法，是研究多元目标问题的一般工具。 适合展示数据之间的层级关系，适合 6 条以上数据。桑基图一种特定类型的流程图，用于描述一组值到另一组值的流向，图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移，也帮助我们确定各部分流量在总体中的大概占比情况。漏斗图一种直观表现业务流程中转化情况的分析工具，总是开始于一个 100%的数量，结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析，比如流程流量分析、转化率分析。热力图将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布，适合做数据的预测统计，可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。其他图表词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比，可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小，同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况，不适合展示分类过多或者差别不明显的场景。5. 字体文字是可视化展示中最重要的构成要素之一，可视化大屏设计中字体的运用其实原理跟网页 app 的逻辑基本一致。在字体选择上会基于业务需求选择对应的字体，与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。大屏设计中，中文字体一般会采用浏览器默认字体（微软雅黑、思源黑体、苹方等）页面中标题会采用特殊字体处理，常用的字体有：优设标题黑、时尚中黑简体、方正正中黑体等。英文数字字体推荐：Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。优设标题黑官方下载！优设首款免费可商用中文字体来啦！设计初衷这两年为了给读者更好的阅读体验，优设网/优优网的首屏 Banner 都有专人设计，为了让图片更有设计感和冲击感，每一张图我们都重新设计了字体。阅读文章 > 6. 规范建立规范的主要目的是：保证设计的一致性、提高开发效率和还原度、方便迭代 ，辅助设计和开发更好地完成设计的协作。可视化设计中规范一般会分为：色彩、文字、图表、标题控件等，跟网页端规范同理，这里就不一一赘述了。7. 动效大数据可视化大屏设计少不了动效，动效是可视化重要的组成部分，动效能增加观感体验，凸显关键产品内容、强调功能信息关联，帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主，影响用户阅读，反而弱化了数据的展示。动效的设计原则动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类，用于突出产品核心功能和特点。界面信息按照一定的规律呈现，引导用户的视觉流向。好的大屏设计应该是数据展示模块最好动效不宜过多，要有一定的主次关系变化，例如一个动画表现的视觉强，另一个就表现稍弱化，有强有弱、有主有次节奏才会舒服，同时动效要结合数据变化，考虑极端情况的展示效果，最终输出一套完整的动效方案。结语以上通过布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向总结的基本知识和事项，能帮助我们快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明，后面会陆续更新相关文章，感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议，我们一起前行。数据可视化大屏该如何设计？结合实战案例来教你！什么是数据可视化大屏每年的双十一，天猫都会在狂欢节中直播战绩。阅读文章 > 欢迎关注作者微信公众号：「小六可视化设计」本篇来源：优设网原文地址：https://www.uisdc.com/visual-design-guide-2
效果 字体 颜色 给字体增添立体效果，字体会更有立体感和质感，更有冲击力，视觉效果往往会更吸睛。在字体帮的投稿作品中，我们经常看到此类相关作品，同时，也有很多同学，一直想学习制作这样的效果。今天，我们就做一次总结和分享，使用AI软件，分5种方式，设计出独具一格的立体字！方式1-案例A先看最终效果step1① 在AI中把做好的字形复制两层，第一层填充红色，第二层填充一个从黑到白的渐变并添加一个白色描边：step2② 选中红色字形，在菜单栏选择，效果→3D→凸出和斜角，在面板中把三个轴的参数都设置为0，把透视和凸出厚度都直接调到最大，然后点击确定：然后就得到了下面这样这样的效果：step3③ 再次选中字形，按Ctrl+c，ctrl+f，粘贴一层在前面，再把前面一层的混合模式改成颜色减淡，这样就亮了许多：step4④框选中红色的字形，按ctrl+shift+【，把它置于底层，再把它和黑白渐变的字形水平居中对齐：最终完成，是这样的！当当当当！方式1-案例B先看最终效果step1① 在AI中给做好的字形先添加一个颜色和描边：在菜单栏选择，效果→3D→凹凸和斜角，面板中三个轴的参数，分别是 20、5 、0，凸出厚度为50pt：点击确定后，得到以下效果：step2②全选中字体对其扩展外观，选中顶层字体将其锁定。然后全选下方厚度色块，点击路径查找器中的联集，将其合并且置于底层，更换一个颜色。最后给它添加一个圆头圆角的描边，对齐描边选项为（使描边外侧对齐）：底层部分添加描边后会出现一些参差不齐的部分，需要我们去手动调整一下细节，调整效果如下：调整完细节之后，给顶层灰色字体部分描边更改一个颜色。复制粘贴最底层的字体并且再次置于底层，然后向右下方位移几下，填充一个比背景色略深的颜色作为投影：继续更改一下颜色：最后给字体添加一些装饰，排版一下，搞定！方式2-案例A先看最终效果step1① 在AI中给做好的字形先添加一个颜色：在菜单栏选择，效果→3D→凹凸和斜角，面板中三个轴的参数，分别是 -13、-30、3，凸出厚度为65pt：点击确定，然后就得到了下面这样这样的效果：step2②选中3d效果字进行扩展，扩展之后，全选字体，给字体添加一个白色颜色填充和黑色描边：给顶层字体部分换回原来的颜色：最后给字体添加一些装饰，做出适当排版，搞定！方式2-案例B先看最终效果step1①先准备好字形，随便上一个自己喜欢的颜色：然后在菜单栏在菜单栏选择，效果→3D→凸出和斜角，面板中三个轴的参数分别是 -18、-28、8，凸出厚度为200：点击确定step2② 选中字形，点击 对象→扩展外观，再右击→取消群组：然后框选中字形给它添加一个描边：step3③现在来给它上色，先从字的正面开始，先任意选中一个笔画，选择→相同→填色和描边：这样我们就选中了字的正面，现在把字的填充换成亮一点的颜色：然后是侧面，先在下面画几个自己想要的颜色，然后添加和字一样大小的描边粗细：画完之后我们用吸管工具开始吸，按住shift点击侧面，点后用吸管工具吸下面的黄色：然后同样的方法继续吸：再吸：继续吸：老习惯，做出适当排版，搞定！方式3-案例A先看最终效果step1① 在AI中给做好的字形先添加一个颜色和描边：在菜单栏选择，效果→3D→凹凸和斜角，面板中三个轴的参数，分别是5 、-15、0，凸出厚度为28pt：点击确定，然后就得到了下面这样的效果：step2②全选字体扩展，现在我们来给它上色，选中一个黑色笔画，在菜单栏中点击选择→相同→填充颜色：这样我们就选中了所有的黑色色块，然后给它更换一种颜色。并且添加黑色描边：step3③接下来我们给这两层字体编个组，然后向左下方复制一层。复制的过程中注意对齐关系，将第一层文字贴合隐藏到第二层文字的下方。然后置于底层，如下图所示：然后就得到了这样的效果：我们选中将最上面两层文字按住ctrl+2键对其进行锁定，然后选择最底层的粉色笔画，在菜单栏中点击 选择→相同→填充颜色，给其更改一个颜色：运用上述方法继续向下复制几层更改颜色：最后给字体添加一些装饰，完成！方式3-案例B先看最终效果step1① 把做好的字形填充一个红色：然后在菜单栏选择，效果→3D→凸出和斜角，面板中三个轴的参数，分别是8、8、0，凸出厚度为200：点击确定：step2②选中字形点击菜单栏对象→扩展对象，然后右击取消群组：取消群组之后点击任意一个笔画，在菜单栏中点击 选择→相同→填充颜色：选中之后先ctrl+G群组，然后按住alt向下拖动复制一层：然后框选上面的字，在路径查找器点击合并，如果没有路径查找器面板可以在窗口中找到：step3③合并之后给上面的字填充绿色+描边，下面的填充红色+同样的描边，然后再按住alt向上拖动，复制一层绿色的字，现在一共三层：选中第一层绿色的字，点击填充，然后点击左下角的储色板→图案→基本图形→基本图形-点，然后在基本图形-点面板中选择第一个：这样我们就得到了一个点填充的图案：然后把三层都一起选中，进行左对齐和顶对齐，这样就基本完成了：最后，排版装饰，完工！方式4-案例A先看最终效果step1①把做好的字形填充一个黄色：然后在菜单栏在菜单栏选择，效果→3D→凸出和斜角，在位置这里选择等角-上方，混合步骤改为1，其他参数不动：点击确定之后点击 对象→扩展，然后取消群组：给取消群组后的字体添加一个描边，然后再把侧面有多余竖线的地方合并：step2②合并之后开始上色，按住shift选中顶部的笔画，把填充调成亮一点的颜色：用同样的方法修改侧面的填充：然后，简单排版，完活！方式4-案例B先看最终效果step1① 在AI中对做好的字形进行切割移位，这里使用的是相同角度的切割：选中切割后的字形，先给它填充一个颜色：step2②在菜单栏选择，效果→3D→凹凸和斜角，面板中三个轴的参数，分别是 48、-10、0，凸出厚度为50pt：点击确定，然后就得到了下面这样的效果：切割后的笔画使用3D效果，位置距离上会出现一些偏差，需要我们去手动的调整对齐一下，调整效果如下：step3③选中3d效果字进行扩展，扩展之后，将字体厚度部分填充另一种颜色。（颜色的明暗变化直接参考3D效果所带的明暗变化。）然后给字体整体添加一个1(pt)的黑色描边：选中绿色颜色部分字体，复制一层将其合并。然后置于底层。填充一个比背景色略深的颜色。移动其位置，将其作为投影：给字体添加一个版式，完成！方式5-案例A先看最终效果step1① 在AI中给做好的字形添加一个颜色和描边：选中一个字体复制粘贴一个，然后置于底层移动到合适的位置：将移动后的字体缩小，并且填充一个和原字体描边颜色的相同的颜色：step2②框选两个字体，用工具栏中的混合工具分别点击两个字体，得到如下效果：框选住混合后的字体，按住ALT键然后点击鼠标左键调出混合工具面板。下拉选项，选中指定的距离一栏，参考数值如下。（具体数值根据实际情况调整，数值越小，混合距离越密集。数值越大，混合距离越松散。）点击确定后，得到以下效果：step3③给其他字体添加相同效果，并且填充和底层字体颜色相同的背景色。便得到一个由大到小，由实到虚的一个字体效果：举一反三，很快完成了！方式5-案例B先看最终效果step1①把做好的字复制三层，填充两个镜像渐变加白色描边，和一个纯色加白色描边：step2②框选中前面两个带渐变的字，选择混合工具，依次点击框选中的第一个字和第二个字:选中混合后的字体，再双击混合工具，在面板中选中指定步数，步数15:step3③把混合后的字和没有混合的字进行右对齐，然后选择混合的字，右击→排列→置于底层:最后再用直接选择工具选中末端的字，移动他的位置就完成了:step4④用同样的步骤做出剩下的字:组合在一起:再来个排版，搞定！刘兵克工作室字体教程本篇作者：熊伟、张高驰
字体 趋势 风格 蒙纳公司最近刚刚发布了 2022 字体设计趋势报告，这份报告对于视觉、LOGO、平面、字体/字库设计师有着相当的参考价值。这家早在 1920 就开始制作中文字库的美国公司，有着丰富的字体设计经验，它的子公司甚至持有着包括 Helvetica、Baskerville、Garamond 在内的诸多经典字体的所有权。英文字体设计当然是值得借鉴的在分享这份报告中内容之前，先说两句。由于汉字本身的复杂性和丰富性，中文字体的制作成本、周期相对会长很多，相应的，国内设计行业中，字体的供需关系和国外有着相当大的差异。但是，西文字体本身「相对低廉」的设计成本使得它们在视觉风格的反应速度上，比起中文字体设计更为「敏锐」。西文字体突出的几何特征，又使得它们在LOGO、标题文本的风格化设计上，对于中文世界中视觉设计，有着重要的参考价值。更何况，在很多设计场景之下，英文文本也是必要的存在。这使得蒙纳这一份 2022 设计趋势报告有了超出「什么字体会流行」这个问题以外的设计价值，它所折射出的设计方向包含了多个层面：正在流行的字体设计趋势有哪些世界范围内设计师、艺术家和品牌正在转向哪些视觉风格哪些字体设计技法是正在流行开来的如果在LOGO、标题字风格上没想法，哪些风格技法是当下值得参考的……总之，这份报告的价值还是相当高的，可以在文章开头结尾下载原始的趋势报告，详细阅读。2021 年加粗软衬线字体是赢家在 2021 年的趋势报告中，蒙纳预测了多个风格字体的流行，其中最典型的就是加粗软衬线字体的流行。衬线字体无论是在中文还是在英文中，都相对更加老派，衬线赋予了笔触更高的识别度，而使用加粗软衬线的字体，则在相对复古的笔画中，加入了圆滑活泼的气质，弱化了衬线的尖锐笔锋。而最典型的是比利时 WeWantMore 旗下的啤酒老品牌 Cristal ，借助这种加粗软衬线字体风格的品牌 LOGO 重设计，重新回到了当地啤酒市场的领导地位。实际上，采用同样策略的品牌不止这一个，美国的食品品牌 Core&Rind，瑞典啤酒品牌 PangPang，等等。不过这种加粗软衬线字体的设计趋势，从冒头到流行，前后有接近5年的时间跨度，设计师和品牌都在寻找新趋势，而接下来的 10 个字体设计趋势，就是蒙纳结合过往的趋势和2022 年已经冒头的设计倾向，梳理出来的趋势。10 种 2022 字体设计趋势在蒙纳的这份报告中，总结梳理了10种 2022 年他们观察到的、可能会流行的趋势，这 10 个趋势涉及到 10 种不同的字体风格或设计技巧，下面逐个说说。1、全新的「新艺术运动」式字体新艺术运动（Art Nouveau）时期所诞生的很多字体设计作品当中，字体会使用充满有活力、波浪形和流动的线条来呈现，传统的「新艺术运动」式的字体有这有趣的装饰性细节，精心调整过的笔锋，字符似乎在受力之下扭曲变形。这种区别于古早经典的 Art Nouveau 的风格，如今重生的是「新·新艺术运动风格」，也就是 Neue Nouveau，它在现代技术的加持上，笔触的变化可以更加反复，更为有趣，其中Nick Towers 所在的 We Are Nothing 工作室为Amore 设计的 LOGO 就巧妙地使用了这种风格，而 Mother Design 为Park Lane 酒店所设计的品牌视觉，则赋予了这一酒店品牌独特的气质，从一众竞争对手手中脱颖而出。和早年的「新艺术运动」时代不同，现代的设计在曲线的转折选取上，更加富有戏剧性，在繁复程度上更上一层楼。2、衬线更为苗条纤细的字体如果说去年的加粗软衬线字体是一个极端，那么这种衬线纤细苗条的字体则是另外一个极端。蒙纳为旧金山交响乐团所设计的字体，就采用了贴合这一趋势的设计。蒙纳专门为此设计了一整套涵盖展示性的字体和正文字体的可变字体，这种趋势早在 2020 年就开始有设计师频繁地使用，在 2020 年的澳门设计周上，基于这类字体设计的海报惊艳了全场。3、充满连笔和循环的字体Facebook 更名为 Meta 并且设计了这个无线循环的 LOGO，这几乎是这一技法上升到设计趋势的转折点。虽然同类的 LOGO 和字体设计并不都非常优秀，但是它们共同构成了这一趋势。中国台湾踏板车厂商 oloo 也使用了类似的设计，不过它在字母 l 的连笔设计上似乎并不一致。Pearlfishers 旗下的汽车保险品牌 Loop 也采用了类似的设计：4、多风格混合式的字体设计不同风格的字体混搭排版，所呈现出的多样性和包容性正是最近几年的重要主题。这些海报和字体设计，通常都是想让截然不同的字体在排版中找到某种秩序感，它们的理念核心是崇高的：包容差异。无论是耶鲁大学建筑学院的作品，还是马来西亚的设计师们集体设计出来的字体 Mixup，它们所秉承的理念都大同小异。UntitledMacao 为在地舞蹈艺术节设计视觉的时候，也借助不同的字体来表达差异和包容的概念，在混搭的视觉呈现上很好的做到了统一而富有动感的效果。5、「有机模组式」的字体设计这是一个非常有趣的趋势，在网格的基础上来设计，确保字体的规整，又借助有机的几何图形和线条来制造出风格多变的字体，这种「有机模组」的设计策略创造出的字体突破了传统字体结构的藩篱，整齐而又具有可用性和一致性。这种字体设计风格延续了之前的 Blockheads 风格字体的 8-bits 式的设计方法，但是更为多变：设计师吴清予为后海大鲨鱼主唱付菡首张创作专辑《新世纪人类浪漫主义》设计的封面，其中英文字体使用的就是这种「有机模组」制作出来的。6、波动式的可变字体数字设计在传统平面设计上发展出了更多的可能性，包括字体的各种变化形态，而可变字体则正好是让这种波动式的改变成为了可能性。和 Neue Nouveau 一样，这种设计趋势有很多下属分支。除了赋予字体不同的颜色之外，字体在二维平面上可以拓展，重复，裁剪，或者随着基线扭曲变化，笔触粗细变化等等。它们还可以进入3D的空间中，在空间中变化，呈现出不同的波动形态。7、街头涂鸦风字体严格意义上，这里说的是源于街头涂鸦的 Throw-up 字体，它有着丰满的笔触，在折叠中隐藏着重复和有趣的变化，像气球一般，也充满了复古的气息。这种字体的风格有年轻的气息，特别具有手工的质感。使用这种风格的字体来设计字体的时候，有着极大的操作空间，有着丰富的变化，但是只要整体协调，每种变化可能都是正确答案。8、「油墨陷阱风」字体设计在油墨印刷盛行的年代，由于铅字上油墨不足而导致字体的转折处油墨不足的效果，如今已经成为一种独特的「风格」。在字体的笔画转折处留出间隙，制造出着色不足的效果，能够让字体的笔画之间更加「脆弱」，但是也能让字体更加具有识别度。9、金属质感字体设计如果将 2D 的 Throw-up 字体的笔触替换成为充满金属质感的气球，拓展到 3D 的空间中，那么它将拥有更加豪华，更为诱人，更加富有光泽变化：当然，字体的笔触也可以带有棱角和锐利的边缘，就像这个源自《英雄联盟》的字体设计：10、NFT字体NFT 是房间里的大象。实际上，现在已经有不少设计师开始将字体和字体相关的数字艺术品借助以太坊分发出去了，只是它们如何产生影响力，如何提升价值感，如何在用户当中形成共识，还有待观望和探索。延伸阅读国外专业机构出品！2022年你需要抓住的 8 个UI/UX设计趋势Hi，我是彩云。阅读文章 > 腾讯出品！2022 设计趋势报告：数字内容营销篇背景数字营销是指借助于互联网营销方式，帮助业务方和消费者建立触达渠道，实现业务的商业目标达成。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 Monotype_Type-Trends-Report-202224mgvkm 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/monotype-trends-report-2022
字体 打字机 油墨 大家好我是和你们聊设计的花生~之前给大家推荐了 10 款纤细优雅的英文手写字体，这种字体可以作为在海报设计中作装饰元素，起到平衡版式、丰富画面层次和烘托氛围的作用。海报版式太单调？用好这个元素提升99%（附素材下载）大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。阅读文章 > 今天为大家带来另一种类型的 5 款高质量免费可商用的英文字体——打字机字体（Typewriter Font）。 这种字体具有油墨打印的粗糙质感，适合复古和文艺质朴的主题。打字机字体（Typewriter Font）打字机字体（Typewriter Font）源于 19 世纪，那个年代打字机正流行。相对人手书写誊抄，机械打字机极大地提高了文字输出效率，且机械打印出来的文字比手写更加工整正式，因此被广泛运用，二者也成为了那个时代的标志物。虽然打字机已经在 2012 年正式退出了历史舞台，但通过其打印出来的各种字体却被保留了下来并流传至今。很多设计师都选择将自己喜欢的打字机字体扫描出来，修补设计一番后做成一套字体，这样的字体很好的保留了油墨打印带有的粗糙质感，成为一种特有的风格。打字机及其打印出的字体打字机字体（Typewriter Font）虽然是工业产品的衍生物，但是油墨打印产生的粗糙线条、墨迹扩散晕染、油墨部分缺失的质感却赋予了这种字体深厚的复古气质，给人文艺清雅的感觉，比很多现代字体更具有亲和力。现如今，打字机字体在产品包装、书籍装帧、名片菜单、网站设计等领域都有广泛运用。5 款免费可商用的打字机字体Fzm-Old Typewriter一位国外的设计师偶然发现的一封旧信件，并且非常喜欢上面的字体，于是就将其扫描出来进行了修补设计，形成了一套字体。那位设计师是 Fuzzimo，字体名叫 Fzm-Old Typewriter。这款没有明显的油墨扩散，笔画斑驳磨损感较明显，字体非常干净有秩序，很适合文艺清新的主题。X TypewriterX Typewriter 是全大写的等宽字体，给人的感觉更加正式规整。有 regular 和 bold 两种字型。Radio NewsmanRadio Newsman 是一款非常纯正的打印机字体，具有明显的油墨扩散效果，所以不太适合小字号长文本排版，更适合大字号展示。My Underwood Font这套字体是设计师根据自己的 Underwood 便携式打字机的字体设计的。笔画连接处的油墨晕染比较明显，但整体的效果还是非常不错，非常自然。Special EliteSpecial Elite 模仿的是 Smith Corona Special Elite Type No NR6 和 Remington Noiseless 打字机型号。Special Elite 字体的墨迹扩散效果比较轻微，笔画清晰规整，可读性极佳，适合长文本排版。以上就是今天为大家推荐的 5 款带有复古气息的打字机字体，字体安装包见文章开头和文末的下载链接。如果你需要其他风格的字体，也可以在评论区提出，说不定下一期就会分享相关的资源。评论还有机会获得主编送出的书籍，赶快试试吧~ 文件名 如何下载使用 文件大小 提取码 下载来源 5款复古打印机字体安装包406 KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/5-typewriter-font
语言 字体 信息 导语 | 本文主要面向设计师们，文章从界面设计的角度介绍了在出海产品中，多语言设计的相关原则及要点，希望可以帮助刚接触或正在做出海产品的设计同学，建立起对多语言设计的初步认识。背景介绍1. 国际化与本地化在认识出海产品时，我们常常会听到“国际化”和“本地化”两个概念。在信息技术领域的官方定义下，对产品进行国际化（i18n）与本地化（L10n）处理的含义是，通过修改软件，使之能适应目标市场的语言、地区差异以及技术需要。两者概念区别有些微妙，我们或许可以用更简单的说法来解释——“国际化”意味着兼容，即用一套产品方案，来面对不同地区的用户，这叫实现产品的“国际化”。而“本地化”意味着定制，需要根据不同地区特性，进行分别处理，这叫“本地化”处理。两者的共同实现，才能更好地服务拥有不同文化背景的用户们。产品实现国际化与本地化的基本范围包括但不限于以下内容：2. 为什么要做多语言设计由上述背景可知，一个出海产品想要达成良好的国际化与本地化效果，需要整个产品研发团队从内容、设计、技术多个层面进行全面考量。对于设计环节而言，多语言设计是最需要关注的重点之一。做好多语言设计，能让产品拥有最基本的、适应不同地区的潜力——也为本地化内容的翻译呈现，提供良好的环境。国内设计师更常接触单一中文产品，但用中文产品设计的习惯来做出海产品，很容易“踩坑”。这与出海产品和国内产品的研发流程不同有关。我们团队在实际的项目经历中，发现具有一定规模的平台型产品，不太可能在设计初期拿到各语种的真实文案。因此在出海产品的实现过程中，会在中间阶段多出翻译、内容校验等阶段。因此，对于设计同学而言，如何做好多语言设计，以预知落地问题并提前规避，是一项重要挑战。认识语言差异全球文化多元各异，最直观的体现便是在语言和文字上。如何用一套设计方案来兼容存在各种各样差异的多国语言呢？这正是多语言设计的难点所在。首先，我们需要认识各类语言间存在哪些主要差异。1. 字符形态的差异字符是语句的基本构成单位。不同的文化发展背景下诞生出了形态各异的字符样式。而部分语言会共用一套字符体系。常见的字符体系有如下几种类型。从图形的角度分析这些字符的形态，不难发现，像拉丁字母以及西里尔字母，字符笔划构成相对简单，且笔划多为平直线条或是规整的弧线。而像阿拉伯字母、泰文等字符，组成相对复杂，笔划线条特殊的曲度较多。这是非常关键的字符形态差异，它将会影响后续我们对字体的选择。2. 内容长度的差异在不同语言下，同样含义的内容进行翻译后，得到的文本长度可能会有较大的差异。如何通过设计兼容这些信息，正是做多语言产品最大的难点所在。因此，在多语言设计阶段，非常建议基于英语进行设计(善用谷歌翻译)，以便于更直观地对信息兼容进行处理和判断。这里需要提醒的是，不建议大家用最习惯的中文进行占位，因为中文可以精炼文字，信息本身较短，很容易产生多语言适配的“盲区”。如果设计想要预知信息翻译后的长度，以便制定布局策略，可以用 google 文档自带的翻译函数 fx=GOOGLETRANSLATE(文本，“源语言”，“目标语言”) ，以及字符统计函数 fx=LEN(文本) ，快速实现多种语言的批量翻译和字符数计算，为设计提供初步参考。*资料 1: 我个人使用 google 文档创建的简易小工具，供参考（梯子访问）： https://docs.google.com/spreadsheets*资料 2: 全球语言简码表： https://www.zhudc.com/browser/201623. 词汇分界的差异语言还分为带有词汇分界、和不带有词汇分界两种情况。带有词汇分界的语言有英语、俄语等，分界意味着他们的语句以单词为最小单位。而中文、泰语等语言是没有分界的，一个语句中除了标点符号分隔，字符都是相连的。这也是影响段落布局的一个重要因素。4. 阅读顺序的差异阅读顺序分为 LTR (Left to Right)和 RTL (Right to Left)两种。我们常见的绝大部分语言都是从左到右的阅读顺序，而使用特殊右至左顺序的，则以阿拉伯语为代表。不同的阅读顺序，决定了布局时信息对齐、元素排布、甚至图标图示，都可能存在不同的规则。综上，在正式启动设计以前，建议设计同学向业务方了解清楚，平台会支持哪些语言。明确语言类型，了解以上差异后，才能更好地制定设计方案。核心原则：可读性与包容性根据对于不同语言差异的认识，以及我们团队在项目实施过程中的经验，我们可以将多语言设计的核心原则总结为可读性与包容性两大原则。可读性包含(1)字符可读性 (2)内容可读性；包容性包含(1)布局包容性 (2)认知包容性。1. 可读性原则字符可读性字符可读性，主要针对的是在应用风格化字体时，需考虑到在不同语言下的显示效果。部分产品因为品牌调性或美术风格的需要，会引用带有特殊风格个性的字体。而我们发现，市面上大部分风格化字体都是基于拉丁字母设计的。而那些形态特殊的字符，可能会比较难找到同种风格的风格化字体。即便有，它们的可读性受字体影响的风险会更高，因此检验字符可读性尤为必要。例：在一次运营活动中，我们将英语版本转为印地语版本时，两种语言都使用了名为 Teko 的风格化字体。当地合作的印度伙伴看到落地页面后，向我们反馈，这种字体导致他们的语言可读性下降许多。所以当产品覆盖的语言类型特别多时，如果要一一对应特殊语言去找风格化字体，无论是设计成本、或是页面加载成本都会特别高。这种情况下，可以适当考虑放弃部分语言的风格化字体效果，转用基础字体，优先保证字符的可读性。内容可读性内容可读性，指页面容纳信息时，是否给用户传递出了足够多的内容，让用户能达到最基本的信息理解，而不是靠猜。因此我们要针对多语言内容的长度特性，留有一定信息空间——尤其是信息使用了缩略处理时，需谨慎地确认露出的部分是否足以被用户理解。2. 包容性原则布局包容性布局包容性，即需要设计同学在元素、组件、模块等设计中，要进行弹性的设计考量，通过合理的布局设置，更好地兼容极多或极少内容的情况。布局的包容性对于平台型产品尤为重要。如果是一次性产出的、纯展示型产品，细致地根据实际内容检查调整适配效果并不需要太大功夫。但如果是需要长期维护、内容持续变更的平台型产品，一个高度包容性的布局，才能帮助产品用有限的成本达成较好的落地效果。例：商品货架卡片是一种典型的弹性空间，没有固定信息，因此信息布局以竖排为主，保证横向空间足够，不增加换行难度。输出时也要兼顾不同信息丰富度下的规则。字体的选择同样会影响布局包容性。当你选择了一个默认字符尺寸太超乎寻常的字体（过扁、过宽）时，在产品存在多语言多字体的情况下，会发现即便是同样的文本参数，单个字符宽度却相差很大。这会使得文本展示空间变得更不可控，导致适配风险增大。认知包容性认知包容性，是指设计时需要考虑到不同文化背景下用户，对于某些元素、符号的认知是否相通。例如，当产品出现需要单独使用图标来指代信息的情况时，需尽量保证选用的图标具有全球性的大众共识，并且不能产生歧义。当然，若非极端情况（如文字信息实在是兼容不下），大部分场景下还是建议尽量将图标配合文字使用，帮助不同语言、不同互联网认知水平的用户更好地理解并使用产品。设计实施要点接下来，我们将从基础样式、通用布局、组件使用和图标设计四个维度，介绍多语言设计时需要关注的问题要点，以及相关的处理建议。1. 基础样式字阶在同样的文字参数下，不同语言字符的体积视觉感受确实会略有不同。但遇到体量较为复杂庞大的产品，建议使用同一套字阶应对，尽可能降低设计成本和维护成本。可以基于本平台用户群体量级最大的语言为准来制定。行高为了让文本能更弹性的适应场景需要，建议文字默认带有行高，不按区分单行/多行情况，也便于字体样式的统一管理。2. 通用布局关注文本空间预留文本空间普遍情况下，多语言场景下文本长度会大于中文场景的文本长度，因此需要考虑预留更多文本空间，以保证信息露出的有效性。过小的露出空间（如只能露出一个单词）会让用户无法理解内容，产生困惑。选择排列方式在多语言设计中，排列方式的选择，需要视功能的实际场景确定。两类信息在同一水平下横排，就必然会需要分割有限的宽度空间，这种情况下如果文本超长需要换行时，信息可能会显得略微杂乱；但它的好处在于节约纵向空间，在信息不长或者横行空间较大的情况下仍可以使用。如果使用上下排列的方式，文本容纳的空间也将会更大，换行时的显示效果会相对更为可控。当图标与文本内容组合出现时，同样也需要考虑合适的排列方式。竖排更强调图标，可以应用在强调状态的场景下，如结果页；而横排时图标与文本同级，图标做辅助的说明作用，更适用于轻提示、列表等场景。但值得注意的是，在多个图标及文字并存的场景下，多语言设计布局会更常用横排的方式来兼容信息，例如快捷操作，或是一些入口场景。横排更能保证文字说明的露出效率，以及提升样式布局的规整度，并且也更方便内容条目的拓展。关注段落空间注意最小段落宽度当页面的横行分割较多时，单个段落宽度就会变得较小。此时在某些语言场景下容易出现单个单词换行，甚至宽度都容纳不下一个极长的单词情况。因此，在多语言场景下，需要保证段落有一定的宽度容纳信息。移动端小屏幕建议谨慎使用一行三个的布局方式。“加大”有限宽度排版时也可以通过改变排列方式加大段落宽度，只是这样会导致同样高度下可展示的卡片数量变少，信息密度降低，因此需要根据实际情况取舍；如果实在改变不了段落宽度，还可以通过缩小字号或字间距，变相加大宽度，尽可能容纳多一些信息。关注信息对齐常用左对齐如前文所说，不同语言在书面上的最小单位不同，为了更好的兼容各种情况，建议多用左对齐。因为像英语这种按单词分界的语言，很难保证每行内容宽度一致，并且中文常用的两端对齐的效果也并不能适用。多语言场景段落的左对齐相比居中对齐，更能带给用户较好的阅读体验。同类信息水平对齐当一个卡片模块中有多类信息并存时，需要关注重要信息的水平对齐，确保阅读动线的流畅，便于用户获取信息。限定高度内使用下对齐下对齐的使用，能帮助设计师在不改变限定空间尺寸的情况下兼容延展更多信息。例如大图卡片空间内的文本。下对齐之所以优于上对齐，是因为它能避免信息不足时，可能会浮在空中的情况。特殊的“右对齐”——阿语规则阿拉伯语界面需要根据一定的规则来满足这个地区用户从右至左阅读的需求，但其中也存在一些并不需要用 RTL 做处理的信息。设计阶段如果想要快速产出 RTL 界面，也可以应用设计软件中一些现有的插件资源来实现。协作中也可以将阿语规则与开发同学优先对齐，由开发实现后，最后再进行细节的检查。3. 组件使用标签组件在中文场景下，标签通常精简为 2-4 字。而在英语这类带有分界的语言下，通常建议标签内最多不超过两个单词，或是使用数字和符号代替，如 20%off 或 -20% 代替 20 percent off。如果一些辅助描述信息，必须展示 3 个及以上单词才能说清楚，建议以文本形式放到界面中，而不是使用标签组件，以保证信息的可拓展性。例：亚马逊的标签一般情况下只会承载促销说明用的短词组。而对商品的更多信息补充，如配送范围、官方认证等，会直接用文本的形式补充在商品列表中。按钮组件竖排的按钮组合相比横排按钮，能兼容更多信息，因此在多语言产品下的使用会更为广泛。非均等场景的按钮组合，需要限制图标下文字长度；如果为可能分界的语言，建议使用单个单词，否则建议更换成其他按钮组合样式。通知栏组件在移动端的多语言产品中，通知栏组件一行容纳不下全部文案的情况非常常见。在文本超出通知栏宽度的情况下，需要灵活使用信息横向滚动、或是带操作的方式，允许用户进入下一级或配合气泡、弹窗，确保用户有办法能获知完整内容。选项卡组件当选项卡选项大于等于三个时，建议使用等间距的选项设计，而不是均分宽度的选项设计，以避免文案溢出，同时显示信息更均匀紧凑。4. 图标设计要点选用有大众共识的图形图形需要满足认知包容性原则，可以多去观察成熟的全球性产品，何时会使用到纯图标的场景，又使用了什么样的图标。基础图形如代表播放的三角形、代表喜欢的爱心型，都是比较具有大众共识的。另外一些本身模拟了常见物品的图标，也不容易出错，如代表录制的摄像机、代表收藏的标签等。避免出现特定指代元素在图标设计中，可能会使用到一些特定的信息作为装饰，如文字或者是符号。如果这些符号带有特定区域，如美元的货币符号、或是赞的汉字，在全球性多地区的产品图标中必须谨慎使用。建议用更通用的元素代替，避免产生歧义。RTL 场景图标规则RTL 场景中，并非所有图标都需要镜像。例如暗示真实物体时，图标可以保持一致。需要镜像的常为带有方向含义的图标。有个比较特殊的场景值得说明：在内容播放场景中，播放按钮以及进度指示反应的是播放的方向，因此保持从左至右即可；而音量值的大小控制，是需要镜像的。更详细的镜像规则可参考： https://material.io/design/usability/bidirectionality.html落地还原在完成设计输出后，如何与开发同学配合落地，尽量在真实文案上线前打好适配基础，也是设计师需要投入精力关注的。1. 设定规则设定适配规则在设计方案交付到开发时，需要预先明确一些规则与开发同学对齐。例如在非通栏的容器中，需要向开发同学示意信息的极限宽度和内边距，并且明确超出该范围的情况下，应直接省略、滚动显示、还是换行处理。如省略处理，需要检查省略号前展示的内容是否可被用户理解；如滚动显示处理，需要评估是否会过于吸引视线，打扰到用户；如换行处理，需要进一步明确极限行数，保证容器高度可控。在交付设计稿前，设计师应有意识地在设计稿中尽可能展示极限情况，再配合沟通，更能提升双方协作效率。设定字体应用规则为了呈现效果等合理性，字体选择也必须进行更详尽的适配考量。以下内容主要介绍在网页产品中，可以如何制定字体选择和应用的规则。我们在项目设计的过程中进行过一次对游戏类网站中字体应用的研究，总结出一些规律：即多数网页产品通常会定义风格化字体和基础字体两种。风格化字体以凸显品牌调性/美术个性为目标，常应用于标题；而基础字体则应用于所有正文或控件当中。基础字体的选择一般从网页默认可引用的字体库中选择即可。常用的系统字体有 Arial 或者 Helvetica 等。如果在字体声明中没有特别列举某些语言的字体，浏览器在识别时会自动转为提供对应语言的常用系统默认字体，如 Thonburi（泰语）、Geeza Pro（阿语），因此不需要针对所有语言逐一做字体声明。2. 验收效果走查适配效果在走查还原效果时，建议多运用代码走查，在 html 结构中增加文本或是增加模块，检验开发同学是否有进行响应适配情况的处理，处理效果是否符合预期。检查字体显示情况着重检查 font-family 的规则，是否符合不同语言下的效果预期。其中需要注意，如果需要特别声明中文字体，务必把英文基础字体最前置，以防中文字体包中的字母样式覆盖英语场景。另外也需要检查你选择的网页系统字体，在不同语言下实际应用中的效果是否符合预期。在阿拉伯语的网页下，tohoma 覆盖后文字会看起来特别粗，暂不能特别明确是否是字体问题，但因为存在风险，我们将不会选择 tahoma 为第一基础字体，也不会列进字体声明里。结语文字是一个产品触达用户的桥梁，而出海产品的多语言适配，需要产品、设计、开发、翻译同学多方通力配合，才能尽可能达成较好的效果，呈现给各地区用户使用。本文主要以设计师视角介绍了多语言适配设计过程中需关注的要点和建议，希望可以帮助设计师规避设计产出到落地过程中可能存在的“坑”，更好的与各侧协作。但多语言适配涉及到的细节之多，在某些场景下并非只有唯一解，需要整个团队一起，具体问题具体分析，才能打磨出更友好的出海产品。如对本文有任何问题建议，欢迎指正、补充或讨论~产品出海如何做好设计？来看这篇近6000字的总结国内互联网近几年发展迅速，在很多方面都超过了一些其他国家互联网的发展阶段。阅读文章 > 欢迎关注作者「腾讯CDC体验设计」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/multi-language-design-guide
字体 西文 字形 大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？毕竟现在社会整体的字体版权意识越来越强了，使用字体时必须要多注意这方面的问题。提起免费可商用的中文字体，想必大家都如数家珍，但是西文字体呢？设计师所熟知的 Helvetica、DIN、Optima、Sofia 等经典的西文字体商用都是需要购买版权的，虽然设计中偶尔也可以用免费的中文字体来替代，但面对必要的英文排版时，专业的西文字体确实不必可少。今天就给大家推荐 5 款经典西文字体的免费可商用替代字体，它们的字体风格与原版相似，字形齐全，质量也非常高，用来替代 Helvetica、DIN 这样经典的西文字体进行排版设计完全没有问题。Helvetica 和 Roboto提到最知名最被广泛运用的西文字体，非 Helvetica 莫属了。这款 1957 年诞生的字体被认为是现代主义设计的典范，在现代排版中随处可见，美国航空、BMW、Fendi、英特尔、无印良品等企业 LOGO 上的字体用的就是它。但 Helvetica 商用是需要授权的，且对使用范围有严格限制。想要得到与 Helvetica 相同的排版效果，我们可以选择另一款替代字体 Roboto。Roboto 也是一款具有现代感的无衬线字体，字形风格非常接近 Helvetica。一共有 12 款字形，免费可商用。Optima 和 MarcellusOptima 是一款有着优美曲线的无衬线体，在欧洲著名的专业字体设计公司 fontshop 公布的世界上 100 个最佳字体中排名第 11。Optima 的特点在于横竖笔画的粗细并不一致，横比竖要细一些，因此字体看起来兼具优雅、简练的风格，雅诗兰黛和约翰麦凯恩的总统竞选团队都使用过它。Optima 的字体版权属于 linotype 公司，商用需要购买正版字体。与 Optima 同样有优雅线条的 Marcellus 是不错代替选择，非常适合表现典雅永恒的主题。Marcellus 只有一款字形，同系列的还有 Marcellus SC（小型大写字母），都是免费可商用的。Proxima Nova 和 MontserratProxima Nova 也是一款应用范围极广的字体，虽然它是 2005 年才正式发行的，但是早在 1981 年字体的草稿就被设计出出来了，中间几经调整，最终以的 Proxima Nova 为准确定下来。该字体目前在历史最佳销售字体上排第 7 位，版权归 Mark Simonson 所有，单款字形售价 29 美元，且限制使用范围。Montserrat 是一款气质与 Proxima Nova 十分接近的无衬线字体，字体质量非常高，在设计中有广泛运用。字形比 Proxima Nova 稍宽，气质更沉稳，非常适合海报排版。Montserrat 字体家族一共有 18 款字形，全部免费可商用。Sofia Pro 和 PoppinsSofia Pro 是一款兼具几何现特主义特性和圆润和谐的曲线的专业字体，发行于 2009 年，在 2012 年进行过一次完整的优化，备受专业字体人士称赞。它的特点的是比同级别的其他字体有更高的 X 高度，使字体缩小后仍有很强的可读性，非常适合手机屏、名片这样的在小尺寸媒介。Sofia Pro 版权归 Mostardesign 所有，商用须购买正版。Poppins 的字母的 X 高度也相当高,使得 Poppins 文字可读性可以匹敌 Sofia Pro，同样适用于小尺寸的媒介。Poppins 一共有 18 款字形，都是免费可商用的。DIN 和 BarlowDIN 其实是德国标准协会 Deutsches Institut für Normung 的首字母缩写，这个协会初期旨在为德国的机械化生产定制标准，后来拓展到德国的各行各业甚至影响了欧洲其他国家。DIN 字体就是在这个背景下被创造的，它字体风格简洁理性，几何感极强，通过最简单直白的方式来传递信息，最初是用作德国铁路和交通标志专用字体。 后来发展形成了多种版本，沿用至今，是一款非常经典的字体。目前还在被广泛使用的是 FF DIN 和 DIN NEXT，商用都需购买正版。Barlow 则是由是美国旧金山的设计师 Jeremy Tribby 领导设计的一款字体，设计灵感来源于加利福尼亚州的汽车牌照、高速公路标志上的字体，这点与 DIN 有异曲同工之妙。Barlow 的字体风格也非常简洁理性，替代 DIN 字体完全没有问题。它一共有 18 款字形，都是免费可商用的。以上就是为大家推荐的 5 款免费可商用西文字体，设计师用来应对英文排版设计完全没有问题。5 款字体的下载链接附在开头和结尾了，有需要的小伙伴可自行下载，觉得有帮助的话别忘了点赞收藏呀~参考资料：https://vector.cx/popular-premium-fonts-and-their-10-most-free-alternative/更多西文字体知识灰昼的字体库！10款常用的经典基础英文字体推荐（已打包）@灰昼Noir ：字体并非越多越好，有些新同学盲目的安装了上千种字体，然而并没有什么卵用。阅读文章 > 快收藏！15 款 UI 设计常用的等宽英文字体当界面按钮中字体样式发生变化时，整个界面也会发生很大的变化，甚至可以说是杂乱。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 5款免费可商用英文字体5.1MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/commercially-available-english-font
字体 西文 灵感 大家好我是花生~ 今天和大家分享个字体设计灵感网站——Fonts In Use。学过字体设计的朋友都知道，中文字体设计中有一种方法叫做「西文中用」，即借用具有特色的西文字体，将其笔画拆解出来，用作中文字体的新笔画进行字体设计。西文字体设计历史悠久，优质出色的西文字体不计其数，是非常好的设计灵感来源。如果对西文字体笔画化用得当，能取得相当惊艳的设计效果，很多优秀的字体设计师也非常推荐的这种设计方法。更多字体设计方法：实战篇！超多案例帮你掌握字体设计36计（下）在《实战篇！阅读文章 > 既然「西文中用」的设计方法这么好用，那么去哪里找那些有特色的的西文字体呢？这就是我今天给大家推荐 Fonts In UseE 原因。Fonts In Use 网站内包含了种类丰富且优质有特色的西文字体，是一个非常好的字体设计灵感网站。FONTS IN USEFonts In Use 是一个按可以按主题、媒介、行业以及各种排版风格和技术进行字体索引的公益性网站，由 Sam Berlow、Nick Sherman 和 Stephen Coles 于 2010 年创立，目的是为了记录字体排版印刷设计的发展，并提升相关行业的印刷素养和欣赏能力。现在网站有 2 万多种字体印刷排版参考，是由运营者和用户共同上传发布的。对想要用「西文中用」方法来进行字体设计的设计师来说，Fonts In Use 的以下功能可以帮助我们快速选择合适的字体。按主题风格进行字体筛选借用西文字体笔画进行字体设计的时候，需要注意的一点就是所选字体的风格一定要符合我们的设计主题，否则就算最后设计出来的效果不错，也会因为风格不搭而无法适用。比如如果要设计的中文字体是有关美妆的，在选用英文字体作为灵感时就不能选择线条很粗或者有粗壮衬线的西文字体，因为这样的字体哪怕质量很高，最后化用的结果肯定也不会符合美妆优雅潮流的气质。Waters Titling Pro 这种罗马碑文体就很适合用来设计具有历史厚重感的中文字体FONTS IN USE 站内有按主题/行业进行字体筛选的功能，分类包含艺术、服装、运动、电影、儿童、食品等各个方面。设计师如果想找某种特定主题的字体设计灵感，可以直接选择对应的类别，这样找灵感的速度和准确度都会提高很多。Fonts In Use 内有关服装的字体推荐Fonts In Use 内有关食品的字体推荐便捷的字体下载渠道Fonts In Use 会将一张图片上的所有字体信息都列出来，包括名称、设计师、下载渠道等。如果你看中了其中一款字体，点击图片右侧的字体列表，就能跳转到对应的字体详情页，在那边你可以找到字体的下载渠道。Fonts In Use 站内字体下载渠道总结Fonts In Use 站内提供 2 万多款涉及不同行业领域的字体印刷排版的参考，类型全面丰富，且提供细致的筛选功能和便捷的下载渠道，不仅适合用作寻找字体设计灵感，对不同主题排版选择合适的西文字体也有极高的参考价值。「FONTS IN USE 官网」 https://fontsinuse.com/更多字体设计的干货知识：https://www.uisdc.com/zt/font-design7个技巧让你的字体设计拉满细节感！前不久一个朋友把自己设计的字体发我看，说总感觉差点意思，但又不知道问题出在哪里，就觉得没有网上看到的字体那么专业，我看了一下，发现主要问题是没有细节、缺少变化，所以显得有点粗糙。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/fonts-in-use
字体 粗细 斜体 Roboto 是 Google 在 2011 年为 Android 4.0 开发的无衬线字体（Sans-Serif）家族，2014 年为新的 Android 5.0 重新设计，后来也成为 Google 旗下服务 Google Play、YouTube、Google 地图和 Google 图片搜寻的默认字体。Roboto 字体使用 Apache 授权条款释出，整个字体系列包含六种字重粗细：Thin、Light、Regular、Medium、Bold、Black 和相对应的斜体，任何人都可以从 Google Fonts 网站免费下载。近期 Google 宣布推出一款名为「Roboto Serif」的衬线字体（Serif），让任何屏幕尺寸、任何格式的阅读更舒适、容易，Roboto Serif 加入使 Roboto 字体系列更完整（这个字体系列里还有 Mono、Slab 和 Condensed 衍生字体），这款字体开放源码、可从 Google Fonts 免费下载。值得注意的是 Roboto Serif 并不是从原有的 Roboto（无衬线）字体修改而来，而是将每个字母从头开始绘制，既有考虑到 Roboto 但又是一项全新的原创设计。此外，Roboto Serif 还可依照不同的屏幕大小动态调整粗细、宽度，藉此提供更好的显示及阅读效果。Roboto Serif 收录九种字重粗细：Thin、Extra-light、Light、Regular、Medium、Semi-bold、Bold、Extra-bold 和 Black，也有对应的斜体（Italic）可用，如果对这个字体有兴趣，Google 提供「Getting Comfortable with Roboto Serif」电子书详细介绍 Roboto Serif 特色和显示样式。Roboto Serif网站链接：https://fonts.google.com/specimen/Roboto+Serif使用教学开启 Google Fonts 的 Roboto Serif 字体页面，从样式可以看到不同的字重粗细、斜体，从上方调整要预览的文字实例、文字大小。如果要下载字体只要点选右上角「Download family」就能完整取得 Roboto Serif 字体系列。由于部分同学无法搭梯子，优设网已经下载好放在开头和文末的附件了，大家也可以直接下载附件。下载后解压缩、执行字体文件就能将 Roboto Serif 安装到系统上，无论是 Windows、Mac 或是 Linux 都能安装及使用这些字体。想要测试一下 Roboto Serif 不同字重、线条粗细、宽度或斜体实际显示样式，Google Fonts 网站最下方就有测试功能，也能查看范例字符（Sample glyphs）。值得一试的三个理由：Google 宣布推出 Roboto Serif 免费英文衬线字体在任何屏幕尺寸、任何格式上都提供更舒适、易于阅读的体验Roboto Serif 收录九种字重粗细，也有对应的斜体可以使用Fontworks和谷歌合作啦！免费开放8款开放日本字体下载Fontworks Inc.（フォントワークス株式会社）是一家成立于 1993 年的日本字体公司，旗下有知名的筑紫系列、UD 字体系列和 Klee（クレー）字体，经常出现在广告的标题，看起来很有气质，筑紫系列和 Klee 也被内建于 Mac 系统。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 Roboto Serif 字体包56M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/roboto-serif
芫荽 字型 字体 去年初 Fontworks 和 Google Fonts 合作释出八款开放原始码免费字型下载，包括 RocknRoll、DotGothic16、Rampart、Reggae、Stick、Klee（标准体和中粗体）和 Train，其中 Klee（クレー）字型「原本内建于 macOS，因其兼具楷体与仿宋的笔调、高易读性与温暖外形，广受中文使用者喜好。」（ButTaiwan / GitHub），但因为 Klee 是日文字型，在繁体中文使用容易遇到缺字或写法不同等问题。早在 Fontworks 将字型以开源授权释出前网络就已经有其他项目为 Klee 补上中文字，例如简体中文版「LXGW WenKai / 霞鹜文楷」、将日文新字形汉字替换为传统字形「Klee One 繁体中文版」都是基于 Klee 进行增补或调整以符合中文使用习惯。近期台湾字体开发者、字嗨发起人 But Ko 基于 Fontworks Klee One 改作，推出「芫荽」（Iansui）免费开放源码的繁体中文字型项目，也是第一套开源硬笔楷书字型。「芫荽」在 Big5 范围收录约 7,800 字，并没有包含 Big5 完整的 13,560 字，也依繁体中文习惯将全角标点符号置中，调整括号引号类标点符号比日文原形更向中靠拢。如果有兴趣的朋友可以前往「芫荽」GitHub 项目页面下载字型文件。芫荽网站链接：https://github.com/ButTaiwan/iansui使用教学开启「芫荽」（Iansui）的 GitHub 项目页面，从档案列表找到 .ttf 字型文件，写这篇文章时文件名为 Iansui0.93-Regular.ttf，点选文件后再按下右侧「Download」即可下载文件。下载后点选字体 .ttf 文件进行字体安装，我是使用 macOS 开启后会打开「字体簿」应用程序，除了预览以外点选「安装字体」就能将它安装到操作系统、在其他的应用程序使用。参考下图就是使用「芫荽」字型呈现的效果，非常清晰、带有力道的笔画线条，彷佛是铅笔书写效果，而且看起来非常优雅，适合各种使用情境，经过「芫荽」项目保留的 Klee 原始字符 3000 字，有超过 4000 字经过修改调整，补充超过 1500 字，解决原字体使用在中文会出现的缺字或显示问题。值得一试的三个理由：芫荽（Iansui）是基于 Klee One 改作而衍生出的繁体中文字体在 Big5 范围收录约 7,800 字，尽可能调整字形以贴近教育部标准字体开放源码，任何人可以无偿使用此字体，包含商用Fontworks和谷歌合作啦！免费开放8款开放日本字体下载Fontworks Inc.（フォントワークス株式会社）是一家成立于 1993 年的日本字体公司，旗下有知名的筑紫系列、UD 字体系列和 Klee（クレー）字体，经常出现在广告的标题，看起来很有气质，筑紫系列和 Klee 也被内建于 Mac 系统。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 芫荽字体源文件7.79M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/iansui
字体 小技巧 编者按 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 7 个实用性很强的 UI 效果提升小技巧，是系列文章的九篇，原文最早发布于 marcandrew.me 。在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 7 条实用的建议，一起来看看吧！1、牢记最关键的「接近原则」并用好它在以上的两个设计范例当中， 一个元素之间的间距太远，另一个元素之间间距则相对合理。「接近原则」可能是众多设计原则当中最容易忽略的一个，但是它可以帮助你为用户制作出视觉排版逻辑更加清晰、更强大的 UI 界面。根据人类的认知习惯，将相关的设计元素放在一起，我们会更容易认为它们之间有关联性。这种距离昭示了元素与元素之间的关系，所以在「接近原则」的加持之下，用户在使用网站和 APP 时，可以更加轻松地理解和认知。时常使用，经常使用，习惯使用「接近原则」来审视设计，是确确实实能让设计更好。用一篇超全面的干货，帮你完全掌握「接近原则」知识点@研习设K先生 ：不知道你有没有想过这样一个问题，设计真的是只凭借个人喜好，就能随意发挥的工作吗？阅读文章 > 2、始终在视觉上将 UI 元素的功能区分开在以上的两个设计示例当中， 一个按钮和标识看起来过于相似，另一个则更容易区分彼此的功能性。UI 中的基本元素，视觉特征和实际功能应该是对应的，不能在视觉上混淆才行，这是保持整体用户体验的一致可用的重要前提。以按钮（Buttons） 和通知（Notifications）为例，在大多数情况下，按钮在视觉功能上都要更加优先，因此，在外观的视觉吸引力上应该是最突出对劲儿，同时，应该在外观轮廓上和约定俗成的造型保持一致，让它可以和其他组件（例如通知）区分开来，方便用户识别。3、根据需求选用高质量的 衬线/无衬线字体上图是一组规整和且具有良好泛用性的无衬线字体，内容为「力量强大」。在APP 和网站当中，可以选用的英文字体要比中文字体多太多。而在泛用性上，非衬线字体又比衬线字体更强一点，它们既可以作为标题又可以用于正文，甚至可以用于辅助性的功能性的元素当中。相对而言，衬线字体细节更多，但是泛用性相对而言没有无衬线字体那么强，但是在合适的场合选用漂亮的衬线字体能够让文本的可读性适度提升，并且在阅读的体验感上再提升一下，尤其是在展示性大标题和长篇幅的正文当中。现在你可以在 Fonts.adobe.com 上找到上图中所推荐的诸多英文字体。而相对更加复杂的中文字体，在可用的字体类型上则相对较少，一方面是字体本身的研发成本更高，更实际的问题则是中文字库的文件尺寸更大，不过随着网络带宽的增长，这个问题会在某种程度上有所缓解。逻辑上和英文字体类似，无衬线字体会比衬线字体的泛用性更强。如果仅仅只是用于标题或者视觉设计，这些免费的字体值得尝试：4. 想快速找到对的的字体组合？使用超大字体家族吧。以上是两个设计范例，其中一个字体组合看起来不搭，另一个字体组合则显得好很多。通常所说的「超大字体家族」（SuperFamily）其实指的是一组被打包到一起可以互相搭配的衬线和非衬线体，它们风格和细节不一样，但是互相搭配效果是颇为不错的。如果希望在 UI 当中使用足够协调漂亮的字体组合，但是又暂时没有想法，不妨选一款「超大字体家族」入手，直接使用其中的字体来做搭配。或者你也可以参考这篇文章来来自行搭配：实例教学！10个帮你运用好字体组合的设计原则编者按：选择与设计相符的字体、展现视觉的层次感、衬线体与非衬线体一起使用、避免字体冲突、避免使用相似的字体进行组合、限制你所使用的字体数量... 今天@喪心病狂十六夜貓 这篇译文总结了运用好字体的设计原则，都是基础但不可忽视的，适合新手学习或重温。阅读文章 > 5、阴影最好还是微妙一点在上面的设计示例当中， 一个使用了非常重的阴影，另一个则更加微妙。在二维的 UI 界面当中，阴影是让元素「凸显」出来的重要手段，作为一种强调的视觉元素，阴影很容易显得过于「明显」。实际上，现实当中的阴影大都是不那么引人瞩目的，因此需要避免设计阴影的时候用力过猛。完成阴影的设计之后，最好回看一下，往回拉一下，控制好程度。6、深色模式下降低文本对比度其实这个点于我个人而言意义更大，因为我的眼睛存在「散光」的问题，这使得强对比度下文本所带来的「晕影」更加明显，这种「晕影」的视觉效果其实是普遍存在的，只是不同用户眼中强弱不同，严重的甚至会出现闪烁的效果。所以，这个时候如果使用白色文本和黑色背景，尽量降低两者的对比度，避免使用纯白的文本和纯黑的背景。7、使用带有文本标签的图标尽量不要让图标独立存在于 UI 界面当中，因为单纯视觉化的图标是存在误读的问题，带有标签文本的图标通常会好很多，它能帮助用户更轻松准确地理解信息，理解这些按钮都代表着什么，无需猜测。下面是往期的内容：第一波！快速提升 UI 设计效果的 9 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第二波！快速提升 UI 设计效果的 14 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第三波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第四波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第五波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第六波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第七波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第八波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/improve-ui-designs-faster-9
像素 素材 字体 LL PixelFun 是一款像素字体，为了增加字体的可玩度加入自由合字的特性输入以下单词：bird boat chicken clock coffee computer cow dog face fast file glasses heart home key lock low mail moto music pause play shit stop talk unlock在 Ai 或者 Ps 中 Opentype 工具栏点击自由连字即可生成相对应 Icon（无聊的小功能）依旧是免费商用，附件下载！「第一张插画底是素材是素材是素材」任天堂设计师出品！700+免费可商用的粗点像素风素材打包下载！《超级玛丽》《魂斗罗》《坦克大战》《吃豆人》，还记得这些在那个时代给我们带来无限欢乐的像素风电子游戏吗？阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 LL PixelFun13.13KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/ll-pixelfun
字体 西文 拉丁文 因为对可变字体很感兴趣，所以有了 LL Changer 这款衬线变非衬线字体的一个小实验。同样开放免费商用，可以用在一些视频的制作之类的，具体还有什么好玩的玩法大家自己去发现吧！老样子，祝你用的开心！往期字体回顾：免费可商用！趣味像素字体 LL PixelFun 开放下载！LL PixelFun 是一款像素字体，为了增加字体的可玩度加入自由合字的特性输入以下单词：bird boat chicken clock coffee computer cow dog face fast file glasses heart home key lock low阅读文章 > 免费可商用！西文等宽字体 LL BLACK MATRIX 2.0开放下载！LL Black Matrix 是一款由针式打印机字体延伸而来的等宽拉丁文字体。阅读文章 > 不认识字体？送你这份英文字体风格辨识指南在我刚成为设计师的时候，分辨字体风格对我来说是最难的事情之一。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 LL Changer13.79KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/ll-changer
字体 这款 西文 LL DEtechno 这款字体灵感来源于每天听的 Minimal Techno，Techno 音乐简单直给的特点也体现在了这款字的基础字形中。加入可变特性的目的是想让这款字体可玩性更强，正好最近在研究可变，所以挑选了扭曲和故障两种风格进行字体的延展细化，给自己找找事儿干，同时增加这款字的可玩性。这款字适合更应用于标题，不推荐在正文中使用。同样这款字供各位免费使用，愿诸君用得开心，变形拉杆玩得痛快！附件下载！往期字体回顾：免费可商用！趣味像素字体 LL PixelFun 开放下载！LL PixelFun 是一款像素字体，为了增加字体的可玩度加入自由合字的特性输入以下单词：bird boat chicken clock coffee computer cow dog face fast file glasses heart home key lock low阅读文章 > 免费可商用！西文等宽字体 LL BLACK MATRIX 2.0开放下载！LL Black Matrix 是一款由针式打印机字体延伸而来的等宽拉丁文字体。阅读文章 > 免费可商用！免费西文可变字体 LL Changer 打包下载因为对可变字体很感兴趣，所以有了 LL Changer 这款衬线变非衬线字体的一个小实验。阅读文章 > 快收藏！15 款 UI 设计常用的等宽英文字体当界面按钮中字体样式发生变化时，整个界面也会发生很大的变化，甚至可以说是杂乱。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 LL DEtechno145.84KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/ll-detechno
字体 西文 这款 可以留着 2022 年的万圣节用，附件提供字体下载！免费可商用！趣味像素字体 LL PixelFun 开放下载！LL PixelFun 是一款像素字体，为了增加字体的可玩度加入自由合字的特性输入以下单词：bird boat chicken clock coffee computer cow dog face fast file glasses heart home key lock low阅读文章 > 免费可商用！西文等宽字体 LL BLACK MATRIX 2.0开放下载！LL Black Matrix 是一款由针式打印机字体延伸而来的等宽拉丁文字体。阅读文章 > 免费可商用！免费西文可变字体 LL Changer 打包下载因为对可变字体很感兴趣，所以有了 LL Changer 这款衬线变非衬线字体的一个小实验。阅读文章 > 免费可商用！西文可变字体 LL DEtechno 打包下载LL DEtechno 这款字体灵感来源于每天听的 Minimal Techno，Techno 音乐简单直给的特点也体现在了这款字的基础字形中。阅读文章 > 用一篇文章，帮你全面认识哥特风英文字体（附下载包）对于设计师而言，熟知各种字体的特征和使用方法可以说是基本功，除了了解各种经典的中文字体之外，对经典英文字体的理解和使用也是非常重要的。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 LL MGothic135.94KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/gothic-free-font
图层 样式 字体 用图层样式制作金属字，最重要的就是要有耐心，因为图层样式设置参数并不太多，不过数值控制非常重要，不同大小的文字或图形用到的数值不同，设置的时候需要慢慢去尝试。最终效果一、新建1000*800px大小的文档，我们复制背景图层，给“背景副本”图层油漆桶填充颜色#452c16。二、PS打开图案素材，编辑--定义图案即可。三、我们给“背景副本”图层添加图层样式--图案叠加。四、我们打开“花纹”素材，摆放好位置，改图层模式为叠加。五、打上字体“THink”，这里字体选择的是“False Positive BRK”，颜色#b37a37，大小430pt。六、复制字体图层，得到“字体副本”图层，改图层填充0%。七、给“THink”图层添加图层样式如下。八、给“THink副本”图层添加图层样式如下。九、我们在两个字体图层中间新建图层“样式”，按住ctrl键点击字体图层，得到字体选区。十、设置前景色为#ffac19，背景色为#432c17，在“样式”图层上执行滤镜--渲染--云彩。十一、ctrl+D取消选区，继续执行滤镜--素描--半调图案，设置如下。十二、我们将“样式”图层模式改为柔光，不透明度90%。十三、选择画笔工具，设置画笔如下。十四、在“THink”图层上新建图层“星光”，右击字体图层，选择创建工作路径。十五、设置前景色为#fff1d8，右击描边路径，确保你在“星光”图层上操作，改图层模式为亮光。十六、到这基本完成了，最后我加上一些小字，字体颜色#ffe9e1，模式柔光，样式投影。最终效果：
图层 效果 字体 前言：字体设计也是一门需要长期学习的课程，但对于新手，前期可以试学习一些简单的字体设计，在今天文章中，我们分享5种容易上手的字效教程，教程虽然简单，但字体效果并不差，而且适合很多种设计场景使用，推荐大家学习。字效，在字体设计中，是非常重要的设计内容，在设计完基础字形之后，为之搭配恰当的效果，不仅可以让字体更有设计感和吸引力，还可以更加有效的传达字体信息，达到更好的实用效果。本系列教程，将给大家分享5类常见字体效果的制作步骤，这些方法，对于有经验的老鸟设计师来讲，可能并不复杂，甚至有点小儿科。但对于很多新人设计师而言，可能会是一番崭新的学习体验，总之，如果你想搞定这些字效设计的“套路”，就请继续看正文吧！为避免篇幅太长，先分享前5例，走起！一01、确定字形奇乐园，是一家儿童游乐场，这类主题的字形，一般要做的活泼可爱一些，字体的特征很明显：负空间小、笔画圆润、饱满，我们可以先尝试画出线稿，再去完善笔画和细节：02、效果制作在AI里，原位复制一层，选择描边工具，添加适当大小的外描边，在“对象”中扩展之后，选择路径查找器，选择第一个选项“联集”，然后将本图层置于原字体图层的后面，这样就得到了上下两部分，一白一红：请记住，一定是两部分才行，缺一不可。然后，在PS里建好文档，把AI里的原字体图层，以及刚做完的描边图层，以“形状图层”样式，分别复制到PS里（这个时候就没AI什么事了）。选中字体图层，点击鼠标右键，选择混合选项-斜面和浮雕-渐变颜色，调整数值，关于属性的数值是没有固定的，跟着感觉走即可，选择一个自己喜欢的效果就行，下图数值可做参考：用同样方法，继续对描边图层进行立体处理，选择混合选项、斜面和浮雕、投影，调整数值，如下图：最后，轻松愉快的搞定！可以放大一些，大家看一下细节：二私房茶，是一家茶店，设计字体时，尝试了手写的感觉，这样会看起来轻松惬意一些，符合这个主题的格调和感觉。01、确定字形在这款字形中，笔画的粗细对比是非常明显的，笔画外边缘，进行了适当的圆角处理，另外，在茶字中，还融入了茶叶的图形进去，这些细节，都会让整组字体更准确，让整个画面更加丰富、饱满：02、制作效果确定基本字型后，为字体添加一些肌理效果，会变得更有味道一些，此类效果虽然比较简单，但也是常用的套路之一，方法如下：把设计后的字体，复制到PS里，认真挑选一个合适的笔刷（不同笔刷，出来的效果都不一样，这里可以多去尝试），笔刷不宜过大，太大就会显的粗糙,同时每个字的肌理也不宜过多，需要把握分寸，注意肌理的均与布局，在做的时候，要反复调试。emmmmm~~~嗯，是的，这也是一个小教程，有点短，也有点太快。再看一遍最后的效果：在这里，我多叨叨几句，做这类字体，其实关键不在于效果。而是……你得先有本事设计出第一步！三01、确定字形AI中,用钢笔工具搭建出基础字型，至于为什么做这样的图形创意，就不做解释了，毕竟大家都是成年人，都懂：02、效果制作复制这组字，粘贴到一个新建文件夹里，打开图层面板（F7），选择“图层1”层，点击右上角的四条杠图标-释放到图层（顺序）：这时，原来在一层里的所有图形，被释放出来并单独成一层。选择“图层1”下面的图层，向下滑动至最底部，按住Shift键，点最后一层，这时除“图层1”都被选中，把这些图层向下拖，这个时候“图层1”为空层，删掉既可。文件-导出-导出为，保存类型：PSD，文件命名“分层字”，导出选项，颜色模式：RGB；辨率：其他500。根据做完字的尺寸大小来设分辨率大小，尽量大点，点击写入图层，确定。打开PSD文件，选择其中的一个图层，点击鼠标右键，选择混合选项-颜色叠加，选择一个亮粉色，继续选择混合选项-内阴影，选择一个深粉色，效果如下：做好一个笔画之后，按住atl键点击鼠标左键，把效果一个一个的拖拽到其它图层上就可以了。最后，加入高光效果就搞定了,是不是也很简单!四这种效果也是比较好玩的，有点矛盾空间的意思，做起来也不费事，首先我们用钢笔造字法把字体勾勒完成，只需要注意两个细节：1，圆头端点；2，圆角连接。搭建出基础笔画后，加个黑色的外面描边，描边不宜过细，如下图：选择路径查找器，在笔画交叉的地方做联集，如下图:绘制多个和笔画宽度相同的圆,内白外黑，黑色描边和原笔画描边保持大小一致，把圆形覆盖到笔画开头或结尾就可以了。嗯，这个~~~确实超easy，写个教程，也TM的太简单了吧！五01、确定字形看到“夜上海”这组命题，脑海里会浮现出霓虹灯闪烁的情景，所以，这组字，就搞这个效果了！我们首先先做好基础字型，再整别的：02、制作效果在PS里建好A4大小的文件，置入一张背景墙图片，把背景墙整体调暗，尤其是四个角，颜色适当压重一点，让光源聚焦在正中间：把AI里设计好的字体复制到PS里，需要把字、图形、字母单独分层，方便待会单独调色：在混合选项中调整几个效果，分别是斜面与浮雕、投影、内阴影、外发光。这里还是想强调一下关于属性数值的问题，没有固定值，还是跟着感觉走，直到达到你最喜欢的效果为止，下图数值，可做参考：分别对中文和拼音层的内阴影颜色做调整：中文部分拼音部分分别把图形、字体、字母原位复制一层，关掉层效果，分别填充颜色：把刚刚填充完的三个图层合并，点击滤镜-高斯模糊，混合模式改为滤色，如果觉得颜色效果过强或太弱，可以通过复制一层或者修改不透明度来实现。在加一个环境色，调出画笔，选用柔边画笔，用各自的颜色沿着轮廓涂抹，颜色模式修改为叠加。最后整体再调一下颜色,让感觉更舒服一点，大功告成！以上总结了字体设计中常用的5种字效，不过希望大家多多思考，因为设计不局限于方法论，更多的是需要你有更多创意来创作出更好的作品。作者 | 刘兵克来源 | 字体帮（id:zitibang）
干货 合集 字体 大家开工大吉！这是虎年农历新年后的第一波设计干货合集！这一期的合集，包含新出的「有灵魂」的图库，有免费的背景、字体、UIkit 素材，有设计灵感网站，有免费的 LOGO 下载网站，还有完全免费的3D 风格 banner 在线服务，都是非常非常非常不错的素材！接下来看看吧：1、有灵魂的免费图库 Humanitieshttps://levinunnink.gumroad.com/l/humanities-illustrations厌倦了千篇一律、毫无情绪、没有质感的扁平插画图库了嘛？这回推荐的插画图库，就是一个带有温度和「人文主义」的插画图库，这个图库包含 35 个带有透明背景的可爱的黑白插画，这些插画当中都是可爱又古怪的角色，带有笔触的轮廓和水墨的肌理，几乎可以和任何颜色的背景色完美搭配。这套图库可以免费获得，不过免费使用的时候需要署名，援引出处，付费之后则可以随意使用无需标注，具体可以参看相关协议。2、免费弥散式极光背景图https://www.weareheroes.digital/resources/aurora这是一组完全免费的背景图片素材，弥散式极光背景，总计 100 张，每张都是 We Are Heroes 团队精心制作并挑选的，这些背景素材是完全免费的。3、全新的交互式原型工具Antetypehttps://www.antetype.com/Antetype 是一个专门解决复杂交互的原型工具，轻松实现响应式布局、元素同步，当然最主要的是，它提供了大量丰富多样的交互，帮你构建出足够复杂多变的交互功能，尽可能让原型的体验接近于最终的完成产品的体验，在演示的时候 更具竞争力。4、每日UI设计灵感、挑战和素材https://dailyui.com/这个名为 Daily UI 的网站乍一看是一个设计灵感网站，但是实际上它不止于此，它除了提供一些设计作品之外，还提供设计素材、导航，每日挑战等服务，从事 UI 设计和 UX 设计工作的同学可以关注一下这个网站。5、免费的 LOGO 素材网站https://www.logotouse.com/LOGO to use 这个网站提供超过 1.2 亿个可以免费下载的 LOGO，你可以下载这些 LOGO 的 SVG 文件，根据你的需求来进行参考或者二次设计，构建属于你自己的 LOGO。这个完整的目的是要做成 LOGO 和品牌领域的 Unsplash 。6、最佳英文字体组合参考https://www.featuredtype.com/虽然各种风格的字体非常之多，但是要把自己搭配好看并不是一件随便的事情，这个名为 Featureed type 的网站将那些现成的效果不错的英文字体组合挑选出来，供你作为设计的时候选取字体的参考。7、在线 3D Banner 免费设计工具https://bannery.app/还在设计2D平面的视觉物料吗？现在已经有 3D 的 Banner 设计工具了，不试试嘛？这个名为 Bannery 的服务提供了大量基础的3D 元素和装饰性的视觉元素，你可以使用他们在线的服务直接编辑，快速构图，置入3D元素，调整角度和配色，加入装饰性元素，超快搞定 ！8、控制面板可视化 UI Kit这是一个包含有 500 多个 Bootstrap 5 组件，这些组件可以帮你快速搭建起漂亮而风格摩登的 UI Kit，它的视觉部分可以直接在 Sketch 当中进行编辑，其中提供 3 套基础的仪表盘，6 套组件，40 多个页面，包含深色和浅色模式！这套素材是完全免费可商用的，你可以在文章开头和结尾的百度云链接中下载。9、倾斜几何风展示字体 Hypik这是一套相当有性格的几何风格字体，字体采用了非常典型的平行四边形式的外轮廓，棱角分明充满了速度感和冷峻的气息，这款字体是完全免费可商用的，你可以在文章开头和结尾的百度云链接中下载。往期干货：第一波！2022年1月精选实用设计干货合集大家好，2022 年第一波设计干货合集来了！阅读文章 > 第二波！2022年1月精选实用设计干货合集大家好，2022 年第2波设计干货合集来了！阅读文章 > 第三波！2022年1月精选实用设计干货合集大家好，2022 年第3波设计干货合集来了！阅读文章 > 第四波！2022年1月精选实用设计干货合集大家好，这应该是 2022 年农历新年前的最后一波设计干货合集了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 2月干货第一波7mk9iy 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-2-design-resources-vol1
落霞与孤鹜
表哥
飞翔的企鹅
张大湿
在路上
