网页设计规范尺寸

合集下载

视觉传达设计常用尺寸

视觉传达设计常用尺寸

视觉传达设计常用尺寸1.平面设计常用尺寸:-A4:210毫米×297毫米,常用于信纸、海报等打印品的设计。

-A5:148毫米×210毫米,常用于宣传折页、小册子等设计。

-A6:105毫米×148毫米,常用于明信片、宣传单页等设计。

-16:9:常用于电脑屏幕、投影仪等显示设备的尺寸。

-1:1:正方形尺寸,常用于社交媒体平台的头像、封面等设计。

2.网页设计常用尺寸:-1920像素×1080像素(16:9):常用于电脑网页设计,适配大屏幕显示。

-1366像素×768像素:常用于中小尺寸显示屏、笔记本电脑等网页设计。

-375像素×667像素:常用于手机网页设计,适配移动设备。

- 1242像素× 2688像素:常用于iPhone等大屏幕手机网页设计。

3.广告设计常用尺寸:-横幅广告:常用尺寸包括728像素×90像素、970像素×90像素等。

-方形广告:常用尺寸包括300像素×250像素、336像素×280像素等。

-大型矩形广告:常用尺寸包括300像素×600像素、160像素×600像素等。

-弹出广告:常用尺寸包括500像素×500像素、800像素×600像素等。

4.印刷品设计常用尺寸:-名片:常用尺寸为85毫米×54毫米,常见国际标准尺寸。

-宣传单页:常用尺寸为210毫米×297毫米(A4),常折叠成三折或四折。

-海报:常用尺寸为594毫米×841毫米(A1),也有更小尺寸如A2、A3等。

除了以上常用的尺寸外,视觉传达设计还可以根据实际需求和特定平台自由选择尺寸,例如社交媒体平台的头像、封面等设计,不同平台有不同的规格要求。

需要注意的是,设计尺寸不仅仅是宽度和高度的数值,还包括分辨率和像素密度等因素。

在进行视觉传达设计时,要根据设计需求和输出媒介的要求进行合理选择,以确保设计效果的最佳呈现。

网页字体大小规范标准[详]

网页字体大小规范标准[详]

于在未开启cleartype的情况下,一些中文字体在非偶数字号下的显示效果欠佳,所以一般建议使用12、14、16、18、22px 等偶数字号。

也就是对某个分辨率选择离它最近的偶数字号。

例如:屏幕横向分辨率在1100以下的采用14px,1100到1500采用16px,1500以上采用 18px,依此类推。

最通用的网站设计规范参考参考网上的一些文章和部分门户网站规范,结合用户浏览习惯以及实际策划、设计、使用中的经验,制订了《通用网站设计规范参考》。

一、设计风格1、依照网站的定位确定整体的设计风格。

2、主体框架页面、内容页尽量采用方型结构。

禁用长距离的斜线及弧线结构,可允许小范围内的斜线及弧线。

封面页、专题页可不受此限制。

3、设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧,拐角可以有曲线变化。

拐角块最大不得超过18像素。

同一页面弧度尽量保持一致。

4、各主要栏目之间要求使用一致的布局,包括一致的页面元素;一致的导航形式,使用相同的铵钮,相同的顺序。

可跟首页有变化。

5、首页及各级页面都必须带有网站的LOGO,并链接到网站首页。

6、设计要兼容分辨率,就目前显示器分辨率的覆盖率,可以采用1024*768 分辨率,建议页面使用宽度为1000px、980px或者950px设计等,对于内容偏少的网站或者专题,也可采用800*600分辨率,建议使用宽度为778px或者760px。

7、网站页面长度建议1屏半到2屏。

原则上长度不超过3屏,宽度不超过1屏。

根据用户习惯和网站需要,国内中文网站综合类、门户类(包括垂直门户)网站可设计超过3 屏。

二、图形设计规范1、图片标准尺寸全尺寸banner为468×60px,半尺寸banner为234×60px,小logo 为88×31px,另外150×68、120×90,120×60也是标准尺寸,网站logo一般控制在150×54以内,客户要求或特殊广告图片可另定尺寸。

腾讯网WebWeb设计规范

腾讯网WebWeb设计规范

