赞助商
立即赞助

上万字干货!超全面的网页设计规范:文字篇

UI设计3年前 (2021)发布 流光
2.8K 0 0

字是界面设计中最基本的构成之一,如何定义网页设计中的文字系统?可大体分为三步:

  1. 系统全面地了解文字的基础知识、显示方式、响因素及当前网页计中适的文字系统;
  2. 梳理出自己团队所有品文使用情况;
  3. 综合第1、第2总结出合团队业务的文字系统。

注:网页设计规范色彩篇马上会发布在优V+会员专栏,想获得整个网页计规范系列干货的同学,请右戳 → https://www.uisdc.com/uisdc-vip

字符屏幕显示原理

  1. 字符

字符是指计机中使用的字母、数字、标点符号等等。

上万字干货!超全面的网页设计规范:文字篇

计机最初明出来是用来决数字计问题的。

上万字干货!超全面的网页设计规范:文字篇

来现,计机还以做更的,例文处理。其计机挺笨的,它读到的所有字符是由1和0组成的字符串,因为计机电路只有两种状态,「开」和「闭」,对应「1」和「0」。计机也只以直接存储和处理二进数字。

上万字干货!超全面的网页设计规范:文字篇

  2. 二进制

「二进制」是数字世界里的基本规则。

下面不同式的文件,在质上是一串由1和0组成的代码,要文件首先要二进。人有根手指头,但计机电路只有「开」和「闭」两种状态,所以满进一位的计数方式更适合人类计,而满二进一的二进更适合计机。计机只需要1和0两个数字就以传递一切信息。

上万字干货!超全面的网页设计规范:文字篇

△ MP4

上万字干货!超全面的网页设计规范:文字篇

△ MP3

上万字干货!超全面的网页设计规范:文字篇

△ JPG

上万字干货!超全面的网页设计规范:文字篇

△ TXT

上万字干货!超全面的网页设计规范:文字篇

△ AVI

以图像为例,用脑或机的图像都是在某个角落存储着下面这的一串数据。开头的16位翻译过来就是 BMP文件开始的标识。

上万字干货!超全面的网页设计规范:文字篇

BMP文件标识后面的数字就是图像的各项基本息。

上万字干货!超全面的网页设计规范:文字篇

△ 图像的各项基本息

上万字干货!超全面的网页设计规范:文字篇

△ 颜色深度

最开始24位,都是1,像素显示为红、绿、蓝三颜色,相加后显示为白色。

上万字干货!超全面的网页设计规范:文字篇

接下来24位,前8位是1,后都是0,像素显示为红色。

上万字干货!超全面的网页设计规范:文字篇

再后24位前16位都是1,最后8位为0,像素显示红、绿两色,相加后显示为黄色。

上万字干货!超全面的网页设计规范:文字篇

根据这样规则个55×55格子铺满颜色到张完图片。所以个 BMP图像文件1和0在逐个记录图像个像素颜色。

上万字干货!超全面的网页设计规范:文字篇

△ 进制图片生成

上万字干货!超全面的网页设计规范:文字篇

△ 色三原色和颜料三原色区

下面所文件的显示都图显示例子一样,文件中的10按照人们事先设好的规则排列好,只需找到确的打方式按照特的规则解读这些数据,我们就可以获得其中的信息。我们怎么能知道某一文件的10究竟按什么规则排列的?我们又用怎样的方式解读?这就用到了扩展,文件的字后面加几特的字符,就可以帮系统辨别出文件的类型,从提示电脑去按照某种特的规则确解读其中的信息。

上万字干货!超全面的网页设计规范:文字篇

△ MP4格式扩展

上万字干货!超全面的网页设计规范:文字篇

△ MP3格式扩展

上万字干货!超全面的网页设计规范:文字篇

△ JPG格式扩展

上万字干货!超全面的网页设计规范:文字篇

△ TXT格式扩展

上万字干货!超全面的网页设计规范:文字篇

△ AVI格式扩展

更多他件拓展名:

上万字干货!超全面的网页设计规范:文字篇

  3. 字符编码

