超详细的支付宝设计规范之线上字体篇

超详细的⽀付宝设计规范之线上字体
⼀、字体设计的价值
⽂字是图像记忆的⼀种衍⽣⽅式,⼈们为了简明地表达事情、物品、⼈物等情景画⾯,⽽演变出的简明的记载⽅式。⽂字作为图⽚的衍⽣,也是品牌形象的重要元素。⽽字体则是⽂字信息的外在表达⽅式,不同的字体不仅能影响排版,更会极⼤反应品牌的性格。如果说图形和⾊彩是品牌的⽪肤和⾎⾁,那字体则是品牌的内在⾻骼。
武冬立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。具体的建议使⽤⽅式如图:
△ * 星号部分的字号仅限于特定场合的使⽤
△ * 星号部分的字号仅限于特定场合的使⽤
参考案例:
w3c
六、⾏⾼规范
1. ⾏⾼的原理
参考 w3c,眼睛到屏幕的距离25cm,⽬前通⽤的做法是,西⽂的基本⾏⾼通常是字号的1.2倍左右,⽽中⽂因为字符密实且⾼度⼀致,没有西⽂的上伸部(ascender)和下延部(descender)来创造⾏间空隙,所以⼀般⾏⾼需要更⼤,根据阅读⼈划分(⼉童、年轻⼈、⽼年⼈),可达到 1.5 ⾄ 2 倍甚⾄更⼤。
2. ⾏⾼的规范
溢出效应
结合前⾯推导的字号和⾏⾼原理,对⽬前规范的每⼀个字体配上相应的⾏⾼,不管是在设计时还是进⾏开发实现,都必须遵从这⼀规范。
七、字重规范
1. 字重的规则
字重是指字体笔画的粗细,⼀般在字体家族名后⾯注明的「Thin」「Light」「Regular」「Book」「Bold」「Black」「Heavy」等都是字重名称。由于在⼀种字体可能⽤在标题、段落甚⾄海报,单⼀的字重可能并不会很好的适应这些场景,于是衍⽣出了同⼀个字体的不同字重。
兰亭集序说课稿
在移动端页⾯设计中,为了简化字重的选择,统⼀整体的效果,因此指定在不同的系统或字体中,限制设计中的字重使⽤。即:在苹⽅中选择「纤细」作为轻的字重,「中粗」为重的字重;思源⿊体中选择「细体」为轻的字重,「⿊体」作为重的字重;Helvetica Neue选择「Thin」为轻的字重,「Bold」为重的字重。
2. 字重的使⽤
同⼀个字体的不同字重能传达不同的信息权重和情绪。细的字体给⼈以细腻、轻快的感觉,⽽粗体则给⼈着重和严肃的认知。因此适合的场景使⽤合适的字重⾮常重要。
>常艳日记下载

本文发布于:2024-09-20 19:58:25,感谢您对本站的认可!

本文链接:https://www.17tex.com/xueshu/715822.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:字体   字号   设计   信息   品牌
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议