前言
有人说，中文网页的设计其实没有字体设计这一环节，因为在网页中能用到的中文字体非常有限，能用的也只有黑体、宋体、微软雅黑等，这给中文网页的美感带来了折损。相比英文对字体的斟酌，网页上的中文字体显得太随意。
当然，这种说法有一定的正确性，但我们应该换个角度看。中文的网页中的字体的确是局限在这几款字体中，但不代表中文网页就没有字体设计这一环节。
认识网页设计中的“字”
首先，我们简单将网页里的文字分为可替换和不可替换两个部分。
可替换的文字也就是能通过后台管理进行编辑的文字，例如博客文章、产品说明等。不可替换的文字是在网页制作过程中所定下的，后台管理并不提供文字的编辑条件，通过网页代码才能修改，例如导航、Banner等。不可替换的文字并非完全不能修改，只是修改一次会耗费一定的成本，因此修改的间隔时长，比如导航的修改需要经过代码，而Banner里的文字的修改也需要重新设计Banner图片。
可替换的文字只能使用网页所允许给定的字体，因此中文字体的选择面较窄。但不可替换的文字则可以通过图片等方式展示，将其制作成透明背景的图片，这时，字体的使用和排版都是灵活的，设计师就会有足够的创作自由度。
下面这个设计中所使用的字体就经过了一定的设计，字体更换并不十分容易。
这里所谓的与图片的搭配，也是指的这类可以经过设计的文字。
字形的观察
字体首先是一种图形，然后再是可承载信息的文字，因此，当你挑选一款字体来搭配图片的时候，你需要集中去观察文字的形态特征是否和图片协调。
在挑选字体之前，首先观察图片里的形态特征。如果配图是以插画的方式呈现，那么插画里的风格细节，以及此类风格所表达出的年代感和空间氛围，都提供给你挑选与其所搭配字体的依据。比如英文中的无衬线体通常较为现代，而衬线体较为古典。
下面的页面中的配图经过曲线造型，因此，与此搭配的文字采用了Adelle无衬线体，可以看出字体中的圆弧处理和配图中曲线的流转造型相呼应。
如下设计里的配图都是零散的矩形，因此与此相应采用的字体为graphik，这个字体的特点也是表现出非常清晰的几何边缘。
以上的字形所带来的形态特征与配图相呼应即是一个能让图文实现完美搭配的方式之一，此外，我们知道一些特殊的风格化字体也能表达出特别的氛围。
例如下图中的机器看上去非常有80年代的机械感，而这种造型也营造一种技术世界里的怀旧感，因此像素文字较适合与此相搭配。
从这几款英文字体的实例图文配中，我们需要配以对“形”的观察解构能力。也同时需要对字体所承载的风格特征作出一定的归类。非但英文需要精挑细选，中文也��要认真的斟酌，而不能以期待偶遇一款好看的字体，以好看为目的进行设计，较终结果都是失败之作。
字体还可以经过一定的设计，在原有的字体基础上进行一定的“变形”，这当然就更不能频繁更换。根据主题而进行一定的“微调”，让氛围表达得更加丰满立体。
如将圆圆的字母中空的部分填实增加了可爱感，与配图的角色形象也非常搭配。
字距和行距
观察字形，用你敏锐的设计师的眼光来区别不同字体的特征，这是挑选比较大的字体时需要具备的能力。因此，非常适合用在首图、Banner等需要将文字做成图片所展示的情况下。而我们的字体还有形成段落进行展示的时候。这时，形的特征逐渐隐去，我们更多关注字与字之间的关系，即字距。
一般情况下，字距的选择总是根据字体本身以及其和空间的关系来决定，当字距较小时，传递出一种紧凑感，而字距宽松又能表达出一种轻松感。
比如大型展示字体的距离总是以相互靠近为佳，因为字体本身已经占据了足够的空间，如果再在字体间增加空间就会让整个空间被填满。因此，我们也可以说，字距根据整个空间进行调整确定。与此同时，配图也是以较为集中感的方式展示，所有箭头真是“万夫所指”，因此字距缩小，略有集中感。
而相对较小的字体，略带轻松和闲适，与此搭配的图片也是一堆木材，联想到木匠的自然惬意感。
在中文的世界里同样适用，然而不同的是，中文字体的距离应该更加远一点，以保持单个字体的独特展示度。因为中文的每个单字都可以看成一幅图画，拥有一定的意境，因此，保持字距是中文展示能保持美感的一个关键。
当字体变为垂直展示时，更应该拉宽上下字距。这是由于我们人眼并不熟悉上下顺序的阅读习惯，如果字距较近则容易形成字与字的视觉粘连。
而行距则不同，当你考察行距时，这时字体已经变成了段落，成片出现的字体则是段落，你要关注的就应该是整个段落的灰度值。所谓灰度值就是字体的疏密。
较大的行距和较大的字距一样都能传递出紧凑和轻松的不同之感，同时，行距也关联着字体本身的色彩、字距以及字体大小以及字体较终的形态。英文的行距可以以1.5倍作为标准尺度，然而一切规则都是依靠条件而存在，如果在特殊的场合，依然可以选用更大或更小的行距展示。
这一段落的字体等安排配合了配图中所传递出的儿童的教育成长这一主题，选用较为圆润的字体，字距较宽松，体现出轻松的氛围。字体本身采用和LOGO一样的色彩，比黑色字体更透露出趣味。
后记
厘清字体的字距所创造的疏密，行距带来段落的灰度几何，配合字体本身的展示形态，你才能更好的选择与此相称的配图。多了解字体，对不同风格的字体的形态有大致的了解，在使用时才不会手忙脚乱去盲目找寻适合的字体，平时对字形的积累极为重要。记得为自己建立一个字库，才会在图文搭配时得心应手。
一. 界面布局样式有哪些？
在做界面设计时，我们为了区分信息结构及层次，通常采用以下3种布局样式：卡片式设计、分割线、无框设计。
二. 卡片式设计
自从Android4.1上Google Now登台亮相之后，卡片式这种设计思路／风格慢慢就流行了起来，被大家所关注和使用。
Google将它称之为“Inside Out design（由内而外式）”，它的本质是更好的处理信息集合，那么卡片式设计适合运用在什么地方呢？
- 增加空间利用率。
- 区分不同维度内容。
- 提升可操作性。
1. 增加空间利用率
相比于传统列表式布局，卡片式设计能更好的打破原有的框架。
比如，在传统列表下，内容一般为纵向滚动操作，展示的内容有限。而采用卡片式的布局，在纵向的内容流里，还可以很好的增加横向滑动的内容区域，而且看起来很整体。
比如，知乎feed流里增加知乎live的横向滑动内容。
2. 区分不同维度内容
卡片，其实比较像一个容器，你可以把不同维度的内容放入不同的卡片中，使其在内容区分的同时，还能保持界面的统一性。
比如：淘宝采用卡片处理信息的层级。个卡片承载着：个人信息及偏好；第二个卡片：购买操作后的所有关键流程；第三个卡片：一些淘宝内使用率不高的功能聚合；第四个卡片，是对支付宝和理财产品的一种推广；等等。
每个卡片都是不同维度，相对独立的，但通过不同大小的卡片归纳后，比起传统列表项 + 分割线 + 标题的视觉效率要高很多，显得更有秩序。
再比如：荔枝FM、微信读书，也是采用卡片式设计，来归纳不同维度的信息内容。
还有，微信公众号和appstore，同样是采用这种处理方式，把繁杂的信息以时间维度，归纳到不同卡片中。
3. 提升可操作性
卡片是一种拟真元素，可以被覆盖、堆叠、移动、划去，这样能更好的拓展内容块的视觉深度和可操作性。
比如：iPhone自带的「提醒事项」APP，就是采用卡片堆叠的方式。用户可按照标题快速查找目标备忘录，同时进行点击操作，打开卡片内容。
探探，运用卡片式设计，实现左右滑动代表感不感兴趣的操作，从而增加产品的趣味性。
但是，卡片也有它的弊端。如果不在合适的场合下，盲目的使用卡片设计，也会使你的设计变得低效和空间浪费。
举个例子，下面这种效果图，设计师们应该都不陌生，因为是在各大设计网站上经常看到的。
但是，你认真分析下，好好的一个通讯录，明明只有简单的头像和名字的元素，非要包裹在卡片里，而且卡片与卡片之间还要留出间距。为了视觉效果，空间这么浪费，并且影响效率。
如果按照微信的策略，好友可以加到5000，那么找个人不得向上滑动很久么？
三. 分割线设计
在UI设计中，较传统也是较常见的分隔方式是「线」。它能起到分隔、组织、细化的作用，帮助用户了解页面层次，赋予内容组织性。
而「线」，可以分为以下两种：
- 全出血分隔线。
- 内嵌式分割线。
1. 全出血分隔线
「出血」是一种平面印刷中的概念，而「全出血」指的是分隔线横向贯穿整个页面，一般为了区分更加独立性的内容信息。
比如：知乎的「想法」feed流里，就是采用全出血分隔线的形式，让信息分隔的更明显，更加独立性。
比如：google photo，用全出血分隔线，来区分上面的默认分类和下面相册的模块内容。
2. 内嵌式分割线
内嵌式分割线，不同于前者，它一般会在「线」的前面留有缺口，来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。
比如：知乎的「更多」页面，卡片内采用内嵌式分割线，来区分同一维度下有关联的内容。
比如第二个模块里，我的创作、我的收藏、我的关注、我的邀请回答，都是「我」操作后的内容信息。而第三个模块，已购内容、我的私家课、我的Live等等，都是跟「钱」或「付费」相关的。
所以，采用内嵌式分割线，比较适合这种划分有关联性的内容，同时能提升浏览效率。
其实，采用「线」的分割方式，相对其它两种（卡片式设计、无框设计）是比较保守的解决方案，但是，前提是要处理好「线」的间距、粗细、颜色等问题。
四. 无框设计
无框设计是近两年流行起来的一种新的趋势，是去除界面中的边框，分割线，用间距来区分内容。
它适合运用于：
- 大图为主。
- 内容有规律。
- 小众且垂直产品。
1. 大图为主
大图为主指的是以图片为主的产品，每张图片本身就可以起到分割的作用，因此，不需要采用多余的线或边框进行分割。
比如：instagram，发布图片前，用户被强制对图片进行正方形截取，才能保证图片在feed流里的宽度，撑满全屏，从而看起来很整体。
可能有的同学会问，为什么国外的产品就这么高大上，微博怎么就不能去分割线，做减法，搞得洋气一些呢？
那么大牙来带你分析一下。instagram只支持发送固定尺寸的图片和视频，而微博支持发送图片、文章、视频、纯文字、签到、点评等等的内容。
同时微博feed流里的图片，支持1张－9张不同情况的排版。而且1张图片时，为了更好的呈现出用户的原图比例，还要处理成4:3，16:9，正方形，以及特殊尺寸的缩略样式，同时还有gif图的情况，还支持你在自己状态下添加不同话题。那么你想只用间距留白来区分？场面会像刚地震完的样子……
所以现在想，微博用卡片形式来承载这些内容信息，还是有一定的原因的。
2. 内容有规律
内容有规律指的是，留白间距上下的内容，较好是相对一致的、重复的、亲密的，这样用户会下意识的将其分为一组。
比如，Airbnb采用的无框设计，原因是它们的信息元素很统一、重复，才给人营造出比较整体的感觉。同时，合理的运用大标题也起到关键性作用。
而同样采用无框设计的「下厨房」APP，首屏由于每个模块信息元素不一致，而且模块内元素的左右间距也不一样，字号种类过多，导致界面看起来相对有些杂乱。
3. 小众且垂直产品
小众且垂直的产品，一般情况下目标用户聚焦，功能简洁。因此，能够比较好的运用无框设计，跳出传统的规范做出创新的设计。
比如：轻芒杂志，采用无框设计的同时打破传统的移动端浏览体验，更符合它们自己的产品调性。
下面是FOOTAGE，一款小众且文艺的产品，由VUE的团队设计的。他们采用无框设计的前提是，每个界面元素有限，功能内容简洁。
但如果你是像微博，淘宝，微信等体量的产品，用户群体广，内容繁杂且层级较深。那么，你需要找到一个效率更高的信息呈现和交互的基础隐喻，无框设计可能就不太适合了。
五. 总结
总的来说，任何表现形式都应该是为了更好的呈现功能及内容，而不是盲目的追随趋势。
自成一派的优秀设计师并不需要受到任何风格的局限，因为他知道风格并无好坏之分，而是探索更适合自己产品的处理方式。
微信
