本文介绍了网页设计的基本规范，包括网页尺寸、字体选择与间距、颜色搭配、首屏内容设计以及响应式布局。网页尺寸通常以1920px*1080px为画布大小，内容区域宽度建议不超过1000px。字体推荐使用系统默认的宋体、无衬线字体，字号遵循12px-30px的偶数原则。字体颜色以深灰色为主，首屏高度参考710px。响应式设计确保在不同设备上内容表现一致，常见布局响应方式包括不变和改变。栅格化设计提供了一种规范化的版面布局，960 Grid System是常见选择，响应式布局则依赖于前端框架如Bootstrap。最后，文章提到了命名规范，强调元素的语义化命名。
转自：微点阅读 https://www.weidianyuedu.com
一、网页尺寸
制作网页时，我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。
但是并不代表我们可以在整个画布上作图。
网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。
1、左右布局
灵活性强， UI的限制小，左边通栏为导航栏，宽度没有具体的限制，可根据实际情况调整；
右侧为内容版块范围，是网站内容的展示区域。
2、居中布局
中间的黄色部分为有效的显示局域，用于网站内容的展示；换句话说，两边均为留白，没有实际用途，只是为了适配而存在；
3.主流电脑屏幕尺寸有以下几种：
一般网站内容显示的区域为996px；国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。
二、网页字体
字体设计的总原则是：可辨识性和易读性。
网页的中文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体
英文则建议使用Times New Roamn、Arial、Comis Sans MS等无衬线字体
常用的字号大小有以下几种：
12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
16px、18px、20px、26px或者30px 适用于突出性的标题内容。注意都是偶数原则，奇数像素会出毛边！
三、字体间距
相邻两个文字的间距，其实不需要太过介意，除了特殊的需求之外，都可以使用默认数值的间距。
行间距：推荐以字体大小的1.5—2倍作为参考；
段间距：推荐以字体大小的2—2.5倍作为参考。
例如，当选用14px 的字体时，行间距：21—28px；段间距：28px—35px。
四、字体颜色
六种除了主色调以外都是场景色，需要在不同的场景中使用（例如危险色表示危险的场景）六种是文字排版色，通过文字的不同用色进行文字排版，以表现层次结构。
主文字颜色，建议使用 公司品牌的VI颜色，可提高公司网站与公司VI之间的关联，增加可辨识性和记忆性。
正文字体颜色，保险起见，选用易读性的深灰色
最低0.47元/天 解锁文章
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
