移动应用界面设计的尺寸规范

移动应用的界面设计画布尺寸设计多大（特别是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. 安全规范移动端安全规范是指在保护用户数据和应用安全时需要遵守的规范。

例如，需要加密用户敏感信息，避免泄露风险；对用户权限进行合理处理，避免滥用；定期更新应用程序，修复安全漏洞等。

figma 模板尺寸
Figma是一款流行的界面设计工具，它提供了多种模板尺寸以
适应不同的设计需求。

在Figma中，你可以选择不同的模板尺寸来
开始你的设计工作。

以下是一些常见的Figma模板尺寸：
1. 移动设备模板，针对移动应用程序设计的模板尺寸通常为
360x640像素或375x812像素。

这些尺寸适用于各种移动设备屏幕
大小，包括智能手机和平板电脑。

2. 网页模板，用于网页设计的模板尺寸通常为1440x900像素
或1920x1080像素。

这些尺寸适用于常见的桌面显示器分辨率，可
以帮助设计师在不同的屏幕尺寸上预览其设计。

3. 平板电脑模板，针对平板应用程序设计的模板尺寸通常为
768x1024像素或1024x768像素。

这些尺寸适用于各种平板电脑屏
幕大小，包括iPad和Android平板电脑。

除了上述常见的模板尺寸外，Figma还提供了自定义尺寸选项，允许用户根据其特定的设计需求输入自定义的宽度和高度值。

这使
得Figma成为一个灵活且适用于各种设计场景的工具。

总的来说，Figma提供了多种模板尺寸选项，以满足不同设备和平台的设计需求。

设计师可以根据具体的项目要求选择合适的模板尺寸，并在此基础上展开他们的设计工作。

移动端设计规范移动端设计规范随着智能手机的普及和移动互联网的快速发展，越来越多的用户倾向于在移动设备上进行各种操作和使用应用。

而移动端设计规范则成为了确保用户体验和用户界面一致性的关键因素之一。

下面将介绍一些移动端设计规范的基本要点。

首先，响应式设计是移动端设计的核心原则之一。

因为移动设备的屏幕尺寸各异，从小屏到大屏都有可能，因此需要针对不同的屏幕尺寸做出相应的适配。

响应式设计可以根据屏幕尺寸的大小和设备的能力动态地调整布局、字体大小、图片尺寸等，以确保用户在不同设备上都能够获得相近的体验。

其次，简洁明了的界面设计是移动端设计的重要原则之一。

由于手机屏幕较小，用户需要快速找到自己想要的功能，因此需要尽量减少冗余信息。

在界面设计中，可以使用简洁的图标、清晰的标签和简洁的文字，以使用户能够快速理解和使用界面上的各个元素。

再次，直观易用的操作是移动端设计的关键因素之一。

因为手机的触摸屏幕没有物理按键，因此用户主要是通过手指滑动、触摸等操作与设备进行交互。

在设计中，需要合理安排各个交互元素的位置和大小，以确保用户能够轻松地进行操作。

同时，为了降低用户的学习成本，可以采用常见的操作方式和界面布局，以使用户能够迅速上手。

此外，高效的性能和流畅的动画也是移动端设计的要点之一。

由于移动设备的性能相对较弱，因此在设计中需要尽量减少页面加载时间和内存占用，以提高用户体验。

同时，可以适当使用一些流畅的动画效果，如过渡、缩放和平移等，来增强用户的交互体验。

最后，设计规范的一致性也是移动端设计的重要要素之一。

在设计中，需要保持整体风格和交互方式的一致性，以便用户可以更容易地理解和使用应用。

可以通过使用相同的颜色、字体、图标和布局来实现一致性，以确保用户在不同的页面和功能之间有良好的连贯性。

综上所述，移动端设计规范是确保用户体验和用户界面一致性的关键因素之一。

响应式设计、简洁明了的界面设计、直观易用的操作、高效的性能和流畅的动画以及一致性都是移动端设计规范的基本要点。

app设计尺寸规范在设计一个应用程序时，尺寸规范是非常重要的。

尺寸规范可以保证应用程序在不同设备上的一致性和易用性。

下面是一些关于设计应用程序尺寸规范的建议。

1. 分辨率：应用程序的分辨率应该适应不同设备的屏幕分辨率。

