移动设备的界面设计尺寸规范
移动互联网手机APP原型设计规范
移动互联网产品原型尺寸规范最近公司安排我带一下新来的交互设计师，我想给他制定一份交互设计规范。
这样一来，即使新来的交互设计师没什么基础，也可以根据这一份规范，做出大致标准的原型图。
因为Ui设计稿是先做iPhone6的，方便向上适配iPhone6Plus，也方便向下适配iPhone5和iPhone4的尺寸。
所以，交互设计稿的尺寸，就按照iPhone6的尺寸来做。
1、iPhone6的界面布局是：屏幕是4.7英寸的，设计稿的大小为750x1334px。
状态栏(status bar)：就是电量条，其高度为：40px；导航栏(navigation)：就是顶部条，其高度为：88px；主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px截图如下：推荐3款测量工具为：MarkMan马克鳗，Dorado标注，PXcook像素大厨。
2、关于iPhone6的图标的尺寸：导航栏的图标高度为44px左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。
关于iPhone6的文字的尺寸：导航栏的文字大小最大值是34px，标签栏的图标下方的文字大小为20px。
内容区域的文字大小是：24px，26px，28px，30px，32px，34px。
3、（iPhone6设计稿尺寸是@2x），做原型图的时候，可以做成@2x的，即750x1334px；也可以做成@1x的，即375*667px。
4、设置界面的图标高度和开关滑动按钮的图标高度：58px。
参考下图：5、关于颜色，自从我做了3套高保真的交互原型图之后，发现后面还是改成画线框图来的快。
线框图的黑白灰之纯美，有利于专心布局界面，而不用在意界面的颜色搭配。
黑白灰颜色常用的数值是：文字黑色#282828文字深灰色#656565文字浅灰色#98989边框浅灰色#C3C3C3背景淡灰色#f2f2f2按钮背景纯白色#ffffff6、常用的可点击高度，在iPhone6的原型图上，统一成88px。
移动应用界面设计的尺寸规范
移动应用的界面设计画布尺寸设计多大（特别是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. 安全规范移动端安全规范是指在保护用户数据和应用安全时需要遵守的规范。
例如，需要加密用户敏感信息，避免泄露风险；对用户权限进行合理处理，避免滥用；定期更新应用程序，修复安全漏洞等。
移动端尺寸规范
移动端尺寸规范移动端尺寸规范是针对移动设备上的用户界面设计的一组标准化尺寸规范。
移动设备的屏幕尺寸多种多样，不同的设备有不同的屏幕尺寸和分辨率，因此设计师需要遵循一定的规范来确保设计在不同设备上的一致性和可用性。
下面是关于移动端尺寸规范的一些要点。
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之间。
figma 模板尺寸
figma 模板尺寸
Figma是一款流行的界面设计工具，它提供了多种模板尺寸以
适应不同的设计需求。
在Figma中，你可以选择不同的模板尺寸来
开始你的设计工作。
以下是一些常见的Figma模板尺寸：
1. 移动设备模板，针对移动应用程序设计的模板尺寸通常为
360x640像素或375x812像素。
这些尺寸适用于各种移动设备屏幕
大小，包括智能手机和平板电脑。
2. 网页模板，用于网页设计的模板尺寸通常为1440x900像素
或1920x1080像素。
这些尺寸适用于常见的桌面显示器分辨率，可
以帮助设计师在不同的屏幕尺寸上预览其设计。
3. 平板电脑模板，针对平板应用程序设计的模板尺寸通常为
768x1024像素或1024x768像素。
这些尺寸适用于各种平板电脑屏
幕大小，包括iPad和Android平板电脑。
除了上述常见的模板尺寸外，Figma还提供了自定义尺寸选项，允许用户根据其特定的设计需求输入自定义的宽度和高度值。
这使
得Figma成为一个灵活且适用于各种设计场景的工具。
总的来说，Figma提供了多种模板尺寸选项，以满足不同设备和平台的设计需求。
设计师可以根据具体的项目要求选择合适的模板尺寸，并在此基础上展开他们的设计工作。
app设计尺寸规范
app设计尺寸规范在设计一个应用程序时，尺寸规范是非常重要的。
尺寸规范可以保证应用程序在不同设备上的一致性和易用性。
下面是一些关于设计应用程序尺寸规范的建议。
1. 分辨率：应用程序的分辨率应该适应不同设备的屏幕分辨率。
对于移动设备，通常使用以下常见分辨率：320x480、640x960、1080x1920等。
对于平板电脑，通常使用1024x768、2048x1536等分辨率。
2. 页面布局：页面布局应该根据设备的屏幕尺寸和方向进行调整。
对于移动设备，通常使用垂直布局。
对于平板电脑，通常使用水平布局。
在设计布局时，应考虑到不同设备的可视区域大小。
3. 图标尺寸：图标是应用程序中重要的组成部分之一。
在设计图标时，应该选择合适的尺寸。
通常情况下，移动设备上的图标尺寸为48x48或72x72像素，平板电脑上的图标尺寸为96x96或144x144像素。
4. 文字大小：文字大小直接影响用户的阅读体验。
在选择文字大小时，应该考虑到不同设备上的字体渲染效果和可读性。
通常情况下，移动设备上的文字大小应该在9-12磅之间，平板电脑上的文字大小可以适当增大。
5. 图片尺寸：应用程序中的图片应该使用合适的尺寸。
过大的图片会增加应用程序的加载时间和内存占用，过小的图片会导致模糊和失真。
在选择图片尺寸时，应该考虑到图片显示的区域大小和分辨率。
6. 边距和间距：边距和间距可以使应用程序的界面更加清晰和易读。
在设计边距和间距时，应该考虑到不同设备的屏幕密度和大小。
通常情况下，边距和间距应该大于等于8个像素。
7. 按钮尺寸：按钮是用户与应用程序交互的重要方式之一。
按钮的尺寸应该足够大，方便用户点击。
通常情况下，按钮的最小尺寸为48x48像素。
总之，设计应用程序的尺寸规范是非常重要的。
合适的分辨率、布局、图标尺寸、文字大小、图片尺寸、边距和按钮尺寸可以提升应用程序的用户体验和可用性。
通过遵循这些尺寸规范，可以使应用程序适应不同设备的屏幕，并提供一致的用户体验。
移动端ui设计规范
移动端ui设计规范移动端UI设计规范是指在移动设备上进行界面设计时需要遵循的一些原则和规范。
移动设备具有屏幕较小、操作方式独特等特点，因此在设计移动端界面时需要考虑诸多因素，以提供更好的用户体验。
下面是移动端UI设计规范的一些要素，共1000字。
首先，移动端UI设计规范要关注用户体验。
移动设备上的界面需要简洁、直观、易用，以满足用户在有限屏幕空间内快速找到需要的功能和内容。
为此，设计师应避免过多的装饰和冗余的信息，注重界面的整洁性和一致性。
此外，操作方式也需要符合用户的习惯，例如可以使用手势或滑动等方式来实现操作，提高用户的操作效率。
其次，移动端UI设计规范要关注内容呈现。
移动设备的屏幕较小，因此需要合理利用空间来展示内容。
设计师可以采用可折叠、可扩展等方式来展示大量的内容，避免用户需要频繁进行滚动。
同时，还需要关注内容的可读性，使用适合移动设备的字体大小和颜色，以保证用户能够清楚地阅读内容。
再次，移动端UI设计规范要注重界面布局和导航。
在设计界面布局时，应考虑到不同尺寸的移动设备，以确保在不同屏幕上的显示效果一致。
此外，导航也是移动端界面设计中的重要环节之一。
导航应简明清晰，避免使用繁琐的层级结构，以确保用户能够快速找到自己需要的功能或页面。
另外，移动端UI设计规范要关注交互反馈。
在移动设备上进行操作时，由于屏幕相对较小，用户往往需要更清晰的反馈来确认操作的结果。
因此，设计师可以通过按钮的颜色、动画效果等方式来强调点击操作，并及时给予用户反馈，以增加用户的操作体验。
最后，移动端UI设计规范还要考虑适配不同设备和平台。
移动设备的规格多种多样，因此设计师需要考虑不同设备的屏幕大小、分辨率等因素，以保证界面在不同设备上的显示效果。
同时，由于不同平台对UI设计的要求也有所不同，因此设计师需要了解不同平台的UI设计规范，以确保界面的一致性和兼容性。
综上所述，移动端UI设计规范是为了提供更好的用户体验而制定的一系列原则和规范。
正常的屏幕尺寸比例 -回复
正常的屏幕尺寸比例-回复正常的屏幕尺寸比例是指屏幕宽度和高度之间的比例关系。
在计算机和移动设备的领域，屏幕尺寸比例对用户体验和操作界面的设计具有重要影响。
本文将对正常的屏幕尺寸比例进行详细介绍，并探讨其在不同设备上的应用和影响。
一、屏幕尺寸比例的定义和意义屏幕尺寸比例，通常用宽度和高度之间的比例关系来表示。
最常见的屏幕尺寸比例包括16:9、16:10和4:3。
其中，16:9是目前最主流的屏幕尺寸比例，适用于大多数电视、电脑和移动设备。
它的宽屏设计可以提供更广阔的视野，使观看视频、玩游戏和浏览网页更加舒适。
屏幕尺寸比例对用户体验和界面设计有着重要影响。
通过合理使用屏幕尺寸比例，可以提高视觉效果，增强用户对内容的沉浸感。
同时，不同尺寸比例的屏幕还具有适用于不同场景和用途的特性，能够满足用户在不同设备上的需求。
二、不同设备上的屏幕尺寸比例应用和影响1. 电视屏幕尺寸比例在电视领域，16:9的屏幕尺寸比例成为了主流。
它适用于观看电影、电视节目和体育比赛等娱乐活动，提供更宽广的视野和更丰富的色彩。
同时，随着高清、超高清和4K技术的发展，16:9的屏幕尺寸比例能够更好地展现高质量的图像和视频内容。
2. 电脑屏幕尺寸比例在电脑领域，16:9和16:10的屏幕尺寸比例较为常见。
16:9的宽屏设计适用于多任务处理和观看视频，提供更大的工作区和更丰富的娱乐体验。
而16:10的屏幕尺寸比例则更加适合设计师和电影制作人等专业人士，因为它提供了更高的像素密度和更广阔的色彩范围。
3. 移动设备屏幕尺寸比例在移动设备领域，16:9和4:3的屏幕尺寸比例被广泛应用。
16:9的屏幕尺寸比例适用于观看视频、玩游戏和浏览网页等娱乐活动。
而4:3的屏幕尺寸比例则更加适合阅读电子书、浏览文档和进行办公工作，因为它提供了更宽广的可视区域和更舒适的阅读体验。
三、正常屏幕尺寸比例的选取与设计在设计屏幕尺寸比例时，需要综合考虑用户需求、设备特性和内容类型等因素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
移动设备的界面设计规范
作图的时候确保都是用形状工具（快捷键：U）画的，这样更方便后期的切图或尺寸变更
关于页面比例，请按照ios以及android制作两套尺寸页面
IOS篇
1、尺寸及分辨率
iPhone 界面尺寸：320×480、640×960、640×1136
（以上单位都是像素，至于分辨率一般网页UI和移动UI基本上都是72 ppi）本次使用640×1136的尺寸设计。
2、界面基本组成元素
iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域
这里取用640×1136的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸：
状态栏：信号、运营商、电量等显示手机状态的区域，其高度为：40 px
导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为：88 px
主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px
内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：910 px
P.S. 在最新的 iOS8 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起
3、字体大小
iPhone 上的字体英文为：HelveticaNeue至于中文，Mac下用的是黑体-简，Win 下则为华文黑体。
字体大小请保持在24px~36px之间（具体大小，请作图后放置手机中观看实际效果）
4、按钮大小：点击区域（包括按钮+空白区域）需要>44*44px
Android篇
1、尺寸及分辨率
Android 界面尺寸：480×800、720×1280、1080×1920… （单位：像素）
Android 比 iPhone 的尺寸多了很多套，本次设计建议取用720×1280 这个尺寸，这个尺寸720×1280中显示完美，在1080×1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。
2、界面基本组成元素
Android 的 APP 界面和 iPhone 的基本相同：状态栏、导航栏、主菜单栏以及中间的内容区域。
Android 中我们取用720×1280的尺寸设计：
状态栏高度为：50 px
导航栏高度为：96 px
主菜单栏高度为：96 px
内容区域高度为：1038 px（1280-50-96-96=1038）
若Android功能键移到了屏幕中，高度也是和菜单栏一样的：96 px
3、字体大小
Android 上的字体为：Roboto，是android原生的字体，与微软雅黑很像。
字体大小范围为16px~32px（具体大小，请作图后放置手机中观看实际效果）
4、按钮大小：点击区域（包括按钮+空白区域）需要>44*44px
要求篇
1、突出设计重点，减少识别误区
2、界面简洁，体现重要信息
3、使用普通接受习惯，不轻易尝试新的设计
4、需要标注尺寸，颜色值，字体大小
5、psd文件图层清晰，名称分组清楚，删除不必要的图层
6、logo图标请单独提供，尺寸512*512，输出矢量图
7、需要提供按钮等点击效果样式设计图。