当前位置：首页 > 页面设计 > 正文内容

网页页面尺寸宽高设计，网页尺寸

金生2个月前 (07-16)页面设计238

UI设计师必备|web 设计 尺寸 规范

网页基础规格：- 网页宽度通常设为1920px，高度可自适应，视区宽度为950px至1200px，具体尺寸需依据项目需求、客户意见及用户特性调整。- 首屏高度推荐在700-750px，主体内容区域宽度保持在1200px。文档设置：- 创建文档时，应以1920px宽度，高度不限，采用RGB颜色模式，分辨率为72dpi。

尺寸规范建议在1024px*768px分辨率下，页面宽度设置为1003px，可视范围通常为920px至1000px。常见的页面宽度有960px、980px和1000px，一屏高度一般为650px。 UI设计方面，对于iOS（iPhone）系统，推荐使用标准字体：中文使用“苹方”，英文使用“旧金山”。字号最小为24px。

尺寸规范：在分辨率1024px*768px的情况下，满屏宽度为1003px，通常定义可视范围为920px~1000px之间。常见：宽960px、980px、1000px，一屏高度650px。

-1080，这是目前常用设备中最大的尺寸（除了Mac 5K屏）。1440-900，常见于15寸MacBook pro，是许多UI设计师的首选。1366-768，这是普通PC电脑的分辨率。1280-800，13寸MacBook Pro的代表分辨率。考虑到Retina屏幕的特性，13寸和15寸MacBook的分辨率虽大，但实际显示效果与上述范围相近。

1、网页设计中banner设计的标准尺寸是1920px宽度，高度则可以根据实际需求设计，没有固定标准。以下是具体解释：宽度：当前大部分的显示器和网页分辨率普遍支持到了宽幅的显示效果，因此，banner设计的宽度通常采用满屏的设计尺寸，即大约1920px。

2、全尺寸banner为468×60px。半尺寸banner为234×60px。小尺寸banner为88×31px。总结：网页设计中banner的尺寸设计应综合考虑目标设备的屏幕分辨率、用户体验以及行业标准。设计师应根据实际情况灵活调整尺寸，以达到最佳的视觉效果和用户体验。

3、从设计角度看，全尺寸banner通常为468*60px，半尺寸和小尺寸则分别为234*60px和88*31px。页面设计应尽量控制在3屏长度和1屏宽度内，非首页静态页面的图片和字节大小也有相应的限制。总的来说，网页设计中banner的尺寸应根据目标设备和用户体验进行灵活调整，同时参考行业标准和最佳实践。

4、在使用Photoshop等图像编辑软件设计网页时，可以在800*600的状态下全屏显示，同时页面底部不会出现滚动条，常见的尺寸大约为740*560像素。在1024*768的分辨率下，网页尺寸建议设置为宽度955像素，高度600像素；而在800*600的分辨率下，网页尺寸建议为宽度760像素，高度420像素。

5、对于Banner：高度范围：通常建议在500px到1000px之间。宽度：应取决于网页布局，建议宽度与网页宽度相匹配，以确保在不同屏幕尺寸上的显示效果一致。协调性：Banner的尺寸需要与网站内容和设计风格相协调，以吸引用户的注意力并有效传达信息。

6、半尺寸banner：尺寸为234*60px，是全尺寸banner宽度的一半，适用于空间有限的广告位。小banner：尺寸为88*31px，适用于需要小巧精致展示的场景。其他适用尺寸：120*90px和120*60px的尺寸也常用于小图标设计，可以根据具体需求选择。

Axure设计网站原型时,网站宽度和高度怎么设置比较好

1、【页面宽度】在设置页面宽度时，应考虑不同浏览器的边距调整。在IE0下，宽度应为显示器分辨率减去21像素；在Firefox下，宽度应为分辨率减去19像素；在Opera下，则为减去23像素。为了兼容性，建议网页宽度适当缩小，例如800分辨率设为760像素，1024分辨率设为990像素。

2、打开Axure软件，创建一个新的原型项目。在“页面属性”或“画布设置”中，将画布的宽度和高度设置为查询到的移动设备尺寸。设计原型：根据设定的尺寸，在Axure中进行app原型的设计，包括界面布局、交互逻辑等。生成 html并配置视图接口：设计完成后，选择“生成HTML”功能，将原型导出为Html 文件。

3、首先，确保安装了Axure RP 5 Beta版本，因为这个版本支持更准确的移动设备尺寸。对于itouch或iPhone，可以设置320×480的分辨率来绘制辅助线，以匹配设备的屏幕尺寸。在设计过程中，使用F5键生成原型时，需要在“Mobile/Device”选项中选择合适的原型设置，以确保适配移动设备。

4、直接给大家提供一个常用的移动设备尺寸列表，制作原型时根据查询的尺寸在axure中设置大小即可，设计完毕后在生成HTML时设置手机/移动设备中勾选包含视图接口（ include Viewport tag ），并进行配置即可。

5、目前比较好的解决办法是：下载Axure 5Beta版。而且不好意思是英文版的。