移动端尺寸规范
移动应用界面设计的尺寸规范
移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。
若有不当之处，欢迎斧正。
一、android篇1、android分辨率屏幕尺寸指实际的物理尺寸，为屏幕对角线的测量。
为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。
像素（PX）代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。
屏幕密度为解决Android设备碎片化，引入一个概念DP，也就是密度。
指在一定尺寸的物理屏幕上显示像素的数量，通常指分辨率。
为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）像素= DP * （DPI / 160 ) 例如，在一个240dpi的屏幕里，1DP等于1.5PX。
于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。
典型的设计尺寸• 320dp：一个普通的手机屏幕（240X320，320×480，480X800）• 480dp：一个中间平板电脑像（480×800）• 600dp：7寸平板电脑（600×1024）• 720dp：10寸平板电脑（720×1280，800×1280）注意，ppi、dpi 是密度单位，不是度量单位：* ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目）* dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。
移动端规范
移动端规范移动端规范是指在移动应用开发过程中，为了保证用户体验和开发效率，团队内部制定的一系列标准和规范。
下面是移动端规范的一些主要内容。
1. 设计规范移动端设计规范是指根据移动设备的特点，对界面元素、排版、颜色、图标、交互等进行规范。
例如，需要保证界面简洁明了，按钮和输入框大小适中，颜色搭配和谐，图标清晰易辨认，交互流程简单直观等。
2. 布局规范移动端布局规范是指在不同分辨率和屏幕尺寸的移动设备上，如何适配布局。
例如，需要使用相对单位（如百分比）来定义元素的宽高，避免使用固定像素值；需要考虑不同设备的屏幕密度，使用矢量图标等。
3. 图片规范移动端图片规范是指在设计和使用图片时需要注意的规范。
例如，需要优化图片文件大小，减少加载时间；选择合适的图片格式（如JPEG、PNG）；根据不同设备分辨率提供不同尺寸的图片等。
4. 字体规范移动端字体规范是指在选择和使用字体时需要遵守的规范。
例如，需要选择适合移动设备显示的字体；保证字体大小在不同设备上显示一致；避免使用字体图标等。
5. 动画规范移动端动画规范是指在设计和使用动画效果时需要注意的规范。
例如，需要考虑动画的流畅性和性能消耗；保持动画效果简洁明了，不要过度炫酷；避免过多使用动画效果，以免分散用户注意力等。
6. 网络规范移动端网络规范是指在与服务器通信时需要遵守的规范。
例如，需要合理控制网络请求的频率和并发数，以避免过大的流量消耗；根据网络状态对数据进行缓存和预加载，提高用户体验；处理网络异常等。
7. 错误处理规范移动端错误处理规范是指在处理用户操作错误和程序异常时需要遵守的规范。
例如，需要给出明确的错误提示，帮助用户理解问题所在；记录和上报错误信息，以便及时修复程序漏洞；避免崩溃和闪退等。
8. 安全规范移动端安全规范是指在保护用户数据和应用安全时需要遵守的规范。
例如，需要加密用户敏感信息，避免泄露风险；对用户权限进行合理处理，避免滥用；定期更新应用程序，修复安全漏洞等。
h5页面标准尺寸
h5页面标准尺寸在设计H5页面时，标准尺寸是一个非常重要的考虑因素。
H5页面是指基于HTML5技术开发的网页，它具有丰富的交互效果和良好的跨平台兼容性，因此在移动端和PC端都有广泛的应用。
而H5页面的标准尺寸则是指在设计H5页面时应该遵循的页面尺寸规范，包括页面宽度、高度、图片尺寸等方面的规定。
本文将就H5页面标准尺寸的相关内容进行详细介绍，希望能够帮助大家更好地设计和开发H5页面。
首先，我们来看一下H5页面的标准尺寸应该如何确定。
在实际设计H5页面时，我们通常会根据页面的实际需求来确定页面的尺寸。
一般来说，移动端的H5页面宽度通常会设置为屏幕宽度的100%，这样可以确保页面在不同设备上都能够完美展示，而高度则会根据页面内容的多少来确定。
而在PC端，由于屏幕尺寸相对固定，因此可以根据设计的需求来确定页面的宽度和高度。
其次，H5页面中的图片尺寸也是需要我们特别关注的一个问题。
在设计H5页面时，我们通常会使用大量的图片来丰富页面的内容，因此图片的尺寸选择也是非常重要的。
一般来说，我们会根据页面的实际需求来确定图片的尺寸，确保图片在不同设备上都能够有良好的展示效果。
同时，为了提高页面加载速度，我们还需要对图片进行压缩处理，以减小图片的文件大小，提高页面的加载速度。
除了页面尺寸和图片尺寸外，H5页面中的文字尺寸也是需要我们考虑的一个重要因素。
在设计H5页面时，我们通常会根据页面的布局和设计风格来确定文字的尺寸和样式，以确保页面的整体风格统一和美观。
同时，为了提高页面的可读性，我们还需要注意文字的行间距和段落间距，以确保文字能够清晰地展示在页面上。
此外，H5页面的标准尺寸还需要考虑到页面的响应式设计。
在实际开发中，我们通常会采用响应式设计来确保页面在不同设备上都能够有良好的展示效果，因此在确定页面的标准尺寸时，我们还需要考虑到页面在不同设备上的展示效果，确保页面能够适配不同的屏幕尺寸。
综上所述，H5页面的标准尺寸是一个非常重要的设计因素，它直接影响着页面的展示效果和用户体验。
移动端UI设计尺寸规范
移动端UI设计尺⼨规范⼀、概念：1.屏幕⼤⼩：指屏幕对⾓线长度，单位是英⼨2.像素：组成图像的最⼩点，⼀个相对⼤⼩单位，同屏幕⾥越⼩越清晰3.屏幕像素密度（ppi）=像素总数/屏幕⼤⼩（英⼨）4.视⽹膜屏幕原理：当⼿机距离你约25-30厘⽶，如果⼿机ppi达到300以上，你的眼睛将⽆法分辨出像素点5.dpi：平⾯设计/印刷技术单位，值越⼤，表明打印机精度越⾼dpi=ppi⼆、Android屏幕尺⼨规范化1.程序开发统⼀使⽤虚拟尺⼨单位：dp/dip（除⽂字外其他）、sp（⽂字）2.px~dp转换：Ldpi：px-->dp 除以0.75dp-->px 乘以0.75Mdpi：px-->dp 除以1dp-->px 乘以1Hdpi：px-->dp 除以1.5dp-->px 乘以1.5XHdpi：px-->dp 除以2dp-->px 乘以2XXHdpi：px-->dp 除以3dp-->px 乘以3XXXHdpi：px-->dp 除以4dp-->px 乘以43.基准间距原则：（1）组件最⼩间距为8dp或10dp，排版/⽂字最⼩间隔建议4dp（2）组件尺⼨建议能被4整除（3）组件尺⼨建议为偶数（单数容易出现锯齿）4.48触摸定律：48dp是物理尺⼨⼤约为9mm左右，是⼀个⽤户⼿指能够准确舒服触摸的最⼩尺⼨5.常见组件尺⼨：状态栏：24dp操作栏：44/48dp侧边导航：286/304dp悬浮操作按钮：56dp操作栏+TAB：36+33dp/44+40dp底栏：44/48dp6.Android常⽤字号/⾏距/颜⾊：。
移动应用界面设计的尺寸设置及规范
【总结】移动应用界面设计的尺寸设置及规范时间2014-05-04 15:15:07 青溪·札记原文appdesign-sizesetting/主题用户界面设计移动应用刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。
若有不当之处，欢迎斧正。
一、android篇1、android分辨率Android的多分辨率，一向是设计师和开发者非常头疼的事儿。
尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。
Android支持多种不同的dpi 模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi注意，ppi、dpi 是密度单位，不是度量单位：* ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目）* dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。
尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。
ppi的运算方式是：PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数。
即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。
以iphone5为例，其ppi=√（1136px² + 640px²）/4 in=326ppi（视网膜Retina屏）对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近 320 dpi （xhdpi模式），480 x 800 的手机很可能接近 240 dpi （hdpi模式），而320 x 480 的手机则很接近 160 dpi（mdpi模式）。
前端设计师必备的设计稿交付规范
前端设计师必备的设计稿交付规范设计稿交付是前端设计师工作中非常重要的一环，它对于后续的开发和实施工作至关重要。
为了确保设计稿的准确性和可执行性，前端设计师应该遵循一定的交付规范。
本文将介绍前端设计师必备的设计稿交付规范，旨在提高设计稿的质量，加强与前后端开发的协作效率。
一、设计稿命名规范设计稿命名规范是交付过程中的首要步骤，它可以更好地展示设计稿的内容和用途。
设计稿的命名应该简洁明了，避免使用含糊不清的名称，以免造成误解。
下面是一些常用的设计稿命名格式的示例：1. 页面名称-版本号：例如"首页-v1.0"、"商品列表-v2.0"；2. 项目名称-页面名称：例如"电商平台-购物车页面"、"企业官网-联系我们页面"；3. 功能名称-页面名称：例如"登录功能-登录页面"、"搜索功能-搜索结果页面"。
二、设计稿尺寸规范设计稿的尺寸规范决定了设计稿在不同设备上的适应性。
在交付设计稿之前，前端设计师需要明确设计稿的尺寸，确保它能够适配不同的屏幕分辨率和设备类型。
以下是一些常见的设计稿尺寸规范：1. 响应式设计：为了适应不同屏幕尺寸，设计稿应该采用响应式布局，可以设计多个断点尺寸，如：320px、768px、1024px、1440px等；2. 移动端设计：常见的移动端设计稿尺寸有：750px、1080px等；3. PC端设计：常见的PC端设计稿尺寸有：1280px、1440px、1920px等。
三、设计稿文件格式规范选择适合的设计稿文件格式可以确保设计稿的质量和可扩展性。
通常，设计稿可以使用以下几种文件格式：1. 图片格式：常见的图片格式有JPEG、PNG和GIF等。
设计稿中的图片应该尽量使用无损压缩的格式，以保证图像的清晰度和细节；2. 矢量图形格式：矢量图形格式如SVG可以保留图形的无损可编辑能力，在不同尺寸下都能保持清晰度，适用于图标和矢量图形等；3. 原生设计软件格式：设计师可以使用原生设计软件如Sketch、Adobe XD、Figma等进行设计，在交付时应提供设计稿的源文件，以方便后续修改和扩展。
移动端设计规范
移动端设计规范移动端设计规范是指在移动设备上设计和开发应用程序时应遵循的一系列规范和原则。
移动设备具有独特的特点，例如屏幕尺寸小、交互方式多样、网络环境不稳定等，因此需要特殊的设计规范来满足用户的需求和提供良好的用户体验。
1. 响应式设计：移动设备屏幕尺寸有限，需要采用响应式设计原则，使得应用程序能够自动适应不同屏幕尺寸的设备。
应用程序的布局和元素大小需要根据屏幕尺寸进行调整，以确保用户能够方便地使用应用程序。
2. 简洁明了：移动设备屏幕空间有限，需要避免信息过载。
应用程序的界面应简洁、明了，只显示最重要的信息和功能。
不必要的元素和功能应尽量减少，以提高用户对应用程序的理解和操作效率。
3. 易用性：移动设备的操作方式多样，包括触摸、手势、语音等。
应用程序的操作要简单、直观，并且需要充分考虑用户的使用习惯和需求。
例如，按钮的大小和间距要适应手指的点击，滑动操作要有明显的视觉反馈等。
4. 导航方式：在移动设备上，屏幕空间有限，因此需要考虑如何进行有效的导航。
通常采用的方式有标签栏、抽屉式菜单、滑动菜单等。
导航方式要直观、易懂，使得用户能够方便地切换不同的页面和功能。
5. 色彩和图标：移动设备的屏幕显示能力有限，因此需要合理选择色彩和图标，以确保用户能够清晰地识别和理解界面上的元素。
颜色要简洁明了，不宜过于花哨；图标要具备直观的意义和区分度。
6. 字体和排版：移动设备屏幕尺寸有限，因此需要合理选择字体和排版方式，以确保用户能够舒适地阅读界面上的文本内容。
字体要合适，不宜过小或过大；排版要有良好的间距和行高，以便用户能够方便地阅读文本。
7. 错误处理和反馈：移动设备的网络环境不稳定，用户的操作也容易出错。
因此，应用程序需要提供良好的错误处理和反馈机制，以帮助用户快速找到错误原因和解决方法，并且给予明确而友好的提示。
8. 性能优化：移动设备的处理能力有限，网络速度也相对较慢。
因此，应用程序需要进行性能优化，使得应用程序能够快速启动、响应迅速，并且能够在不稳定的网络环境下正常运行。
app尺寸规范
竭诚为您提供优质文档/双击可除app尺寸规范篇一：app界面设计的规则移动端界面设计之尺寸篇ios1.尺寸及分辨率iphone界面尺寸：320x480、640x960、640x1136、ipad 界面尺寸：1024x768、2048x1536（单位都是像素，分辨率和网页一样，基本只要72ppi）一般用640x960或者640x1136尺寸设计。
ps：作图最好用形状工具来画的，这样方便后期切图或者尺寸变化。
2.界面基本元素组成iphone的app界面一般由四个元素组成，分别是：状态栏，导航栏，主菜单栏（页脚）以及中间区域。
、这里用的是640x960的尺寸设计：状态栏：即使信号、运营商、电量等显示手机状态的区域，其高度为：40px导航栏：显示当前界面的名称，包含相应功能或者页面间的跳转按钮，其高度为：88px主菜单栏（页脚）：类似页面的主菜单，提供整个页面的分类内容快速跳转，其高度为：98px内容区域：展示应用提供的相应内容，整个应用中布局更最为频繁的，其高度为：734px（960-40-88-98=734）android3.尺寸及分辨率android界面尺寸：480x800、720x1280、1080x1920（单位都是像素，分辨率和网页一样，基本只要72ppi）一般用720x1280尺寸设计，这个尺寸在720x1280中显示完美，在1080x1920中看起来清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。
4.界面基本元素组成android的app界面也是由四个元素组成，分别是：状态栏，导航栏，主菜单栏（页脚）以及中间区域。
、这里用的是720x1080的尺寸设计：篇二：app设计——字号规范app设计——字号规范主体：导航主标题：34/36px苹果标题：34px（ps：有些用36px）正文：32px-34px副文：28px-24px最小：20px正文：34px，会选择性的选用苹方粗体列表形式、工具化正文：32px(ps：由于屏幕使用变大正文大小趋势变成了34px)副文：28px时间：24px26px字号还用于划分类别的提示文案，因为这样的文字希望用户阅读，但不抢过主列表信息的引导。
主kv设计常用尺寸
主kv设计常用尺寸
主KV（KeyVisual）是一种重要的设计元素，通常用于品牌营销、广告宣传等方面。
在设计主KV时，尺寸的选择是非常重要的，不同的应用场景需要不同的尺寸。
以下是主KV设计常用尺寸的介绍：
1. 网页主KV：通常为宽度为1920像素，高度为600-800像素的横幅式设计。
这种尺寸的主KV适用于网站首页、产品页面等场景。
2. 移动端主KV：通常为宽度为750像素，高度为300像素的竖屏式设计。
这种尺寸的主KV适用于手机APP、微信公众号等移动端场景。
3. 广告主KV：通常为宽度为900像素，高度为600像素的横幅式设计。
这种尺寸的主KV适用于各种广告投放平台、展览宣传等场景。
4. 社交媒体主KV：通常为宽度为1200像素，高度为628像素的横幅式设计。
这种尺寸的主KV适用于各种社交媒体平台，如Facebook、Twitter、LinkedIn等。
除了以上常用尺寸外，还有一些特殊场景需要定制尺寸的主KV 设计，如户外广告、电视广告等。
因此，在设计主KV时，需要根据具体应用场景选择适合的尺寸，以确保设计效果最佳。
- 1 -。
为什么375×667是移动端原型设计的最佳分辨率：flutter设计稿尺寸最好也是375×667
为什么375×667是移动端原型设计的最佳分辨率：flutter设计稿尺⼨最好也是375×667部分PM在设计移动端产品的时候，往往是随意画了个原型尺⼨或者上⽹找个模板套进去，当然也有部分知道⽤375×667⽐较好，但是不知其所以然。
接下来，我来讲清楚为什么以及前世今⽣。
原型尺⼨的历史既然是设计移动端原型，理论上来说最佳的原型尺⼨最好是和你的⽬标⽤户⼿机尺⼨保持完全⼀致。
好⽐iPhone刚出来的时候，设计iOS APP原型使⽤iPhone⾃⾝分辨率320×480就是最合适的。
后来随着Android崛起，各种国产机盛⾏，屏幕割裂严重，部分PM使⽤720×1280设计原型，或者继续沿⽤之前的尺⼨320×480。
再后来iPhone6/6plus发布，屏幕分辨率的分裂也越来越严重。
此时最好有⼀种通⽤⽅案来解决这个问题，兼顾所有的屏幕分辨率。
确定适配屏幕的⽅案考虑到屏幕分辨率已经有数百种，并且兼顾⽤户量少的机型没有价值。
所以⼀⼀兼顾所有的屏幕是不现实的事情。
所以⼤家都是兼顾⽤户量使⽤最多的⼏款分辨率。
⽤户量很⼩的屏幕不处理。
如果有必要的话，部分屏幕单独处理。
⼿机屏幕分辨率的分布Android分辨率分布ios分辨率分布先考虑iPhone的原型尺⼨iPhone的分辨率是从320×480，到640×960，到640×1136，到750×1334，⼀直演变到1242×2208。
由于主要是750×1334最⼤、所以考虑它作为原型设计尺⼨，然后看是否可以兼顾其他分辨率。
⽽第⼆分辨率占⽐是1242×2208，是1.5倍的等⽐关系。
第三分辨率640×1136,约等于0.85的关系。
⾄于其他的分辨率占⽐已经很低，不是等⽐关系。
可以在碰到情况的在处理，甚⾄不处理。
所以iOS APP的视觉稿⽤750×1334来做⽐较适合，对于1242×2208，如果要求⾼就单独设计，要求不⾼就等⽐放⼤即可。
移动端banner设计要点
移动端banner设计要点
移动端banner设计要点包括以下内容：
1. 尺寸：移动设备屏幕尺寸较小，banner要求尺寸不能过大，一般为320×50或者320×100。
2. 图片：移动端banner设计一定要注意图片的清晰度，花草鸟兽和文字都不要用过小的图片，否则会出现模糊和失真的问题。
3. 主题色：设计移动端banner时，选择一种醒目、符合企业形象的主题色，能够吸引目光。
4.信息准确：设计要重点体现信息准确和简洁，尽量不要使用过多的文字，只保留核心内容就行。
5. 点击区域：在设计banner时，一定要确定可点击区域，这有利于提高用户的点击率和转化率。
6. 优惠折扣：促销活动等优惠信息是吸引用户的关键，移动端banner设计时，可以醒目地使用优惠信息，例如“特价优惠”、“折扣促销”等。
以上是移动端banner设计要点的主要内容。
在实际设计的时候，还需要根据企业形象和用户需求来确定具体的设计方案。
h5尺寸规范
h5尺寸规范H5页面是一种基于HTML5技术开发的网页，广泛应用于移动端的网页设计和开发。
在设计H5页面时，尺寸规范是非常重要的，它能够保证页面在不同设备上的展示效果一致。
下面是关于H5尺寸规范的一些要点，共计约1000字。
1. 分辨率和像素密度H5页面的分辨率决定了页面在不同设备上的展示效果。
根据设备的不同，我们需要制定不同的分辨率规范。
一般来说，常见的H5页面分辨率包括320x480、375x667、414x736等。
在制定分辨率规范时，还需要考虑到设备的像素密度。
像素密度指的是单位长度上的像素数，一般以“ppi”（Pixels Per Inch）表示。
对于高分辨率的设备，像素密度较大，页面上的元素会更加细腻清晰。
因此，我们在设计H5页面时要注意考虑不同设备的像素密度，并做出相应的适配。
2. 布局宽度H5页面的布局宽度取决于页面的具体需求和设计风格。
在设计时，我们可以选择固定宽度布局或自适应布局。
固定宽度布局是指页面的宽度固定不变，一般设置为手机屏幕宽度的一部分，例如320px、375px等。
固定宽度布局的优点是布局简单，容易控制，但在大屏设备上可能会出现空白边距或页面内容缩放的情况。
自适应布局是指页面的宽度会根据设备的屏幕宽度自动调整，以适应不同尺寸的屏幕。
自适应布局的优点是可以适应各种屏幕尺寸，但在设计时需要考虑到不同屏幕宽度下的元素排列和可读性。
3. 图片和文字大小在H5页面设计中，图片和文字的大小直接影响页面的可读性和视觉效果。
因此，在选择图片和设计文字时，需要根据页面布局和设计需求来确定它们的大小。
对于图片，一般来说，我们需要预先确定图片的分辨率和像素密度，并根据页面布局调整图片的大小。
同时，为了提高页面加载速度，我们需要对图片进行压缩处理，使用适当的图片格式（如JPEG、PNG等）。
对于文字，我们需要根据页面的设计风格和布局要求，选择合适的字体大小和行高。
通常，手机屏幕上的文字大小需要设置为12px以上，以保证文字的清晰度和可读性。
《移动交互界面设计》2移动端尺寸
D
PART Four
作
业
1、制作IOS端主流机型，iphone6、6P的尺寸规范。 2、制作Android端主流机型，720*1280的尺寸规范。 3、多款App界面截屏测量尺寸（iOS、android）
30
22
Android系统字体字号参考规范
23
主流Android手机分辨率和尺寸
常用设计尺寸：720×1280px、1080×1920px
24
主流Android手机分辨率和尺寸
25
系统分辨率统计
26
状态栏、
720*50px
720*96px
720*96px
27
C
PART Three
总
结
iOS 设备，尺寸保持750×1334px，并逐步转换成 1242×2208px Android 设备，尺寸保持1080×1920px
750*88px 起着导航作用，一般会显示标题、搜索框、 分段式控件等。位于状态栏下方。颜色一般 为App主色调。（透明色、单色、渐变色）
13பைடு நூலகம்
标签栏、工具栏
750*98px 让用户在不同的子任务、视图和模式中切换。 底部标签栏、顶部标签栏。 一般为3~5个，超过五个则用“更多”图标 表示。图标与文字均等宽。
21
Android的三栏尺寸
安卓的图标相对iOS来说较少，我们只需提供一下几个尺寸就可以了，但是需要提高2套，圆角和直角各一套，因为有的地方都会用到。 · 512x512px · 192x192px · 144x144px · 96x96px · 72x72px · 48x48px 字体：英文字体为 Roboto字体 中文字体为思源黑体。在Android 5.0之后，使用的是思源黑体，字体文件有2个名称，“source han sans”和“noto sans CJK”。 思源黑体是Adobe和Google领导开发的开源字体，支持繁简日韩，有7种字体粗细。
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像素，保证显示清晰。
移动端设计尺寸规范
从原理开始介绍一下移动端设计尺寸规范初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。
我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。
从原理说起，理清关于尺寸的所有细节。
由于是写给初学者的，所以不要嫌我啰嗦。
现象首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。
尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。
近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。
不要被这些尺寸吓倒。
实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。
说明尺寸的问题一定有解决方法，而且有规律可循。
像素密度要知道，屏幕是由很多像素点组成的。
之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。
比如480x800的屏幕，就是由800行、480列的像素点组成的。
每个点发出不同颜色的光，构成我们所看到的画面。
而手机屏幕的物理尺寸，和像素尺寸是不成比例的。
最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。
刚好两倍，然而两款手机都是3.5英寸的。
所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。
这项指标是连接数字世界与物理世界的桥梁。
Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。
1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。
像素密度越高，代表屏幕显示效果越精细。
Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
倍率与逻辑像素再用iPhone 3gs和4s来举例。
假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。
手机移动端banner大图尺寸
手机移动端banner大图尺寸A、从网站的页面大小来看1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，就不会出现水平滚动条，高度则视版面和内决定(页面的显示尺寸为：1007*600px)。
3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右。
4、1024*768 下网页的尺寸:width=955,height=600 800*600 下网页的尺寸:width=760,height=420。
5、分辨率在640*480的情况下，页面的显示尺寸为:620*311px。
B、从banner自身的设计大小看1、页面长度原则上不超过3屏，宽度不超过1屏。
2、每个标准页面为A4幅面大小，即8.5*11英寸。
3、全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px，另外120*90，120*60也是小图标的标准尺寸;4、每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K。
C、从网站页面的广告位置来看网页中的广告尺寸：1.首页右上，尺寸120*602.首页顶部通栏，尺寸468*603.首页顶部通栏，尺寸760*604.首页中部通栏，尺寸580*605.内页顶部通栏，尺寸468*606.内页顶部通栏，尺寸760*607.内页左上，尺寸150*60或300*3008.下载地址页面，尺寸560*60或468*609.内页底部通栏，尺寸760*6010.左漂浮，尺寸80*80或100*10011.右漂浮，尺寸80*80或100*100#01 移动端（app）banner尺寸要求：iOS：640*180px 或者640*240px （40k以内）android：720*300px 1080*375px （75k以内）#02 官网banner尺寸要求：1、一般分辨率在800*600的情况下，页面的显示尺寸为：780*428px。
移动端H5页面的设计稿尺寸大小规范
移动端H5页面的设计稿尺寸大小规范当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。
如果是app设计师，就不会那么纠结啦，开始学习制作H5页面的小伙伴可以参考参考哦！那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。
现在已经有2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。
显然不是。
请注意：（以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下）也就是我们的H5页面前端代码里面必须包含<metacontent=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” /><meta content=”telephone=no” name=”format-detection” />根据目前市场流行的手机移动终端，统计他们的设备独立像素，也只有iPhone6+采用了分辨率降频处理。
具体看下图：有兴趣的小伙伴可以去尝试不同的尺寸，比如1倍的、2倍的、3倍。
最终得出的试验结果是。
H5的设计稿一般设计为640x1136px即可。
既满足了显示需求，又能降低用户加载图片需要的带宽。
可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。
第一：背景图片必须采用background-size:cover;来实现。
第二：我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。
通过对比可得：除去将浏览器全屏显示的情况，几乎所有情况均会有顶部的状态栏和导航栏。
iPhone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
移动端尺寸规范
移动端尺寸规范是针对移动设备上的用户界面设计的一组标准化尺寸规范。
移动设备的屏幕尺寸多种多样，不同的设备有不同的屏幕尺寸和分辨率，因此设计师需要遵循一定的规范来确保设计在不同设备上的一致性和可用性。
下面是关于移动端尺寸规范的一些要点。
1. 响应式布局：移动设备的屏幕尺寸和方向不断变化，因此设计师需要采用响应式布局来适应不同的屏幕尺寸。
响应式布局可以根据设备屏幕尺寸的变化自动调整元素的大小和位置。
2. 分辨率适配：不同的移动设备有不同的屏幕分辨率，设计师需要根据不同设备的分辨率来适配设计。
常见的屏幕分辨率包括320x480、640x960、750x1334、1080x1920等，设计师需要确保设计在不同分辨率下能够正常显示。
3. 导航栏高度：移动设备上的导航栏通常位于屏幕顶部，用于显示各种导航和操作按钮。
导航栏的高度可以根据具体设计需求来确定，一般建议在48px至56px之间。
4. 底部导航栏高度：移动设备上的底部导航栏通常位于屏幕底部，用于显示底部菜单和操作按钮。
底部导航栏的高度可以根据具体设计需求来确定，一般建议在48px至56px之间。
5. 图标大小：移动设备上的图标大小需要适应屏幕尺寸的变化，一般建议使用矢量图标来保证图标在不同尺寸下的清晰度。
图标的尺寸可以根据具体设计需求来确定，一般建议在16px至
24px之间。
6. 文字大小：移动设备上的文字大小需要适应屏幕尺寸的变化，一般建议使用相对单位（如em或rem）来定义文字大小，以
便根据屏幕尺寸的变化自动调整文字大小。
文字的大小可以根据具体设计需求来确定，一般建议在14px至18px之间。
7. 行高：移动设备上的行高需要根据文字大小来确定，以确保文字在不同设备上的可读性和排版效果。
行高一般建议设置为文字大小的1.5倍至2倍之间。
8. 边距和间距：移动设备上的边距和间距需要适应屏幕尺寸的变化，以保证界面的美观和可用性。
一般建议将边距和间距设置为8px至16px之间。
总之，移动端尺寸规范是针对移动设备上的用户界面设计的一组标准化尺寸规范。
设计师需要遵循这些规范来确保设计在不同设备上的一致性和可用性。
这些规范涵盖了导航栏高度、底部导航栏高度、图标大小、文字大小、行高、边距和间距等方面的要点。
通过遵循这些规范，设计师可以更好地为移动设备上的用户提供良好的用户体验。