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

文字是图像记忆的一种衍生方式,人们为了简明地表达事情、物品、人物等情景画面,而演变出的简明的记载方式。文字作为图片的衍生,也是品牌形象的重要元素。而字体则是文字信息的外在表达方式,不同的字体不仅能影响排版,更会极大反应品牌的性格。如果说图形和色彩是品牌的皮肤和血肉,那字体则是品牌的内在骨骼。

1.信息呈现

文字是信息最直接最清晰的表达方式,而字体则直接决定了文字信息能否正确、准确地传达,不清晰、难以辨认的字体会极大地削弱文字的表达。

2.情感表达

文字本质上也是一种图形,而字体则是这种图形的外在形式。字体能在文字所表达的信息被理解之前,给人最直接的情感冲击。

3.个性塑造

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

二、字体的选用

字体是影响品牌形象的一种基本元素,只有使用合适的字体去搭配品牌图形,才能让品牌形象的整体效果最大化。

因此,在字体选择上,最关键的就是根据由品牌特性推导出来的关键词来找到字体的基本原则,最终我们确定了四个基本原则,即:端庄匀称、笔画严谨、清晰可读、风格现代。

三、中文字体的选用

1.字体的对比

思源和冬青斜的笔画末端会有变化,苹方、微软雅黑、兰亭黑都是严格的横平竖直,但在线条的宽度上有区别。微软雅黑最粗,小字号阅读会较为吃力。方正兰亭黑从微软雅黑派衍生出来,最显著的变化是其字面字身比下调到正常的92%,缩减5%的宽度让字形更修长,更宽大的字距让文面更宽松易读。这些改变让兰亭黑得以更好地适应其他应用场合。

2.方正兰亭黑的优势

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

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

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

FFDin和HelveticaNeue的对比

FFDinDIN是德国标准协会,DeutschesInstitutfürNormung的首字母缩写。起源自德国铁路的字体,Albert-JanPool于1995年设计发行的民用字体。无衬线字体,易用耐看,字形开放,代表了德国设计。是设计师最爱的几类字体之一。

Helvetica是瑞士设计师马克斯.米耶丁格设计的现代主义风格字体,中性,无衬线。字体末端严格保持横平竖直,性格严谨、保守,没有任何的修饰,适合不同分辨率的显示器。而HelveticaNeue则是原来字体的升级版本,拥有更多的字重,更易于不同场合的应用。

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

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

五、线上字体规范

1.线上字体的选用

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

因此规定,在iOS系统中,中文字体使用苹方,英文字体使用SanFrancisco;在安卓系统中,中文字体使用思源黑体,英文使用Roboto;与此同时,数字采用HelveticaNeue这一跨平台的字体。

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」等都是字重名称。由于在一种字体可能用在标题、段落甚至海报,单一的字重可能并不会很好的适应这些场景,于是衍生出了同一个字体的不同字重。

在移动端页面设计中,为了简化字重的选择,统一整体的效果,因此指定在不同的系统或字体中,限制设计中的字重使用。即:在苹方中选择「纤细」作为轻的字重,「中粗」为重的字重;思源黑体中选择「细体」为轻的字重,「黑体」作为重的字重;HelveticaNeue选择「Thin」为轻的字重,「Bold」为重的字重。

2.字重的使用

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

