界面设计必备！科普字体规范

    很多刚做前端的网站设计师，经常会因为字号，字体颜色，间距而困扰。拿到网站设计需求后，开始进行设计，不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐，导致与预期不符等。这小节虎网科技将和大家理一理界面中常用的字体，字号，字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。

一、成也字，败也字

在设计师的职业生涯中，至少快速甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。

我们常常会听到，这也太LOW了吧！！你能统一一下字体吗？

不明确而繁琐的字体搭配会导致整个画面失调。可以这样说，字体可以成就设计也可以毁掉设计。

问题的关键有：

1. 字体样式太多，导致页面杂乱
2. 使用的字体不易识别
3. 字体样式和内容的气氛或规范不匹配

怎么避免这样的结果发生呢？

    通过设计经验可以帮助你做出更好的版式，了解不同平台的常用字体设计规范。在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。不同的样式的字体，形状或系列较好相同，字体风格的一致性。字体与背景的层次要分明,字体样式与色调气氛相匹配

二、界面中文字使用的规则

在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体，在这我和大家分别介绍一下。

移动端常规字体

IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果较好。

Android

英文字体：Roboto

中文字体：Noto

移动端常用的的字号有哪些呢？

导航主标题字号：40-42px

我一般设计就用40px，偏小的40px字号，显得精致些。

在内文展示中字号大小又是多大呢？

    大的正文字号32px，副文是26px，小字20px。在内文的使用中，根据不同类型的App会有所区别。大家注意了，在选用字体大小的时候一定要选择偶数的字号，因为在开发界面的时候，字号大小换算是要除以二的。这个详细缘由大家可以网上查询，虎网科技（西安网站设计）就不在这一一的介绍了。常用字号的大小基本就这几个，根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。

网页端

常用的字号有哪些呢？

网页中文字字号一般都是宋体12px或14px(无状态)，大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px，一般使用双数字号，单数的字体在显示的时候会有毛边。

常用的字体：

1. 平平稳稳：微软雅黑/方正中黑

微软雅黑系列：在网页设计中这款字体使用的非常平凡，这款只无论是放大还是缩小，形体都非常的规整舒服。在设计过程中建议多使用雅黑，大标题用加粗字体，正文用常规字体。

方正正中黑系列

中黑系列的字体笔画比较锐利而浑厚，一般运用在标题文字中。但这种字体不适用于正文中，因为边缘相对比较的复杂，文字一多会影响用户的阅读。

2. 与时俱进：方正兰亭系列

方正兰亭系列：个人较推荐的就是这个系类的字体，整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁，这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合，不仅能字体的统一感，还能很好的区分出文本的层次。

3. 刚劲有力，运动型：汉仪菱心简/造字工房力黑/造字工房劲黑

在这几个字体中，他们有着共同的特点，字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式，让文字显得更为活力。在这三种字体中，菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松，更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多，效果比较突出。

毛笔字生成器

通过自由的书法网站在线生成。在网址中输入文本，再进行选择书法字体样式。通过这种方法我们能很快的找到需要的书法字体。这招非常管用。

和大家简单操作一下毛笔字的使用方法。

将下载下来的字体图片AI转路径，编辑文字。

*先使用在线生成器输入选择好你需要的文字字形，将文字图片拖至AI中。

选中拉入图片，点击［图像描摹］

然后继续点击［扩展］按钮

扩展完毕后，图片已经都变成了路径。

使用魔棒选择颜色就可以将文字的路径提选出来。

较后经过设计后的Banner效果，这就是我经常用的Banner风格，你们也试试吧。

重要提示，怎么找不认识的字体名称？

很多朋友会看到别人使用的字体非常好看，但又不知道是什么字体。在这我告诉你一个方法。可以通过网络上传字体图片进行搜索字体名称。相关神器地址：《还在问“这是什么字体？”四款神器帮到你！》

三、常用字体颜色

字体颜色又有哪些常用的颜色呢？

在界面中的文字分为三个层级，主文、副文、提示文案等。

在白色的背景下，字体的颜色层次其实就是黑、深灰、灰色。

常用的色值是#333333；#666666；#999999