了算机显示字符,必须将字符转换二制数字。所以就了统一、标准字符转换规则,即字符编码。字符编码给所的汉字一独一无二的数字编,并用10表示这数字编。

字的一个字符对应一个编码(码点),而编码对应字符集里的一个「字」,字符通过字符集与「字」相连。像图中示Unicode、GB 2312、Shift_JIS 都是字符集,要作是为每一个「字」分配一个编码。

上万字干货!超全面的网页设计规范:文字篇

△ 本编码流程

字符集里的每一个编码对应的是一个「字」而不是「字形」,也就是一个「字」在不同的地区或标准中能有不同的「字形」,但字符集中只能对其分一个编码(除非相差大,比简化字),要显示其不同的「字形」要通使用为不同地区或标准设计的字来现。

上万字干货!超全面的网页设计规范:文字篇

△ 字异形(左简中文,右文)

  4. 编码发展史

ASCII

ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)现在上个世纪60年代的美国,ASCII 一共定义了128个字符,包括英字母 A-Z,a-z,0-9,一些标点符号和控制符号。ASCII 采的编码模是简单字符集,在英语系国里 ASCII 标准很美。但是世界上有好几千种语言,他语言系的国想使计算机,ASCII 就远远够了。编码进入了混乱的时代。

上万字干货!超全面的网页设计规范:文字篇

△ ASCII编码

混乱时代

计算机的一个字节是8位,可表示256个字符。ASCII 使了7位,人们决定把剩余的1位利起来。人们对于 ASCII 已规定好的128个字符没有异议,但是同语系的人对于他字符的需求一样,对于剩的128个字符的扩展千奇百怪。而且在亚洲语言系统中有更多的字符。于是就又产生了各种多字节表示一个字符的方法,每个语系都有自己特定的编码页(code pages),这就使整个面更混乱堪。这时 Unicode 现了。

Unicode

Unicode 就是给计算机中有的字符各自分配一个代号。Unicode 可认为是字符的编号,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,Unicode 字符集和编码方式解决了跨语言、跨平台的交流问题。但在 Unicode 里每一个字符都是4个字节来编码,原本英字母仅需1个字节编码,中需2~3个字节编码即可,这对于存储或传输资源而言是很划算的。

UTF-8

UTF-8 基于 Unicode 编码的一种节约字节的编码,是一种可变长字符编码方式。在UTF-8编码中,英字母是一个字节,中(非生僻字)是2~3个字节。可认为, UTF-8 是对 Unicode 的一种压缩算法。UTF-8 等编码方式有效的节约了存储空间和传输带宽,因而受到了极大的推广应。并且 UTF-8 兼容 ASCII 字符集。

UTF:Unicode Transformation Format

  5. 中文编码类型

上万字干货!超全面的网页设计规范:文字篇

△ 中编码类

文字基础知识

  1. 文字

「文字」信息交流的具,可读性、易读性至关重。网页设中文字使用需考虑几素:首先考虑字体,其次字重、字、行高、字间距、行间距、段间距。

上万字干货!超全面的网页设计规范:文字篇

△ 字体、字重

上万字干货!超全面的网页设计规范:文字篇

△ 字间距、字、行高

上万字干货!超全面的网页设计规范:文字篇

△ 行间距、段间距

  2. 字体

「字体」文字的外形式特征,不同的字体不同的性格。

上万字干货!超全面的网页设计规范:文字篇

体类

综合文、英文都适用广义分类。

上万字干货!超全面的网页设计规范:文字篇

衬线、无衬线

上万字干货!超全面的网页设计规范:文字篇

△ 衬和无衬差异1

上万字干货!超全面的网页设计规范:文字篇

△ 衬和无衬差异2

字 – 中文

字构成:

上万字干货!超全面的网页设计规范:文字篇

△ 笔画

中宫,是指等成九个方格最中间的那一格。

上万字干货!超全面的网页设计规范:文字篇

△ 中宫

上万字干货!超全面的网页设计规范:文字篇

△ 中宫和字体关系

