2.1.2　网页中文字的设计规范

在网页UI设计中，文字设计能够起到美化网页UI、有效传达主题信息、丰富页面内容等重要作用。如何更好地对网页中的文字进行设计，以达到更好的整体视觉效果，给浏览者新颖的视觉体验呢？

1．PC端网页文字设计规范

PC端的网页UI空间比较大，一屏内容中文字的使用量是相当可观的，这使得PC端网页中的文字使用方式比较简单，故而它的规范也比较少。字号使用规范如表2-1所示。

2．iOS系统的文字设计规范

在iOS系统UI设计中，关于文字的字体如何选择，字号如何设定，这些都有一定的规范。下面为读者介绍iOS系统规定使用的字体，分为中文字体（苹方字体）和英文字体（San Francisco字体）两种形式，如图2-5所示。

3．Android系统的文字设计规范

文字作为视觉元素中必不可少的一个，在Android系统界面设计时也拥有自己独立的设计规范。Google官方规定，Android系统的默认字体是思源黑体和Roboto，图2-6所示为Android系统的规定字体。

练一练——设计制作网页3D广告文字

源文件：第2章\2-1-2.psd

视频：第2章\2-1-2.mp4

·案例分析

本案例是设计制作一款3D广告文字，此款广告文字的设计主旨是简洁、明了。使用青色和白色的配色设计，适合一些食品网页和运动网页使用。其中绿色的树叶装饰，读者可以根据使用时的具体情况进行替换。图2-7所示为3D广告文字的图像效果。

·制作步骤

Step01　打开Photoshop CC软件，单击“欢迎界面”中的“新建”按钮，弹出“新建文档”对话框，新建文档的各项参数如图2-8所示。设置完成后，单击“创建”按钮进入工作区。

Step02　打开“字符”面板，设置如图2-9所示的字符参数。单击工具箱中的“横排文字工具”按钮，在画布中输入如图2-10所示的文字，文字颜色为RGB（39、195、186）。

Step03　复制图层，隐藏旧图层。为复制的图层执行“3D>从所选图层新建3D模型”命令，并为3D模型设置如图2-11所示的参数。设置完成后，文字内容的展示效果如图2-12所示。

Step04　栅格化3D图层，按住Ctrl键，单击图层缩览图将文字内容添加到选区，如图2-13所示。使用组合键Shift+F5，弹出“填充”对话框，设置如图2-14所示的参数，前景色颜色值为RGB（39、195、186）。

Step05　选区填充完成后，图像效果如图2-15所示。使用组合键Ctrl+D取消选区后，为图层添加“描边”的图层样式，图层样式的具体参数如图2-16所示。

Step06　图层样式设置完成后，文字的图像效果如图2-17所示。复制隐藏图层，更改文字图层的颜色参数为如图2-18所示的数值。

Step07　颜色设置完成后，图形效果如图2-19所示。为文字图层添加“内发光”的图层样式，图层样式的具体参数如图2-20所示。

Step08　设置完成后，单击“确定”按钮，图像效果如图2-21所示。继续复制隐藏的文字图层，并为文字图层更改填充颜色为白色，复制的文字图层的字符参数如图2-22所示。

Step09　更改完文字图层的参数后，图像效果如图2-23所示。执行“文件>打开”命令，选中素材图像将其打开，使用“移动工具”将素材图像拖曳到设计文档中，调整图层顺序到隐藏的文字图层上方，最终的广告文字效果如图2-24所示。