对于移动设备，通常使用以下常见分辨率：320x480、640x960、1080x1920等。

对于平板电脑，通常使用1024x768、2048x1536等分辨率。

2. 页面布局：页面布局应该根据设备的屏幕尺寸和方向进行调整。

对于移动设备，通常使用垂直布局。

对于平板电脑，通常使用水平布局。

在设计布局时，应考虑到不同设备的可视区域大小。

3. 图标尺寸：图标是应用程序中重要的组成部分之一。

在设计图标时，应该选择合适的尺寸。

通常情况下，移动设备上的图标尺寸为48x48或72x72像素，平板电脑上的图标尺寸为96x96或144x144像素。

4. 文字大小：文字大小直接影响用户的阅读体验。

在选择文字大小时，应该考虑到不同设备上的字体渲染效果和可读性。

通常情况下，移动设备上的文字大小应该在9-12磅之间，平板电脑上的文字大小可以适当增大。

5. 图片尺寸：应用程序中的图片应该使用合适的尺寸。

过大的图片会增加应用程序的加载时间和内存占用，过小的图片会导致模糊和失真。

在选择图片尺寸时，应该考虑到图片显示的区域大小和分辨率。

6. 边距和间距：边距和间距可以使应用程序的界面更加清晰和易读。

在设计边距和间距时，应该考虑到不同设备的屏幕密度和大小。

通常情况下，边距和间距应该大于等于8个像素。

7. 按钮尺寸：按钮是用户与应用程序交互的重要方式之一。

按钮的尺寸应该足够大，方便用户点击。

通常情况下，按钮的最小尺寸为48x48像素。

总之，设计应用程序的尺寸规范是非常重要的。

合适的分辨率、布局、图标尺寸、文字大小、图片尺寸、边距和按钮尺寸可以提升应用程序的用户体验和可用性。

通过遵循这些尺寸规范，可以使应用程序适应不同设备的屏幕，并提供一致的用户体验。

移动应用界面设计规范移动应用界面设计是移动应用开发中至关重要的一环。

良好的界面设计能够提升用户体验，增加用户粘性，使应用更加易用和吸引人。

为了确保移动应用的界面设计达到最佳效果，以下是一些移动应用界面设计的规范和要点。

一、界面布局1. 界面布局应简洁明了，功能模块应合理划分和组织，以便用户快速找到所需功能。

2. 采用一致的导航和菜单设计，使用户在不同页面间能够轻松切换和导航。

3. 重要功能和信息应放置在界面的显著位置，方便用户快速识别和操作。

4. 合理设置界面元素的大小和间距，以适应不同屏幕尺寸的移动设备。

二、颜色和样式设计1. 选择适合应用风格和主题的配色方案，保证界面整体和谐统一。

2. 注意颜色的对比度，以确保文字和图标在不同背景下的清晰可见。

3. 利用元素的形状、边框、阴影等设计元素，增加界面的层次感和美观度。

4. 尽量使用标准化的图标和按钮样式，减少用户对不熟悉图标的解读成本。

三、字体和文字1. 选择合适的字体大小和样式，使文字在不同设备上都能清晰可读。

2. 利用字体的粗细、颜色等样式设置，突出界面中重要信息和功能的关键性。

3. 避免使用过长的文字描述，简洁明了的文字能更好地吸引用户的注意力和理解。

四、交互设计1. 操作和反馈应迅速有效，用户的交互体验应流畅自然。

2. 合理设置按钮和链接的大小和响应区域，以免用户操作时出现误触。

3. 提供明确的操作指引和提示，引导用户完成复杂或关键操作。

4. 操作后的状态变化和结果反馈应及时显示，以增加用户对操作的掌控感。

五、排版和布局1. 使用合适的排版和布局方式，使界面信息有序地呈现给用户。

2. 采用分组和层叠的布局，以区分不同模块和功能，避免界面显得杂乱。

3. 对于长页面的内容，采用适当的滚动和分页方式，以提高内容的可浏览性。

六、图标和图片1. 使用高质量的图标和图片，保证在不同屏幕分辨率下都能清晰可见。

2. 图片的尺寸和格式应适应移动设备的特点和要求，减少加载时间和流量消耗。

移动端设计规范移动端设计规范是指在移动设备上设计和开发应用程序时应遵循的一系列规范和原则。