THE END
1.文字创意设计图片大全高清熊猫办公精心为用户挑选80张高清精美文字设计图片、支持专业级文字设计素材下载,更多风格的文字设计,免抠元素,卡通手绘素材图片、图标图案、免抠矢量图,尽在熊猫办公。https://www.tukuppt.com/speciall/wenzisheji1571.html
2.在线艺术字设计在线艺术签名设计器艺术字体在线生成器艺术字18、在线动态黑白文字表情包制作 教程链接:http://www.yishuzi.com/b/10.htm 19、QQ个性签名 搞笑签名 个性签名 霸气签名 教程链接:http://www.yishuzi.com/g/8.htm 20、用自己名字设计网名 QQ个性网名设计器 教程链接:http://www.yishuzi.com/g/7.htm http://www.yishuzi.com/b/
3.推荐几款创意无限的个性字体!个性字体以其独特的风格和创意,总能让人眼前一亮。今天,就为大家推荐几款充满个性的字体,让你的设计作品独具一格。 字玩女侠莫愁 传神,这款游戏个性字体以国风游戏为灵感,整体笔画坚挺有力,出锋如笔刷一般,运笔过程夹杂枯笔、飞白,风格特点明显。结体收放自如,笔画间均匀布白,单字中突出风格最明显笔画,极具视觉冲http://www.upfont.cn/news/65fa74863a371a6736be9345.html
4.字体设计心得体会实验性文字设计追求的目标是制造从未见过或想到过、感觉过的文字形式,来表达设计师个人稀奇古怪的想法。有关个性心理、爱好、爱好、信念、态度、理想以及气质、能力、性格、个体感触与解释信息的独特方式等等,都可成为实验性文字设计者字体创意的重要角度和源泉。https://www.jy135.com/xindetihui/1957734.html
5.创意文字头像设计:打造独特个性标识在数字时代个性化的网络形象变得越来越关键。一个独有的创意文字头像不仅能展示个人的风格和态度还能在社交媒体上让人过目难忘。文字头像设计作为一种新兴的创意趋势它以简洁、明的途径传达个性成为中的特别标识。本文将带你探索怎么样打造一款属于本人的创意文字头像,让你的个性在网络中熠熠生辉。 https://www.yanggu.tv/webgov/aizhishi/334975.html
6.个性文字手机桌面个性文字手机桌面模板可编辑下载个性文字手机桌面图片一键生成 每一张设计模板、图片都可以在线编辑,替换文字就能生成精美设计。 您也可以DIY托拉拽轻松创意设计。下载设计时,会进行版权检测,为您的商业使用保驾护航。 开始设计 海量精美个性文字手机桌面设计模板 每张图片都可编辑,点击任意模板即可开启设计https://www.chuangkit.com/polymer/859582.html
7.[个性文字素材]图片免费下载个性文字素材素材千图网为您找到61张个性文字素材相关素材,千图网还提供个性文字素材图片,个性文字素材素材, 个性文字素材模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://m.58pic.com/tupian/gexingwenzisucai.html
8.个性英文字单词设计文字字体分类发现字体标签: 文字 最后更新: 2024-11-25 共 9个字体 简介: 个性英文字单词设计 Phantacon Leftalic语言:英文 ?RopaMixPTT-Light语言:英文 QueenStreet语言:英文 Honeycomb Round It Swash语言:英文 MOON Runner Expanded Italic语言:英文 MOON Runner Extra-expanded语言:英文 http://www.qiuziti.com/fontlist2?id=970703
9.?手写签名大赏:个性设计合集探索一系列别具一格的手写签名设计,每一款都蕴含着独特的艺术韵味和创意灵感。不是千篇一律的AI生成,也不是单调无味的字体加图,而是真正的手写笔迹,充满了温度和个性。从简洁的字母组合到复杂的图案设计,每一款签名都彰显着书写者的匠心独运。无论是优雅的花体,还是粗犷的草书,都能在这里找到。https://mbd.baidu.com/newspage/data/dtlandingsuper?nid=dt_5366844589861893133
10.蒸蒸日上个性字体艺术字设计图片千库网为设计者提供蒸蒸日上个性字体,为您省却艺术字设计制作时间,优质而新颖的艺术字素材为您的设计提供便捷高效和灵感创意https://588ku.com/ycwordart/10585859.html
11.竖排文字Logo设计指南,打造独特而富有个性的品牌形象通过选择合适的字体、考虑字体排列和间距,以及添加装饰元素和图形,您可以设计出独特而富有个性的竖排文字Logo。在设计过程中,要保持文字的可读性和清晰度,同时展现品牌的个性和魅力。一个成功的竖排文字Logo能够提升品牌的品牌价值和市场竞争力,吸引更多的目标受众选择。让我们一起为竖排文字Logo设计注入更多的个性和创意https://www.dongdao.net/news_logosheji/7712
12.截图转文字图片照片转文字/一键QQ截图自动识别/个性编辑设计服务截图转文字图片照片转文字/一键QQ截图自动识别/个性编辑设计服务 呼伦贝尔,呼伦贝尔设计联盟信息网价:3.80,呼伦贝尔设计联盟信息网掌柜:zhff077,http://hulunbeier.witcp.com/design/c61/tddca6aed999.html
13.签名头像微信设计个性3D文字制作定制立体设计素材签名头像微信设计个性3D文字制作定制立体设计素材 微信签名头像设计个性3D签名文字制作定制立体商务男女头像照片 风格: 签名 头像 微信 设计 个性 3D 文字 制作 定制 立体 图文详情 本店推荐 图文详情https://www.zhe2.com/note/615825006849
14.6/plus后盖设计激光打标机图案及文字激光打码手机壳个性设计供应商网(https://m.gys.cn)江苏标龙科技有限公司为苹果手机iphone6/plus后盖设计激光打标机 图案及文字激光打码 手机壳个性设计批发厂家,价格优惠, 公司秉承“质量优先、信誉至上”的经营理念,更多采购尽在供应商网,17年黄金品牌值得信赖!http://site.china.cn/damaji/3729519630.html
15.两步路男款凯乐石定制短袖吸湿排汗个性图案文字设计功能T恤KG7设计一流(326) 简约百搭(324) 体感舒适(323) 清洁干净(286) 完美无瑕(270) 尺码很准(246) 颜色正(210) 效果好(207) 很好看(202) 很暖和(196) 方便(180) 性价比高(117) 真材实料(93) 防滑(73) 方便实用(70) 物流很快(64) 透气性佳(50) 易于使用(48) 续航强劲(48) 清晰度高(38) 服务周到(35http://shop45920354.m.youzan.com/wscgoods/detail/2xhtee5ul4k3e
16.如何玩转字体设计,让你的海报更亮眼如果你想使用文字作为一个设计元素,但不想将它只是把它作为一个尺寸较大的点,如前所示,创造性地在你的海报上,排列对齐,调整大小、颜色和位置,以设计一个难忘的海报像这张Studio Vie设计的海报一样。 3.让文字融入图像元素 文字其实也不用仅仅是放在图像元素的上一层——它可以直接成为图像元素的一部分。 https://www.hellofont.cn/index.phphao.qq.com/newsdetail?id=241
17.美美哒个性签名设计下载美美哒个性签名设计免费版下2、拥有火星文,小清新,花样文字,卡通文字等签名设计 3、界面清爽,功能强大 软件测评 软件适用于不同版本的Windows系统,可以帮助用户获得不同效果的个性签名,只需将自己的名字输入到软件中即可生成,多种字体自由选择,方便照着练习。 以上就是美美哒个性签名设计的全部内容了,非凡软件站为您提供最好用的软件,为您带来https://www.crsky.com/soft/498122.html
18.在线个性艺术签名设计免费版19: 要图片!!!个性签名用的,带文字的,非主流也可,急切网免费个性文字签名档图片在线设计,30秒钟帮你搞定所有你想要的。 http://www./a/6.htm 20: 希望您的签名变成非主流签名档图片么? http://www./a/5.htm 21: 急切网艺术签名在线生成免费版,针对椭圆签名进行优化设计,自定义签名颜色、签名大小、阴影http://www.360doc.com/content/12/0121/07/11320946_453420307.shtml
19.电商设计中的"文字"!①文字要讲究可读性原则。文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息,要达到这一目的必须考虑文字的整体诉求效果,给人以清晰的视觉印象。因此设计中的文字应避免繁杂零乱,使人易认、易懂,切忌为了设计而设计。 ②文字要讲究个性原则。一般来说,字体的个性大约可以https://mp.weixin.qq.com/s?__biz=MzA4MjUzOTE0MQ==&mid=2657695759&idx=1&sn=7fb4ac1022456c21b131c1dbeebce65a&chksm=8419bfe5b36e36f3fa419854d1675d45e596c31ab3581009ecd5332f4bd5acc5eeeb88f0725a&scene=27
20.如何设计竖排文字标志的技巧和方法在标志设计中,采用竖排文字有助于为品牌赋予独特的风格和个性。这篇文章将与您分享关于如何设计竖排文字标志的技巧和方法,帮助您打造一个独具特色的品牌标识。 1、选择字体和风格 选择适合的字体是创建垂直字体Logo的重要步骤。您可以挑选专门设计的垂直字体,或对现有字体进行调整和改变。根据品牌形象和风格,选择简洁、https://www.parabrand.com/biaozhisheji/news_x-2384-14.html
21.平面字体设计都有哪些方法?替换法、共用法、叠加法、分解重构法、尖角法、横细竖粗法、简细法、联盟法、摆放法、卷叶法、方方正正法、上下拉长法、断肢法、结构转变法、照葫芦画瓢法、俏皮设计法、画龙点睛法。 1、替换法 替换法是在统一形态的文字元素加入另类不同的图形元素或文字元素。其本质是根据文字的内容意思,用某一形象替代字体https://www.qxpspx.com/news/273.html
22.在线字体转换器请先输入文字! 百花物语优设标题圆优设标题黑漫语手写体新华墨竹手绘海报创意动漫文字设计鹅卵石体二字元心游pop手绘心游手绘艺术体棒棒糖创意字体男友隶爆棚美术字汉仪超级战甲汉仪铸字卡酷卡通体海派腔调明姿优雅字心坊梦幻哥特体字心坊童年体造字工房启黑体造字工房昔风体造字工房朴月体字心坊童梦奇缘潮字社时光寓意创http://www.akuziti.com/