UI界面设计尺寸应该是多少

1、界面尺寸：1920-2000px带有底图必须那么大（无底图的1366-2000px）

2、版心：980-1220px

3、Banner高度建议870px；

4、分辨率72px

5、色彩模式RGB

6、按钮高度为文字字高的的2-2.5倍

7、字体

导航：14px

字体：宋体 微软雅黑

字号：12、14、16、18、20px

专题页字体建议是12、14px，电商主页建议：16、18、20px

8、焦点图高度：600px-700px

1、尺寸：730x320px

2、登录界面的字体：12px 宋体 字体样式无

3、文本框高度为文字字高的的2-2.5倍

4、头标与框高度为20px

1、企业占中颜色尽量控制在三种以内

2、背景色：70%     主色调：25%     强调色：5%

背景有底纹画布大小建为1920-2000px

背景无底纹画布大小建为1366-2000px

4、版心宽度 980px 或 1000px 左右

5、焦点图高度小于580px 底部坐标到580px

6、在做企业站中要使用统一字体：宋体（Banner图除外）

1、头部注册、登录：12px 宋体

2、导航：16 18px 仿粗    底色块高度为字高的2-2.5倍

下拉导航与导航为从属关系建议使用小一号字体14px

内容区域的文字一般分为标题和正文两种，可以选择统一字号，用仿粗区分

文字区域到表框的边距一般为10px-20px

版权信息文字用12px

1、1寸：2.5x3.5cm     5寸：12.7x8.9cm

证件照拼版建议画布大小为12.7x8.9cm

横版：90x54mm  90x55mm

竖版：50x90mm  45x90mm

圆角名片：85x54mm

折叠名片尺寸不固定

使用材质：纸张（大于200g）

四色印刷：CMYK      出血值1mm

名片的主要内容：公司名称  LOGO    姓名  职务  联系方式  业务范围

1、名片边缘留足5-10mm距离

2、logo大小不能小于1cm

3、名片中最小的文字不能小于6px

1、将所有文字转曲（交与客户源文件）ctrl+a-    ctrl+shift+o

2、交与印刷厂PDF格式，不保留AI编辑功能

3、加入出血值

1、x展架尺寸：60x160cm  80x180cm

易拉宝：高200cm  宽80  90  100  110  150cm  常见的为80*200cm

展架、易拉宝输出方式为写真机，写真机输出幅面一般为：90  120  150cm

易拉宝输出材质：相纸（背面无胶）

展架：背胶纸（背面有胶） 装裱在KT版上

输出方式：写真：1软件可以使用ps软件（黑色为四色黑）

2、颜色模式可以为RGB也可以用CMYK

3、文档建立尺寸和实际尺寸一致，不需要加出血

4、展架易拉宝分辨率为72或80，特殊情况可以使用300（封面）

5、查看画布效果时，缩放比例为100%

6、使用黑色必须为四色黑（CMYK都为100），不能使用单色黑，使用单色黑，制作出的易拉版展架会有条纹。

7、背景的过度使用弱对比：色相H接近或相同，饱和度S差值在30以内或者明度B差值在30以内

8、强对比（背景与要突出的产品或文案）：色相H相反，饱和度S差值在70以内或者明度B差值在70以内。

1、四色印刷----CMYK(专色印刷要出专色版)

2、成品尺寸：制作一个90*120的三折页（从印刷厂制作完成后并且折叠后的尺寸）

2、展开尺寸：宽度 90+90+90=270  高度210

2、制作尺寸：展开尺寸+出血

2、大16K：210*285 毫米      成品尺寸 ：95*210或90*210     正度16K：185*260毫米

iPhone：320x480  640x960  640x1136  750x1334  1080x1920

Ipad:1024x768  2048x1536

Android:482x800  720x1280  1080x1920

Ipad、iPhone:状态栏：40px

导航栏：88px

主菜单栏：98px

内容区域：910px

状态栏：50px

