当前课程知识点:界面设计导论 > 第三章:界面设计元素 > (4) 文字与阅读 > 字体设计
这节课我们讲一下界面的字体设计
字体是界面的基本组成要素
它既是内容也是形式
既是语言又是链接
在界面里面不可缺少
计算机里面有大量的字体可以使用
如果使用的得当
是可以加分的
使用不当就会减分
如何使用字体呢
是界面设计师需要掌握的
基本技能之一
在没有文字之前呢
人们用图腾做标记
有了文字
就几乎可以传达任何的信息
历史才可以被记录下来
所以语言和文字
是人类记录和传递信息的基本元素
字体呢既是信息也是图形
它能够通过字形字义等等
呈现出形象化的感知
表达丰富的情绪
比如说这个海报
它把字体和图形进行了巧妙的结合
两杯牛奶从左上角倒下来
形成了中间的这段文字
并且通过文字的排列
成功地把人们的视线
引向了海报的右下角
空白处的一块巧克力
使这个巧克力呢
成为下一个视觉焦点
在这里呢
我们看到白色文字的颜色
和细节的处理
都显示出和倒出来的牛奶之间
存在着某种联系
而这种联系延伸到右下角的空白处
让人们把这两杯牛奶
和巧克力的口感联想在一起
很好地阐释了海报的宣传主题
在互动媒体上
文字也是通往新信息的连接点
比如说这个界面
直接用文字做标签
在字体演进的过程中
技术起到了推波助澜的作用
比如宋体和黑体
就是从宋代
活字印刷术之后演进的字体
那信息技术呢
又把更多丰富的字体
带到了人们面前
无论是PC电脑还是苹果电脑
都为使用者提供了各种数字化的字体
还有五花八门的付费字体
总体而言呢
可以把字体分为三类
一类是印刷体
比如宋体和黑体
一类是书法体
比如楷体 隶书 魏体 颜体等等
这些由书法演变而来的字体
第三类呢是美术体
比如综艺 美黑 圆体 琥珀体等
是通指具有某种艺术风格的字体
图示的这些呢
是计算机中常见的英文字体
网页端对字体的使用有哪些限制呢
一般来说
浏览器定义的标准字体呢
是中文宋体和英文Timcs New Roman字体
这两种字体可以在任何操作系统
和浏览器里都能正确显示
另外呢windows自带了40多种英文字体
和五种中文字体
这些都属于免费字体
你可以在网页里面自由使用
只要是windows操作系统的浏览器
它们都可以正确地显示出来
但是呢在其它操作系统里面
比如说Unix
有些字体就不一定能够正确地显示
同理
如果使用只有苹果
IOS操作系统里才有的字体
那么在其他操作系统里面
浏览器上不一定能正确显示
所以说网页里面
如果要出现大量的文字信息
建议采用兼容性好的字体
以免部分浏览器
产生不能正确识别的问题
网页字体的样式一共有四种
有正常体 斜体 粗体和粗斜体
目前移动设备有两个主流的操作系统
一个是IOS
一个是安卓
这两个系统中
默认的中英文字体都不一样
所以在设计移动界面的时候
需要留意一下
字体常用单位有两种
一种是磅
英文符号是pt
另一个呢是像素
英文符号是px
磅对应的是打印尺寸
如果选用磅为单位
无论屏幕分辨率是高还是低
不会影响打印出来的大小
只会影响打印出来的精度
像素呢对应的是相对尺寸
它会受到屏幕分辨率的影响
同样像素值的字体呢
屏幕分辨率越高
文字显示就会缩小
反之就会增大
在界面中
要考虑屏幕分辨率
对字体显示的影响
另外一个影响字体显示的因素
是屏幕的精度
英文的简称是ppi
精度越高像素密度越高
同样像素值的字体的显示也就会缩小
那通常情况下
界面上的文字有两种类型
一种是矢量文字
一种是像素文字
运用矢量文字的好处呢
是无论如何放大
文字仍然清晰
而且内容可以通过后台随时更新
坏处是字体的使用类型
受到浏览器的限制
如果采用了不兼容的字体
一些浏览器上
会自动显示为替代字体
导致界面效果失控
如果想用一些不常用的字体
还是建议使用像素字体
准确的说像素文字
已经不是字体了
而是图片
在做界面视觉设计时
我们可能会用到一些特殊字体
甚至呢是一些自创的字体
用作图标 标题 logo或导航等等。
为了保证字体呢
在用户端的显示效果
通常会把这样的字体呢
做成图片格式来用
这样做的好处
是不受系统字体的限制
可以灵活使用任何字体进行创作
可以满足需要的视觉效果
它的坏处也很明显
因为像素图放大以后会发虚
图片呢会变模糊
影响观看的效果
另外呢像素文字的内容
是不能更改的
如果要改
必须重新制作和输出
字体可以传达出不同的性格特征
这些特征是通过它的字形
笔画 结构 粗细等形式传递出来的
当字体和特定的语义联系起来的时候
它的个性也就更加明显
比如这个图中幼稚这个词
我们会认为左下角这个字体
更能体现这个词的词义
这是因为我们对这个字体发生了联想
因为这个字体的笔画结构
很像小朋友写的字
每种字体都有自己的个性
设计师应该善于利用字体的个性和特征
来进行符合设计意图的表达
不同字体的差异在于
结构 粗细 笔画的细节等等
在文字放大以后
我们可以看到字体的细节
比如说这是冬青黑体的细节
这是华文黑体
这是兰亭黑体
可以看到同样是黑体
在细节上还是有很多差异的
兰亭黑字形比较宽
华文黑体偏瘦
冬青黑笔画比较粗
这张图是几种黑体排列的效果
当文字缩小以后
它们之间的差异不是很大
不过仔细看还是有很多不同
如果是不同的字体
排列起来的差异就比较明显了
比如在这张图里面
上下两个段落
分别使用了黑体和宋体
可以看到文字缩小以后
黑体的识别性更好
而宋体识别性要差一点
从特征上来看
宋体的文字比较秀丽
而黑体呢比较硬朗
所以界面中
如果要显示较小的文字的时候
建议使用黑体或等线体
这样可以保证良好的识别性
再来观察这两组不同的英文字体
也有很多细节上的差异
有些字体感觉比较精致
有些字体感觉比较复古
图示的这些字体属于有衬线字体
它的特点是笔画粗细变化比较明显
在起笔 落笔和转折的地方的细节
都有额外的装饰
这几种字体呢
是属于无衬线字体
文字缩小以后的识别性更强
它的线条粗细变化不明显
细节上也没有多余的装饰
界面中如果需要小号的文字
建议使用无衬线字体
这样可以保证更好地识别性
这张图显示了有衬线字体
和无衬线字体在笔画细节上的差别
另外字体的使用还要注意版权问题
如果是商业用途
除了系统自带的字体以外
多数字体的使用是要交费的
在处理大量的文字排版时
要注意使用合适的字句
字句太密或者太宽
都不利于阅读
段落的行距和采用的对齐格式
对阅读也很重要
行距太密会使画面显得拥挤
不利于阅读
而疏密适当的行距
不但美观还容易阅读
在段和段之间留出空白
会显得更有层次感
中文排版中
使用首行缩进的方法
更符合人们的阅读习惯
中文排版采用两端强制对齐的方法
可以使中文的方块字
左右两端显得更齐整
视觉上也更美观
大段的中文文字
采用居中对齐的排列方法
会给阅读造成一定的困扰
应当慎重的使用
但是在文字不多的情况下
可以根据画面需要
采取居中对齐
比如说在这个例子中
构图是左右对称的
在这里使用居中对齐就比较合适
下面再来看几张英文排版的情况
比如这张图
大家可以体会一下
英文字母之间不恰当的字句
对阅读产生的影响
比如这个段落行距太密了
易读性不好
和前面对比一下
这个段落的行距就舒服多了
我们把长段落进行分段
留出空白
可以显出层次感
比如这个段落使用了左对齐
让行尾形成了参差不齐的效果
显得美观自然
这样符合英文的阅读规律
另外根据构图的需要
我们还可以使用右对齐
或者是居中对齐
左右强制对齐
可以让段落两边显得非常整齐
但是呢也会让部分的单词之间
产生太多空白
显得不自然
网格和分栏
可以让信息的呈现更清晰更有层次
也更易于阅读
比如这个案例中
利用分栏对文字段落进行了约束
大标题小标题和正文
从字号和粗细上进行了对比
形成了舒适整洁的视觉层次
当人们长时间看屏幕的时候呢
视觉很容易感到疲劳
所以在屏幕上阅读大量的文字
往往不如在纸面上阅读轻松
字形字距行距和字体的大小
排版时每行的长度都会影响可读性
另外屏幕的精度也会影响可读性
中文在屏幕上
可以识别的最小字体是九磅
老年人因为视力减弱
只能看清楚更大号的文字
所以呢一些界面
允许用户自定义字体显示的大小
不失为一种面向不同人群
阅读习惯的一种解决方案
在实际应用中
界面文字通常还会和图形
导航、按钮等结合在一起
进行整体的布局设计
字体不但是传递信息的符号
也是形式构成的元素
它可以和图形结合
产生丰富的视觉效果
加强它的信息传达能力
比如这个案例是一个设计师的logo
用他的名字RICHARD SMITH头衔
PHPTPGRAPHER和联系方式
围成了一个圆形
并且通过字体粗细大小的变化
构成明暗和空间层次
而这个图形可以使人联想到镜头
正好和他的身份相吻合
这个设计把信息和图形关系
进行了巧妙的联系
令人印象深刻
下面呢我们来谈一谈字体的组合和搭配
使用不同的字体呢
有时候是为了避免单调
有时是为了表达的需要
比如说这个插画设计师的个人网站主页
设计师的名字用了粗壮瘦长的等线体
非常醒目
和穿黑衣的半身人像照片相呼应
形成了共同的视觉中心
文字WORK
选用了和背景的插画风格接近的字体
和背景相互协调
形成了第二个视觉层次
背景是作者的插画
凸显出作者的专业特质
形成第三个视觉层次
这个界面的字体搭配
属于动静结合 和而不乱
那么字体搭配有什么规律呢
首先
为了避免视觉混乱
不要用太多字体
建议有两三种即可
比如说这个界面用了三种字体
第二
选择适当的有联系的字体
并且和界面风格相协调
比如这个界面
是一个小型设计工作室的网站
界面是对称布局
用色稳重大方
画面精致而简洁
它采用了三种字体
大标题是Y的拉丁字体的变体
这个字体个性比较强
有一定的装饰性
但也不失庄重感和现代感
这个大标题和它下方的图片
形成了视觉中心
小标题
用了和大标题一样的字体
不过略微拉长了一些
颜色对比也弱一些
和中间的logo的图形
形成第二个视觉层次
图片左右的介绍性内容
采用了和标题相似的有衬线字体
只不过这个字体的易读性更好
上方的文字导航
它的视觉层次仅仅在背景层之上
文字很小
使用了无衬线字体
这种字体易读性最好
我们看到这个界面
三种字体的选择是有一定讲究的
有衬线字体显得比较精致
无衬线字体有现代感
易读性好
字体搭配整体上既有对比
也有不同
还能互相协调
我们试着把其中的字体换一下
看看它有什么不同
这个同样的界面
我们把主标题换成黑体
界面的感觉是不是有了一些变化
黑体的笔画是没有任何装饰的
有庄重感
但是呢却让这个画面少了一点点个性
和精致感
那现在我们把主标题
换成这个有点复古风格的字体
看起来似乎也不如之前的字体好
一方面呢因为这个字体太纤细
分量略显不足
另外一个原因呢这个字体比较活泼
和其他字体在风格上差异比较大
和沉稳的界面风格不太协调
从这个例子我们可以看到
字体的选择和搭配
在界面中是十分重要的
一般来说老式字体
和亚现代字体的混合往往效果不错
这是因为亚现代字体在设计的时候
融合了老式字体的风格
同时呢也有现代字体的简单
那这两种字体在一起
既不相同又能互相协调
为了互相协调呢
同一份设计中
不同的字体
应该有自己的大小和间距
布局良好的字体呢
是交流的基本组成部分
-课程简介
--课程简介
-(1) 什么是界面
--什么是界面
-(2)界面设计为什么重要
-(3)UI的进化
--UI的进化
-(4)设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章:界面设计概述--课后习题
-本章概述
--本章概述
-(1) 为什么设计?
-- 为什么设计?
-(2)界面设计流程
--界面设计流程
-(3)视觉优化原理
--视觉优化原理
-(4)可用性评估的基本原则
-第二章:GUI设计心法--课后习题
-本章概述
--本章概述
-(1)信息结构与交互设计(1-4)
--第一讲
--第二讲
--第三讲
--第四讲
-(2) 界面草图与原型设计
-(3)视觉设计原则
--视觉设计原则
-(4) 文字与阅读
--字体设计
-(5)图标
--图标
-(6) 色彩
--色彩
-(7) 动效
--动效设计概述
--动效小制作1
--动效小制作2
-(8)第三章小结
--第三章小结
-(9)学生个人作品网站主页设计体会
--张铁汉
-第三章:界面设计元素--大作业
-前言
--前言
-(1)什么是网页
--什么是网页
-(2)标签与元素
--标签与元素
-(3)文本格式化、块级元素与行内元素
-(4)如何使用H5进行网页布局
-(5)目录、目录结构及在页面中插入图片
-(6)CSS样式表
--CSS样式表
-(7)CSS盒子模型
--CSS盒子模型
-(8)CSS控制文本
--CSS控制文本
-(9)CSS背景、特效、动画
-(10)初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好,安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者:于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者:艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者:王依柳)