客服
网页设计的规范有哪些
就算不懂行的人想起网页设计估计都会觉得繁琐，别说那些天天面对的网页设计师了，网页设计不仅繁琐在设计本身上，还在于网页设计的行为规范上，今天就给大家罗列了一些网页设计的规范。
网页设计也被称为 Web Design、网站设计、WUI 等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的 APP 来获取资讯，但是针对于企业来讲，企业网站也是必不可少的一种形式，从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地；中国的网站高速发展了近三十年。电脑的分辨率只有800×600像素，那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面内容、多媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。那么作为 UI设计师我们就必须掌握网站设计的规范和理解网站运行的原理，才能更好地驾驭这个平台。
因互联网的发展，现今对网页设计的要求也提高了，所以有个自己的设计规范会使设计简洁而高效。接下来，我们会从尺寸、字体、图片、颜色等方面来开展深入探索喽！其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。
网页的布局主要有两种：
左右布局和居中布局。布局不一样使设计的空间也不相同。
⑴、左右布局，灵活性强，UI限制小；左右通栏为导航栏，宽度没具体限制，可根据实际情况调整；右侧为内容板块范围，是网站内容展示区域。
⑵、居中布局，中间的深色部分为有效的显示局域，用于网站内容的展示；两边留白没实际用图，只是为适配而存在。
当前最流行的分辨率是1920px*1080px的，所以建议创建网页尺寸为1920px*1080px，页面内容区域（版心）常设置为1200px（或1000px -1200px区间），以这个尺寸来设计相对标准。每个屏幕的高度约为900px左右。
网页设计字体的选择可以微软雅黑，英文及数字可以使用Arial字体；说完字体咱们该说字体的字重、字号、行高、字间距、行间距、段间距了、字体颜色。
字号（所有字号使用偶数）：
正文：12px－18px之间
12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
英文可偏小些 ：10px－16px
导航栏字体：一般在14px-18px区间，最大不超过18px，禁用加粗
字体间距
相邻两个文字的间距，其实不需要太过介意，除了特殊的需求之外，都可以使用默认数值的间距。
行间距，推荐使用 字体大小的1.5-1.7倍 作为参考；
字间距，推荐使用 0/25/50即，当用12px 的字体时，行间距：18-20；
字体颜色
正文字体颜色，建议选用 #333333到#666666 之间的颜色。
辅助性的，注释类的文字，则可以选用#999999之类的比较浅的颜色。
虽然网页设计的规范是比较繁杂的，但是作为一个这方面的专业人员，就算再繁杂也得用心做，因为你的对得起你的用户，对得起她们的信任。西安蟠龙网络，十年专注网站建设服务，给客户的承诺，就是我们的责任，致力于为中小企业提供一站式互联网服务！
相关文章：
-
windows+r打开运行对话框，输入regedit，点击确定打开注册表 按Ctrl+F键打开查找对话框，输入C:\Windows\system32\notepad.exe,-469 找到后双击打开 修改其值为T文本文档 然后右键，按W，按T。就可以快速新...
-
PHP去除BOM头的方法 BOM头是UTF-8来告诉编辑器：我是UTF8编码。它的编码是\xEF\xBB\xBF 但是PHP在设计之初并没有考虑到BOM头的问题，所以在编解码的时候很容易出现问题 代码如下： $result = trim($re...
-
CSS实现图片裁剪居中 其实，css实现起来很简单，只需要设置img的样式：object-fit：none即可，不过你要给img一个高度，因为裁剪嘛 页面：（图片可以自己随便截两张来测试） !--长图片-- div clas...
-
CSS背景图片自适应全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的滤镜 }...
-
$str = file_get_contents(weixinname.txt);//将整个文件内容读入到一个字符串中 $str_encoding = mb_convert_encoding($str, UTF-8, UTF-8,GBK,GB2312,BIG5);//转换字符集（编码） $arr = explode(\r\n, $str_encoding);//转换成数组 //去...
-
在线HTML实体转字符串工具 #22235;在线HTML实体转汉字 HTML实体编码互转 https://uutool.cn/html2str/ http://www.toolzl.com/tools/htmlende.html...
-
使用百度编辑器上传附件后，附件的图标，引用的是绝对URL，一下子完整暴露了编辑器所在目录，甚至后台入口也完全暴露了： 要解决这个问题，有两个方法： 前提是要把ueditor\dialogs\attachm...
-
插件界面 插件功能 支持记录当天审核记录 支持可控时间段审核 支持可控栏目审核 支持审核后生成HTML，包括首页，栏目列表页，内容页 支持审核后推送到百度和熊掌 支持查看推送记录 使用...
-
display: table-cell table-cell属性让标签元素以表格单元格的形式呈现。兼容IE8+，会被以下CSS属性破坏： float position // 设置display: table-cell的元素对宽高敏感，margin无反应，响应padding 实现大小不固定...
-
Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则，但是也提供更智能的功能：...
- 上一篇：网页推广指南 这些事项一定要注意
- 下一篇：如何设计网站 简单五招教会你