http://s2/mw690/003PXuOqgy6UZh5XCFP51&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

你真的明白什么是设计规范吗?为什么会有设计规范?设计标准有哪些?这篇关于网站视觉设计规范很详细的为大家解答了以上一些问题。

1、什么是设计规范

适用于web产品线的人机交互界面设计方面的指导手册。

贯穿以用户为中心的设计指导方向，根据web产品的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。

2、谁去读设计规范

这篇设计规范适合界面设计师、用户体验设计师、前台技术工程师，发布支持人员，运营编辑人员的参照。

标准意义

1、统一识别

规范能使页面相同属性单元识别统一，防止混乱，甚至出现严重错误，避免用户在浏览时理解困难;

2、节约资源

除活动推广等个性页面外，设计其他页面使用本规范表准能极大的减少设计时间，达到节约资源的目的;

3、重复利用

相同属性单元，页面新建时可执行此标准重复使用，减少无关信息，就是减少对主体信息传达的干扰，利于阅读与信息传递。;

4、上手简单

在招收，加入新设计师或前端时，查看标准能使工作上手时间更快，减少出错

--------------------------------------------华丽丽分界线----------------------------------------

下面就是一些真正意义上是标准和规范了。

一、网页宽度

默认网页正文使用980px的宽度，信息量过大或图片过大的情况，可以考虑加宽承载

http://s13/mw690/003PXuOqgy6UZh9Nx2A4c&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

二、颜色

设计时请使用256web安全色，在PS中选择RGB/8位，其他模式的色域很宽，颜色范围很广，在不同显示屏会有失色现象。

活动专业可不按此规范执行。

http://s1/mw690/003PXuOqgy6UZhhCVDW90&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

三、字体字号

网页正文一律使用宋体12号(12px)字体，黑体一般很少做正文，主要用作标题。

建议使用12号+14号的混合搭配，避免大面积使用加粗字体。

英文字体从9px开始就能清晰显示，选择空间很大。10px、11px、12px、13px都是常见的字体大小，字体请使用系统自带字体。例：Tahoma、Arial、Verdana。

http://s9/mw690/003PXuOqgy6UZhiJ2v668&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

四、页面布局

板块排版在视觉上要符合纵向分割，横向模块间距统一，纵向课根据页面需求适当区分。

http://s11/mw690/003PXuOqgy6UZhkgWxAea&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

五、网页栅格

页面宽度：980px 栏目间距：10px

http://s6/mw690/003PXuOqgy6UZhlDypT05&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

六、产品栅格

产品宽度：160px 产品间距：40px/30px

http://s13/mw690/003PXuOqgy6UZhopxQo0c&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

七：表单

边框默认颜色：#A0A0A0

http://s3/mw690/003PXuOqgy6UZhqVbpg42&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

http://s12/mw690/003PXuOqgy6UZht4Taj2b&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

八：bar

所有Bar运用文字为宋体，12号字体Bar高度为25px，14号Bar高度为30px

http://s2/mw690/003PXuOqgy6UZhu6SwVa1&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

九、通用样式

文字对齐：垂直水平居中 当前标签：文字加粗，Tab统一高出12px

http://s15/mw690/003PXuOqgy6UZhwAEVg7e&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

10、留白

本规范重要及=栅格(优先级：1到4优先从高到低，原则1、2必须遵守)

1、板块间距均为10px;

2、板块与内容间距均为10px;

3、内容单元之间间距为10px;

4、内容的间距均为10px

http://s12/mw690/003PXuOqgy6UZhyj8Cv1b&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

11、button

运用：教育、购买、后台、搜索、提交

http://s8/mw690/003PXuOqgy6UZhACRdd37&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

12、阴影

色值：#000000

http://s16/mw690/003PXuOqgy6UZhCVLsj4f&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

13、容器

边框默认值：#cccccc

http://s5/mw690/003PXuOqgy6UZhG46Ggf4&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

14、图文

1、图文间距为10px

2、标题与价格间距为10px

3、描边1px，色值#cccccc

http://s14/mw690/003PXuOqgy6UZhGQI338d&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

http://s6/mw690/003PXuOqgy6UZhHc29fb5&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

15、图标

制作规格：统一的视角、倒角、材质、尺寸，颜色数量尽量不要超过三种

制作要求：图标必须会意直观，这是它区别文字的价值

http://s5/mw690/003PXuOqgy6UZhPedTK94&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

16、命名

图片命名规范：建立良好文档规范，养成图片命名习惯，有利于源文件的移交、继承和重用，能有效提高工作效率， 利于合作

http://s14/mw690/003PXuOqgy6UZhQccDrbd&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

17、图片输出

切图时要贴合图形区，避免空白区域占用文件大小

http://s11/mw690/003PXuOqgy6UZhRTIsG5a&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

18、banner

设计原则：真实性、主题明确、形式美

制作要求：实物商品抠图，色彩必须与页面协调，字体不超过三种、能快速识别

http://s3/mw690/003PXuOqgy6UZhSOFF082&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />

内容转自：站酷，作者：周俊杰；文章有所改动。

更多平面设计、网页设计、UI设计学习，请加入我们咨询QQ群：【AAA教育 PS/AI学习总群 151847208】

【AAA数字艺术教育介绍】

专注于大学生CG教育培训

只培养高端UI设计师，完成保薪金就业，签协议!

零基础无压力学习，知识点难易分级，你一定能学会!

个性化资料分析，游戏化管理，你一定愿意学习!

体验式的教育服务，每个周末，十六课时免费学!

-------------------------------------------------------------------------------------------------------------

想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?

添加 微信号：aaa_job (AAA就业联盟)

您也可以通过扫描下方二维码快速添加：

http://s6/mw690/003PXuOqgy6TKJmdF41f5&690网页设计规范 你知道多少？" TITLE="平面设计| 网页设计规范 你知道多少？" />