android设计常用字体,界面设计必备!全方位科普常用的字体规范

b89f1a4bc9df1aec9273a842cc034d04.png

编者按:90后UI设计师的最新干货!应广大群众要求,今天@Micu设计 同学不说高大上的教程,来点即学即用的干货,从界面中文字的使用规则到字体颜色的选择,都有具体细致的说明,非常适合基础不扎实的同学。想一次性搞定字体这个关键点,马上学起来 >>>

小哥的教程合集:

好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事。

这几天有人问我说:“最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学点直接能拿来用的,这个要求过分吗……”

这个,好吧,那就直接说说能用的知识:字体字号。

也许你会说:字体字号?也太Low了吧,这个谁不知道重要呀。

对于这个问题,我想说:会和熟练,是两回事。一个App,不同部分的字体字号你能准确地说出来吗?

很多刚做APP界面的设计师,经常会因为字号,字体颜色,间距而困扰。

拿到设计需求后,开始进行设计,不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐,导致与预期不符等。

这小节我将和大家理一理界面中常用的字体,字号,字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。

一、成也字,败也字

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

我们常常会听到,这也太LOW了吧!!你能统一一下字体吗?

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

83eac07578f9d39be04d5a08b2a7e2f6.png

问题的关键有:

字体样式太多,导致页面杂乱

使用的字体不易识别

字体样式和内容的气氛或规范不匹配

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

通过设计经验可以帮助你做出更好的版式,了解不同平台的常用

在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。

不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。

字体与背景的层次要分明,确保字体样式与色调气氛相匹配

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

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

以下是在72像素/英寸下的规范308a134401abf737ca308c32cf47703f.png

移动端常规字体

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

f129d52cac352abd3fbe6fdce0270f09.png

Android

英文字体:Roboto

中文字体:Noto

ec46ad52d2560b3b3647082731f50424.png

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

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

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

026df3bc6e5a3f9149fa7b33582da27e.png

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

大的正文字号32px,副文是26px,小字20px。在内文的使用中,根据不同类型的App会有所区别。

像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性,正文字号36px,会选择性的加粗。

d7fba406c5e38b492c5dd25514930e66.png

而列表形式、工具化的APP普遍是正文32px,不加粗。副文案26px,小字20px

ee2e96b62032a7d0fcd0399d2d244dfb.png

26px的字号还会用于划分类别的提示文案,因为这样的文字希望用户阅读,但不要抢过主列表信息的引导。

5788a54d0e3e5f00dcc96682863806e9.png

36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次,同时加强按钮引导性,选用了稍大号的字体。

(见下图中的退出按钮)

31a539e3325c1fe86d1ea0ea5fa75d3c.png

大家注意了,在选用字体大小的时候一定要选择偶数的字号,因为在开发界面的时候,字号大小换算是要除以二的。这个详细缘由大家可以网上查询,我就不在这一一的介绍了。

常用字号的大小基本就这几个,根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。

网页端

常用的字号有哪些呢?

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

常用的字体:

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

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

67c988f2560dbe6b5287d920720fe1cb.png

方正正中黑系列

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

283841da725e228b811792e5237bb910.png

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

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

762e0302c8bf613cf16a66125e5bc40f.png

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

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

3ee5f27d01643cbc716bc12e8853c856.png

毛笔字生成器

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

81cc73260ae766fb89eba3c02a6da040.png

推荐大家几个毛笔字相关的网站:

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

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

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

61c8a65ab78f33f759856f773ad6da1e.png

选中拉入图片,点击[图像描摹]

13d2e36b6505129f0180fb29353a2988.png

然后继续点击[扩展]按钮

91f8cabe7566380d6c9fc7f27ebc01a4.png

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

db15c29a78337830b13f5da6024c4b1a.png

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

cfb24bf12167aaa06d15232cf20ecc6f.png

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

470c8428d2ad8239fc19aba8fa39c046.png

重要提示,怎么找不认识的字体名称?

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

2402ef78145c6a144491c2f48a655423.png

三、常用字体颜色

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

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

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

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