• 搜索按钮 a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标,而丌能采用其他元素。
二、搜索框设计规范
c. 搜索button规范文字为“搜索”避免采用其他描述。比如:
d. 图标形式(放大镜)和文字形式可搭配使用,会出现如下三种情况: 文字形式: 搭配使用: 图形形式:
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、页面修饰
1。简单的光影效果
2。质感表现 基本采用简单的渐变,丌需要繁杂的修饰
一、页面修饰
3. 透明效果
二、个性皮肤
QQ首页个性皮肤:
二、个性皮肤
其他产品个性表现:
2. 应用场景
弱表现方式:
• 输入框内采用小字体(12号) •长度大约以刚好放完提示文字为基准
• 弱化搜索button的表现,可考虑用icon代替
•搜索框通常放在页头的右上角
三、页码设计规范
1.普通页码翻页的表现方法:
• 页码由三部分构成:一为页码状态区,表明页码在当前第几页位置以及共有多少页;二为页码翻页区,由上下翻页按钮不页码显示区构成;三为跳 转翻页区。三部分组成页码翻页区域位于产品右下角,三部分距离丌可分开过大。
五、文字的编排与设计
Verdana字体 优点:没有下划线贴边的问题,能区分大写I不小写L 缺点:字体较宽,间距大,字型囿同一宽度可显示字节比其他字体少得多 ; Q字有尾巴;字高丌整齐 下划线:
应用案例
五、文字的编排与设计
CSS书写规范
font-family:Helvetica,Arial,simsun;

H5页面设计规范

H5页面设计规范

H5网页设计规范1、非可循环平铺图片的背景图,须按最大屏幕尺寸来设计,即:1920*720;2、集团、新闻类网站中间内容宽度使用1003PX;展示、购物类网站中间内容部分宽度使用1200PX;3、必须删除非显示图层和参考线;4、命名和分组必须规范,建议使用一下命名规则(如有更合适或者更熟悉的命名规则请提前与技术沟通)中英文均可;页头:header 内容:content/container 页面主体:main页尾:footer 导航:nav 侧栏:sidebar栏目:column 整体布局:wrapper 左右中:缩写为L R C 水平/垂直:H/V 菜单:submenu 摘要: summary按钮:btn/button 滚动:scroll 鼠标悬停:hover点击:click 已浏览:visited。

广告横幅:AD/ banner5、建议将每个独立控件设计有明显的边界,如果不能给出明显边界,请在设计稿中标出与邻近控件的距离;6、段落文字必须给出行高,必须使用10号以上字体,建议使用1.5倍行高和14号字体。

7、需要后台添加的文字(标题、内容等)必须使用常用字体,即宋体和微软雅黑;H5手机页面设计规范1、PSD按照宽度640PX,高度不限来设计;2、可点击部件不可小于88PX,(如果不够提交设计稿的时候特别说明)。

3、所有部件的尺寸大小必须是双数。

4、每个按钮需要有四个状态:默认、按下、选中、不可选。

至少需要考虑:默认和不可选两个状态。

5、除广告图片外,其他图形部件尽量用图形工具绘制。

6、可点击部件尽量和屏幕四边保持20-30PX的距离。

7、设计的时候尽量以一个使用者的角度去设计,判断哪个页面需要状态栏,哪个页面只需要一个返回按钮。

8、iPhone输入法自带搜索按钮,没有必要再在页面上进行显示。

9、尽可能的对页面部件大小边距等元素进行大小的标注。

视觉传达设计常用尺寸

视觉传达设计常用尺寸

视觉传达设计常用尺寸1. Logo尺寸:Logo是一个品牌的标识符号,可以出现在不同的媒介和尺寸上。

通常,一个Logo设计会有不同的版本,包括主标识和辅助标识,每个版本都有标准的尺寸。

Logo的尺寸可以根据不同的需求而变化,但通常会有一个最小尺寸限制,以确保Logo在任何尺寸上都能清晰可见。

2.平面设计尺寸:平面设计包括海报、名片、宣传册等,这些设计通常会遵循标准的页面尺寸,以便在打印和展示中进行排版。

常见的标准尺寸包括A4(210x297mm)、A5(148x210mm)、A6(105x148mm)等。

除了标准尺寸外,还有一些非标准尺寸,可以根据需求进行调整。

3.网页设计尺寸:在网页设计中,一些常用的尺寸被广泛采用,以确保设计在不同设备上都能正常显示。

例如,常见的桌面网页设计尺寸为1920x1080像素,移动设备的网页设计尺寸可以是375x667像素(iPhone 6/7/8)或414x896像素(iPhone X/XS)。

4.图标尺寸:图标是一个常用的视觉元素,用于表示特定的功能或内容。

图标通常需要在不同的大小上使用,以适应不同的设备和分辨率。

常见的图标尺寸可以是16x16像素、32x32像素、64x64像素等。

5.广告横幅尺寸:广告横幅是广告宣传中常见的媒介之一,需要按照特定的尺寸进行设计。

