手机端界面设计必备!全方位科普常用的字体规范经验/观点

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

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

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

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

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

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

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

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

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

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

问题的关键有:

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

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

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

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

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

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

以下是在72像素/英寸下的规范

IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好。转载者说明一下:06年苹果字体已经更换苹方字体,苹果的字体设计,你懂的

Android

英文字体: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.刚劲有力,运动型:汉仪菱心简/造字工房力黑/造字工房劲黑

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

200人已收藏

爱梵高做的现杀母牛肉罗宋汤

你确定要举报手机端界面设计必备!全方位科普常用的字体规范?

THE END
1.手机界面设计软件有哪些?好用的设计软件推荐!界面设计的本质是对2D平面图形进行设计与排版,拥有多样化的选择。可你是否知道?无论是在创建基本线框还是创建功能齐全的原型,唯有选对手机界面设计软件才可以帮助我们更快、更高效地完成设计。在选择高效手机界面设计软件时,你是否遇到过以下问题呢: 启动关闭软件时间过长 https://pixso.cn/designskills/what-are-the-mobile-interface-design-software/
2.桌面/手机APP软件界面设计软件UI设计经验案例欣赏APP软件界面如何设计?提供桌面/手机软件UI设计经验和案例欣赏。如果您有软件界面设计需求并寻求专业UI设计师帮助,欢迎咨询艾艺-专注于UI设计、交互设计及用户体验设计的公司。https://www.adinnet.cn/tag-98.html
3.手机软件界面设计素材手机软件界面设计高清图片素材下载摄图网汇聚手机软件界面设计图片大全:手机软件界面设计图片素材、手机软件界面设计高清图片、手机软件界面设计背景图片等。你可以找手机软件界面设计图片设计灵感、手机软件界面设计图片摄影创意,我们欢迎您下载手机软件界面设计vrf正版授权图片,商用无压力https://m.699pic.com/image/shoujiruanjianjiemiansheji.html
4.手机软件界面设计的创新设计设计手机界面资源手机软件界面是置身于手机操作系统中的人机交互的窗口,设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计,界面设计师首先应对手机的系统性能有所了解,例如:手机所支持的最多色彩数量、手机所支持的图像格式,其次应该对软件的功能详细了解熟悉每个模块的应用模式。从而做到最大限度的利用现有资源进行用户界面的https://download.csdn.net/download/weixin_38661800/14977063
5.手机应用软件ui界面设计经典案例推荐Top10素马自媒体自成立以来非常注重ui界面设计这一块,因此定会定期推出跟用户体验相关的设计案例。我们热衷于为你搜索、筛选并推荐最新的手机应用软件界面、App软件界面以及Android & Iphone手机ui界面设计经典案例。优秀的手机应用软件ui界面设计作品,能给用户眼前一亮并留下深刻印象。今天分享推荐的这Top10款经典案例,涵盖了https://www.sumaarts.com/share/589.html
6.手机App界面设计专用软件推荐1.我要推荐的是“Design Tools”(“设计工具”)。这款软件提供了丰富的设计资源和模板,帮助你快速创建出色的手机App界面。通过它,你可以轻松实现各种效果,如动画、过渡和图形编辑。它还支持多种格式的输出,方便你与团队合作和分享。 2.接下来是“UI Design Kit”(“UI设计套件”),它是一款功能强大的界面设计工具http://www.apppark.cn/t-53419.html
7.软件界面设计图片软件界面设计素材红动中国素材网提供434个软件界面设计图片、软件界面设计素材、软件界面设计背景、软件界面设计模板、软件界面设计海报等PS素材下载,包含PSD、AI、PNG、JPG、CDR等格式源文件素材,更多精品软件界面设计设计素材下载,就来红动中国,最后更新于2024-12-07 10:19:56。https://so.redocn.com/sheji/c8edbcfebde7c3e6c9e8bcc6.htm
8.ui设计软件界面设计软件手机ui设计工具PowerUI提供全流程开发平台的UI设计软件、UI设计工具、界面设计软件。支持所有主流的操作系统平台下的界面开发,供了强大的界面控件和界面特效!http://xz.puiedu.com/product.html
9.UI设计APP界面网页界面手机端WAP端PC软件端界面设计ui界面设计交互设计,移动应用设计,网页设计,软件界面设计,平面设计,设计一切与图片有关的项目.价格: ¥10.00 立即购买 5.00分 保障: 消保赔付 担保交易 支付方式 若交易失败(退款),您可以额外获得交易额5~10%的消保赔付金。商品详情 交易评价 交易规则 防骗指南 ui设计微信小程序界面设计app设计网页设计psd界面设计后台https://www.huzhan.com/serve/goods4538.html
10.浅谈手机软件开发中的UI界面设计毕业论文.doc浅谈手机软件开发中的UI界面设计 毕业论文.doc吉林大学珠海学院毕业论文(设计)浅谈手机软件开发中的UI界面设计BriefdiscussionabouttheUIdesignofMobileSoftwareDevelopment完成日期二零一三年四月吉林大学珠海学院本科毕业论文开题报告浅谈于?机软件开发中的UI界面设计摘要日前国内手机软件界血设计参差不齐。有的手机软件只注https://www.taodocs.com/p-413898676.html
11.UI界面设计设计教程ui正版手机交互游戏软件界面设计正版现货UI设计黄金法则:触动人心的100种用户界面 手机 APP ui界面设计教程 软件UI界面设计游戏ui界面设计UI交互设计教程材书¥34 折后¥34 发货地: 河北 廊坊 包邮 品牌: UI/集塑 风格: ui 界面设计 设计教程 UI 正版 手机 交互 游戏 软件 界面 https://www.zhe2.com/note/41798011115
12.MasterGo软件跨平台支持 Windows、 macOS 以及「网页版」,并且支持移动端同步镜像,可方便地在手机平板上即时预览和演示效果。 MasterGo 可以看做是专为国人习惯定制的国产 Sketch + Figma 替代品,完全中文化的软件界面非常直观,各种智能化功能如自动布局、素材填充等功能不仅能大幅提高设计师的工作效率,也让软件非常易于上手。https://www.iplaysoft.com/mastergo.html
13.手机磨皮软件哪个好?四款常用修图app对比1、上手难度和界面设计 四款软件中,上手难度从简单到复杂为:VSCO>Snapseed>PS Express≈Lightroom。上手难度最容易的是Snapseed,因此Snapseed操控界面最直观,而且大量调整以模板的形式出现。上手难度最大的是Lightroom,毕竟这个和电脑版没有什么区别。VSCO实际上是依赖于滤镜,只是挑选滤镜,并没有太多难度。 https://www.customsnews.cn/shouji/d5711n2i.html
14.手机erp软件系统有哪些软件1. 用户体验与界面设计 一款优秀的手机erp软件应具备直观易用的界面和流畅的操作体验。某业某财以简洁的设计理念,打造了符合移动设备使用习惯的ui,让员工无需额外培训即可快速上手。其图标清晰,功能布局合理,使信息查询和业务处理变得轻松快捷。 某业某财还注重个性化定制,允许用户根据自身需求调整功能模块,确保软件与https://h.chanjet.com/ask/02368872cf6068e72a.html
15.[手机ui我的界面设计]图片免费下载手机ui我的界面设计素材千图网为您找到573张手机ui我的界面设计相关素材,千图网还提供手机ui我的界面设计图片,手机ui我的界面设计素材, 手机ui我的界面设计模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://m.58pic.com/tupian/shoujiuiwodejiemiansheji.html
16.手机设计衣柜软件使用指南在手机设计衣柜软件中如何添加材料? 在手机设计衣柜软件中添加材料需要注意以下几点:1. 选择合适的软件;2. 打开软件并新建一个设计项目;3. 在设计界面中找到“添加材料”功能;4. 选择需要添加的材料,并设置材料的尺寸和颜色;5. 确认添加后,可以在设计界面中直接使用该材料。 https://www.3vjia.com/seo/seodetail/00041/07215.html
17.简单儿童绘画教育网站WordPress模板(带手机版)简单的儿童绘画教育网站Wordpress模板(带手机版)易于管理,是一款值得拥有的WORDPRESS网站模板。是简单的小儿教育类型网站、儿童绘画学习教育网站WordPress模板下载。模板配色简洁美观大方,设计风格新颖。页面结构简单,利于网站后期优化,模板后台易于管理。 模板特点 这款Wordpress模板支持PC+手机版设备浏览,兼容各大主流浏览器。https://wpmbg.com/peixun/30805.html
18.手机APPUI界面设计原型草图手机APP界面UI设计原型草图任何一位设计师在设计APP软件时,都会对该APP的功能、界面布局、菜单设置、内容架构等方面进行详细的策划。只有在充分的策划前提下,才能通过应用软件的加工,将脑海中的构想变成一个个的APP界面UI设计图形。凭借草图,设计师也可从宏观的角度时刻把控APP设计的每一个细节。以下为一款购物平台APPhttps://www.renrendoc.com/paper/103933801.html