5560056806367fc36ac375bf0b0cd176.png

在界面中还经常会用到背景色#eeeeee。

分割线则采用#e5e5e5或#cccccc的颜色值,一个深一些,一个浅一些。这个会更具不同的软件风格采用不同的深浅,由设计自己把控。

567100331a698112b301ef43b21d057b.png

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

设计的时候我们还可以将字体进行变形来达到宣传的目的,这个需要设计师对字体设计有一定的了解。

总之,设计是要有规范,有体系的。使用规范化的设计对产品的延续性非常有帮助,并且保证了产品的独特性和一致性。所以,大家要在设计初期找到风格和规范,这样做出来的界面才会统一一致,在变化的需求中找到定量,调整起来也相对轻松很多。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/66559.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于 LayOut 室内设计施工图填充的那些事儿

作者: 活力网Andrew 大家用LayOut画施工图的时候 最纠结的一个问题就是:如何填充…… 其实 对于LayOut施工图来说 填充 只是很小的一个知识点 这次我们就和大家聊一聊填充的问题 关于Layout填充的方法与技巧 大概一共有四种 1、“野路子”填充法 …

unity使用BMFont制作位图字体

介绍 在游戏中制作中,我们往往会遇到自定义字体的情况,但是unity自带的字体Arial,无法满足我们对字体的需求。虽然我们可以导入字体,但是并不一定符合我们的需要,这个时候就需要使用自定义字体来显示某些东西以达到某种视觉效果,例如: BmFont准备 http://www.angelc…

ASP.NET 界面外观设计与布局

4.1.1 什么是主题和外观 主题是指网页和控件外观属性设置的合集,通过使用主题能够定义页面和控件的样式,然后再Web 应用程序中应用页面和页面上的控件,可以简化样式控制。 主题包括一系列元素,这些元素主要有外观文件、样式表文件…

设计师常用的7款界面设计工具!

不同的界面设计工具都有其独特的优点和不足之处。本文为大家介绍设计师常用的7款界面设计工具:即时设计是一款在线UI界面设计工具,拥有中文界面和丰富的社区资源,适合初学者和专业设计师使用。Sketch具有直观的矢量编辑工具和可重复使用的符号…

小技巧 - Chrome 浏览器绕过“请在微信客户端打开链接”

微信和 QQ 内置浏览器 UA~ Tips:如果此方法失效了,可以底下找我~(已有最新方法)Tips:如果此方法失效了,可以底下找我~(已有最新方法)Tips:如果此方法失效了,可…

陆奇再谈AI:“对不起,我跟大家的看法,有些不一样...”

作者| Mr.K 编辑| Emma 来源| 技术领导力(ID:jishulingdaoli) 前微软全球副总裁、百度COO、奇迹创坛创始人陆奇,最近发表演讲,他认为AI不是什么当下风口,风口意味着投机主义,未免太低估AI对世界发展的影响。陆奇表示…

Ubuntu 放弃了战斗向微软投降

导读这几天看到 Ubuntu 放弃 Unity 和 Mir 开发,转向 Gnome 作为默认桌面环境的新闻,作为一个Linux十几年的老兵和Linux桌面的开发者,内心颇感良多。Ubuntu 做为全世界Linux界的桌面先驱者和创新者,突然宣布放弃自己多年开发的Uni…

chatgpt赋能python:Python自动化控制应用:提高工作效率的利器

Python自动化控制应用:提高工作效率的利器 在如今信息化程度越来越高的社会,人们不断追求工作效率的提高。而Python作为一种解释型、交互式、面向对象的高级程序设计语言,具有简洁易读、可扩展性强等优势,成为了许多企业和工作者…

chatgpt赋能python:Python连接Kepserver实现工业自动化控制

Python连接Kepserver实现工业自动化控制 前言 在工业自动化控制领域,Kepserver是一个被广泛使用并拥有众多功能的软件平台。通过连接Kepserver,可以实现对各种设备的数据采集、控制和监控等操作。本文将重点介绍如何使用Python语言来连接Kepserver软件…