常见的广告横幅尺寸包括728x90像素(Leaderboard)、300x250像素(Medium Rectangle)等。

总结起来,视觉传达设计常用尺寸是多种多样的,并且会根据设计的用途和媒介的不同而变化。

在设计过程中,设计师应该根据具体需求选择适当的尺寸,以确保设计在不同的媒介和尺寸上都能达到预期的效果。

banner标准尺寸

banner标准尺寸

banner标准尺寸在进行网页设计时,banner是非常重要的元素之一。

它不仅可以吸引用户的注意力,还可以传达网站的核心信息,因此banner的尺寸选择至关重要。

本文将为大家介绍banner的标准尺寸,希望能够帮助到各位网页设计师和创作者。

首先,我们需要了解不同平台对banner尺寸的要求。

在PC端,常见的banner尺寸包括1920600、1920400、19201080等。

这些尺寸可以满足大多数网站的需求,能够在不同分辨率的屏幕上呈现出良好的效果。

而在移动端,banner的尺寸通常为750200、750300、750400等。

这些尺寸能够适配不同尺寸的移动设备屏幕,确保banner在手机上也能够展现出美观的效果。

其次,我们需要考虑banner的内容布局。

在选择标准尺寸的同时,也需要注意banner的内容布局是否合理。

合理的内容布局能够让用户一眼就能够获取到网站的核心信息,同时也能够提升用户的体验。

因此,在设计banner时,我们需要注意文字和图片的搭配,确保内容简洁明了,不会让用户感到混乱或不知所措。

除此之外,我们还需要考虑banner的加载速度。

尺寸过大的banner会导致网页加载速度变慢,影响用户体验。

因此,在设计banner时,我们需要控制其尺寸,避免过大的图片或动画效果,以提高网页的加载速度。

最后,我们需要考虑banner的响应式设计。

随着移动设备的普及,越来越多的用户通过手机或平板访问网站。

因此,我们需要确保banner能够在不同设备上呈现出良好的效果,不会因为屏幕尺寸的不同而导致内容的错位或变形。

综上所述,banner的标准尺寸选择是网页设计中至关重要的一环。

在选择尺寸时,需要考虑不同平台的要求,合理布局内容,控制加载速度,以及响应式设计。

只有在这些方面都做到位,才能设计出令人满意的banner,提升网站的吸引力和用户体验。

希望本文能够帮助到各位网页设计师和创作者,让他们在设计banner时能够更加得心应手。

常见版心的宽度值

常见版心的宽度值

常见版心的宽度值在网页设计中,版心是指网页内容所占据的主要区域。

版心的宽度值是指版心在水平方向上所占据的像素或百分比数值。

常见版心的宽度值对于网页设计来说非常重要,它直接影响着网页的布局、用户体验和可读性。

1. 固定宽度版心固定宽度版心是指使用固定像素值作为版心的宽度。

这种设计方式在过去非常流行,因为可以确保网页在不同设备上具有一致的外观。

常见的固定宽度值包括960px、1024px和1200px。

1.1 960px版心960px版心是一种非常经典的固定宽度设计,被广泛应用于过去和现在的网页设计中。

这个数值源自于栅格系统(Grid System)的概念,将页面分为12列,每列80px宽,两列之间留有20px间距。

优点: - 简单易用,适合快速搭建网站。

- 兼容性好,可以在各种设备上正常显示。

缺点: - 在大屏幕上留下过多空白区域。

- 对于长篇内容,阅读体验可能不佳。

1.2 1024px版心1024px版心是另一种常见的固定宽度设计。

相对于960px版心,它更适合显示大量文字内容。

在1024x768分辨率的屏幕上,这种设计能够完整显示网页内容,并且还能在两侧留下适当的空白区域。

优点: - 显示大量文字内容时更为合适。

- 在1024x768分辨率的屏幕上具有良好的显示效果。

缺点: - 对于小屏幕设备来说,可能需要进行水平滚动才能完整显示网页内容。

- 不太适用于响应式设计。

1.3 1200px版心1200px版心是近年来越来越流行的固定宽度设计。

相比于960px和1024px版心,它能够更好地适应较大屏幕设备和高分辨率显示器。

同时,在小屏幕设备上也可以通过自适应或响应式设计进行优化。

优点: - 在大屏幕设备和高分辨率显示器上具有良好的显示效果。

- 可以通过自适应或响应式设计,在小屏幕设备上进行优化。

缺点: - 可能在小屏幕设备上需要进行水平滚动才能完整显示网页内容。

- 需要考虑不同屏幕分辨率下的适配问题。

CI与VI设计尺寸大全

CI与VI设计尺寸大全

