3.1 　UI文字、图片和图标设计

3.1.1　UI设计中字体的使用

文字是界面设计中不可或缺的基本要素。它的概念不仅仅局限于传达信息，在文字与字体的处理上更是一种提高设计品位的艺术表现手段。根据信息内容的主次关系，通过有效的视觉流程组织编排，精心处理文字和文字之间的视觉元素，而不需要任何图形，同样可以设计出富有美感和形式感的成功作品。应该说文字的编排与设计是成功设计作品的一个关键所在。

在界面设计中，经常会出现一些问题，例如：

① 字体样式太多，导致页面杂乱；

② 使用的字体不易识别；

③ 字体样式或内容的气氛和规范不匹配。

那么怎样避免出现这样的问题呢？

① 通过设计经验可以帮助我们做出更好的版式；

② 了解不同平台的常用字 体设计规范；

③ 在每个项目设计中只使用1～2个字体样式，而在品牌自己有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案；字体用得越多，越显得不够专业；

④ 不同样式的字体、形状或系列最好相同，以保证字体风格的一致性；

⑤ 字体与背景的层次要分明；

⑥ 确保字体样式与色调气氛相匹配。

（1）常用的几种字体

在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式，网页设计中会有常用的几个字体。

① 移动端常用字体

a．IOS　常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好，常用英文字体是Helvetica系列，在欧美平面设计界，流传着这样一句话：“无衬线字体的百年演变，其终极表现就是Helvetica。”这句话虽然稍显夸张，却恰如其分表现出Helvetica的重要地位。作为瑞士的Haas Foundry公司在20世纪50年代推出的代表性字体，Helvetica不仅是世界上使用范围最广的拉丁字母字体，更在法律、政治、经济界发挥了微妙作用，成为了超越平面设计本身的文化现象。

Helvetica字体如图3-1所示。

b．Android　英文字体：Roboto；中文字体：Noto，如图3-2、图3-3所示。

② 网页端常用字体

a．微软雅黑／方正中黑　微软雅黑系列在网页设计中使用得非常频繁，这款字体无论是放大还是缩小，形体都非常规整舒服，如图3-4所示。在设计过程中建议多使用微软雅黑，大标题用加粗字体，正文用常规字体。

方正正中黑系列如图3-5所示，中黑系列的字体笔画比较锐利而浑厚，一般应用在标题文字中。但这种字体不适用于正文中，因为其边缘相对比较复杂，文字一多就会影响用户的阅读。

b．方正兰亭系列　整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等，如图3-6所示。因笔画清晰简洁，这个系类的字体就足以满足排版设计的需要。通过对这个系列的不同字体进行组合，不仅能保证字体的统一感，还能很好地区分出文本的层次。

c．汉仪菱心简／造字工房力黑／造字工房劲黑　这几个字体有着共同的特点：字体非常有力而厚实，基本都是以直线和斜线为主，比较适合广告和专题使用。在使用这类字体时我们可以使用字体倾斜的样式，让文字显得更为有活力。在这三种字体中（图3-7），菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角，而且笔画也比较疏松，更多的是有些时尚而柔美的气氛；而劲黑这款字体相对更为厚重和方正，多用于大图中，效果比较突出。

（2）常用的字号

字号是表示字体大小的术语。最常用的描述字体大小的单位有两个：em和px。通常认为em是相对大小单位，px是绝对大小单位。

① px：像素单位，10px表示10个像素大小，常用来表示电子设备中字体大小。

② em：相对大小，表示的字体大小不固定，根据基础字体大小进行相对大小的处理。默认的字体大小为16px，如果对一段文字指定1em，那么表现出来的就是16px大小，2em就是32px大小。因其相对性，所以对跨平台设备的字体大小处理上有很大优势，同时对于响应式的布局设计也有很大的帮助； 但缺点是，无法看到实际的字体大小，对于大小的不同，需要精确的计算。

① 移动端常用的字号　导航主标题字号：40～42px，如图3-8所示。偏小的40px，显得更精致些。

在内文展示中，大的正文字号32px，副文是26px，小字20px。在内文的使用中，根据不同类型的APP会有所区别。像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性，正文字号36px，会选择性地加粗，如图3-9所示。

列表形式、工具化的APP普遍是正文采用32px，不加粗，副文案26px，小字20px，如图3-10所示。

26px的字号还用于划分类别的提示文案，如图3-11所示，因为这样的文字希望用户阅读，但不会强过主列表信息的引导。

36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次，同时加强按钮引导性，选用了稍大号的字体，如图3-12所示。

② 网页端常用的字号　网页中文字字号一般都采用宋体12px或14px，大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px。

