电脑标准字体大小为多少合适(网页设计规范(尺寸、字体篇))

首页教程更新时间:2023-06-15 05:27:28

网页设计规范

在了解网页设计规范之前,我们先简单了解网站的分类,网站的分类按对象划分可分为 To C端和 To B端两种:

To C端是面向用户和消费者,所以设计上一定要可以吸引人,并且以用户为中心考虑体验设计。

To B 端是面向商家和专业人士,因而TO B与 TO C端在设计上是大相径庭的, To B 类网页最重要的是效率而不是体验。

电脑标准字体大小为多少合适,网页设计规范(尺寸、字体篇)(1)

因互联网的发展,现今对网页设计的要求也提高了,所以有个自己的设计规范会使设计简洁而高效。根据本大宝贝的设计细节,相信你很快就能与大神比拟了,哈哈哈哈,开个小玩笑,下面咱们就从尺寸、字体、图片、颜色等方面来开展深入探索!其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有:字体规范、主体色规范、图表规范、图片规范等不同分类。今天我们就先来了解to c设计规范,后期会出TO B的设计规范 !

一、网页尺寸

电脑标准字体大小为多少合适,网页设计规范(尺寸、字体篇)(2)

1.网页的布局主要有两种:左右布局和居中布局。布局不一样使设计的空间也不相同。

⑴、左右布局,灵活性强,UI限制小;左右通栏为导航栏,宽度没具体限制,可根据实际情况调整;右侧为内容板块范围,是网站内容展示区域。

电脑标准字体大小为多少合适,网页设计规范(尺寸、字体篇)(3)

⑵、居中布局,中间的深色部分为有效的显示局域,用于网站内容的展示;两边留白没实际用图,只是为适配而存在

电脑标准字体大小为多少合适,网页设计规范(尺寸、字体篇)(4)

2.当前最流行的分辨率是1920px*1080px的,所以建议创建网页尺寸为1920px*1080px,页面中心区域常设置为1200px(或1000px -1400px区间),以这个尺寸来设计相对标准。每个屏幕的高度约为900px。为什么是900px呢?因为1080还要减去浏览器头部和底部高度,大约就是900px了。

电脑标准字体大小为多少合适,网页设计规范(尺寸、字体篇)(5)

2.文字

网页中字体也是有使用规范的,合适的字体大小才能展现出最完美的效果(1920px*1080px分辨率下)

那些漂亮的网页设计,它们都是用的什么字体的?

网页设计字体的选择可以根据企业调性去挑选字体的,因为字体本身也是有性格的,为了方便大家使用,我把网页设计中经常用到的字体,希望能给新手一些指导,有自己的一套用字方法,那当然是极好的

电脑标准字体大小为多少合适,网页设计规范(尺寸、字体篇)(6)

说完字体咱们该说字体的字重、字号、行高、字间距、行间距、段间距了、字体颜色。

字号:

正文:12px-18px之间

12px是应用于网页的最小字体,适用于非突出性的日期,版权等注释性内容。

14px 则适用于非突出性的普通正文内容。

英文可偏小些 :10px-16px

导航栏字体:一般在14px-18px区间,最大不超过18px,禁用加粗

整站文字:12px-36px区间

电脑标准字体大小为多少合适,网页设计规范(尺寸、字体篇)(7)

某一个网页的规范:

电脑标准字体大小为多少合适,网页设计规范(尺寸、字体篇)(8)

网站的字体大小并没有硬性规定具体的字号,根据实际情况可以酌情考虑,但是要使用偶数字号。

1、字体规格也不需要太多,最多使用三种混搭,当一个页面中使用的字体超过 3 种时,会给用户带来“不专业”、“没有权威性”、“没有层次结构”之类的感觉。

2、层次的区别,可以改变字体颜色或加粗来体现。

3、字体优先使用各操作系统默认的字体。字体选择有版权、笔画严谨、清晰可读、经典。

字体间距

相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。

行间距,推荐以 字体大小的1.5-2倍 作为参考;

段间距,推荐以 字体大小的2-2.5倍 作为参考。

即,当用14px 的字体时,行间距:21px-28px;段间距:28px-35px。

字体颜色

主文字颜色,建议使用 公司品牌的VI颜色,可提高公司网站与公司VI之间的关联,增加可辨识性和记忆性。

正文字体颜色,建议选用 #333333到#666666 之间的颜色。

辅助性的,注释类的文字,则可以选用#999999之类的比较浅的颜色。

电脑标准字体大小为多少合适,网页设计规范(尺寸、字体篇)(9)

如果,你对颜色驾驭能力比较强,你也可以选用 偏公司VI颜色的深色,作为正文字体颜色或者辅助性文字颜色。

例如公司的品牌色是蓝色,那么,正文字体就可以选用偏蓝的深色。

这样处理之后,文字就带有了环境色,网站整体色调将更加和谐。

以上皆是个人拙见,有不同意见的我们可以相互交流(*^▽^*)

想要学习设计可以来AAA教育进行咨询了解。

相关推荐:

,
图文教程
相关文章
热门专题
推荐软件
奇热小说
奇热小说
下载
QQ2019手机版
QQ2019手机版
下载
王者荣耀
王者荣耀
下载
百度浏览器迷你版
百度浏览器迷你版
下载
2345浏览器手机版
2345浏览器手机版
下载
网易邮箱
网易邮箱
下载
爱奇艺
爱奇艺
下载
网易云音乐
网易云音乐
下载
WPSOffice
WPSOffice
下载
优酷
优酷
下载
谷歌浏览器(Chrome)
谷歌浏览器(Chrome)
下载
迅雷看看播放器
迅雷看看播放器
下载
UC浏览器
UC浏览器
下载
QQ音乐
QQ音乐
下载
阿里旺旺买家版v9.12.10C官方版
阿里旺旺买家版v9.12.10C官方版
下载
360安全卫士v12.1官方版
360安全卫士v12.1官方版
下载
猜你喜欢
锤子金融app
锤子金融app
下载
尖叫乐园
尖叫乐园
下载
运动团子
运动团子
下载
爱维贝贝园丁端
爱维贝贝园丁端
下载
巴黎爱情故事我的法国男友
巴黎爱情故事我的法国男友
下载
健康莱医
健康莱医
下载
记忆王分校
记忆王分校
下载
renee数据恢复软件v2014免费版
renee数据恢复软件v2014免费版
下载
五线小城
五线小城
下载
掌上币链
掌上币链
下载
清歌输入法Mac版V2.6.3
清歌输入法Mac版V2.6.3
下载
原油交易宝
原油交易宝
下载
天盾IBMAIX数据恢复软件v1.01标准版
天盾IBMAIX数据恢复软件v1.01标准版
下载
阅章云娱
阅章云娱
下载
淘义乌app
淘义乌app
下载
国玉app
国玉app
下载