网页设计中最基础的字体排版知识,都在这儿了【内附11个最实用的专业设计网站】

2100ed7eb9b5eb1c60cd7cef8718e707.gif

76d27ac1c7f71a3b4df10a02d3bff82f.jpeg

后台回复「设计说」

日站君会为您推送一条设计物语

365天,365句经典,每天只更新一次哦

随着互联网越来越普及

从事网页设计的设计师也越来越多

对于刚入门的新人而言

如何才能保证自己辛苦设计的网页

符合网页设计的要求呢?

首先对最基本的网页设计规范

要有所认知和了解

【字体的选择】


对于大多数中国人来说

见过最多的字体应该就是黑体和宋体

这两种字体是设计的基础字体

应用在生活的各个场景中

 宋体

源于书法体

主要特点是横细竖粗

笔画末端带有三角状装饰

字形端庄有力

常运用在文章正文当中

fba0f5a8840f6edf3f81f546708e006b.jpeg

黑体

字的主要特点是横竖均匀

笔画相对宋体较为粗壮

常用作文章标题,突出而醒目

315d1f7888a7d311aeadeaf9eeba22de.jpeg

但在2006年Windows发布Vista系统时

微软雅黑体就已代替宋体

成为了新的系统默认字体

why?

因为宋体是一款衬线字体

受到Windows平台字体渲染技术的限制,在小字号字体渲染方面表现略差,部分字号在显示时会产生锯齿、模糊,而微软雅黑是非衬线字体,笔画丰满、简洁,常用字号的显示效果相比宋体更为优秀同时识别度更高。

因此,从Vista时代起

微软雅黑体就作为Windows的系统默认字体

并被沿用至今

常规、加粗、倾斜字形对比

c4cf46e802c5fdb4a3e89592905c1004.jpeg

在网页设计中

为了保证有较好的显示效果

主要标题的字体可使用微软雅黑体

次要标题可选用宋体

微软雅黑体网页显示效果

3a641ce91cfa2f96bb33f2a46eee7ef7.jpeg

文章的正文可选用宋体

也可使用微软雅黑体

宋体和微软雅黑体网页显示效果对比

4601520a8261729cbcb3680d3dada91f.jpege6a933d5504fc5e73811223e32762362.jpeg

如果网页设计需要展示英文字符

那么Arial、Verdana和Tahoma

这几种系统默认字体是比较推荐的

3种系统默认英文字体

4bfc00c8c00f4cf33946c1912a75c8e2.jpeg

【字号使用规范】


网页设计中一般选用双数字号

字号的大小并没有明确规定

但为了确保正常的阅读效果

可以参考以下参数

在网页设计中最小的字号一般为12像素;

正文常见字号有12像素、14像素和16像素;

标题常见字号有18像素、20像素、26像素和30像素。

由于显示器分辨率的不断提高

12像素的字号

在大分辨率显示器中会显得较小

对用户阅读造成一定的困难

因此12像素的字号使用频率比较低

普遍使用的是14像素或16像素

各个字号下的宋体、微软雅黑体显示效果

af060ce8c8c369d759418fea53bc9b90.jpeg

虽然两种都是常用字体

但宋体出现的频率并不高

实际运用得更为广泛的

微软雅黑

因为微软雅黑在设计上

比宋体少了一些装饰性

看起来更显粗壮有力

辨识度上也更高

尤其是小字号的显示效果

视觉感更为清晰与明朗

【网页标题如何设计看起来会比较舒服?

79e4d18f898022338d3fe76236b9f49e.png

字体清晰疏阔

字号醒目易读

 例如网易新闻

标题样式一般设置为微软雅黑体字体

36像素的字号

8b8c6d86bec263d774e1ce2a0865d0f4.jpeg

腾讯新闻的标题样式

一般设置为微软雅黑体字体

26像素的字号

b5d5d133c7ccd7582bc686f27aa6b61e.jpeg

【段落、行间距规范】

用户在网站上获取信息

主要依赖的就是阅读

因此好的阅读体验非常重要

作为信息展示的主体

漂亮的文字排版

巧妙的留白

都能为整个网页增色不少

文字排版中

段落中“行长”与“对齐方式”的设置

行长主要指段落文字的宽度,一般行越长,行间距越大,否则用户在阅读时很容易串行。在网页正文中,汉字一般以每行显示30~40个字为宜,英文一般以每行显示40~70个字母为宜。

55dae3c9ffb0c7a2b7f1e972686586da.jpeg

段落对齐方式主要有4种

包括左对齐、右对齐

居中对齐、两端对齐

国内大段文字的设计

一般是根据中国用户的阅读习惯

将对齐方式设置为左对齐

77e80a151ad9c5536bf1b020accac01b.jpeg

段落中“行间距”的设置

行间距指段落中行与行之间的距离,作为段落中的留白,行间距让字与字之间有了可呼吸的空间。过小的行间距会使页面变得拥挤不堪,增加用户错读的可能性,而过大的行间距则会占用大量的页面空间,缺乏美感。选择适当的行间距不仅可以提升文字的易读性,也可以最大限度地利用好页面空间。

0644853029776a882244c638018df11a.jpeg

传统中文文档默认行间距一般为1.5倍

在现阶段的网页设计中

汉字一般使用1.8~2倍的行间距。

不同数值的中文行间距

44ccbe0660bc76a2818b63c6530aaf08.jpeg

