快捷搜索:  汽车  科技

网页设计之字体设计规范(网页设计规范尺寸)

网页设计之字体设计规范(网页设计规范尺寸)⑵、居中布局,中间的深色部分为有效的显示局域,用于网站内容的展示;两边留白没实际用图,只是为适配而存在⑴、左右布局,灵活性强,UI限制小;左右通栏为导航栏,宽度没具体限制,可根据实际情况调整;右侧为内容板块范围,是网站内容展示区域。因互联网的发展,现今对网页设计的要求也提高了,所以有个自己的设计规范会使设计简洁而高效。根据本大宝贝的设计细节,相信你很快就能与大神比拟了,哈哈哈哈,开个小玩笑,下面咱们就从尺寸、字体、图片、颜色等方面来开展深入探索!其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有:字体规范、主体色规范、图表规范、图片规范等不同分类。今天我们就先来了解to c设计规范,后期会出TO B的设计规范 !一、网页尺寸1.网页的布局主要有两种:左右布局和居中布局。布局不一样使设计的空间也不相同。

网页设计规范

在了解网页设计规范之前,我们先简单了解网站的分类,网站的分类按对象划分可分为 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教育进行咨询了解。

相关推荐:

如何规范高效做出banner

设计师的文本简历如何制作?

新手来看,不会排版的小技巧

UI设计师必看,作品集制作注意要点

提升设计美感及用户体验的七大原则

猜您喜欢: