经验分类：
发布时间：
禁止商业使用
修改作品禁止更改版权信息
柴米油盐酱醋茶，设计源自生活
1629 粉丝 / 0 关注
界面设计必备，常用字体规范
作者：王铎（MICU设计）好长时间没发帖，净想过年了，过年哈，倒腾工作总结和年货是大事。这几天有人问我说：“最近看了好多教程，都老高大上了，但是老弟我做不到呀，想学点直接能拿来用的，这个要求过分吗……”这个，好吧，那就直接说说能用的知识：字体字号。也许你会说：字体字号？也太Low了吧，这个谁不知道重要呀。对于这个问题，我想说：会和熟练，是两回事。一个App，不同部分的字体字号你能准确地说出来吗？很多刚做APP界面的设计师，经常会因为字号，字体颜色，间距而困扰。拿到设计需求后，开始进行设计，不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐，导致与预期不符等。这小节我将和大家理一理界面中常用的字体，字号，字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。一.成也字，败也字在设计师的职业生涯中，至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。我们常常会听到，这也太LOW了吧！！你能统一一下字体吗？不明确而繁琐的字体搭配会导致整个画面失调。可以这样说，字体可以成就设计也可以毁掉设计。问题的关键有：1.字体样式太多，导致页面杂乱2.使用的字体不易识别3.字体样式和内容的气氛或规范不匹配怎么避免这样的结果发生呢？通过设计经验可以帮助你做出更好的版式了解不同平台的常用字体设计规范在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。字体与背景的层次要分明确保字体样式与色调气氛相匹配二.界面中文字使用的规则在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体，在这我和大家分别介绍一下。以下是在 &72像素/英寸 &下的规范移动端常规字体IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好。Android英文字体：Roboto中文字体：Noto移动端常用的的字号有哪些呢？导航主标题字号：40-42px 我一般设计就用40px，偏小的40px字号，显得精致些。在内文展示中字号大小又是多大呢？大的正文字号32px,副文是26px，小字20px在内文的使用中，根据不同类型的App会有所区别。像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性，正文字号36px，会选择性的加粗。而列表形式、工具化的APP普遍是正文32px，不加粗。副文案26px,小字20px26px的字号还会用于划分类别的提示文案，因为这样的文字希望用户阅读，但不要抢过主列表信息的引导。36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次，同时加强按钮引导性，选用了稍大号的字体。（见下图中的退出按钮)大家注意了，在选用字体大小的时候一定要选择偶数的字号，因为在开发界面的时候，字号大小换算是要除以二的。这个详细缘由大家可以网上查询，我就不在这一一的介绍了。常用字号的大小基本就这几个，根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。网页端常用的字号有哪些呢？网页中文字字号一般都是宋体12px或14px(无状态)，大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px，一般使用双数字号，单数的字体在显示的时候会有毛边。常用的字体1.平平稳稳:微软雅黑/方正中黑微软雅黑系列：在网页设计中这款字体使用的非常平凡，这款只无论是放大还是缩小，形体都非常的规整舒服。在设计过程中建议多使用雅黑，大标题用加粗字体，正文用常规字体。方正正中黑系列：中黑系列的字体笔画比较锐利而浑厚，一般运用在标题文字中。但这种字体不适用于正文中，因为边缘相对比较的复杂，文字一多会影响用户的阅读。2.与时俱进：方正兰亭系列方正兰亭系列: 个人最推荐的就是这个系类的字体，整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁，这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合，不仅能保证字体的统一感，还能很好的区分出文本的层次。3.刚劲有力，运动型：汉仪菱心简/造字工房力黑/造字工房劲黑在这几个字体中，他们有着共同的特点，字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式，让文字显得更为活力。在这三种字体中，菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松，更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多，效果比较突出。毛笔字生成器通过自由的书法网站在线生成。在网址中输入文本，再进行选择书法字体样式。通过这种方法我们能很快的找到需要的书法字体。这招非常管用。推荐大家几个毛笔字相关的网站：和大家简单操作一下毛笔字的使用方法。将下载下来的字体图片AI转路径，编辑文字。首先使用在线生成器输入选择好你需要的文字字形，将文字图片拖至AI中。
选中拉入图片，点击［图像描摹］
然后继续点击［扩展］按钮
扩展完毕后，图片已经都变成了路径。
使用魔棒选择颜色就可以将文字的路径提选出来。
最后经过设计后的Banner效果，这就是我经常用的Banner风格，你们也试试吧~
重要提示，怎么找不认识的字体名称？很多朋友会看到别人使用的字体非常好看，但又不知道是什么字体。在这我告诉你一个方法。可以通过网络上传字体图片进行搜索字体名称。网址：三.常用字体颜色字体颜色又有哪些常用的颜色呢？在界面中的文字分为三个层级，主文、副文、提示文案等。在白色的背景下，字体的颜色层次其实就是黑、深灰、灰色。常用的色值是#333333；#666666；#999999在界面中还经常会用到背景色#eeeeee。分割线则采用#e5e5e5或#cccccc的颜色值，一个深一些，一个浅一些。这个会更具不同的软件风格采用不同的深浅，由设计自己把控。在我们做设计的时候，字体和图库均是有版权的，请注意合法使用。设计的时候我们还可以将字体进行变形来达到宣传的目的，这个需要设计师对字体设计有一定的了解。总之，设计是要有规范，有体系的。使用规范化的设计对产品的延续性非常有帮助，并且保证了产品的独特性和一致性。所以，大家要在设计初期找到风格和规范，这样做出来的界面才会统一一致，在变化的需求中找到定量，调整起来也相对轻松很多。【本文由Micu设计原创发布，转载请注明作者：Micu设计，请加上二维码】
亲，你需要登录后才能对该经验进行评论喔！
: 我也是在纠结这个。。如果是640*1136的话，那我之前做的貌似太小了。。
最近开始做移动端，想知道移动端页面一般尺寸到底是多少呢？楼主说的字体大小是在多大尺寸下使用的呢？我之前的同事留下来的页面尺寸是宽640的。。。
太棒了，解决了不少困惑
3-25 13:48
一切抛开分辨率讲大小的都是耍流氓。
2-26 22:57
一直不太清楚网页端的字号大小使用规范，不知道楼主说的字号大小是在哪种分辨率下使用的？
2-11 14:18
学习了，真的很棒～～
很是实用，强赞！
您好，那个使用魔棒选择颜色就可以将文字的路径提选出来，时怎么提出来的可以详细的说一下，然后提出来的路径可以变色吗？
1-30 17:09
很好很全面
1-28 12:51
总结很全面~
1-28 10:53
很系统的介绍了文字设计！
1-28 10:37
太感动了，终于找到字体规范，楼主我爱你。
1-28 01:33
把这些内容编成书出版也不错噢~现在教UI的书太少了
1-27 17:18
受教了，感谢楼主
1-27 10:30
一直以前就纠结到底有没有规范，谢谢楼主的经验总结！很赞！
1-27 09:33
感谢楼主无私分享`~
1-27 08:18
1-26 14:32
很棒，学到了不少。
1-26 14:22
很受用 谢了
1-26 10:38
1-25 19:40
很受用，赞一个！
1-23 21:47
每次都讲的如此感动
1-23 10:36
好人啊。非常实用，愿意和大家分享这个，好无畏的精神。感动！
1-23 10:17
讲得很好啊，有没有一些字体下载网站叱？
1-22 20:51
很实用 这样的好帖子必须顶！
1-22 16:35
张小龙 潘石屹 还有特斯拉俱乐部是怎么回事？
1-22 14:46
不错的哦，一看就是一位用心在做设计的人，学习！
1-21 23:34
写的东西都是平时要用到的很实用谢谢了。
1-21 23:24
: /cKgMSFmA2pDSy
提取码 4a24
1-21 17:24
使用注册信息登录
请输入登录密码
如果登录出现异常清理浏览器的缓存后再尝试
小伙伴们！困扰大家已久的一些个人中心的问题今天将会得到解决！
全新的注册登录系统即将展现，支持邮箱登录！而且这次让IE也说Yes！
全新的个人资料修改方式，今后你将可以修改自己的用户名、邮箱！
忘记密码的小伙伴也不必惊慌了，你可以轻松修改和找回自己的密码！
UI中国 开发团队
前身为。国内最专业的UI设计平台!
六年来一直为UI设计师做最好的服务而不断努力着!
进入专业界面设计师圈子，与小伙伴们分享你的作品！Photoshop cs6中,选择字体时看不到字体的样式_百度知道
Photoshop cs6中,选择字体时看不到字体的样式
选择字体我在PS CS6中，要输入文字时，字体名称的右边就有字体的样式？要怎么设置，之前用CS5时，现在CS6中怎么没有了，但字体名右边看不到字体样式的预览
提问者采纳
打开ps软件---编辑---首选项---文字---把“字体预览大小”
我的PS的那个首选项里面没有“字体预览大小”这一项啊
那就是没有这个功能了，以下版本的有。
怎么会高级别反而不能预览了，这不是搞笑？是CS6都没这功能？
刚刚研究了一下，因为我用的是CS5.打开Ps最上面那栏，，不是文件
中的文字，，里面有文字预览大小，点下后出现字体大小选择文字—字体预览大小—选择大小
这个也不行啊，我选择了一个大小，小 中 大 超大
都试了，还是看不见预览
正常情况下， 在菜单栏有个“type&点开后有个“Font Preview Size-----即可看到小、中、大、特大、超大、如果可以选择，但是没有预览。那就是你软件的问题了，换个别的试试。
我之前的PS CS5还没有卸载，我又进CS5，发现CS5里面的预览也没有了，我之前用的时候是有的，下载了CS6后，都不显示预览了，这是怎么回事
卸载CS6，这是软件之间的问题，同一个公司的软件就这样
提问者评价
其他类似问题
按默认排序
其他2条回答
可以卸载其中一个版本试一下，而CS4以下与CS6共存关系还是比较和谐的CS5或CS5，或者把CS6的首选项重置试试看.5的首选项与CS6首选项有时会有冲突（因为5版和6版核心代码很接近）
我就是右边的那个预览没有了啊
这可能与软件没什么关系，也许是你电脑里安装的字体太多的缘故吧，有时候电脑配置不高也会出现这问题先重装一下软件试试，不行就卸载一些字体试试另外你到软件面板中查看一下是不是设置了“无”
photoshop的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁DOTA2好多字看不到，有人说是系统的字体库损坏，有人说网不好，到底是什么原因？怎么解决？（网很好的）_百度知道
望采纳。也可能是系统字库损坏，修复可能存在的异常文件在客户端登录界面的设置中选择验证dota2文件的完整性，谢谢
其他类似问题
字体库的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁后使用快捷导航没有帐号？
通话界面字体太小，小问题，大影响！！！！！
&新学乍练&
来自：浏览器
最新回复 昨天&22:03
荣耀6通话的时候，来电姓名和号码，字体也太小了，几乎快看不到了！！！严重影响眼花近视的人使用！！
系统的字体大小修改选项，只能修改短信，联系人和系统列表！！！
现在使用真的很不方便！！我估计是屏幕分辨率的问题，1080P的分辨率太大，屏幕小了，所以比例也缩小了，同样我的华为mate，720P分辨率，屏幕6寸多，看起来号码大得很~~
希望华为快点出更新解决这个问题~~~
附图华为mate、荣耀6、水果4s通话界面对比！！！
(2.66 MB, 下载次数: 3)
10:29 上传
华为mate，荣耀6，苹果4s拨号界面对比
width:100%">
&花粉版主&
来自：浏览器
谢谢亲的反馈。小版会将亲的意见收集反馈。祝亲在荣耀6体验愉快。
width:100%">
&炉火纯青&
来自：浏览器
确实需要改！！！！！！！！
width:100%">
&新学乍练&
来自：浏览器
确实需要改！！！！！！！！
这是个视力1.8的人才能使用的手机！！！！
width:100%">
&登峰造极&
来自：浏览器
width:100%">
&已臻大成&
来自：浏览器
width:100%">
&独步江湖&
来自：浏览器
小手一抖花瓣带走。。
width:100%">
&禁止访问&
来自：浏览器
提示: 作者被禁止或删除 内容自动屏蔽
width:100%">
&登峰造极&
来自：浏览器
玩机快乐了!
width:100%">
&初窥门径&
来自：浏览器
顶楼主，我也发现了这个问题，就因为这个原因不得不开启了rog模式，为的就是来电时候字体大点~~~~哎，可惜了1080屏幕
width:100%">
&略有小成&
来自：浏览器
一定要改啊
width:100%">
在职斑竹的身份勋章，感谢斑竹的辛勤劳动
1000万花粉
纪念花粉俱乐部注册花粉数超过1000万
好基友勋章
花粉好机友，注册时间大于99天
1月7日前可申请自动获得，1月7日后参与其它相关活动获得。
带着6p去旅行最美瞬间高原春天魅力颐和园黄昏下的美景岁月静好
花粉达人秀
花粉客户端
Make it Possible
Make your device special
华为云服务
Huawei cloud services
音乐播放器
huawei music
没有最新动态
关注花粉俱乐部
联系我们：
|关注花粉俱乐部：
Copyright (C)
华为软件技术有限公司 版权所有 保留一切权利查看: 82996|回复: 77
注册时间最后登录阅读权限90积分16210精华0帖子
逍遥游侠, 积分 16210, 距离下一级还需 13790 积分
【工具】 魔兽字体修改工具，让你的DOTA界面更酷！！！
本帖最后由 rnbenfeifei 于
05:14 编辑
先看效果，整个WAR3游戏的中文字体都更改了。
技能解释界面
[B]具体操作步骤：[/B]
1.下载魔兽字体转换工具：见附件
2.解压缩到你的魔兽文件夹下！
3.确认魔兽游戏已关闭后，双击FontCraft.exe ，看到以下界面
4.将你想使用的字体从C:\WINDOWS\Fonts [B]拷贝到该文件夹目录下[/B]（否则不能使用） 5.设置好WAR3的游戏目录，点击开始安装。 6.开始游戏，Enjoy! 7.如果想回到初始字体，请重装一遍1.20或1.22的傻瓜升级补丁即可
11:45 上传
点击文件名下载附件
1.49 MB, 下载次数: 34102
注册时间最后登录阅读权限110积分47285精华0帖子
风云使者, 积分 47285, 距离下一级还需 2715 积分
3Q楼主分享
注册时间最后登录阅读权限20积分110精华0帖子
无名小卒, 积分 110, 距离下一级还需 -60 积分
恩，我比较喜欢粗水柱，不过现在用得方正剪纸，这字体不错的，推荐一下。
注册时间最后登录阅读权限50积分3165精华0帖子
草莽豪杰, 积分 3165, 距离下一级还需 2835 积分
不错的字体
注册时间最后登录阅读权限110积分39425精华0帖子
风云使者, 积分 39425, 距离下一级还需 10575 积分
注册时间最后登录阅读权限150积分133515精华0帖子
惊鸿侠影, 积分 133515, 距离下一级还需 16485 积分
这个有了,进入魔兽之后改背景的有没有,天天看那个王坐看腻了
注册时间最后登录阅读权限90积分16210精华0帖子
逍遥游侠, 积分 16210, 距离下一级还需 13790 积分
....王座那个太难了点吧&&关键后面有几只鸟一直在飞，画面是动的~~~
注册时间最后登录阅读权限70积分10785精华0帖子
武林新贵, 积分 10785, 距离下一级还需 4215 积分
不过还是感谢lz共享
注册时间最后登录阅读权限110积分37405精华2帖子
风云使者, 积分 37405, 距离下一级还需 12595 积分
我电脑很老了，dota时其他什么软件都不敢开，用这个会不会让电脑卡？
注册时间最后登录阅读权限90积分19250精华2帖子
逍遥游侠, 积分 19250, 距离下一级还需 10750 积分
貌似不会[s:39]
注册时间最后登录阅读权限70积分11345精华0帖子
武林新贵, 积分 11345, 距离下一级还需 3655 积分
我在1.22下用了这个游戏就疯狂报错了,只能在1.20下用
注册时间最后登录阅读权限110积分48030精华0帖子
风云使者, 积分 48030, 距离下一级还需 1970 积分
[s:30][s:30]
注册时间最后登录阅读权限30积分1795精华0帖子
人海孤鸿, 积分 1795, 距离下一级还需 205 积分
不错好东西支持下
注册时间最后登录阅读权限0积分165290精华2帖子
提示: 作者被禁止或删除 内容自动屏蔽
注册时间最后登录阅读权限130积分52650精华0帖子
寂寞高手, 积分 52650, 距离下一级还需 27350 积分
这个改字体工具多年前就有了..
注册时间最后登录阅读权限90积分24850精华0帖子
逍遥游侠, 积分 24850, 距离下一级还需 5150 积分
感觉还不错
注册时间最后登录阅读权限150积分133515精华0帖子
惊鸿侠影, 积分 133515, 距离下一级还需 16485 积分
引用：sosa1215@rn于 11:59:53发表的：
....王座那个太难了点吧&&关键后面有几只鸟一直在飞，画面是动的~~~见过有人改的,也许是什么高档工具吧,改完也是动的,当时忘了问
注册时间最后登录阅读权限150积分133515精华0帖子
惊鸿侠影, 积分 133515, 距离下一级还需 16485 积分
引用：inkel_kn@rn于 12:46:25发表的：
我电脑很老了，dota时其他什么软件都不敢开，用这个会不会让电脑卡？这个不是开war3的时候开的,是直接装好以后就变了,1.20和1.21都好用,不过1.22没试过
注册时间最后登录阅读权限90积分17220精华0帖子
逍遥游侠, 积分 17220, 距离下一级还需 12780 积分
改背景很简单的 几年前RN有个帖子有介绍过 很多人都改了
注册时间最后登录阅读权限90积分17220精华0帖子
逍遥游侠, 积分 17220, 距离下一级还需 12780 积分
很多好看的字体不能显示太多的字啊 玩一些BT的RPG图就看不到血量了 很麻烦
注册时间最后登录阅读权限20积分190精华0帖子
无名小卒, 积分 190, 距离下一级还需 -140 积分
我还是e文原版，速度感觉快些
冰点咖啡 该用户已被删除
提示: 作者被禁止或删除 内容自动屏蔽
注册时间最后登录阅读权限20积分340精华0帖子
无名小卒, 积分 340, 距离下一级还需 -290 积分
软件有了,求好的字体.
注册时间最后登录阅读权限90积分17220精华0帖子
逍遥游侠, 积分 17220, 距离下一级还需 12780 积分
试一下 设置调得比较低 比较丑
(2.25 MB, 下载次数: 26)
20:39 上传
点击文件名下载附件
注册时间最后登录阅读权限110积分49080精华9帖子
风云使者, 积分 49080, 距离下一级还需 920 积分
微软雅黑 比较喜欢
注册时间最后登录阅读权限50积分2205精华0帖子
草莽豪杰, 积分 2205, 距离下一级还需 3795 积分
毛泽东字体
注册时间最后登录阅读权限70积分13935精华0帖子
武林新贵, 积分 13935, 距离下一级还需 1065 积分
不会有人改成肥猪流吧.
注册时间最后登录阅读权限70积分8835精华0帖子
武林新贵, 积分 8835, 距离下一级还需 6165 积分
我用的幼园，还不错，没出现过显示错误/
注册时间最后登录阅读权限90积分25280精华0帖子
逍遥游侠, 积分 25280, 距离下一级还需 4720 积分
试过百种字体,微软雅黑和方正粗远是最好的2个
注册时间最后登录阅读权限20积分5精华0帖子
无名小卒, 积分 5, 距离下一级还需 45 积分
注册时间最后登录阅读权限50积分3630精华0帖子
草莽豪杰, 积分 3630, 距离下一级还需 2370 积分
[s:85][s:85][s:126][s:117]
注册时间最后登录阅读权限30积分1415精华0帖子
人海孤鸿, 积分 1415, 距离下一级还需 585 积分
工具不错，多谢分享，期待雅黑
注册时间最后登录阅读权限20积分5精华0帖子
无名小卒, 积分 5, 距离下一级还需 45 积分
注册时间最后登录阅读权限50积分5690精华0帖子
草莽豪杰, 积分 5690, 距离下一级还需 310 积分
群众门纷纷表示1年前都用过了..
注册时间最后登录阅读权限30积分1170精华0帖子
人海孤鸿, 积分 1170, 距离下一级还需 830 积分
似乎很多东西都很有用
注册时间最后登录阅读权限20积分115精华0帖子
无名小卒, 积分 115, 距离下一级还需 -65 积分
好东西 顶楼主
注册时间最后登录阅读权限30积分740精华0帖子
人海孤鸿, 积分 740, 距离下一级还需 1260 积分
貌似相当的帅。我支持楼主啊
注册时间最后登录阅读权限70积分6570精华0帖子
武林新贵, 积分 6570, 距离下一级还需 8430 积分
貌似我有个软件 改完字体之后 就进不去别人的主了。。。
这个可以么。。
注册时间最后登录阅读权限70积分6570精华0帖子
武林新贵, 积分 6570, 距离下一级还需 8430 积分
该附件文件不存在或已被删除
注册时间最后登录阅读权限130积分79710精华0帖子
寂寞高手, 积分 79710, 距离下一级还需 290 积分
zhichi yige .
Lv.1 EHOME Fans
EHOME Fans
Lv.4 已婚人士
Lv.6 ACG区版主
ACG区版主专属勋章
Lv.5 美女玩家
Lv.3 萌の大家族
萌の大家族
Lv.2 月神殿
我是Moon死忠粉
Lv.3 Arturia casual
Lv.3 小鳥遊 六花
中二病でも恋がしたい！
Lv.3 御坂 美琴
とある科学の超電磁砲
Lv.3 人类联盟
Lv.2 RN水友勋章
RN水友勋章
Lv.3 勤劳小蜜蜂
签到活动全勤奖励
Lv.3 所谓伊人
Lv.7 退役版主
退役版主勋章
Lv.6 骨灰级RNer
注册时间满4年 发帖数满7500 人品满5
Lv.5 人品勋章
人品≥10可申请 重大违规后人品低于6收回
Lv.3 硬件达人
Lv.3 中秋勋章?
Lv.3 RN十周年纪念勋章
RN十周年纪念章 注册满7年用户申请获取
Powered by
Replays.Net