导航栏和主菜单栏：96px

内容：1038px

1、iphone英文字体为Helvetica,中文为华为细黑，冬青黑体，不用微软雅黑。

2、可点击对象的区域：尺寸不要小于44*44px

六、智能电视

分辨率模式：1920×1080、1280×720 我们常用还是1920×1080的分辨率进行设计

颜色与分辨率

1、不要使用纯白色（#FFFFFF）可采用#F0F0F0

2、高饱和度颜色尽可能少用，会显示失真

3、大范围渐变会导致带状显示，无法达到平滑过渡

4、在界面边缘最好留出10%左右的空间（54PX）

这个要看你的ui界面是要适用哪个平台？

IOS界面，例如iphone6：

1、界面尺寸大小是：750x1334px。

2、状态栏(status bar)：就是电量条，其高度为：40px

3、导航栏(navigation)：就是顶部条，其高度为：88px

4、主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px

5、内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

iPad的设计尺寸，例如iPad Mini：

1、界面尺寸大小是：1024×768 px

2、状态栏(status bar)：就是电量条，其高度为：20px

3、导航栏(navigation)：就是顶部条，其高度为：44px

4、主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：49px

5、内容区域(content)：就是屏幕中间的区域，其高度为：768px-20px-44px-49px=655px

Android的图标尺寸

一般屏幕大小有：

小米、索尼、华为：1080×1920 px

OPPO R3：720×1280 px

ui的尺寸是1920到2000px，iOS和Android平台都定义了各自的像素计量单位，iOS的尺寸单位为pt，Android的尺寸单位为dp。

UI尺寸基础知识是有像素密度一PPI和计量单位，其像素密度是指显示屏幕每英寸的长度上排列的像素点数量，PPIPixelsperinch越高代表屏幕显示效果越精细，Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

对于刚入行的UI设计师，最容易犯的错就是在设计移动APP时，不懂什么尺寸或者用哪种屏幕的尺寸是最适当的？为了解决这个问题，今天我们就简单的为大家整理做UI时最基础的尺寸规范。

现象

首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480×800,480×854,540×960,720×1280,1080×1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640×960,640×1136,750×1334,1242×2208。

不要被这些尺寸吓倒。实际上大部分的app UI设计和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。

像素密度

要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone3gs的屏幕像素是320×480，iPhone4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。

所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixelsperinch）。这项指标是连接数字世界与物理世界的桥梁。

Pixelsperinch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

倍率与逻辑像素

再用iPhone3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。

在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。

在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。

由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。

如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：

ldpi[0.75倍]

mdpi[1倍]

hdpi[1.5倍]

xhdpi[2倍]

xxhdpi[3倍]

xxxhdpi[4倍]

各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2014年10月到2015年03月的数据：

就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：

ldpi如今已绝迹，不用考虑