移动设备具有独特的特点，例如屏幕尺寸小、交互方式多样、网络环境不稳定等，因此需要特殊的设计规范来满足用户的需求和提供良好的用户体验。

1. 响应式设计：移动设备屏幕尺寸有限，需要采用响应式设计原则，使得应用程序能够自动适应不同屏幕尺寸的设备。

应用程序的布局和元素大小需要根据屏幕尺寸进行调整，以确保用户能够方便地使用应用程序。

2. 简洁明了：移动设备屏幕空间有限，需要避免信息过载。

应用程序的界面应简洁、明了，只显示最重要的信息和功能。

不必要的元素和功能应尽量减少，以提高用户对应用程序的理解和操作效率。

3. 易用性：移动设备的操作方式多样，包括触摸、手势、语音等。

应用程序的操作要简单、直观，并且需要充分考虑用户的使用习惯和需求。

例如，按钮的大小和间距要适应手指的点击，滑动操作要有明显的视觉反馈等。

4. 导航方式：在移动设备上，屏幕空间有限，因此需要考虑如何进行有效的导航。

通常采用的方式有标签栏、抽屉式菜单、滑动菜单等。

导航方式要直观、易懂，使得用户能够方便地切换不同的页面和功能。

5. 色彩和图标：移动设备的屏幕显示能力有限，因此需要合理选择色彩和图标，以确保用户能够清晰地识别和理解界面上的元素。

颜色要简洁明了，不宜过于花哨；图标要具备直观的意义和区分度。

6. 字体和排版：移动设备屏幕尺寸有限，因此需要合理选择字体和排版方式，以确保用户能够舒适地阅读界面上的文本内容。

字体要合适，不宜过小或过大；排版要有良好的间距和行高，以便用户能够方便地阅读文本。

7. 错误处理和反馈：移动设备的网络环境不稳定，用户的操作也容易出错。

因此，应用程序需要提供良好的错误处理和反馈机制，以帮助用户快速找到错误原因和解决方法，并且给予明确而友好的提示。

8. 性能优化：移动设备的处理能力有限，网络速度也相对较慢。

因此，应用程序需要进行性能优化，使得应用程序能够快速启动、响应迅速，并且能够在不稳定的网络环境下正常运行。

形考任务1选择题1.Android是谷歌于2007年宣布基于Linux平台的开源手机操作系统名称，Android一词本意是指（）答案：机器人2.UE/UX指的是什么？（）答案：用户体验3.UI界面设计规范中，屏幕大小为1080*1920px时，启动图标的尺寸应该是？（）答案：144*144px4.UI界面设计规范中，屏幕大小为1080*1920px时，搜索框上下内边距应该是？（）答案：25px5.UI设计不包括哪项内容？（）答案：前端开发6.UI设计交付物都包含哪些？（）答案：PSD效果图7.下列哪一种不属于UI设计范畴？（）答案：户外海报设计8.下面哪个不是UE/UX的工作内容？（）答案：按照规范输入pdf切图9.下面对用户体验的基本要素描述正确的是？（）答案：感官体验交互体验信任体验10.下面那种工具选项可以将Pattern（图案）填充到选区内：（）答案：图案图章工具11.以下说法正确的是（）答案：UI设计是指对互联网、移动互联网、软件等产品的人机交互、操作逻辑、界面美观的整体设计12.使用钢笔工具可以绘制最简单的线条是什么：（）答案：直线13.图象必须是何种模式，才可以转换为位图模式：（）答案：灰度14.在Photoshop中，快捷健Ctrl+Alt+C打开哪个操作面扳：（）答案：画布大小15.在photoshop中，快捷方式shift+ctrl+alt+t，多用于什么操作：（）答案：按圆形，以固定角度复制原始形状16.在photoshop当中，图像最基本的组成单元是（）答案：像素17.在何情况下可利用图层和图层之间的裁切组关系创建特殊效果：（）答案：使用一个图层成为另一个图层的蒙板18.在路径曲线线段上，方向线和方向点的位置决定了曲线段的什么：（）答案：形状19.如何移动一条参考线：（）答案：选择移动工具拖拉20.如果在图层上增加一个蒙板，当要单独移动蒙板时下面哪种操作是正确的：（）答案：首先要解除图层与蒙板之间的链接，再选择蒙板，然后选择移动工具就可以移动了21.字符文字可以通过下面哪个命令转化为段落文字：（）答案：转为段落文字22.移动图层中的图象时如果每次需要移动10个象素的距离，应按下列哪组功能键：（）答案：按住Shift键同时按键盘上的箭头键23.Photoshop中的渐变类型不包括（）。

