赞助商
立即赞助

内部教程!超详细的支付宝设计规范之线上字体篇

UI设计3年前 (2021)更新 流光
3.7K 0 0

一、字体设计的价值

文是图像记忆衍生,们为了简明地表事情、物品、物等情景画,而演变出简明记载。文作为图片衍生,也是品形象要元素。而体则是文信息在表,不体不仅能影响排版,更会极大反应品性格。如说图形和色是品皮肤和血,那体则是品内在骨骼。

1. 信息呈现

文是信息最接最晰表,而体则接决定了文信息能否正确、准确地传,不晰、难以辨认体会极大地削弱文表。

2. 情感表

文本质上也是图形,而体则是这图形在形。体能在文所表信息被理解前,最接情感冲击。

3. 个性塑造

不体应着不个性,比如圆润体代表和蔼可亲,而泼墨书法体传了狂放不羁,正确体选择才能更好地配合其他元素来塑造品性格。

二、字体的选用

体是影响品形象基本元素,有使用合适体去搭配品图形,才能让品形象体效最大化。

内部教程!超详细的支付宝设计规范之线上字体篇

此,在字体选择上,最键的就是根据由牌特性推导来的键词来到字体的基本原则,最终我们确定了个基本原则,即:端庄匀称、笔画严谨、清晰可读、格现代。

内部教程!超详细的支付宝设计规范之线上字体篇

根据字体的原则,符合上特点的可字体有:微软雅黑、思源黑体、华为黑体、苹方、方正兰亭黑、FF DIN 和 Helvetica Neue。这些字体都是相对见,而且容易获取版权的现代格的字体。

内部教程!超详细的支付宝设计规范之线上字体篇

三、中文字体的选用

1. 字体的对比

思源冬青斜的笔画末端会变化,苹方、微软黑、兰亭黑都严格的横平竖直,但线条的宽度区别。微软黑粗,小字阅读会较吃力。方兰亭黑从微软黑派衍出,显著的变化其字面字身比下调到常的92%,缩减5%的宽度让字形修,宽的字距让文面宽松易读。这些改变让兰亭黑得以好应其他应用场合。

内部教程!超详细的支付宝设计规范之线上字体篇

2. 方正兰亭黑的优势

方正「兰亭黑」是国内一套为屏幕设计,并由此衍生出的家族系列字。兰亭黑的设计弥补现有黑的不,它追求字的整形式美,强文字设计的审美和文化。结构严谨、讲究,禁得住仔细推敲琢磨,更注重字的「形象」;黑白节均匀,重心一致,排列整齐;笔划精良,条刚柔相济,富有弹。阅读舒适流畅,有鲜明的时代感。

支付宝作互联网金融公司,致力于打造「专业、信任,简单」的形象。目主流的无衬线中文字体中,方兰亭黑端匀称、设严谨、易识别、文字线条粗细均衡,且了应激烈的竞争不断化,这样字体设符合这一形象。

内部教程!超详细的支付宝设计规范之线上字体篇

四、英文和数字字体的选用

FF Din 和 Helvetica Neue 比

FF Din DIN 是德国标准协会,Deutsches Institut für Normung 首母缩写。起自德国铁路体,Albert-Jan Pool 于1995年设计发民用体。衬线体,易用耐看,形开放,代表了德国设计。是设计师最爱几类体。

Helvetica 是瑞士设计师马克斯.米耶丁设计的现代主义风字,中,无衬。字末端严持横平竖直,严谨、守,没有任何的修饰,适合不同分辨率的显示器。而 Helvetica Neue 则是原来字的升级版,拥有更的字重,更易不同场合的应用。

内部教程!超详细的支付宝设计规范之线上字体篇

DIN 的字形比瘦长,很适合显示比长的数字,但是小字号的情况下识别度低。Helvetica Neue 的字形则相对偏胖,笔画更清晰,而且小字号的情况下读也很高。 考虑到支付宝为一款民使用的、偏金融和支付属的 APP,我们选择中的、读高的 Helvetica Neue 为英文和数字的品牌字。

内部教程!超详细的支付宝设计规范之线上字体篇

综上所述,我们确定以方正兰亭黑为整个支付宝品牌的中文字,适用所有下文字信息的表达和部分上内容的展示。同时确定以Helvetica Neue为支付宝品牌的英文和数字字,适用所有上下英文和数字的展示。

内部教程!超详细的支付宝设计规范之线上字体篇

五、线上字体规范

1. 线上字体的

