网页设计规范

MGRoid2024-08-212024-09-30

网页设计规范

1.介绍

俗话说的好，第一印象决定用户的留存率，因为网站设计并无具体平台限制的风格，也没有必须要设计的系统级导航栏和工具栏。

所以网站设计十分的灵活，然而过于灵活反而会让不同的设计师产生审美冲突，在功能的实现上也将变得更为复杂。

为此需要一个网站设计的大致规范，以供设计时参考。

1.1 版心

显示屏并不是靠显示屏尺寸进行的，而是靠分辨率进行开发的，具体原理可自行了解。

在最新版Photoshop网站中Web预设尺寸有:

常见尺寸(1366x768px)
大网页(1920x1080px)
最小尺寸(1024x768px)
MacbookPro13(2560x1600px)
MacBookP「o15(2880x1800px)
iMac27(2560x1440px)等。

这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。

所以我们通常设计网站时的网站宽度为1920px,每个屏幕的高度约为900px。

为什么是900px呢?

因为1080还要减去浏览器头部和底部高度，大约就是900px了。

值得注意
在进行前端高度选择中其实有一个属性，也就是VH它可以取窗口高度，使得高度更灵活。不过具体设计线框图时还是以900px为主。

内容安全区域为1200px(或1000px/1400px) ,以这个尺寸来设计相对标准。

1.2 文字规范

网站上面的文字是通过像素显示大小的，而像素大小是浏览器默认的，且大多为16px。

虽然通常是16px，但是字号的大小的选择决定网站的观赏性，所以不必每个文字都选择16px。

不过在网站设计中，文字大小一般来说是12-20像素。

为什么不能比12px更小?
因为如果比12像素更小的中文无法放得下复杂的笔画了。
而且奇数的文字表现和适配都不好做，也就是说我们必须使用偶数的字号来设计。

1.3 图片比例关系

在设计页面中，我们在设计图片时，通常图片的比例关系很影响画面的整体效果，所以，我们通常会给图片一定的比例关系。

3 (宽):4(高)、16(宽):9(高)、1:1等比例。

具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题，作为内容出现的图片一定需要有介绍信息和排序信息。

1.3.1 图片设计规范

多个图片和视频的并列设计规范主要遵循以下几点：

通常设计为一栏或半栏设计，必须在版心设计区域范围之内。
- 目的是让图片显示有边界线
一栏为排版5张
交互按钮为“<“和“>”

1.4 黄金风格点

在网站设计中，黄金分割点(Golden Ratio)是一种常用于布局设计的比例关系，它可以帮助设计师构建更为和谐、美观的页面。以下是几个值得关注的黄金分割点：

1. 全局比例：整体页面的宽度和高度比例应该尽可能符合黄金分割比例1:1.618。
2. 导航栏：导航栏的宽度一般应该是内容区宽度的两倍，高度一般应该是168px左右，以符合人眼认知范围。
3. 长文本：当页面有大段的正文和段落时，可以将正文分为数段，并使用黄金分割比例来设定分割点和字距。
4. 图版：在展示图片和图版时，可以使用黄金分割点来决定图片的高度和宽度比例。
5. 头部：头部是网站页面上重要的元素之一，应该尽可能符合黄金分割比例1：1.618。同时也需要考虑兼容性问题及响应式样式问题，因此还需要根据不同类型的网站进行调整。