UI字体平面设计常用字体的几种常用方法

作为一个师,界面规范真的很重要,我们也许能把ios各个模块数据如数家珍,但是字体呢,正文字体多大字号?标题多大字号?哈哈,别发蒙,今天小编给大家带来满满的的干货,原文来自带来的界面设计常用字体规范,大家看完果断收藏。
作者:王铎(MICU设计)
好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事。
这几天有人问我说:“最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学点直接能拿来用的,这个要求过分吗……”
这个,好吧,那就直接说说能用的知识:字体字号。
也许你会说:字体字号?也太Low了吧,这个谁不知道重要呀。
对于这个问题,我想说:会和熟练,是两回事。一个App,不同部分的字体字号你能准确地说出来吗?
很多刚做APP界面的设计师,经常会因为字号,字体颜色,间距而困扰。
拿到设计需求后,开始进行设计,不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐,导致与预期不符等。
这小节我将和大家理一理界面中常用的字体,字号,字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。
一.成也字,败也字
在设计师的职业生涯中,至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。
我们常常会听到,这也太LOW了吧!!你能统一一下字体吗?
不明确而繁琐的字体搭配会导致整个画面失调。可以这样说,字体可以成就设计也可以毁掉设计。
问题的关键有:
1.字体样式太多,导致页面杂乱
2.使用的字体不易识别
3.字体样式和内容的气氛或规范不匹配
怎么避免这样的结果发生呢?
通过设计经验可以帮助你做出更好的版式,了解不同平台的常用字体设计规范.
在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。
不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。
字体与背景的层次要分明,确保字体样式与色调气氛相匹配
二.界面中文字使用的规则
在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体,在这我和大家分别介绍一下。
以下是在72像素/英寸下的规范
移动端常规字体
IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好。
英文字体:Roboto
中文字体:Noto
移动端常用的的字号有哪些呢?
导航主标题字号:40-42px
我一般设计就用40px,偏小的40px字号,显得精致些。
在内文展示中字号大小又是多大呢?
大的正文字号32px,
副文是26px,小字20px
在内文的使用中,根据不同类型的App会有所区别。
像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性,正文字号36px,会选择性的加粗。
而列表形式、工具化的APP普遍是正文32px,不加粗。副文案26px,小字20px
26px的字号还会用于划分类别的提示文案,因为这样的文字希望用户阅读,但不要抢过主列表信息的引导。
36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次,同时加强按钮引导性,选用了稍大号的字体。
(见下图中的退出按钮)
大家注意了,在选用字体大小的时候一定要选择偶数的字号,因为在开发界面的时候,字号大小换算是要除以二的。这个详细缘由大家可以网上查询,我就不在这一一的介绍了。
常用字号的大小基本就这几个,根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。
常用的字号有哪些呢?
网页中文字字号一般都是宋体12px或14px(无状态),大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px,一般使用双数字号,单数的字体在显示的时候会有毛边。
常用的字体
1.平平稳稳:微软雅黑/方正中黑
微软雅黑系列:在网页设计中这款字体使用的非常平凡,这款只无论是放大还是缩小,形体都非常的规整舒服。在设计过程中建议多使用雅黑,大标题用加粗字体,正文用常规字体。
方正正中黑系列:中黑系列的字体笔画比较锐利而浑厚,一般运用在标题文字中。但这种字体不适用于正文中,因为边缘相对比较的复杂,文字一多会影响用户的阅读。
2.与时俱进:方正兰亭系列
方正兰亭系列: 个人最推荐的就是这个系类的字体,整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁,这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合,不仅能保证字体的统一感,还能很好的区分出文本的层次。
3.刚劲有力,运动型:汉仪菱心简/造字工房力黑/造字工房劲黑
在这几个字体中,他们有着共同的特点,字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式,让文字显得更为活力。在这三种字体中,菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松,更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多,效果比较突出。
毛笔字生成器
通过自由的书法网站在线生成。在网址中输入文本,再进行选择书法字体样式。通过这种方法我们能很快的找到需要的书法字体。这招非常管用。
推荐大家几个毛笔字相关的网站:
http://www.51poca.com/
http://www.epinv.com/online/
http://www.akuziti.com/mb/
http://www.ziticq.com/shufa/
和大家简单操作一下毛笔字的使用方法。
将下载下来的字体图片AI转路径,编辑文字。
首先使用在线生成器输入选择好你需要的文字字形,将文字图片拖至AI中。
选中拉入图片,点击[图像描摹]
然后继续点击[扩展]按钮
扩展完毕后,图片已经都变成了路径。
使用魔棒选择颜色就可以将文字的路径提选出来。
最后经过设计后的Banner效果,这就是我经常用的Banner风格,你们也试试吧~
重要提示,怎么找不认识的字体名称?
很多朋友会看到别人使用的字体非常好看,但又不知道是什么字体。在这我告诉你一个方法。可以通过网络上传字体图片进行搜索字体名称。网址:http://www.qiuziti.com/
三.常用字体颜色
字体颜色又有哪些常用的颜色呢?
在界面中的文字分为三个层级,主文、副文、提示文案等。
在白色的背景下,字体的颜色层次其实就是黑、深灰、灰色。
常用的色值是#333333;#666666;#999999
在界面中还经常会用到背景色#eeeeee。
分割线则采用#e5e5e5或#cccccc的颜色值,一个深一些,一个浅一些。这个会更具不同的软件风格采用不同的深浅,由设计自己把控。
在我们做设计的时候,字体和图库均是有版权的,请注意合法使用。
设计的时候我们还可以将字体进行变形来达到宣传的目的,这个需要设计师对字体设计有一定的了解。
总之,设计是要有规范,有体系的。使用规范化的设计对产品的延续性非常有帮助,并且保证了产品的独特性和一致性。所以,大家要在设计初期找到风格和规范,这样做出来的界面才会统一一致,在变化的需求中找到定量,调整起来也相对轻松很多。
原文地址:
原文作者:
其他推荐文章:
转载请注明: &
学UI就上学UI网!越努力,越幸运!
“学UI网 ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!
【特色推荐】
” 海量APP截图,让你灵感爆发!国内最好的APP截图站。
“” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!
“” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?
你可能喜欢的:当前位置:
免费发布需求,接收报价与方案
关于淘宝美工设计字体设计的几种常见风格
1、复古风格的字体设计
化妆品品牌 Benefit 诞生于美国上世纪 70 年代这个自由奔放的时代,而创始人之一的姐姐 Jean Ford 刚好主修艺术,她十分懂得如何包装她们的品牌。Benefit 的包装和字体颇具复古风,比如留声机造型的包装盒。衬线字体的 logo 具有较强的装饰性,字母的转角处线条柔和,更具流线形的字母 f 使 logo 显得更生动有趣,搭配留声机造型内部的连笔手写体,一股浓浓的复古风扑面而来,见到如此有趣又漂亮的包装盒,难怪让很多女性爱不释手。
2、独具文化色彩的字体设计
Yoritsuki的字体设计使用了毛笔书法的笔触书写的方式,将墨这种元素融入到了字体当中,这种东方文化中特有的东西,使得 Yoritsuki 这款 App 的风格显得非常鲜明。如果使用这种字体风格进行设计,即使在你还没有打开这个店铺的时候,你就已经能大概知道里面会是什么样子的了。
3、梦幻风格的字体设计
迪士尼的字体就属于这种风格,粗细不一的比划和大小不同的字母具有非常强烈的节奏韵律感,字母划出的曲线像翩翩起舞的丝带,也像魔棒划出留下的痕迹。淘宝美工设计的字体设计如果采用这种风格,可以使人充满想象。
4、女性化风格的字体设计
女性化风格的字体经常可以在化妆品品牌中看见,她们通常字体纤细、秀美,线条流畅,字形有粗细等细节变化,显得有韵律或通过装饰性元素和字体结合。因为衬线字体天生具有衬线这种可装饰性元素,因此很多女性化风格的字体会选用衬线字体,并以此为基础进行修改,比如 LANCOME 的 logo 字体。
5、现代风格的字体设计
现代风格字体多为无衬线字体,这类字体除本身文字的比划之外缺少装饰性的元素,风格较简约。WWDC 2013前夕,即便在 iOS 7 并未对外界正式发布之前,但是通过会场的海报人们都清楚地意识到,iOS 7 的风格一定带来了极大的转变。Helvetica Neue 风格非常现代,似乎暗示着苹果将在 iOS 7 中完全剔除过去人们陈旧的审美,取而代之的是更为现代的视觉风格,而在后来的大会上 iOS 7 的最终发布也证实了这种观点。
6、科幻风格的字体设计
电影星际迷航的海报上的字体就属于这种类型。实际上我们经常会在一些科幻电影的海报或者网站上见到这种类型的字体。科幻风格的字体风格普遍比较硬朗和锐利,通常有过渡比较直接的折角。作为钢铁侠原型的传奇人物,Elon Musk 创办的几家公司的 logo 字体设计也类似。除了具有比较硬朗的线条之外,Tesla 和 SpaceX 的 logo 去。
7、趣味风格的字体设计
具有趣味性的文字可以使用产品中的某些元素和文字进行创意性的结合,比如炉石传说的字体设计,巧妙的运用魔幻一样的“漩涡”和石头下半部分的“口”结合起来,虽然炉石传说几个字在风格上是保持一致的,但是每个文字的折角并没有刻意地将大小或角度保持标准一致,这样的非规律性做法也增加了字体的趣味感,让用户觉得这款游戏一定会具有可玩性。
好了,以上就是关于淘宝美工设计字体设计的几种常见风格的详细介绍,希望广大的淘宝美工设计人员在看完本文之后,在往后的广告设计当中,都可以很好地运用到文章中所列举到的常见的字体设计风格,为店铺的视觉营销做出自己应作的贡献。如果你的店铺需要进行,可以在一品威客网上注册账号并发布任务需求。
买创意 买设计
上一品威客网
阅读12333次0
阅读11733次0
阅读11489次0
精彩专题 HOT
HOT PROJECT
网站UI设计服务排行榜
SERVICE LIST
&9999元 /次
&2000元 /一口价
&1000元 /起
&3300元 /套
&100元 /页
&388元 /次
&8600元 /件
&1000元 /款
热门关注TOP10
HOT INFORMATION
STRATEGY RANKING&nbsp 发表于& 10:31:22
UI字体设计
UI字体设计,UI设计工作有时候要做好字体设计,因为很多时候,UI外部设计很重视字体的样式,对用户体验也有很大的影响。&UI字体设计,由于目前UI设计师在国内的发展尚处于起步阶段,整体上缺乏一个良好的学习与交流的资源环境,这一领域真正高水平的、能充分满足市场需要的UI设计师为数甚少;而IT行业日新月异的发展速度和人们日益提升的生活标准,也对从业人员提出了越来越高的要求,因此,UI设计师应该通过不断的学习实践,在诸多不同领域,尤其是在人才资源普遍缺乏的社会学、心理学等人文学科领域拓展视野,丰富自我,努力向高级、资深设计师乃至设计总监的方向发展。除此之外,具有较强协调、组织、管理能力和领导资质者,则可考虑晋升为IT项目经理。&做好UI字体设计,对用户体验的提升很重要。
此帖被Ke星超人&于日 10:32&进行了下沉操作
全部回复共9条
赞赞赞 非常不错 太喜欢拉
你需要登录后才可以回帖& |
赞赞赞 非常不错 太喜欢拉
你需要登录后才可以回帖& |
赞赞赞 非常不错 太喜欢拉
你需要登录后才可以回帖& |
赞赞赞 非常不错 太喜欢拉
你需要登录后才可以回帖& |
赞赞赞 非常不错 太喜欢拉
你需要登录后才可以回帖& |
本宫特别喜欢
你需要登录后才可以回帖& |
真的不错哦!
你需要登录后才可以回帖& |
你需要登录后才可以回帖& |
你需要登录后才可以回帖& |
你需要登录后才可以回帖& |
(C)2018 课工场 版权所有
京公网安备90号中英文字体的浅析,浅析交流,大神们有好的想法,请多给些宝贵的建议哦!详情请戳原文你懂的
今天主要跟大家讲一下中英文字体的浅析,中英文字体,今天我们讲一个中英文字体的了解,还有一些 常用的一些字体,就是我个人常用的不是说每一个设计师都都会常用,大家都知道每个行业每个领域所用 到的这些字体都不一样,有一些电商的是吧,有一些是网页的,有些是ui的,有一些是其他的,各种各样 的行业,用的字体都不一样,这个常用字体是我常用啊就是我常用的一些字体,推荐一下给大家!
跟大家说一下,在我们的电脑或者网页上,我们都可以看到特别多的一些汉字文字,你所使用的电脑也少 不了,可能也也有一两百个字体是吧?非常多,但是你不可能每一个字体都能用得到,就像这张图片看到 有非常多的一个字体,有一些特别奇葩的也有,如白棋啊!什么剪一剪哈哈?首先呢我们先对我们的中文 ,中文字体大概有个了解,因为我们讲的是中文字体,所以的汉字的一些衍进我们也要清楚。
可能大家以前有上历史课或者其他其他课文都会有看过,一开始是我们的图形象形文字,甲骨文,钟鼎文 是什么文,钟鼎文其实就是经文刻在鼎上所以叫它钟鼎。石鼓文呢?这些有一些专业的名词,我们也不需 要记,就是一些古文,石头上文字,还有秦系列的是什么字体,我想大家可能有些不太清楚,“秦”大篆 小篆,就是秦朝的时候用是篆书。隶书,再到我们楷书,碑文,还有草书行书宋体,仿宋黑体之类,这些 都是现代的一些字体,不需要我们就一一写出来了吧?大家每天都在用的。这就是我们中国汉字的一些衍 进,如果不懂衍进是什么,那就看看这张图吧!
就目前不管是杂志,打印、课文等都是在宋体跟黑体之间切换应用,轮换的用哪个场合是用黑体,哪个场 合使用宋体,就是拿现代的一些字体来用,前面说到比较古老这些都是成为一个艺术品,象形文字那些都 已经成为我们一些考古学家去考古的研究的东西,我们了解一下就好。
下面我们来认识下常用都有那些字体,这个就是小篆,大篆小篆呢其实也有点区别,这个非常工整,而且 非常有力的,一般人都会知道楷体是吧?楷体是非常有力,而且一点一撇一捺都是非常清楚,都非常清楚 ,这种呢就是楷体,这个几乎与楷书和草书之间的是什么书,这个有点楷书,有点草书的感觉,又有点看 不懂,但是它又没有那么那么模糊,这种呢就是行书,行如流水,介乎于草书跟楷书之间的一种字体叫行 书,最后两种就不用我说了吧,一种是宋体,一种是黑体,这个呢就是我们中国历代一些字体的演变,也 不算演变衍进吧!就是每个朝代都会有他的不同的一个字体,大家这里可以了解一下就行了,不需要深入 的去研究考古啊!
好接下来就是咱们分享干货了,一些常用字体的推荐,就是我经常会用到,比如说之前我做一个平面设计 师,我就会经常用到一些电商之类的字体,就是我们的造字工房啊或者方正粗谭黑之类的,还有一个方正 粗黑那些字体,经常会用到,因为他很容易出效果。
第一个讲一下造字工坊版黑,其实他有很多个字体,这些呢就是一部分,我没有一一的列举,应该有挺多 的,十几二十个吧,最少都是十几个,这个是我们常用的一些造字工坊的一些字体,版黑和力黑这这几款 比较适合男生,比较硬朗一点,力黑版黑,还有朗宋俊雅。悦黑,还有雅园,看在哪个场合,我们运用哪 个种字体,如果你说是一些非常优雅的地方,我们可以用一些俊雅,还有朗宋之类的,这些版黑就比较力 量型的,力量型的,我们一般用在咆哮体。什么叫咆哮体?应该大家都知道,做电商应该会知道,减价什 么降价百分之多少这种咆哮体,这些可能会用的比较多,朗宋跟俊雅看他两个字体啊都非常优雅,适合用 于一些比较中国风的。比如说中国风的一些古典,卖古典衣服,旗袍之类的,可能会用到,这个悦黑一般都是比较时尚类,还有 雅圆也是比较高雅一点的。我们看情况啊,这里我不能说不能用那个适合用那个,根据个人的情况设计而 定,看它整体的一个气氛,来用我们的一个字体,没有一定的标准。
好今天就先分享到这里,更多内容请戳原文地址,你所关注的公众号,将决定了你看到的世界 嘿嘿!
原文链接:
可以记录推荐数据哦!
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友Java|ui设计|web前端|童程童美等信息资讯平台
美国上市公司亿元级外企IT培训机构
当前位置 :
> UI设计中字的三种选择方法
UI设计中字的三种选择方法
时间: 14:16
来源:UI设计网
作者:IT培训网
已有:名学员访问该课程
每期开班座位有限.0元试听抢座开始!
请输入正确的验证码
温馨提示 : 请保持手机畅通,咨询老师为您提供专属一对一报名服务。
------分隔线----------------------------
------分隔线----------------------------
全国服务电话:400-017-8985 全国监督及投诉邮箱:
Powered by
(C) IT培训网一站式精准营销服务平台 cnitedu Inc.
备案信息:

我要回帖

更多关于 设计常用字体打包下载 的文章

 

随机推荐