APP尺寸规范篇一：app界面设计的规则移动端界面设计之尺寸篇Ios1. 尺寸及分辨率Iphone界面尺寸：320x480、640x960、640x1136、ipad界面尺寸：、6（单位都是像素，分辨率和网页一样，基本只要72ppi）一般用640x960或者640x1136尺寸设计。

Ps：作图最好用形状工具来画的，这样方便后期切图或者尺寸变化。

2. 界面基本元素组成Iphone的app界面一般由四个元素组成，分别是：状态栏，导航栏，主菜单栏（页脚）以及中间区域。

、这里用的是640x960的尺寸设计：状态栏：即使信号、运营商、电量等显示手机状态的区域，其高度为：40px导航栏：显示当前界面的名称，包含相应功能或者页面间的跳转按钮，其高度为：88px 主菜单栏（页脚）：类似页面的主菜单，提供整个页面的分类内容快速跳转，其高度为：98px内容区域：展示应用提供的相应内容，整个应用中布局更最为频繁的，其高度为：734px（960-40-88-98=734）Android3. 尺寸及分辨率Android界面尺寸：480x800、720x1280、0（单位都是像素，分辨率和网页一样，基本只要72ppi）一般用720x1280尺寸设计，这个尺寸在720x1280中显示完美，在0中看起来清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

4. 界面基本元素组成Android的app界面也是由四个元素组成，分别是：状态栏，导航栏，主菜单栏（页脚）以及中间区域。

、这里用的是720x1080的尺寸设计：篇二：设计——字号规范设计——字号规范主体：导航主标题：34/36px苹果标题：34px （ps：有些用36px）正文：32px-34px副文：28px-24px最小：20px正文：34px，会选择性的选用苹方粗体列表形式、工具化正文：32px(PS：由于屏幕使用变大正文大小趋势变成了34px)副文：28px时间：24px26px字号还用于划分类别的提示文案，因为这样的文字希望用户阅读，但不抢过主列表信息的引导。

移动互联网应用（APP）适老化通用设计规范一、适用范围各企业在提供适老化服务时，可根据实际情况，将适老版界面内嵌在APP中或开发单独的适老版APP，并保障服务的可持续运营。

本规范中所列条目，除特别说明适用范围（如适老版界面、单独的适老版APP）外，其余条目为共性要求。

二、技术要求1.可感知性1.1 字型大小调整在移动应用中，建议使用无衬线字体，应可对字型大小进行调整（随系统设置调整，或移动应用内部具备字体大小设置选项），主要功能及主要界面的文字信息（不包含字幕、文本图像以及与移动应用功能效果相关的文本）最大字体不小于30 dp/pt，适老版界面及单独的适老版APP中的主要文字信息不小于18 dp/pt，同时兼顾移动应用适用场景和显示效果。

1.2 行间距段落内文字的行距至少为1.3倍，且段落间距至少比行距大1.3倍，同时兼顾移动应用适用场景和显示效果。

1.3 对比度文本/文本图像呈现方式、图标等元素间的对比度至少为4.5：1（字号大于18 dp/pt时文本及文本图像对比度至少为3：1）。

1.4 颜色用途文本颜色不是作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。

例如，在用户输入密码错误的情景下，可使用文字或语音形式直接提示用户输入有误，避免仅使用颜色作为提示手段。

1.5 验证码如果移动应用中存在非文本验证码（如拼图类、选图类验证方式）等老年人不易理解的验证方式，则应提供可被不同类型感官（视觉、听觉等）接受的替代表现形式，例如文字或语音形式，以适应老年人的使用需求。

2.可操作性2.1 组件焦点大小适老版界面中的主要组件可点击焦点区域尺寸不小于60 ×60dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于44 ×44dp/pt；单独的适老版APP中首页主要组件可点击焦点区域尺寸不小于48 ×48dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于44 ×44dp/pt。