chatgpt赋能python:Python自动化SEO文章的介绍

Python自动化SEO文章的介绍 随着互联网技术的不断发展,SEO(Search Engine Optimization,搜索引擎优化)已成为网站日常运营中关键的一环。为了提高网站的排名和流量,人们不断探索各种SEO方法。而Python自动化SEO文章是…

企业微信会话存档功能接入

企业微信会话存档功能接入 简介官方文档上代码参考链接 简介 最近有个需求需要接入企业微信,将员工和客户的聊天记录存档,于是翻阅企业微信开放平台接口文档,写的那叫一个“好”(lan)。 网上文档也比较少,仔细阅读,翻…

midjourney/stable diffusion/太乙/文心一格/智源对比

挑战周杰伦《稻香》MV画面生成!中英文绘画模型PK,Midjourney、DALLE2、Stable Diffusion、百度ERNIE-ViLG 2.0.._哔哩哔哩_bilibili本期视频小土同学使用周杰伦《稻香》评测了最近大热的 6 个 AI 绘画模型的效果:MidJourney、Stable Diffusio…

文心一格小程序,AI绘画产品

文章目录 AIGC什么是AI作画?Prompt文心一格文心一格小程序使用方法使用小程序进行AI绘图 AIGC的未来发展结语 AIGC AIGC(AI Generated Content)是指利用人工智能生成内容。是利用人工智能来生成你所需要的内容,GC的意思是创作内容…

文心一格:文心一格与ChatGPT的对比分析

文章目录 [toc]简介1.中文作诗2.中国历史文化3.代码能力4.内容查询5.多模态小结其他: 简介 根据文心一言网页端信息显示,目前最新发版是4月1号的版本,版本号是v1.0.3,应该是从上个月16号发布会以后又做了两版迭代。根据文心一言自…

虚拟号的运营商一般是哪家的?你知道吗?

虚拟号的运营商一般分三种来源,下面和小编 一起了解一下 吧: 一:运营商,中国联通,中国移动,中国电信都有。 二:虚拟运营商,阿里,华为,腾讯之类 三&#xff1a…

保存138亿年?!5维磁盘在南安普顿大学研制成功

南安普顿大学研究中心(ORC)的人员近日发表报告称,他们成功研制出 5D 磁盘,且可以存储上亿年。利用纳米技术将信息蚀刻到玻璃上,拥有良好的稳定性,可以承受一千度的高温,而由于玻璃的物理特性&am…

DeepMind成为AI界创业加速营:3年17名资深员工与高管离职

来源丨新智元 编辑丨极市平台 在过去几年里,谷歌旗下的人工智能研究实验室DeepMind已经成为顶级人工智能人才的宝库。 自从谷歌在2014年以约5亿美元的价格收购了这家总部位于伦敦的初创公司以来,DeepMind在AI界屡有划时代突破: 创建了可以在棋…

10种流行的机器学习算法进行泰坦尼克幸存者分析

还记得上世纪轰动全球的泰坦尼克吗? 1912年4月,正在处女航的泰坦尼克号在撞上冰山后沉没,2224名乘客和机组人员中有1502人遇难,这场悲剧轰动全球,遇难的一大原因正式没有足够的就剩设备给到船上的船员和乘客。 虽然幸存者活下来有着一定的运气成分,但在这艘船上,总有一…

英国南安普顿大学医院博士后职位—儿科重症监护

英国南安普顿大学医院博士后职位—儿科重症监护 [知识人网-博士后招聘]南安普顿大学(University of Southampton,勋衔Soton),世界百强名校,英国顶尖学府,是罗素大学集团、世界大学联盟、科学与工程南联盟、…

南安普顿大学计算机专业如何,南安普顿大学计算机专业,南安最值得读的专业之一!...

主要的硕士课程包括: 计算机科学与软件工程 MSc Computer Science 计算机科学 MSc Artificial Intelligence 人工智能 MSc Cyber Security 网络安全 MSc Data Science 数据科学 MSc Software Engineering 软件工程 电子与电气工程 MSc Electronic Engineering 电子工…