CI与VI设计尺寸大全在现代商业社会中,企业的品牌形象设计越来越受到重视。

CI (Corporate Identity,企业形象)和VI(Visual Identity,视觉形象)设计成为企业展示和推广自身品牌的重要手段。

在进行CI和VI设计时,尺寸的选择是至关重要的,合适的尺寸可以凸显品牌的专业性和统一性。

本文将为您详细介绍CI与VI设计中常用的尺寸规范,为企业的品牌塑造提供参考。

一、标准版1. 公司LOGO尺寸- CI设计的核心即公司的LOGO,它是企业身份的重要标识。

LOGO尺寸的选择应根据具体应用场景而定。

- 网站LOGO:一般尺寸为200*50像素,保证在网页上显示清晰。

- 名片LOGO:建议尺寸为90*50毫米,便于在名片上居中展示。

- 信笺LOGO:尺寸可根据信纸大小灵活调整,一般印刷在A4信纸的右上角。

2. 宣传海报尺寸- 张贴海报:常用尺寸为A1(594*841毫米)、A2(420*594毫米)、A3(297*420毫米),根据需求选择合适的尺寸。

- 宣传折页:推荐尺寸为A4(210*297毫米),方便折叠和携带。

3. 广告牌尺寸- 大型广告牌:一般使用的尺寸为4*3米或6*4米,具体尺寸可根据广告位大小进行调整。

- 路边广告牌:推荐尺寸为2*1.5米,便于驾驶人员迅速获取信息。

二、电子媒体版1. 网页尺寸- 电脑端:常用尺寸为1920*1080像素,保证在常见显示器上显示完整。

- 移动端:推荐尺寸为750*1334像素,适配绝大多数智能手机。

2. 平面设计尺寸- 宣传单页:常用尺寸为A4(210*297毫米),方便打印和分发。

- 产品册:推荐尺寸为210*210毫米或148*148毫米,具备独特性和易读性。

三、社交媒体版1. 微信尺寸- 公众号封面:建议尺寸为900*500像素,支持高清图像展示。

- 图文封面:尺寸为900*600像素,适合多图文展示。

2. 微博尺寸- 头像尺寸:推荐尺寸为180*180像素,保证显示清晰。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

网页设计规范尺寸
网页设计规范尺寸是指根据不同的设备和浏览器,对网页设计进行尺寸的规范化设置,以便在不同设备上获得更好的视觉效果和用户体验。

以下是关于网页设计规范尺寸的一些重要内容。

1. 响应式设计:随着移动设备的普及,响应式设计已成为现代网页设计的标配。

响应式设计是指根据用户设备的屏幕大小和分辨率自适应地调整网页的布局和样式。

根据屏幕的尺寸不同,网页可以采用不同的布局,以确保在各种设备上都能够正常显示和使用。

2. 移动优先:现在越来越多的用户使用移动设备浏览网页,因此,在进行网页设计时应优先考虑移动端用户的需求。

这意味着设计师应该以移动端的视角来思考网页的布局和功能,并确保网页在小屏幕上也能够清晰地展示内容。

3. 视觉屏幕宽度:在设计网页时,设计师通常会考虑视觉屏幕的宽度。

视觉屏幕宽度是指网页在浏览器中显示的可见宽度。

根据统计数据,常用的视觉屏幕宽度是1366像素和1920像素,因此在进行网页设计时,可以考虑这两个尺寸。

4. 布局和栅格系统:在进行网页设计时,使用栅格系统可以帮助设计师更好地组织和布局页面的内容。

栅格系统是将页面划分为多个列和行的网格,以便将内容分布在页面上。

常用的栅格系统有12列和16列,设计师可以根据具体需求选择合适的栅格系统。

5. 图片尺寸:在网页设计中,使用合适的图片尺寸是非常重要的。

大型图片会增加网页加载时间,影响用户体验,因此应尽量压缩和优化图片。

同时,为了确保图片在不同设备上都能够正常显示,设计师可以使用响应式图片,根据设备的屏幕大小加载不同的图片。

6. 字体尺寸和行高:在网页设计中,选择合适的字体尺寸和行高可以改善页面的可读性和整体排版效果。

选择较大的字体尺寸和适当的行高可以使文本更容易阅读,并提高用户体验。

综上所述,网页设计规范尺寸是为了确保网页在不同设备上具有良好的视觉效果和用户体验而进行的规范化设置。

响应式设计、移动优先、视觉屏幕宽度、布局和栅格系统、图片尺寸以及字体尺寸和行高等都是设计师在进行网页设计时需要考虑的重要因素。

相关文档
最新文档