界面设计必备常用字体规范.docx
这几天有人问我说：“最近看了好多教程，都老高大上了，但是老弟我做不到呀，想学点直接能拿来用的，这个要求过分吗"这个，好吧,那就直接说说能用的知识：字体字号。也许你会说：字体字号？也太1.oW了吧.这个谁不知道重要呀。对于这个问题，我想说：会和熟练，是两回事.一个App不同部分的字体字号你能准确地说出来吗？很多刚做APP界面的设计师，经常会因为字号，字体颜色，间距而困扰。拿到设计需求后，开始进行设计，不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反史得修改.设计出来的效果图文字左右间距U次不齐，导致与预期不符等。这小节我将和大家理一理界面中常用的字体，字号，字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。一,成也字，败也字在设计册的职业生涯中，至少一次甚至多次在工作中因为字体不协调我跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。我们常常会听到，这也太1.oW了吧！你能统下字体吗？不明确而繁琐的字体搭配会导致整个画面失调.可以这样说，字体可以成就设计也可以毁掉设计。不咎精而罪徜1HEl三Bi三HSRSgTiXilllo可以达祥1字体可以成就设i可以毁掉设计。问题的关健有：1 .字体样式太多，导致页面杂乱2 .使用的字体不易识别3 .字体样式和内容的气定或规范不匹配怎么避免这样的结果发生呢？通过设计经验可以帮助你做出更好的版式r解不同平台的常用字体设计规范在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调至点文案。字体用的太多，越显得不够专业。不同的样式的字体,形状或系列最好相同,保证字体风格的一致性.字体与背景的层次要分明神保字体样式与色谓气翅相匹配二,界面中文字使用的规则在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体，在这我和大家分别介绍一下。以下是在72像素,，英寸下的规范移动常规字体IOS:常选择华文黑体或界冬吉黑体，尤其是冬青黑体效果最好。英文字体：Roboto中文字体：Noto移动端常用的的字号有哪些呢？导航主标题字号：40-42px我一般设计就用4Opx,偏小的40px字号，显得精致些。oinwi令4:34PM88%卜ZZ云同步在内文展示中字号大小又是多大呢？大的正文字号32px,副文是26px小字20px在内文的使用中，根据不同类型的App会有所区别。像新闻类的APP或文字阅读类的APP更注重文本的阅读便控性，正文字号36p×,会选择性的加粗.江西热线吧4.8万冷空气影响长江以南部分地区最低气温将首破零1分钟内®O中国联通令22：54Y$-），今日泱条O律CIa彩票特卖热点北了7今天2014.12.21星期日西安一医院医生手术台上玩自拍摆POSe竖剪刀手中国天气ES689安徽一家五口钱中毒赴京治疗舒漕他人将毒而列表形式、工具化的APP普遍是正文32px,不加粗。副文案26px,小字20pQ搜索22:5022:47B-?特斯拉俱乐部H313条潘石屹：微笑MiCU设计22:18PPT设计宝典-十招教你做出拿得出26px的字号还会用于划分类别的提示文案，因为这样的文字希望用户阅读，但不要抢过主列表信息的引导。oo中国联通合23：25<账户信息头像王小朵昵称账户信息账户名实名认证身份认证绑定手机绑定邮箱如遇到账户信息泄漏、诈骗等安全问题请拨打400-805-870036px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次，同时加强按钮引导性，选用/稍大号的字体.（见卜溷中的退出按钮）O中国联通令23：30Y$(>>设置云同步提醒标签提醒私密相册手势密码邀请朋友>检查更新>给个好评>关于>方正兰亭新方正兰亭牛方正兰亭票方正兰亭编d一11=F1k谓先输入文字！选择毛第字夕：1.苏新诗柳体毛笔书法大小：80像素文字筱色：#00000。M8B5fe:#F点击候2SBB片快速生成定中生钢这字错蝶H梆公国书法字体|柳体正手把斜启苗藩休35*11NMt钮狂，李脚I草书书法2装博详清商¥金、方正包装体A洋槽可席景清酒方正蕈书好为瘦金行浦格中良怀行书E吃瘦金用=正国行搐体毛图WW电书法布港玄A满叶帙楷行书书法事云汉行书书法蔡云汉清叶书法帙山It书华文店体清悠I华文行It启体禁云以Si的书法方正黄草推荐大家几个毛笔字相关的网站:和大家简单操作一下毛笃字的使用方法.将下载下来的字体图片AI转路径，编辑文字。首先使用在线生成器输入选择好你需要的文字字形，将文字图片拖至Al中。AixmnMtMDsgwqSgw)IMKH)£)CmFnt;袤入MMISftM，(Q3B*b三21SS*<CMVK«选中拉入图片，点击图像描凄Al文件(F)曲(E)对今(。)文字(T)选择螂(C)视图(V)SD(W)在助（三）回随除.哀件14?VSA衍q小EKFPI72泰'睇B原稿图像相法卡蒙fTS士HHg”G'UVdl仆IIVVWe-，然后维续点击扩展按钮Ai文侬F)?短(E)对象(。)文字(T)未标宜-2155%（CMYK/覆）X效果(C)视图(V)g(W)语助（三）回扩展完毕后，图片已经都变成了路径。使用魔棒选择颜色就可以将文字的路径提选出来。最后经过设计后的Banner效果，这就是我经常用的Banner风格，你们也试试吧界面中常用的字体规范Micu设计重要提示，怎么找不认火的字体名称？很多朋友会看到别人使用的字体非常好看，但又不知道是什么字体.在这我告诉你一个方法.可以通过网络上传字体图片进行搜索字体名称。网址：.上传图片找字体Q(23上传母片确认又享接素结果献.w文件大小不超过1兆，格式仅限于jpg、pngbmp本站可识别中、英、日、醉、法等多国吾三字体。三.常用字体颜色字体旗色又有鼻些常用的蔽色呢？在界而中的文字分为三个层级，主文、副文、提示文案等。在白色的背景下，字体的颜色层次其实就是黑、深灰、灰色。常川的色值是#333333；#666666；#999999灰色#999999深灰色#666666深黑色#333333在界面中还经常会用到背景色#eeeeee：.分割线则采用#e5e5e5或毋CCCCCe的颜色值，一个深一些，一个浅一些。这个会更具不同的软件风格采用不同的深浅，由设计自己把控0背景颜色#EEEEEE分割线#E5E5E5分割线深#cccccc在我们做设计的时候,字体和图库均是有版权的，请注意合法使用。设计的时候我们还可以将字体进行变形来达到宣传的目的，这个需要设计师对字体设计有一定的了解.总之，设计是要有规范，有体系的.使用规范化的设计对产品的延续性非常有帮助，并且保证了产品的独特性和一致性。所以，大家要在设计初期找到风格和规范，这样做出来的界面才会统一一致，在变化的需求中找到定量，调盛起来也相对轻松很多.