上万字干货!超全面的网页设计规范:文字篇

△ 中宫紧凑、中宫散

架结构,类众多,笔划不等,空排布极为要。体架结构可分为两类:单体、合体。

上万字干货!超全面的网页设计规范:文字篇

△ 单体 架结构

上万字干货!超全面的网页设计规范:文字篇

△ 合体 架结构

汉字字形众多,些字形会产视觉小变化,顶格、缩格、出格就针对不同结构的字体笔画特征行微调,让他们看起加均衡、、视觉完整。

上万字干货!超全面的网页设计规范:文字篇

△ 调整

上万字干货!超全面的网页设计规范:文字篇

△ 调整后

字形调整实例:

上万字干货!超全面的网页设计规范:文字篇

衬线、无衬线字形演变:

上万字干货!超全面的网页设计规范:文字篇

△ 衬线 字形演变

上万字干货!超全面的网页设计规范:文字篇

△ 无衬线 字形演变

字对比:

软雅黑、方正亭黑简体、思源黑体、苹方-简,笔画宽度均匀,横竖直。同一字号,软雅黑最粗,字号阅读会较为吃力。方正亭黑从软雅黑派衍生出来,可以更好地适应其应用。

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

黑、华文黑、冬黑笔画末端宽度不同。

上万字干货!超全面的网页设计规范:文字篇

字体 – 英

「字谷」概念来自西字母设计,字谷指字母中分或全封闭的空间,即字母当中留白分。

上万字干货!超全面的网页设计规范:文字篇

英的字体结构是由4条平行线组成,有时候是5条,但是一般大写线会忽略。「基线」在西中是标准,单个字母的有立脚点都是在这条线上(除了 g、j、p、y)。英字结构多种多样,4条平行线的位置会发生改变。

上万字干货!超全面的网页设计规范:文字篇

升:上缘线和线之间的容。

降部:下缘和基之间的内容。

上万字干货!超全面的网页设计规范:文字篇

字对比:Helvetica Neue、Arial、DIN

Helvetica Neue:中性,无衬线,现代主义风格字体。字体末端严格保持横竖直,性格严谨、保守,没有任何的修饰,适不同辨率的显示器。该字体是 Helvetica 字体的升版本,拥有更多的字重,更易于不同的应用。字形则相对偏胖,笔画更清晰,而且字号的情况下可读性也高。

上万字干货!超全面的网页设计规范:文字篇

Arial:Arial 是一套随同多套软应用软件所发,无衬线。该字体比例及字重和 Helvetica 极相似,其实是 Monotype Grotesque 系列的衍变。在字体及字距上都做了一些细的调整和变动,以增加它在脑屏幕的不同辨率的可读性。

上万字干货!超全面的网页设计规范:文字篇

DIN:字形瘦长,无衬线,适显示比较长的数字,但是字号的情况下识别度较低。DIN 字体在德国有着悠久历史,是交通标志、路牌、门牌和车牌的标准字体。虽然曾经是德国纳粹使用的字体,但是经过计和重新升。DIN 在杂志、海报以及其各种计领域都被广泛地使用。

上万字干货!超全面的网页设计规范:文字篇

Helvetica Neue、Arial、DIN 数字对比:

上万字干货!超全面的网页设计规范:文字篇

  3. 字重

「字重」是同一种字的不同字形粗细,即字重量。字重的划分根据不同字各有不同,不同的字重称呼也以不一样,常见的划分下:

上万字干货!超全面的网页设计规范:文字篇

在排版中,一种字在标题、正文、说明注释等不同内容下使用,单一的字重不能很适应排版需求,是衍生出同一个字的不同字重。

上万字干货!超全面的网页设计规范:文字篇

  4. 字号

「字号」是字体的,同平台字号规范同。

上万字干货!超全面的网页设计规范:文字篇

在界面设计中,字字号决定了信息层次和权重。首先要设定基准字号(最小字号),然后可依据一定规律设定导航、标题等稍大字号。一般页基准字号有12px、14px、16px等。

上万字干货!超全面的网页设计规范:文字篇

