网页ui设计规范整理合集！

时间：2023-10-04 02:36:01 | 来源：网站运营

时间：2023-10-04 02:36:01 来源：网站运营

网页ui设计规范整理合集！：网页ui设计规范还是很多人关心的问题，对于刚入职的新人来说，网页ui设计规范也是需要自己去了解一些的，我个人虽然已经在这个行业有两年的经验了，但还是需要不断学习的。所以今天我们就这些问题来说说我从业两年的一些总结和经验，希望能够帮助到你们，在以后的职业道路上也算是一点小建议。










网页ui设计规范

在了解网页设计规范之前，我们先简单了解网站的分类，网站的分类按对象划分可分为 To C端和 To B端两种：

To C端是面向用户和消费者，所以设计上一定要可以吸引人，并且以用户为中心考虑体验设计。

To B 端是面向商家和专业人士，因而TO B与 TO C端在设计上是大相径庭的， To B 类网页最重要的是效率而不是体验。







因互联网的发展，现今对网页设计的要求也提高了，所以有个自己的设计规范会使设计简洁而高效。根据本大宝贝的设计细节，相信你很快就能与大神比拟了，哈哈哈哈，开个小玩笑，下面咱们就从尺寸、字体、图片、颜色等方面来开展深入探索喽！其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。今天我们就先来了解to c设计规范，后期会出TO B的设计规范 ！

一、网页尺寸







1.网页的布局主要有两种：左右布局和居中布局。布局不一样使设计的空间也不相同。

⑴、左右布局，灵活性强，UI限制小；左右通栏为导航栏，宽度没具体限制，可根据实际情况调整；右侧为内容板块范围，是网站内容展示区域。







⑵、居中布局，中间的深色部分为有效的显示局域，用于网站内容的展示；两边留白没实际用图，只是为适配而存在







2.当前最流行的分辨率是1920px*1080px的，所以建议创建网页尺寸为1920px*1080px，页面中心区域常设置为1200px（或1000px -1400px区间），以这个尺寸来设计相对标准。每个屏幕的高度约为900px。为什么是900px呢？因为1080还要减去浏览器头部和底部高度，大约就是900px了。










2.文字

网页中字体也是有使用规范的，合适的字体大小才能展现出最完美的效果（1920px*1080px分辨率下）

那些漂亮的网页设计，它们都是用的什么字体的？

网页设计字体的选择可以根据企业调性去挑选字体的，因为字体本身也是有性格的，为了方便大家使用，我把网页设计中经常用到的字体，希望能给新手一些指导，有自己的一套用字方法，那当然是极好的







说完字体咱们该说字体的字重、字号、行高、字间距、行间距、段间距了、字体颜色。

字号：

正文：12px－18px之间

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

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

英文可偏小些 ：10px－16px

导航栏字体：一般在14px-18px区间，最大不超过18px，禁用加粗

整站文字：12px-36px区间







某一个网页的规范：

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

1、字体规格也不需要太多，最多使用三种混搭，当一个页面中使用的字体超过 3 种时，会给用户带来“不专业”、“没有权 威性”、“没有层次结构”之类的感觉。

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

3、字体优先使用各操作系统默认的字体。字体选择有版权、笔画严谨、清晰可读、经典。

字体间距

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

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

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

即，当用14px 的字体时，行间距：21px-28px；段间距：28px-35px。

字体颜色

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

正文字体颜色，建议选用 #333333到#666666 之间的颜色。

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







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

例如公司的品牌色是蓝色，那么，正文字体就可以选用偏蓝的深色。

这样处理之后，文字就带有了环境色，网站整体色调将更加和谐。

以上就是网页ui设计规范的总结，希望对你能够帮助，在学习的过程需要多注重实践动手能力，只有自己动手了才能够真正了解到其中的一些细节。大家有了解更多关于UI设计学习方法、小技巧以及行业相关信息，都可以一起交流，我会把两年来的UI设计师工作经验和建议倾囊相授的。