网页设计规范 网页设计稿尺寸

最新推荐文章于 2025-03-29 10:53:31 发布
最新推荐文章于 2025-03-29 10:53:31 发布
阅读量1.5w 收藏 43
点赞数 4
文章标签： 前端 ui python ViewUI
原文链接：https://my.oschina.net/momomo1987/blog/2964084
版权
本文介绍了网页设计中移动端H5和电脑Web页的尺寸标准，包括Banner尺寸和画板尺寸，强调了第一屏的重要性。同时，讨论了字体选择和排版原则，如字号、字体和行距，并提供了设计流程总结。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

移动端H5设计稿尺寸

移动端H5尺寸 设计移动端 H5 项目的时候，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用 SF-UI 代替。当然 H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的 H5，就是通过 H5 工具生成。目前比较火的 H5 生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将 PSD 上传即可对每个原件进行动效的设置了。但是如果需要复杂的动效和交互，还是需要前端工程师的配合。

电脑Web页Banner 设计稿尺寸

Banner 的宽度有两种，一种是满屏（1920PX）、一种是基于安全距离的满尺寸（1200px或1000px

最低0.47元/天 解锁文章
网页尺寸和网页广告尺寸
TOSO的专栏
09-11 3223
搜索了一下这方面的资料，了解到一些，分享一下：网页设计标准尺寸:1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*5
Web网页设计规范详细介绍
xiaoweids的博客
09-21 1601
但没有栅格化设计经验的设计师需要注意，这里说的960是含边距部分，换句话说，在psd文档中，你的内容部分是950px，栅格化版面可以借助一些非常好用的在线工具，比如知名的Grid.Guide，这是12列栅格在内容宽度950下的三种版式规范，你也可以使用24列，灵活度更高。对于一些中规中矩的网站，或者说一般创意型的网站，栅格化设计还是非常推荐的，尤其是一些规模大周期长，后期需要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。“Main”是网站的主要区域，如果是博客的话它将包含的日志。
网页设计标准尺寸详细参数
03-29
网页设计标准尺寸 1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象. 页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。 二、120*60，这种广告规格主要用于做LOGO使用。 三、120*90，主要应用于产品演示或大型LOGO。 四、125*125，这种规格适于表现照片效果的图像广告。 五、234*60，这种规格适用于框架或左右形式主页的广告链接。 六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、88*31，主要用于网页链接，或网站小型LOGO。 广告形式 像素大小 最大尺寸 备注
网页设计标准尺寸
孤剑之家
01-15 3710
来源：基础资料来自互联网编辑：ylbook.com网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计.网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以19寸宽屏为主流, 正在朝22寸及24寸的方向发展。但目前也有为数不少的4:3显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Friefox等.网页高度：高度是可以向下延展的,所以一般对高度不限制.
页面宽度适配：如何使页面兼容1080px和1440px宽度
最新发布
y1059477028的博客
03-29 418
这段代码是一个基于视口宽度的动态像素单位生成方案1440px 下：1 设计像素 = 1 实际像素。1080px 下：1 设计像素 = 0.75 实际像素。其他视口：按比例动态缩放，但限制在合理范围内。完美适配从 1080px 到 1440px 及更大屏幕的响应式需求。
网页设计标准尺寸:
weixin_30377461的博客
01-08 148
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了) 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方...
ATS网页端UI设计规范
10-12
比如，当一个团队有多个设计师参与同一个项目时，使用统一的设计规范可以确保不同设计师交付的设计稿之间没有明显的差异，从而维护了项目的整体美观和用户体验。 此外，ATS网页端UI设计规范还能够帮助设计师更快地...
服外比赛项目，设计MasterGo插件，通过解析网页生成MasterGo设计稿捏.zip
09-30
【标题】：“服外比赛项目，设计MasterGo插件，通过解析网页生成MasterGo设计稿捏.zip” 在本次服外比赛项目中，参赛者被挑战设计一个名为“MasterGo”的插件，其核心功能是解析网页内容并自动生成MasterGo设计稿。...
Web 网页设计规范
xinyuerr的博客
10-26 631
但没有栅格化设计经验的设计师需要注意，这里说的960是含边距部分，换句话说，在psd文档中，你的内容部分是950px，栅格化版面可以借助一些非常好用的在线工具，比如知名的Grid.Guide，这是12列栅格在内容宽度950下的三种版式规范，你也可以使用24列，灵活度更高。对于一些中规中矩的网站，或者说一般创意型的网站，栅格化设计还是非常推荐的，尤其是一些规模大周期长，后期需要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。“Main”是网站的主要区域，如果是博客的话它将包含的日志。
网页设计(尺寸大全)
10-23
网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计. 网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Friefox等.
网页设计常见的设计标准尺寸以及注意事项
binger819623的专栏
09-09 2948
http://www.bangoo.cn/d_viewtopic.asp?topicid=1279网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Friefox等.高度： 高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。宽度:1、在
网页设计中的页面尺寸标准
twosecond
07-14 2390
对于固定宽度的布局，设计师一般会使用760px、780px、920px、950px这几种分辨率，不过由于现在大尺寸的、宽屏的显示器越来越普及，很多朋友提出了采用1000px、1003px这样的分辨率的方案。虽然页面最大化、满屏化看着比较舒服，但过高的分辨率在设计师的显示器上浏览正合适不代表在用户的显示器上浏览器来就正合适。更何况现在还是有很多人用1024*768这个分辨率，比如我：）而1024
网页设计有什么标准？细说网页设计的6大规范
amtwo的博客
02-24 4785
随着用户认知提升，网页设计也在不断的向前发展，同时也逐步形成了一些规范，比如网页尺寸、文字规范、图片规范、按钮设计、表单设计、自适应设计与响应设计等。接下来小编跟你详细分享网页设计规范，以便您在设计之前一定要和前端沟通使用的尺寸、字体、交互等。
2.web-网页设计组成与规范
qq_42744835的博客
07-20 1336
正确理解页面板块布局，做好功能合理性与便捷性，提示用户浏览与使用体验 如何确定网页设计中的版块？ 一、理解需求       二、绘制手稿           三、绘制线框原型   设计师要学会沟通与协作 1.网站LOGO 2.搜索框 3.语言版本 4.注册登录 5.网站导航 6.轮播幻灯片/焦点图 7.头条新闻 8.快捷功能 9.产品展示 10.分类新闻 11.尾部导...
【网页设计自习室#003】网页设计基本规范和要求
m0_47121304的博客
02-05 2697
网页设计自习室
html页面宽度1920,网页banner尺寸1920
weixin_36165880的博客
06-03 2795
网页设计设计过程中，banner图是整个网页中，图片面积最大，位置最显眼的区域，甚至一个好看的网站就取决于banner的设计。现主流banner的尺寸主要是分为这三种，(推荐学习：web前端视频教程)1.显示位置是固定尺寸的，比如1200*560，1200*3602.显示位置是居中的，比如1920*560，其实主题显示的内容是1200*560，用这种尺寸只要是正对大屏的显示器，两边不会显得很尴尬，...
设计篇-网页设计规范
superbigsboy的博客
08-03 9242
设计规范 文章目录前言一、页面设计基本规范二、字体使用规范三、颜色搭配技巧四、页面风格总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、页面设计基本规范 目前电脑主要的屏幕尺寸（主要为1920）： 主要界面：页面尺寸: 1920px 比较流行；中间区域: 1000px或者1200px；分辨率: 72、颜色: RGB top区：
探索网页设计的艺术与技巧
此外，随着网页设计的发展，设计师还需要不断更新自己的技能，例如学习最新的前端框架（如React, Vue.js等）、CSS预处理器（如SASS, LESS等）以及最新的网页设计趋势和规范。这能确保网页设计不仅在视觉上吸引用户，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值