字号受阅读距离影响,眼睛到屏幕距离40~70cm,为较适合的阅读距离。

上万字干货!超全面的网页设计规范:文字篇

Ant Design 定义的电脑显示器阅读距离(50 cm)从原先的12上升至14,保证在多数显示器上的户阅读效率最佳。

上万字干货!超全面的网页设计规范:文字篇

  5. 行高

「行高」可以理解一包裹字体外面的无形的盒子。字行高决一套字体系统的动态与秩序之。

西:西基本行是字号的1.2倍左右,字体有上伸(ascender)和延(descender)可来创行间空隙。

中文:中文因为字符密且高度一致,所以一般行高需要更大,根据不同人群的特点(儿、年轻人、老年人)以及使用境,达到1.5~2倍甚至更大。

上万字干货!超全面的网页设计规范:文字篇

Ant Design 受到5音阶以及自律的启定义10个不同字号以及与之相对应的行高。

上万字干货!超全面的网页设计规范:文字篇

  6. 字间距

「字间距」是指一组字母之间相互间隔的距离,受字偶距和字体影响。

上万字干货!超全面的网页设计规范:文字篇

字偶距:是指两个字母(或他字符,如数字,标点符号等)之间的空白。同的字母有同的外形,字体使相等的字间距是协调的。需要调整字偶距来升可读性。

上万字干货!超全面的网页设计规范:文字篇

按字间距可分类为:例字体(Proportional)和等宽字体(Monospaced)。

比例字:根据字符外形特点设置不同字距的字,种字外形协,读。

等宽字体:每个字符置相同字距的字体,其优点是可以好的控制排版对齐。

上万字干货!超全面的网页设计规范:文字篇

  7. 行间距

行间距(line spacing / leading):行与行之间的距离,为一段文中的留白,行间距让字与字之间有呼吸的空间,行间距对文章的易读有很大影响。

上万字干货!超全面的网页设计规范:文字篇

排版推荐使用行间距1.2~2倍。

上万字干货!超全面的网页设计规范:文字篇

如何设定行间距,如何规范行间距

行间距由行决定,为了确保可读性增行间距,就需要增行。举个例子:字号12,行设定20,那么行间距=「(行-字号)÷2」×2,除2又乘2,我就简单的简成行间距 = 行 – 字号,那么行间距就是20-12=8,并且可将这个数值固定来,重复使。

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

注:至于什么20,因初一字节用8二制表示,所以的很多网页设中常用到8。12+8=20,参考 Ant Design,网很多设师总结的行间距算方法,对于一数学不好的我,参考已总结验得出的数,固这数重复使用,这样简单。

  8. 段间距

段间距(paragraphs spacing):段落与段落之间的距离,可保持页面节奏,与字体、行高相互关联。保证文章易读性,文段间距,可以简单取一空行(也就一行高),这比较常规也比较合的法。举例子:字12,行高设20,段间距 = 行高 + 行间距。

上万字干货!超全面的网页设计规范:文字篇

  小结

要设「有节奏感文本内容」要遵循这些规则:段距大于高,高大于距,距大于距。

上万字干货!超全面的网页设计规范:文字篇

字体选用基础原则

  1. 网页文字显示方式

网页设计内容一般是通电脑各种浏览器来承载显示的,浏览器显示字是直接读取用户操系统里的字。

上万字干货!超全面的网页设计规范:文字篇

  2. 字体选用原则

字体是界面设计中最基本的构成之一,科的字体系统:始终保证信息具有优秀的易读可读性,升户的阅读体验及工作效率。

  • 原则一:字体优先使用各操作系统默认的字体。
  • 原则二:有版权、笔画严谨、清晰可读、经典。

上万字干货!超全面的网页设计规范:文字篇

  3. 操作系统

下图数据来源:界互网市额统计网站 Net MarketShare。

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

△ 操系统市场占有率 TOP10

各操作系统默认字体:

上万字干货!超全面的网页设计规范:文字篇

  4. 浏览器