需要注意的是，在选用字体大小时一定要选择偶数的字号，因为在开发界面时，字号大小换算是要除以二的，另外单数的字体在显示的时候会有毛边（图3-13）。

（３）常用的字体颜色

在界面中的文字分主文、副文、提示文案三个层级。在白色的背景下，字体的颜色层次其实就是黑、深灰、灰色，其色值如图3-14所示。

在界面中还经常会用到背景色#EEEEEE，分割线则采用#E5E5 E5或#CCCCCC的颜色值，如图3-15所示。可以根据不同的软件风格采用不同的深浅，由设计师自己把控。

3.1.2　UI设计中图片的使用

（1）图片的位置

在遵循形式美的法则和达到视觉传达最佳效果的前提下，图片在界面上放置的位置是不受任何局限的，但它的位置直接关系到版面的构图和布局。支配版面的四角和中轴是版面的重要位置，在这些点上恰到好处地安排图片，可以相对容易地达到平衡而又不失变化，在视觉的冲击力上起到良好的效果。

① 扩大图片的面积，能产生界面整体的震撼力，如图3-16所示。

② 在对角线上安置图片要素，如图3-17所示，可以支配整个页面的空间，能起到相互呼应的作用，具有平衡性。

③ 把不同尺寸大小的图片按秩序编排，显得理性且有说服力，如图3-18所示。

（2） 图片的数量

图片的数量首先要根据内容的要求而定，图片的多少可影响用户的阅读兴趣，适量的图片可以使版面语言丰富，活跃文字单一的版面气氛，同时也出现对比的格局。在图片需要多的情况下，可以通过均衡或者错落有致的排列，形成层次并根据版面内容来精心地安排，有的现代设计采取将图片精简并且缩小的方式留下大量的空白，以取得简洁、明快的视觉效果。

① 多张图片等量地安排在一个版面上，使用户一目了然地浏览众多的内容。如图3-19所示。

② 将同样大小的多张图片，采用叠加的方式进行组合，如图3-20所示，这种前后关系可为设计带来层次感。

③ 精美、独特、单一的图片编排形式，能使版面有视线集中感并且给读者带来高雅稳健的视觉感受，如图3-21所示。

（3）图片的面积

图片面积的大小设置，直接影响着版面的视觉效果和情感的传达，大图片一般用来反映具有个性特征的物品，以及物体局部的细节，使它能吸引读者的注意力，而将从属的图片缩小形成主次分明的格局。大图片感染力强，小图片显得简洁精致，大小与主次得当的穿插组合，能使版面具有层次感，这是版面构成的基本原则。

① 小的图片给人以精致的感觉，图片的大小编排变化，丰富了版面的层次，如图3-22所示。

② 将主要诉求对象的图片扩大，如图3-23所示，能在瞬间传达其内涵，渲染一种平和的直接的诉求方式。

③ 扩大图片的面积，如图3-24所示，并将文字缩小，因此产生强烈的对比，能加强对视觉的震撼力。

（４） 图片的组合

图片的组合有块状组合和散点组合两种基本形式。将多幅图片通过水平、垂直线分割整齐有序地排列成块状，使其具有严肃感、理性感、整体感和秩序感；或者根据内容的需要分类叠置，并具有活泼、轻快同时也不失整体感的块状，我们称它为块状组合。

散点组合则是将图片分散排列在版面的各个部位，使版面充满着自由轻快的感觉。这种排列的方法应注意图片的大小、位置、外形的相互关系，在疏密、均衡、视觉方向程序等方面要做充分的考虑，否则会产生杂乱无序的感觉。

① 将不同大小的图片有机地构成一种块状，如图3-25所示，使之成为一个整体。

② 图片自由地安排，具有轻松活泼的特点，在编排中隐含着视觉流程线，使编排构成散而不乱，如图3-26所示。

③ 几张相同大小的照片均衡地安排，其中一张突破秩序，产生一种特异的效果，活跃了整个版面，如图3-27所示。

（５）图片与文字的组合

文字与图形的叠加，文字围绕画面中图形的外轮廓进行编排，以加强视觉的冲击力，烘托画面的气氛，使文字排序生动有趣，给人以亲切、生动、平和的感觉。

① 图3-28所示的界面中，图片在设计中成为主体，而文字则在图片边缘适当的位置加以精心的编排。

② 图片和修饰的有趣并置，如图3-29所示，图片上的文字小心翼翼地摆放，为的是避免破坏图片的整体形象。

③ 将主题文字的一部分叠加在图片上，但又不影响文字的可读性，其他文字采用左对齐或右对齐的编排方式，使设计既具有秩序又富有变化，如图3-30所示。