虽然根据支付宝的牌特性我们确认来方正兰亭黑作为牌字体,但是在线上环境(移端如 iOS 和卓系统)中,字体的使会强烈受到系统的限制。

此规定,在 iOS 系统,文体使用苹,英文体使用 San Francisco;在安卓系统,文体使用思黑体,英文使用 Roboto;与此时,数采用 Helvetica Neue 这跨平台体。

内部教程!超详细的支付宝设计规范之线上字体篇

2. 字号规范

字号的原

在界设计,文号大小决定了信息层和权。齐而又层分明不号大小排列会让体设计变更加晰有序。

不同的操系统有自己特有的 UI 规,但是在整上,不管是 iOS 还是安卓系统采用以2的倍数的栅系统。在移动端,不管是 UI 的尺寸还是间距,应该为4的倍数。因此,我们规定在移动端,字号也是以2为基进单位,将字号大小从最小的20pt以4的倍数延续到40px。

同时针对一些特殊的金额数字的展示,特别以16作制单规了从64px到112px的规范字。

内部教程!超详细的支付宝设计规范之线上字体篇

字的使用

根据定下的字号,将支付 app 内部的息为7个层,其中最高的为重要金额、数字的显示,其字号间为64~112px(在2x图计模式下),最低为辅助说息,其字号为20px。体的建议使用方式如图:

内部教程!超详细的支付宝设计规范之线上字体篇

△ *  星号部的字号仅限于定的使用

参考案例:

内部教程!超详细的支付宝设计规范之线上字体篇

六、行高规范

1. 行高的原理

参考 w3c,眼睛到屏幕的距离25cm,目通用的法,文的基本行高通常字的1.2倍左右,中文因字符密实且高度一致,文的伸部(ascender)下延部(descender)创造行间空隙,所以一般行高需,根据阅读人群划分(儿童、轻人、老人),可达到 1.5 至 2 倍甚至。

内部教程!超详细的支付宝设计规范之线上字体篇

2. 行高的规范

结合前面推导的字号和行高原理,对目前规范的每一个字上相应的行高,不管是在设计时还是进行开现,必须遵从一规范。

内部教程!超详细的支付宝设计规范之线上字体篇

七、字重规范

1. 字重的规则

字重是指字体笔画的粗细,一般在字体族名后面注明的「Thin」「Light」「Regular」「Book」「Bold」「Black」「Heavy」等都是字重名称。由于在一种字体可在标题、落甚至海报,单一的字重可并会很好的适应这些场景,于是衍生了同一个字体的同字重。

在移动端页设计,为了简化选择,统体效,此指定在不系统或体,限制设计使用。即:在苹选择「纤细」作为轻,「粗」为;思黑体选择「细体」为轻,「黑体」作为;Helvetica Neue选择「Thin」为轻,「Bold」为。

内部教程!超详细的支付宝设计规范之线上字体篇

2. 字重的使

同一个字体的同字重传达同的信息权重和情绪。细的字体给人细腻、轻快的感觉,而粗体则给人着重和严肃的认知。因此适合的场景使合适的字重非重要。

内部教程!超详细的支付宝设计规范之线上字体篇

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

每个人都在关注趋势。Dribbble 是设计师的集散地,也是设计趋势最容易体现的地方。如果你经常关注 Dribbble 上的那些设计作品...
2018设计趋势
网易UEDC – 杨添琴 :设计思维是以传统分析思维方式为蓝本,融合视觉化和社会化思考的创新思维方式。它帮助设计师以用户为中...
全链路设计
编者按:我在2年前曾经写过一篇《也许AR增强现实技术才是距离设计师最近的未来》,而 Adam Fard 对于 AR 技术的观点和视角更...
Adam Fard
王M争:前几天在 b 站上看郭德纲的相声,在下面看到一个推荐视频就点了进去,看完之后点「返回」想继续看之前的相声,结果发...
交互控件
这篇内容较少,但是非常重要实用,因为提供了很明确的几份设计走查表,用于在发布产品之前检验问题、清单共有4个,分别针对不...
交互设计流程
现代人对于健康越来越重视,而移动端APP 在这方面为用户提供了多种多样的帮助。无论是系统化的健身应用,还是卡路里计算器,...
App设计
上篇《超全UI设计规范,带你了解规范设计全流程》分享了为什么需要设计语言以及设计语言包含了哪些内容。简单回顾下,为什么...
设计原则
@苏大牙牙牙 :说到腾讯,大多数设计师对他们的体验设计,还是比较认可的。那么,腾讯的设计到底好在哪呢?体量这么大的公司...
App设计