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

这个要看你的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

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

☆ 导航栏(navigation)：就是顶部导航，有线其高度为：45px；没有线高度就是44px；

☆ 主菜单栏(submenu，tab)：就是标签栏，底部导航，其高度为：46px；

☆ 信号格：5 * 5

☆ wifi 图片：11 * 9

☆ 锁：11 * 11

☆ 导航：8 * 8

☆ 电量：22 * 9

☆ 闪电：5 * 8

☆ 状态栏中的文字：10px

☆ 顶部导航栏的图标尺寸为16x16px左右，底部标签栏的图标尺寸为23 x 23px左右。

☆ 导航栏的文字大小最大值是14px，底部标签栏的图标下方的文字大小为10px。

☆ 内容区域的文字大小是：10px, 12px，14px，16px。

① 文字黑色：#282828

② 文字深灰色：#656565

③ 文字浅灰色：#989898

④ 边框浅灰色：#C3C3C3

⑤ 背景淡灰色：#f2f2f2

⑥ 按钮背景纯白色：#ffffff

A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。

B、亲密距离：比如，左边图标与右边文字之间的距离。

1、iPhone6手机模型尺寸：429x881px

2、界面尺寸布局：满屏尺寸375x667px

3、高度电量条高度20px，导航栏高度44px，标签栏高度46px；

4、各区域图标大小导航栏图标16px，底部标签栏图标23px；

5、各区域文字大小电量条-文字10px，导航栏-文字14px，标签栏-文字10px；

6、常用的文字大小：16px，14px，12px，10px；

7、常用的颜色：背景浅灰色：#f2f2f2, 文字深黑色： #323232，边框色深灰：#CCCCCC；

8、常用可点击区域的高度（比如搜索区域）：28px；

9、单行文字的背景框的高度：44px，双行则为：88px，三行则为：132px；

10、常用间距：亲密距离：10px；疏远距离：15px，其它距离：5px，22px等；

IOS界面设计尺寸规范（以iPhone6为例）

一、界面尺寸规范

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

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

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

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

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

二、图标尺寸规范

1、导航栏和工具栏尺寸大小44x44px；

2、标签栏尺寸大小75x75px

3、导航栏的文字大小最大值是34-36px，标签栏的图标下方的文字大小为20px。

4、内容区域的文字大小是：20px 24px，26px，28px，30px，32px，34px。

三、设置界面的图标高度和开关滑动按钮的高度：58px

四、可点击高度规范

在iPhone6的原型图上，统一成88px。在iPhone6设计稿中，88px是一个常用的设计尺寸。

五、搜索栏高度规范

搜索栏的高度，在iPhone6的原型图上，统一成58px。

六、界面元素之间的距离规范

在iPhone6设计稿中，界面元素之间的常用距离，亲密距离：20px；疏远距离：30p x。

A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。

B、亲密距离：比如，左边图标与右边文字之间的距离。

七、原型设计中，需要考虑不同屏幕尺寸的苹果手机，在@1x的情况下的适配情况。

1、iPhone5在@2x屏幕尺寸是，640x1136px对应的@1x，屏幕尺寸就是320x568px

2、iPhone6在@2x屏幕尺寸是：750x1334px对应的@1x，屏幕尺寸就是375x667px

3、iPhone6Plus在@3x屏幕尺寸是：750x1334px对应的@1x，屏幕尺寸就414x736px

八、iPhone6Plus的@3x，iPhone6的@2x, iPhone5的@2x的介绍

1、iPhone6Plus是5.5英寸屏幕，1242x2208px-@3x的像素分辨率，逻辑分辨率是414x981px-@1x。物理尺寸是1080x1920px。这个物理尺寸，也是安卓机目前最流行的大屏设计稿尺寸。

2、iPhone6是4.7英寸屏幕，750x1334px-@2x的像素分辨率，逻辑分辨率是375x889px-@1x。

3、iPhone5是4英寸屏幕，640x1135px-@2x的像素分辨率，逻辑分辨率是320x757px-@1x。

总结：iPhone6的原型规范如下：

1、界面尺寸布局：满屏尺寸750x1334px；

2、高度电量条高度40px，导航栏高度88px，标签栏高度98px；

3、各区域图标大小导航栏图标44px，标签栏图标50px；

4、各区域文字大小电量条文字22px，导航栏-文字32px，标签栏字20px；

5、常用的文字大小：32px，30px，28px，26px，24px，22px，20px；

6、常用的颜色：背景浅灰色#f2f2f2,文字深黑色#323232，边框色深灰#CCCCCC；

7、常用可点击区域的高度：88px；

8、单行文字的背景框的高度：88px，双行则为：176px，三行则为：264px；

9、常用间距：亲密距离：20px疏远距离：30px，其它距离：10px，44px等；

10、按钮和文本框，原型图做成直角的，圆角半径是多少，由Ui来设计；

11、这种情况，需要修改原型。单个页面的逻辑流程图或用户学习使用时间，超过其它页面平均数的3倍以上

设计尺寸包括pixel（px），point（pt)，pixelperinch(ppi)，dotperinch(dpi)，Density-independentpixel(px).

720x1280的设计尺寸分别为xhdpi，320，2.0，48dp，96px；

1080x1920的设计尺寸分别为xxhdpi，480，3.0，48dp，144px480。

APP设计尺寸单位各自的定义：

1、px：pixel——【像素】 电子屏幕上组成一幅图画或照片的最基本单元；

2、pt:point——【点】印刷行业常用单位，等于1/72英寸；

3、ppi:pixelperinch——【每英寸像素数】 该值越高，则屏幕越细腻；

4、dpi:dotperinch——【每英寸多少点】，该值越高，则图片越细腻；

5、dp:dip，Density-independentpixel——【安卓开发用的长度单位】。

扩展资料：

IOS界面设计尺寸规范（以iPhone6为例）：

一、界面尺寸规范

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

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

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

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

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

二、图标尺寸规范

1、导航栏和工具栏尺寸大小44x44px；

2、标签栏尺寸大小75x75px

3、导航栏的文字大小最大值是34-36px，标签栏的图标下方的文字大小为20px。

4、内容区域的文字大小是：20px24px，26px，28px，30px，32px，34px。

好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。通常意义上，UI是User Interface的缩写。其中，“Interface”前缀“Inter”的意思是“在一起、交互”，而翻译成中文“界面”之后，“交互”的概念没能得到体现。

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）

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。

3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右

4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.

页面标准按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。