想要成为网页设计师吗?那你得先学会网页设计啊!想要学会网页设计吗?那你也得先学会网页设计的规范吧!今天合肥荣博电脑培训学校就为大家分享一些网页设计规范以及建议,快来看看吧!网页中有大量的空白区域供设计师利用,千万别设计的过于简单了哦。
合肥荣博电脑培训学校为你分享网页设计规范
一、网页设计中的规定和规范(全文重点):
1、网页设计中的原件:
传统的网页设计中,网页从上到下分为:顶栏(top_bar),导航栏(nav),内容区(content),顶栏(bottom_bar)。而一般情况下内容区域分为版心、banner图等重要原件。
第一屏:即你打开网页不使用滚轮所看到的内容,设计师通常把顶栏+导航栏+banner图称为第一屏。一般情况下第一屏应该可以看到top+nav+banner+一部分内容区域,大概高度在580px左右。如果你想让第一屏只能看到banner图的话,top+nav+banner图的高度就要在800px左右,但是nav的高度不能超过80px。
尺寸参考:
画布:一般情况下可以考虑1920*N
顶栏:40-60px
导航栏:不超过80px
banner图:一般在500-800px不等(下面会细说怎么样能第一屏只看图)
底栏:越小越好,300px左右
版心:960 980 1000 1200下文详解
板块间距:一般在30-50px之间
2、字体的使用:
网页的开发中,代码仅支持实现微软雅黑和宋体,所以除了微软雅黑和宋体外所有的其余字体将以切图的形式去体现。在网页当中字体的使用一般是在12px-100px之内,12px以下是肉眼不可视范围,大于80px其实就是非常愚蠢的设计了。
一般情况下:
我们在12-14px这个像素区间内,使用宋体,字体样式为无。(顺带一提宋体这个字体的样式只能是无,因为如果调整为平滑等或大于14px都会出现毛边)。大于14px的字体,我们要使用的是微软雅黑,字体样式为平滑。(微软雅黑必须加平滑样式。其实也可以12px用雅黑,但是12px的话会有一些毛边,可以自己control+1试一下)。
3、常用的字体颜色:
网页当中是十分注重父子级关系的,通常设计中不会使用纯黑色或纯白色。如果想通过字体颜色去区分父子关系,推荐从高-低(#333,#666,#999,#ccc),#666是正文常用的字体。
4、版心的概念:
版心是整个网页的主显示区域,并不是全部的内容显示区域,如果没有版心的存在,整个页面的内容将无法完全呈现于网页当中(如果control+1你的页面无法居中平铺的话,你要看一下是不是版心歪了)。版心内容纳视觉中心,即核心的表达内容。一般情况下版心的尺寸为:960,980,1000,1200px或其他尺寸(仅提供参考,不是死规矩)。
5、标准的按钮(了解): #p#分页标题#e#
在之前的网页设计中是有规范的按钮这么个说法的,但是现在没了,看的舒服就好。建议可以了解一下,标准的按钮尺寸是:上下留白为文字的1/2,左右留白为文字的2/3。关于圆角的使用,要么就不加圆角,要加圆角的话,建议加到满(胶囊状)或10px以内。
二、设计建议:
正如我说的,网页当中有大面积的空白区域,你的设计可以天马行空,也可以为所欲为。但是你要在做的时候想一下你设计的那部分需要去切图,如果切图的话,这个图片的位置是否需要相对或定位(定位很有可能出现bug,因为对于不同的浏览器而言,相对和都不是一定的)。
1、盒子的概念:
盒子即块级元素,一般的网页代码中都是以div+css(div布局,css添加属性)来写的。你所设计的元素将会以一个一个的小盒子去分布,在设计的时候要有块级概念,一方面方便代码,另一方面让网页不同的区域更突出。没有分块的百度搜索结果,右侧的部分显得较弱。分块设计的微博,各个板块都相对独立,除空间感外,更能引起注意。
2、对齐
无论做哪方面的设计,该对齐的一定要对齐。程序员只会按你打的页面去画,不会去设计,如果你差一个像素,那就真的结果也是一样的,还有ps字体的虚边是算像素的。