电脑浏览器直接读取用户操系统里的字,不同浏览器对文字的渲染方式不同,因此市场浏览器使用情况很有必要。

下图数据来源:界互网市额统计网站 Net MarketShare

上万字干货!超全面的网页设计规范:文字篇

  5. 字体版权

除操系统默认字,其次需要优先选择使用的就是已购版权字,果没有已购买的字,考虑一免费字,非免费字使用时需谨慎。

上万字干货!超全面的网页设计规范:文字篇

△ 司常购版权字

文字规范

  1. 字体规范

字体使用三原则

体系化:同一系统UI设中先建立体系化的设思,对主、次、辅、标题、展示类别的字体统一的规划,再落到具体场景中行微调。建立体系化的设思于强化横向字体落的一致性,提高字体应用的性价比,减少不必的样式浪费。

重复:重复设计中现的一个或多个容。任何事情都可重复。字体、字重字号、颜色、一条线、各种形状(如圆形、正方形或角形)等。字体使最好要超过3种,一般同一个系统UI设计容的字体数量建议2种即可,中一种、英数字一种。且字体样式上遵循重复原则,避免毫无意义的使大量字号、颜色、字重、行等。

韵律:在需要拉开差距的时以尝试选择对比大的字字号,令字号之间产生一种微妙的韵律感。为证良的阅读验,每行持适当的字符数量。每行上拥有适当的字符数量是文读的关键。果每行文字太短,视必须反复折回来,打破读者的节奏。果一行文字太长,用户的眼睛将很难注文。英文无特殊要求避免使用大写字符,因为大大延缓用户扫描和阅读的速度。

现有产品字统计

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

体规范

综合考虑不操作系统选用最佳体体验。

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

代码声:

  • Font-family:Helvetica Neue, Helvetica, Arial, 「苹方-简」, 「Microsoft YaHei」, 「微软雅黑」, sans-serif。
  • 英文字体:首先查找Helvetica Neue(Mac),然后查找Helvetica(Win),都找不就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);
  • 文体:选用平台默认文体 苹-简(Mac),微软雅黑(Win)。
  2. 字重规范

一般情况下选用「一粗一细」两种字重。

粗体:在视觉面积上较重,笔画加粗,字腔(笔画间空间),突出显示,产生调作用。常用于标题和标语。

上万字干货!超全面的网页设计规范:文字篇

细体:在视觉面积上较轻,笔画轻细,字腔(笔画间空间)大,结构疏朗清透,阅读不会让读者产生压迫。常用于正文和说。

上万字干货!超全面的网页设计规范:文字篇

中文、英文推使用字重:

上万字干货!超全面的网页设计规范:文字篇

  3. 字号规范

现有产字号统计

上万字干货!超全面的网页设计规范:文字篇

号规范

上万字干货!超全面的网页设计规范:文字篇

  4. 行高规范

参考:Ant Design 受到5音阶以及自规律启定义10个不同字号以及与之相对应的行高。

上万字干货!超全面的网页设计规范:文字篇

  5. 字间距规范

使例字体,根据字符外形特点设置同字距的字体,这种字体外形协调,可读性好。

上万字干货!超全面的网页设计规范:文字篇

  6. 行间距规范

上万字干货!超全面的网页设计规范:文字篇

颜色规范

  1. Ant Design 两大色彩体系

Ant Design 两大彩系:系统级、产品级。

系统级彩系

系统级彩系主要定义蚂蚁中台设计中的基础板、中板和数据视化板。

  • 基础色:12个色(薄暮/火山/日暮/金盏/日/青柠/极光绿/明青/拂晓蓝/极客蓝/酱紫/法式洋红)及衍生色共120个颜色。
  • 中板:黑、白、灰,从白到黑共10个颜。
  • 数据可视化色板:敬请期待。

产级色彩体系

产级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产调性及功诉求的颜色。

  • 品牌色应用:品牌色取自基础色板的蓝色#1890FF,应用场景包括:关键行动点,操作状态、重信息高亮,图形化场景。
  • 中性色:中性色要应在字分,此外背景、边框、分割线等场景中非见。
  • 功能:功能代表着明确的信息及状态,成功、出错、失败、提醒、链接等。
  2. 系统级 中性色

