大家好,我是讯享网,大家多多关注。
字体是界面设计中的重要元素之一,可以辅助信息的传递,是文字的外在表现。字体还可以通过其独特的艺术魅力表达情感体验,塑造品牌形象。总结了字体设计的重要性,界面常用字体推荐,以及国内外权威设计系统中字体大小、行高、字重的选择和设置。如果你想对界面字体设计有更深入的了解和应用,这篇文章会提供一些帮助。
辅助信息传输
文字是信息内容的载体,是记录思想、交流思想、承载语言的图像或符号,而字体是文字的外在形式特征,是文字视觉风格的表达。合适的字体可以辅助文字,清晰准确地向用户传达信息。
表达情感体验
字体的艺术性体现在其完美的外在形式和丰富的内涵上。在文字信息传递给用户之前,人们首先感受到的是字体带来的视觉魅力和情感表达。
塑造品牌形象
不同的字体有不同的风格特点:有的字体美观清新,线条流畅;有的字体规整,充满张力;还有色彩鲜艳活泼的字体……根据产品的属性选择合适的字体,可以有效塑造品牌形象。
2.推荐的界面常用字体
字体的选择是由产品属性或者品牌特征的关键词决定的。一般中文字体的类型有:黑体、宋体、仿宋体、楷体等。英文字体分为:无衬线、衬线、斜体、手写、黑色字体等。
中文字体推荐
网上中文字体推荐使用思源黑体、中文黑体、冬青黑体、微软典雅黑、方平-简、黑体-简和方正兰亭黑。iOS系统的默认中文字体是方平,安卓系统的中文字体是Noto Sans CJK。
本文介绍了Google和Adobe联合开发的字体“思源加粗”。它的风格介于现代和传统之间,可以在很多方面得到广泛应用,例如手机、平板电脑、桌面用户界面、网页浏览或电子书阅读等。它带给人们愉悦高效的信息阅读体验,而且是免费的。
英文字体推荐
三藩市,Helvetica Neue,Roboto,Avenir Next和Open Sans推荐用于在线英语字体。iOS系统默认的英文字体是“San Francisco”,Android系统默认的是“Roboto”。
Helvetica是一种广泛使用的西方字体,由瑞士字体设计师于1957年设计,微软常用的Arial字体也来源于此。作为一种经典的无衬线字体,Helvetica在平面设计和商业中非常流行和成功。被认为是现代主义设计理念的典范,其简洁平实的线条风格备受追捧。
数字字体推荐
在线数字字体推荐使用DIN、Core Sans D和Helvetica Neue。
DIN起源于1995年的德国,无衬线字体,好用,耐看,字体开放。是设计师最喜欢的字体之一,适合显示较长的大数,但在字号较小的情况下识别度较低。
Sans D是韩国设计师设计的无衬线字体。支持细、轻、正、中、粗等多种文字类型的权重。它能很好地显示大数字,但它是一种收费字体。
Helvetica Neue是Helvetica的升级版,除了简洁、中性、严谨、没有多余修饰之外,还拥有更多的字重,可以作为iOS和Android的跨平台数字字体。
二、字体大小1。关于字体大小
是界面设计中字体大小的另一个重要元素。字号的大小决定了信息的层次和主次关系。合理有序的设置字体大小,可以使界面信息清晰易读,层次分明。反之,使用糟糕无序的字体大小会混淆界面,影响阅读体验。
字号的选择可以遵循国内外权威设计系统中的字号规则,如iOS、Material Design、Ant Design等。,也可以根据产品的特点自行定义。
IOS字体大小规则
在iOS11系统中,旧金山被用作系统英语字体,包括以下文本样式:
11pt/12pt Caption (说明文字)13pt Footnote (脚注)15pt Subhead (副标题)16pt Callout (标注)17pt Body/Headline (正文/模块标题)20pt/22pt/28pt Title (页面标题)34pt Large Title (页面大标题)
需要注意的是,旧金山字体有两种模式:文本模式SF Pro Text和显示模式SF Pro Display。文本模式适用于字号小于20pt的文字,显示模式适用于字号大于等于20pt的文字。
在材料设计系统中,使用Roboto作为英文字体,并规定了以下常用字体大小:
12sp 小字提示14sp (桌面端 13sp) 正文/按钮文字16sp (桌面端 15sp) 小标题20sp Appbar 文字24sp 大标题34sp/45sp/56sp/112sp 超大号文字
长文本,每行60个字符左右,短文本,每行30个字符左右。
蚂蚁设计字体大小规则
受5标度和自然法则的启发,ANT定义了10种不同的字体大小,分别是:12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。
建议主字号为14px,其他字号的选择可以根据具体情况自由定义。尽量控制在3-5种之间,保持克制的原则。
Kiwi字体大小规则
Kiwi是饿了么中后端设计语言,致力于打造能够“理解、洞察、温暖、激励用户”的产品。在Kiwi Web中,最小字体大小为12px,主文本字体大小为14px,最大字体大小为46px。
行高可以理解为包裹在字体周围的一个看不见的盒子,字体和盒子之间的空间隙为半行间距。
根据W3C原则,眼睛到屏幕的距离为25cm,这是最佳阅读距离。西文字符的基本行高通常是字体大小的1.2倍左右。而汉字密密麻麻,高度一致,没有西文的上延和下延造成行间的空隙空。所以一般线高需要大一些,根据不同人群(儿童、青少年、老年人)的特点和使用环境,可以达到1.5到2倍甚至更大。
2.行高设置
IOS行高设置
苹果官方iOS字体大小对应行高如下(@1x放大):
官方的Microsoft Fluent Design字体大小对应于行高,如下所示(使用字体Segoe用户界面):
蚂蚁金服的蚂蚁设计字体大小与行高的对应关系如下(首选系统默认字体):
行高计算公式:L = F+8。l为行高,F为字号,F ≥ 12。
四。单词权重1。关于单词权重
字粗是指字体的粗细。一般有细、轻、中、中、粗、重等。字体系列名称后显示的是所有字重名称。越来越多的产品界面需要通过词权重来打通信息层面。目前,iOS11标题风格的主要趋势是通过词的权重来打通信息层面。
不同的字重反映了不同的层次关系和情感感受。细字体给人细腻轻盈的感觉,粗字体给人庄重严肃的感觉。因此,在定义字体规范时,需要考虑使用什么场景、什么字重,才能保持良好的阅读体验。
2.设置单词权重
汉字的设置也是基于秩序、稳定、克制的原则。为了统一整体效果,一般来说,使用两种字重比较好,比如只出现常规和中等字体粗细。在特殊情况下,可以使用更厚或更薄的字权重来进一步拓宽信息级别。
当字体大小为12-18pt时,使用常规;;20-26pt时,使用光;;28-34pt,用瘦;;当字号超过34pt时,建议使用超轻。
以上是根据字体大小与字重成反比的规律设置的,即字体越大,字重越细。当然也可以按照比例规则或者用户自定义规则来设置,具体来说就是根据产品定位和用户特征来设置,这样才能保证信息层次清晰明了。
本文即将结束。如果对你有一点帮助,请喜欢~谢谢阅读~
作者:尼尔·彭彭,微信官方账号:彭彭设计笔记,不定期更新UI/UX设计文章。
本文由@尼尔·彭彭原创发布。每个人都是产品经理。未经许可,禁止复制。
图片由作者提供
本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://51itzy.com/31045.html