英文段落一般选择1.5倍行间距

8e17cd4b464492f1ba68eaa35eb0e3c8.jpeg

【网页设计的标注规范】

网页设计师与前端开发人员的对接关系

往往非常紧密

而设计图的标准化标注

可以提高前端开发人员的工作效率

效果图的标注一般包括以下3个部分


页面中控件的颜色、尺寸、交互效果(如按钮、表单等)。

字体颜色、字号。

页面中各个模块的尺寸和间距。

效果图标注中需特别的4个问题


保证标注的文字清晰易读。

标注所使用的颜色应与背景色区分。

标注应尽量在空白区域,不要对原图造成视觉干扰。

标注信息应条理清楚,同一模块的标注应摆放在同一位置,适当留有间隙,方便开发人员阅读。

某视觉设计稿的效果图标注

ce4d6807411f20dafc42efa921bce3e3.jpeg

标注工具有很多种

MarkMan(马克鳗)

支持Windows和Mac双系统操作

界面简洁,使用简单易操作

非常适合设计初学者使用

MarkMan启动界面

337880f82312bad80addeb1f4795e9a3.jpeg

MarkMan操作界面

28a2df1c05bd54120aa6820abed8e628.jpeg


【专业设计网站推荐】

国内网站

79e4d18f898022338d3fe76236b9f49e.png

站酷(Zcool)

站酷网是一个人气设计师互动平台

聚集中国大量的专业设计师

包括平面、网页以及插画设计师等

涉及艺术创作、交互设计、影视动漫

时尚文化和广告创意等领域

61b654d8dea88990f1ee4dbb4c7fa2d8.jpeg

 花瓣

花瓣网是一个类似Pinterest的网站

为用户提供简单的素材采集服务

帮助用户将自己喜欢的图片重新组织和收藏

设计师可以从中寻找设计灵感和设计素材

2c323aacbd2ea5eb2e7156df39c2694a.jpeg


UI中国

UI中国的前身为 Iconfans

是一个专业的界面交互设计平台

主要为设计师们提供交流学习和作品展示

会员均为职业UI设计师,专业性较强

因此也是UI设计师人才流动的集散地

c0b3d0a9bfd3853f29b64e2d5333eecc.jpeg


Uehtml

Uehtml是优艺客

(原韩雪冬网页设计工作室)

旗下的设计师交流平台

专为网页设计和界面设计而生

拥有较多创意精美的网页设计作品

bef4ebc48dadc00d10557043adaf1d3b.jpeg

优设

国内比较专业的网页设计师交流学习平台

有许多关于设计师的职业理念

和从业经验的收集与分享

另有好用的设计小插件可供下载

68755f9faf36efe36219f6bbf8eeb666.jpeg

国外网站

79e4d18f898022338d3fe76236b9f49e.png

Dribbble

面向创作家、艺术工作者、设计师等

是创意类作品分享的平台

提供作品在线服务

供网友在线查看已经完成的作品

或者正在创作的作品的交流网站

5e4d9260ca0c897f7ae01097d9112de8.jpeg

Behance

Behance 是一个设计社区

在这里创意设计人士可以展示自己的作品

欣赏别人分享的创意作品

还可以通过评论、关注、站内短信等方式

与这些设计师进行互动

f70caedecd7adc73a664a5f310096d17.jpeg

模板下载网站


79e4d18f898022338d3fe76236b9f49e.png

Freebiesbug

一个免费PSD资源下载平台

包括APP设计、icon设计

Web展示模板、前端代码

以及字体等素材资源

edfcf385a9570042a6c1dc5261f56a0c.jpeg

PSD REPO

大量精品PSD源文件下载平台

涵盖目前设计主流方向

如icon、移动端设计、按钮设计等

且均可免费下载

0e65303e9b01d57d5e1f93e2d199b516.jpeg

365PSD

有付费和免费两大类资源可供下载

种类繁多,方向划分较为详细

包括建筑、广告、Logo、动物等

7ab7ba18eacfd5202215febde53a10fb.jpeg


MaterialUp

包含iOS、Android、Web等

平台的相关设计资源

各类素材与当下潮流趋势紧密贴合

c001f6d2674ab819788092d77badba6e.jpeg


新书推荐

79e4d18f898022338d3fe76236b9f49e.png

c0eedcf73b2254aa2b917a84917b16c6.jpeg54bd1e2a7106caac52f23373574f8ba8.jpeg97c90678784bd4bc3591178c6290298f.jpeg3737ee553f7d5845d2932c14801604b3.jpeg32c09039b7b9de18c08b5ea46d6c670b.jpeg2bb63ad46a9331fec9f3d558efd9a9c7.jpegb6025d253b2d8382c6f9e9836edfb194.jpeg

延伸阅读

更多内容可以购买《形•色——网页设计法则及实例指导》详细阅读哦!

12008cf8e1f2a5b899218c272edc1a97.jpeg

    作座者:姜鹏 郭晓倩

    出版社:人民邮电出版社

    出版年:2017年11月

    ISBN  :978-7-115-46535-1

那么,怎么买买买呢?

长按识别二维或点击阅读原文立即购买!

PS:留言点赞的前三名

还可获得赠书哦!

3b9986a14951902fff0ef17e9de69c63.png

点击“阅读原文”可以直接购买

《形•色——网页设计法则及实例指导》

79e4d18f898022338d3fe76236b9f49e.png

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注