ui界面尺寸（【PS】移动端UI设计尺寸整理）

本文目录

• 【PS】移动端UI设计尺寸整理
• 手机网页UI设计尺寸是多少
• 安卓系统UI设计尺寸怎么定
• ui的尺寸
• ui尺寸1280是什么意思
• 小程序的ui框架尺寸
• UI尺寸规范

【PS】移动端UI设计尺寸整理

 iOS的字体：

中文字体：苹方 / PingFang SC

英文、数字：Helvetial

常用尺寸：750x1334 px 

 Andioid的字体：

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

英文、数字：Roboto

常用尺寸：720x1280 px
IOS

1.iPhone界面尺寸

2.Andriod

手机网页UI设计尺寸是多少

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

一般做效果图主流都是做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×854 4英寸TFT屏幕 

android手机屏幕尺寸

1280×800 854×480 640×480 480×800 432×240 400×240 320×480 320×512 320×240

扩展资料：

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

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

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

安卓系统UI设计尺寸怎么定

众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的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是像素的意思， 不同设备显示效果相同。
安卓各屏幕密度关系如下：
3、图标
不同手机品牌的图标的标志是不一样的，对应不同大小屏幕的尺寸如下：
应用图标的尺寸：
快捷图标的尺寸：
系统图标的尺寸：
4、应用栏的尺寸
从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；
②应用栏高度为128dp；
③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③标题和列表项：48dp；④子标题：48dp；⑤内容区域间距离为8dp
6、界面适配
安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置，来优化用户界面设计，带来更良好的用户体验。
如何做到安卓界面适配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的关系；明白实际密度和系统密度的关系，dp、sp、px的区别；明白dp与px的转换。这里不做过多阐述，后期写一篇具体的~
安卓的界面规范就讲到这里，要明白设计界面规范的意义是确保设计的统一性与合理性，规范维护的是项目的统一，为了项目利益最大化，高效化。所以作为UI设计师的我们，如果一点设计规范不遵守，全靠自己想当然，那就别发给前端人员啦，他也看不懂。

ui的尺寸

ui的尺寸是1920-2000px，UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网常用的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。

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

ui尺寸1280是什么意思

UI尺寸1280指的是用户界面（User Interface）的尺寸，它是指在计算机屏幕上显示的图形用户界面的宽度，以像素为单位，1280代表1280个像素，也就是宽度为1280像素。这种尺寸的UI可以在许多现代计算机上使用，包括桌面电脑和笔记本电脑。

小程序的ui框架尺寸

小程序的 UI 设计指南在小程序官方文档中均有介绍，以微信官方设计文档为参照：
1、 小程序布局：小程序的布局主要采用块状结构进行布局，优先采用卡片、列表或网格等布局方式；
2、 小程序 UI 调色：小程序的 UI 调色使用典型的灰色调子，较亮的颜色基调使用明度较浅的颜色；
3、小程序 UI 尺寸：采用 1080px 宽，720px 高的界面设计尺寸，控件尺寸以 8px 为基准单位，即每个控件的间距需以 8px 设计；
4、 小程序 UI 字号：字体最大尺寸 36px，最小尺寸 24px，中等字体尺寸使用 30px。

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）