ui设计界面尺寸规范_网站ui设计尺寸要求

一、设计设计网页布局尺寸规范

基础尺寸

标准宽度：1920px（全宽布局）

常见有效可视区宽度：950-1200px

高度：视屏比例自适应（如16:9）

特殊尺寸

手机端：375px（iPhone 6/7/8）

平板端：768px（iPad竖屏）

低分辨率适配：1366×768（旧式笔记本）

响应式设计

使用媒体查询调整布局，界面例如：

```css

@media (max-width: 768px) {

/* 平板端样式 */

}

@media (max-width: 480px) {

/* 手机端样式 */

}

```

二、尺寸尺寸交互元素尺寸规范

导航栏

文字大小：14-18px（导航文字）

间距：10-15px

按钮

尺寸：高20px、规范宽100px（常规按钮）

边框：圆角5px、网站阴影1px

文本框

高度：15-20px

宽度：200-300px

边框：1px solid ccc

图标

尺寸：24-48dp（iPhone 6/7）

格式：PNG或SVG，设计设计避免模糊

三、界面图片与媒体尺寸规范

图片大小

建议：100KB-500KB

按比例缩放，尺寸尺寸避免拉伸变形

Banner与LOGO

Banner：468×60px（全尺寸）

LOGO：88×31px（高分辨率设备）

四、规范其他注意事项

分辨率适配

基准分辨率：1366×768（安卓）

Retina屏适配：使用pt单位（iOS）

文件规范

文档：1920px宽度，网站RGB模式，设计设计72dpi

非静态页：图片不超过60K，界面文字12/14px

表格与列表

宽度：100%-1200px

行高：24-30px

以上规范需结合具体项目需求调整，尺寸尺寸建议优先采用CSS Flexbox或Grid布局实现响应式设计。规范