网页设计参考标准

时间：2023-10-05 10:30:01 | 来源：网站运营

时间：2023-10-05 10:30:01 来源：网站运营

网页设计参考标准：

UI设计规范，对于刚入行的新人，可能觉得是一件很高大上又很让人头疼的事情。本文从新人的角度出发，总结一些设计规范要点，算是一次温故总结的分享。

我本身是一名UI设计师，所以我站在设计师的角度去把自己所学所了解的东西告诉大家。可能公司不同，大家设计习惯不尽相同，但是终究还是能有些帮助。依旧声明：这里写的只是我个人的使用习惯，只是一种工作方法，大家在具体工作中，一定要灵活运用。另外，技术的更新是非常快的，我写的这些可能某些东西和你们的工程师搭档所用的方法不一样了，所以，还是要灵活运用。

首先带领大家先了解一下本文大致分为哪几个模块：网页设计尺寸、常用字体、字体间距舒适范围、字体颜色设计技巧、其他注意事项。






一、网页设计尺寸

制作网页时我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。但并不代表我们可以在整个画布上作图。

网页的布局主要有两种：左右型布局和居中型布局。布局的不一致，使可设计的空间也不相同。







左右结构型

1、左右布局，灵活性强，UI的限制小；

2、左边通栏为导航栏，宽度没有具体的限时，可以根据实际情况进行调整；

3、右侧为内容板块范围，是网站内容展示区域。







居中型

4、居中布局，中间的黄色部分为有效的显示区域，用于网站内容的展示。

5、换句话说，两边均为留白，没有实际用途，只是为了适配而存在。

6、内容限时区域在好控制在1000px-1200px。

二、常用字体

现在网页的布局我们已经了解了，那么接下来就是网页中常用到的字体。

字体设计的总原则是：可辨识性和易读性。

中文建议使用微软雅黑字体，英文则建议使用arial 字体。常用的字体大小号有以下几种：







1、12px是用于网页的最小字体，适用于突出性的日期，版权等注释性内容。

2、14px则适用于非突出性的普通正文内容。

3、16px或18px适用于突出性的标题内容。

4、网站的字体大小并没有硬性规定具体的字号，根据实际情况可以酌情考虑，但是要有限适用偶数字号。

5、字体规格也不需要太多，最好适用三种混搭。如果需要更多

6、层次的区别，可以改变字体颜色或加粗来体现。

三、字体间距舒适范围

相邻两个文字的间距，其实不需要太过介意，除了特殊的需求之外，都可以使用默认数值的间距。

1、行间距，推荐以字体大小的1.5-2倍作为参考；

2、段间距，推荐以字体大小的2-2.5倍作为参考。

3、当选用14px字体时，行间距：21-28px; 段间距：8px-35px

四 、字体颜色设计技巧

1、主文字的颜色，建议使用公司品牌的VI颜色，可提高公司网站与公司VI之间的关联，增加可辨识性和记忆性。

2、正文字体颜色，保险起见，选用易读性的深灰色，建议选用#333到#666之前的颜色。

3、辅助性的，注释类的文字，则可以选用#999999之类的比较浅的颜色。

如果，你对颜色驾驭能力比较强，你也可以选择偏公司VI颜色的深色，作为正文字体颜色或者辅助性文字的颜色。

例如公司的品牌是蓝色，那么正文就可以选用偏蓝色的深色。这样处理之后，文字就有了环境色，网站整体将更加和谐。










深灰色 偏蓝色

五、其他需要注意的事项

做网页设计时，你还要特别注意网页的首屏内容，在构图和内容呈现上，首屏模块的设计至关重要。

1、除去任务栏，浏览器菜单栏以及状态栏的高度，剩下的是首屏高度。

2、Window XP 的首屏高度平均值为580px, window 7 的首屏高度平均值是710px。

3、综合考虑到 Window XP 已经退出市场，在实际操作时，我们以710px作为依据。

如下图，黄色区域是我们设计时要着重考虑的首屏范围







另外，是关于图片尺寸问题。需要全屏显示的图片，宽度尺寸严格设计为1920px。但是值得注意的是，图片内容的有效范围不能超过网页内容的有效范围，控制在1200px以内，以免遇到小屏设备时显示不全，而造成信息遗漏。

说到这里，网站设计规范部分的内容就算是讲完了，当然上面的所有规范也只是规范，不要因为这些规范去限制自己的想法，规范是用来打破的，设计最重要的还是设计得美观，设计的时候具体要给多大的数值，取决于设计师，规范是用来参考的。

Ps:如果想做一个好的UI设计师，一定要从规范入手。很多都是细节的东西，在于积累。




关于IDEADATA

杭州爱狄特信息科技公司（IDEADATA）专注于从数据到信息的有效管理与应用，是领先的商业信息服务技术提供商，是数据仓库及大数据技术和应用的先行实践者。

• 公司官网：http://www.ideadata.com.cn

• 新浪微博：iDEADATA大数据视界

• 微信关注：IDEADATA大数据

作者：爱狄特大数据

链接：http://www.ideadata.com.cn/wisdomAction/readWisdom.do?id=104