中性色包含了黑、白、灰。网页设中被使用,合理的选择中性色能够令页面信息具备良好的主次关系,力阅读体验。中性色板一共包含了从白到黑的10颜色。

上万字干货!超全面的网页设计规范:文字篇

  3. 产品级 中性色

Ant Design 性色主要应用在文、背景、边框、分割线等场景。品性色定义需要考虑深色浅色背景异,时结合 WCAG 2.0标准。性色在落地时候是按照「透明度」实现。

上万字干货!超全面的网页设计规范:文字篇

VIP大数据用户体验部 性色也是主要应用在界文、背景、边框、分割线等场景。考虑到深浅色背景异,性色根据设计需求在落地时候可按照色值和透明度两实现,两优先使用色值,尽量避免两者混搭使用。

上万字干货!超全面的网页设计规范:文字篇

  4. 产品级 功能色

功能色代表了确的息以及状,比如成功、警告、失败、提醒、链等。

功能色选取需要遵守用户色基本认知。在套品体系下,功能色尽量保持致,不要有过多自定义干扰用户认知体验。

上万字干货!超全面的网页设计规范:文字篇

文案

文案内容来源于 Ant Design,一文一字之间可研究琢磨的空间还大。

分享个感触很深例子,里有个专业用语「阈yù值」和「阀fá值」,这两个开始我看了很久才看出来区,查资料了解到,其实「阀fá值」在专业业里是个,是个误用词,其正确用法是「阈值」是所属业认可用词。「阈yù值」又叫临界值,是指个效应能够生最低值或最高值。

所以精准、清晰的语言会易让用户理解,合的语气易让用户建立信任感。因此界面设时,使用义文案时注意以下几点:

  • 从用户度出发;
  • 表述一致;
  • 重要的信息放在显著位置;
  • 业、精准、完整;
  • 简、友好、正面。

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

在有限空内将要信息放在最前,让用户第眼看到最要内容。(或过高亮、留白等突出要信息)。

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

上万字干货!超全面的网页设计规范:文字篇

结语

为硬件软件在变化,设计规范和内容也要定时更新,规范是为了在繁多复杂业务寻求平衡,帮助各团队更高效完成任务,有些内容适合强制规定,有些内容适合规范个范围,有些内容适合制定规律法……出现特殊情况时需要新审视和不断完善灵活使用。

欢迎关注作者的微信公众:「蜗牛启奏」

上万字干货!超全面的网页设计规范:文字篇

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

相关文章

编者按:定价页面中,具体的设计细节其实对于用户购买和销售的转化有着直接的影响,怎样设计才会更有有效?今天这篇来自Proof...
定价策略
产品推广页设计,看上去很简单。不就是放个Logo,配一些大图,放点文案,加个按钮吗? △ by Outcrowd @ Dribbble 但很多...
产品推广页
简单布局怎么做到不单调而有层次?看看设计师 Czékmány Zoltán 的9个技巧。
图文布局
Z Yuhan:这篇文章从一个眼动实验得来的数据分析用户对长网页的阅读习惯,以及对比八年前的数据发现用户行为的惊人变化。最后...
用户体验设计
设计是一个不断发展和变革的领域,很多时候,看似熟悉的设计趋势会在下一刻摇身一变,再次惊艳到你。灵活的创意和开放的想法...
Tubik Studio
网站对于每个企业而言是展现品牌的重要渠道。 当你在为你的用户设计网站的时候,一定要控制好网站的内容量。用户并没有必要...
优秀网页设计
你还记得二十年前的互联网吗?在百度贴吧叠楼、为 QQ 空间装饰非主流空间贴纸,无限沉浸在 4399 和 7k7k 等小游戏网站,或是...
Web Design Museum
在设计中,情绪的传达和氛围的营造通常是要看设计项目的目的是什么,而不同的配色和不同的元素组合,往往能够呈现出截然不同...
优秀网页设计