主流实践·网页元素大小与间距规范

小波

1年前发布

260

文章目录[隐藏]

文本元素
图标标准
- 常规图标：
间距规范
- 基础比例
文本间距
容器边距
- 外层容器：
- 内层容器：
响应式设计
断点建议
小型设备
中型设备
大型设备
示例代码：

文本元素

正文：

大小：14px

行高：28px（正文大小的2倍）

标题：

大标题（H1）：32px

次标题（H2）：24px

小标题（H3）：18px

更小标题（H4）：16px

最小标题（H5）：14px

段落：

间距：14px（正文大小的1倍）

界面组件

按钮：

总高度：32px

内边距：左右16px（垂直方向由line-height控制，不需要上下内边距）

字体大小：16px

行高：32px (确保文字垂直居中)

字体权重：500 (半粗体)

输入框：

高度：28px

内边距：上下8px，左右12px

边框：1px

字体大小：14px

字体权重：400 (正常)

图标标准

常规图标：

大小：16px 或 24px

导航栏图标：24px

侧边栏图标：16px

通知/消息图标：14px

图标间距：8px（确保图标间视觉清晰）

间距规范

基础比例

元素内边距(内边距)：16px

元素之间间距(外边距)：32px（内边距的2倍）

元素边框：1px或2px，根据设计风格和背景颜色决定

悬浮/弹出元素间距：8px（确保与其他元素间有充足空间）

文本间距

段落：

间距：14px（正文大小的1倍）

标题与正文：

间距：28px（正文大小的2倍）

列表：

内边距：8px（保障视觉分隔）

外边距：16px（维护视觉一致性）

引用：

内边距：8px（确保引用内容与边框有足够间距）

容器边距

外层容器：

内边距：24px - 32px（为了给内部内容提供足够的呼吸空间，避免内容过于紧凑）

外边距：40px - 48px（与页面其他主要区域保持适当的距离，有助于分隔和导向用户的视线）

内层容器：

内边距：12px - 16px（确保内容与容器边缘有适当的空间，但由于其已在外层容器内，因此无需过大的边距）

外边距：20px - 24px（保证内部各个模块或部分之间有一定的分隔，同时维持视觉的连贯性）

响应式设计

响应式设计考虑了多种设备尺寸和屏幕分辨率，确保网页在各种场景下都保持良好的用户体验。

断点建议

小型设备（如智能手机）：宽度不超过 600px

中型设备（如平板）：宽度在 601px 至 1024px 之间

大型设备（如桌面显示器）：宽度超过 1024px

小型设备

文本：适当减小1-2px，以保持良好的可读性

按钮和输入框：考虑适当增大，以适应触摸操作

中型设备

文本和组件：根据实际屏幕尺寸和内容布局微调，确保在中等屏幕尺寸上的清晰度和可用性

大型设备

保持上述默认值，并确保设计布局充分利用可用空间，提供一致的用户体验。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页尺寸规范示例</title>
    <style>
        /* 基本样式 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
        }

        /* 文本元素 */
        body {
            font-size: 14px;
            line-height: 28px;
        }
        h1, h2, h3, h4, h5 {
            margin: 28px 0;
        }

        /* 界面组件 */
        .button {
            display: inline-block;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 0 16px;
            height: 32px;
            line-height: 32px;
            margin: 16px 0;
        }
        input[type="text"] {
            display: block;
            padding: 8px 12px;
            margin: 16px 0;
            border: 1px solid #ccc;
            height: 28px;
        }

        /* 间距规范 */
        .outer-container {
            background-color: #95a5a6;
            padding: 24px 32px;
            margin: 40px 48px;
            border: 1px solid #bdc3c7;
        }
        .inner-container {
            background-color: #ecf0f1;
            padding: 12px 16px;
            margin: 20px 24px;
            border: 1px solid #7f8c8d;
        }

    </style>
</head>
<body>
<div class="outer-container">
    <p>这是外层容器</p>
    <h1>大标题 (H1)</h1>
    <h2>次标题 (H2)</h2>
    <div class="inner-container">
        <p>这是内层容器</p>
        <h3>小标题 (H3)</h3>
        <h4>更小标题 (H4)</h4>
        <h5>最小标题 (H5)</h5>
        <p>这是一个段落示例。</p>
        <p>
            <button class="button">按钮</button>
        </p>
        <p>
            <!-- 示例SVG图标 -->
            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <rect width="24" height="24" fill="#e74c3c"/>
            </svg>
        </p>
        <p>
            <input type="text" placeholder="输入框" />
        </p>
    </div>
</div>
</body>
</html>

评分

欢迎为Ta评分

赞赏