虽然自己更喜欢手机端的设计,但是现在开始实习了,公式主要以网页端为主,所以多了解网页端的设计规范还是很必要的,我们一起学习吧~~~
一、web常见尺寸
目前我在公司,几乎都是以1920*1080的大屏网页进行设计的。因为前端开发师说他们自己会进行适配,这个大屏进行设计适配是做好的。虽然我也不知道为什么,但是查了了一下好多都是以大屏尺寸进行设计的。之前在学校一直是以1366*768进行设计的。这也说明了在实际工作中,还是得需要跟程序开发师进行沟通,以哪一种尺寸进行设计。
需要注意的是,我们选择何种尺寸进行设计,并不代表我们的设计会占满整个屏幕。网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。我们在设计网页首屏的时候,需要考虑网页的高度。window 7 的首屏高度平均值是710px。比如我们采用1920的大屏进行设计我们网站的首屏时,最好建立一个安全范围1200*710,我们在此范围内进行设计。
1.左右布局
左边通栏为导航栏,宽度没有具体的限时,可以根据实际情况进行调整;右侧为内容板块范围,是网站内容展示区域。
2.居中布局
中间部分为有效的显示局域,用于网站内容的展示,两边都有留白,没有实际用途,只是为了适配而存在。这种布局是国内网站常见的布局方式。
二、使用字体与大小
为了用户的易读性,都是使用非衬线字体,除非特殊的网站。中文使用苹方或者微软雅黑字体,英文则使用arial 字体。
常用的字体大小为12 14 16 18px。我在公司正文几乎都是使用14px,标题16px,最小字号为12px。
注意:
1、12px是用于网页的最小字体,适用于注释性内容。
2、14px则适用于普通正文内容。
3、16px或18px适用于突出性的标题内容。
4、网站的字体大小并没有硬性规定具体的字号,根据实际情况可以酌情考虑,但是要有限适用偶数字号。字体规格也不需要太多,最好适用三种混搭。如果需要更多层可以改变字体颜色或加粗来体现。
三、字体间距
之前也分享过行间距一般为字号大小的1.5-2倍。对于14px的正文内容。行距设置为21-28都是可以的。
四、字体颜色
1、主文字的颜色,建议使用品牌的VI颜色,可提高公司网站与公司VI之间的关联,增加可辨识性和记忆性。
2、正文字体颜色,选用易读性的深灰色,比如#333、#666。
3、辅助性的,注释类的文字,则可以选用#999999之类的比较浅的颜色。
五、间距问题
对于网页的设计,最好采用栅格布局,都以8像素为单位,间距为8 16 24 32等8的倍数进行设计。不同尺寸的屏幕和分辨率为设计师带来了不必要的麻烦。用8这样的偶数让缩放变得很简单,并且能够适用于大部分的情况。
最后想说,设计规范只是一个基础的常规的设计原则,并不会限制我们的设计。记住规范只是参考。