在界面中还经常会用到背景色#eeeeee。
分割线则采用#e5e5e5或#cccccc的颜色值，一个深一些，一个浅一些。这个会更具不同的软件风格采用不同的深浅，由网站设计师自己把控。

在我们做设计的时候，字体和图库均是有版权的，请注意合法使用。

【你必须知道的设计趋势】：

用户体验设计趋势：
《设计行业大起底！图说2015用户体验行业调查报告》

网站设计思维：
《打破网站设计常规思维这堵墙！》

关于字体的秘密：

《超实用！网站设计掌握字体运用》

马尔代夫美景高清视频(马尔代夫最著名的城市？)

    西沙群岛，中国的马尔代夫，你认同吗？ 220 收藏分享转发到头条复制链接微信微信扫码分享新浪微博QQ空间举报兮离风景z 2019年07月23日 关注 西沙群岛被称为国内的马尔代夫，这里有迷醉的风景，有吃货们垂涎的丰富海鲜，来到这里你便拥有了梦幻的海底花园，纯净洁白的沙滩，五彩变幻的玻璃海，这里一定是你此生必去的地方。 跟四季休闲俱乐部一起去参加户外行程，体验西沙群岛的美 马尔代夫为什么出名？ ...

       外贸网站设计需要注意什么？ 外贸企业网站是正确引导海外的用户对企业产品进行了解、识别、选购的一个重要环节。而外贸的 网站建设 就需要设计构思更加的和海外用户的生活方式相匹配。那常见的外贸网站设计的技巧都有哪些呢?让我们看一看有成功案例的网站设计师是怎样介绍的吧。 外贸企业网站是起的正确引导作用，因此设计构思的网页要适合海外人的网页浏览习惯性，及其它们的办事、消费的风格，尽可能让客户在很短的时间内能够看见自己想了解的或者是需...

       三种常见企业网站建设方式 网站建设已经成为每个企业必备的网络营销平台，但大部分企业网站都是找不到正规的网络公司给做，其实他们并不知道，网站是怎么做的。也许只有懂的人才知道。下面虎网科技（西安网站制作,西安网站制作）就为你分享一下，企业网站建设的3种常见方式。 1.定制网站（西安企业门户网站建设） 做网站定制的公司多如牛毛，从专业设计公司到游击队一应具全，报价差很多，质量也不一定是贵的好，很难辨别。 优点：大公司品质高，可以...

       深圳宝安创颖服饰服装与虎网站签约做网站项目 创颖是经深圳市宝安区工商局审核的正规企业，统一社会信用代码：91440300MA5DM2BX3Q。同时经国家工信部和广东省通信管理局审核通过ICP备案；备案号：粤ICP备16093302号。创颖位于深圳市宝安区西乡街道永丰社区第一工业区A7栋三楼。创颖选用虎网站企业商务型网站案例，其功能具备实用型所有配置外、特别值得关注的是增设了SEO深度优化，不管是内页还是标题都能够独立和个性化设置关键词和长尾...

       龙岗坂田佰誉达美容设备同虎网科技签署做网站项目 佰誉达是经深圳市龙岗区工商局审核的正规企业，统一社会信用代码：91440300MA5DLX4B89。同时经国家工信部和广东省通信管理局审核通过ICP备案；备案号：粤ICP备17118655号。佰誉达选用虎网站响应式自适应网站案例，此类案例是当今新潮流的网站程序，他除了具备商务型所有功能外，他的特点在于能自动识别互联网和移动网终端设备，既能适用在电脑上浏览同时又适用在平板电脑和各款手机上浏览都能自适...

       一个好的网站制作的10个因素 一、选择好域名若是您的上网站确实想经由过程因特网宣传企业品牌，那么必然要选择一个自力的域名。选择域名时要注重与企业的中文名称是否对应、是否有特色。 　　二、需要在线发卖的产物要在主页中呈现假如您想在线销售什么产品，一定要在主页精明的位置泛起。顾客不愿意点击四、五个链接才找到他们想买的工具。给产品配张高质量的图片，告诉访谒者他们为什么需要它。 　　三、站点各层页面气概统一要连结站点整体的统一性。不要...