mdpi[320x480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小）

hdpi[480x800、480x854、540x960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位）

xhdpi[720x1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位）

xxhdpi[1080x1920]（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上）

xxxhdpi[1440x2560]（极少数2K屏手机，比如GoogleNexus6）

自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。

不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480×800和1080×1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320×533和360×640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。

单位

不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。

单位之间的换算关系随倍率变化：

1倍：1pt=1dp=1px（mdpi、iPhone3gs）

1.5倍：1pt=1dp=1.5px（hdpi）

2倍：1pt=1dp=2px（xhdpi、iPhone4s/5/6）

3倍：1pt=1dp=3px（xxhdpi、iPhone6）

4倍：1pt=1dp=4px（xxxhdpi）

单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080×1920，有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。

无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。

Web怎么办

移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。根据像素密度，按相应倍率缩放。

以iPhone5s为例，屏幕的分辨率是640×1136，倍率是2。浏览器会认为屏幕的分辨率是320×568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。

实际应用

大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。

之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。

要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字？

首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。

再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。

现在回到正题，我们怎么通过DPI来调节倍率？既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。

下面来看看3个平台各自的画布设置：

IPhone

iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。

从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320×568。上升势头最猛，未来有望登上第一的是iPhone6的屏幕。倍率为2，逻辑像素375×667。

按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone4s，大一点的6plus也不会过于空旷。

不过在切图的时候要注意，由于iPhone6plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。

Android

都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360×640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72×2=144。想以xxhdpi为准，就把DPI设成72×3=216。

对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。

当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。

Web

手机端网页就没有统一标准了，比较流行的做法是按照iPhone5的尺寸来设计。倍率2，逻辑像素320×568。

这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。

如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone6plus的尺寸，倍率3，逻辑像素414×736。

总结

移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

要根据不同手机不同的屏幕分辨率来规定尺寸。

一般做效果图主流都是做480*800来测试，iphone4（或s)就用640*960，但这个都只是效果图，真正开发还需要切图用点9来做屏幕适配。

常见手机显示屏分辨率：96x65，96x96，128x96，128x128，160x128，160x160，176x144，220x176，240x176，320x240，640x480，800x480

苹果4:960×640像素，3.5英寸

三星：480×800分辨率

小米：480×8544英寸TFT屏幕

android手机屏幕尺寸

1280×800854×480640×480480×800432×240400×240320×480320×512320×240

扩展资料：

手机ui设计是手机软件的人机交互、操作逻辑、界面美观的整体设计。置身于手机操作系统中人机交互的窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能有所了解。手机UI设计一直被业界称为产品的“脸面”，好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

随着手机移动设备不断普及，对手机设备的软件需求越来越多，手机移动操作系统厂商正在不约而同地建立手机设备应用程序市场，如Apple的AppStore、Google的AndroidMarket、Microsoft的WindowsPhone7Marketplace，给手机的终端用户带来巨量的应用软件。这些软件良莠不齐，界面各异，手机的终端用户在众多的应用使用中，最终会选择界面视觉效果良好，且具有良好体验的应用留在自己的手机上长期使用。

参考资料：手机UI设计百度百科

中文字体：苹方 / PingFang SC

英文、数字：Helvetial

常用尺寸：750x1334 px 

 Andioid的字体：

中文字体：思源黑体 / Noto Sans Han

英文、数字：Roboto

常用尺寸：720x1280 px

IOS

1.iPhone界面尺寸

2.Andriod

当前最流行的分辨率是1920*1080，在该分辨率下，页面中心区域为1200px以内都可以。在800*600分辨率下，导航栏尺寸规格保持在778px以内；在1024*768分辨率下，网页宽度保持在1002px以内。

如果没有指定的要求，以1920尺寸设计就好（这是目前最普遍的尺寸大小），前端开发人员会自行适配其他的分辨率。

扩展资料：

UI设计网页方法

一、呈现更新颖的内容

设计师在进行网页ui设计的过程中需要注意的是，想要让自己的网页看起来更加与众不同，但也不必过于夸大，可以用一些新鲜的理念和不同的布局来吸引用户访问。比如以一种动态的方式，将信息呈现给用户，以此来赢得用户更多的关注。

二、增强元素的设计感

相对于普通的网页ui设计而言，具有较强的设计感的网页往往会更容易吸引用户的注意。任何一个具有创意的网站开发设计方案，都会把目光更聚焦在网页的基本布局和色彩搭配上，而这也意味着网页上一般存在很多种不同的元素。

三、激励用户更多操作

网站开发的设计制作的类型有很多种，面对不同的类型，要有特定的网页ui设计方案。给用户提供一个寻找目标的简易方法，这样用户就容易沉浸到页面中来，同时也增加了用户操作的几率。

1、字体

安卓系统中文采用的是思源黑体，英文字体为robot字体。

只使用偶数单位 24 pt，28 pt，36 pt等字体大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？

讲图标之前先来分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。

px是像素的意思， 不同设备显示效果相同。

从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；

②应用栏高度为128dp；

③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。

5、列表高度

垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp