APP界面UI设计规范

UI设计规范

一、APP界面设计规范

（一）界面尺寸

1、IOS界面尺寸：常见为（宽度640px、高度1136px）

2、Android界面尺寸：常见为（宽度720px、高度1280px）

其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px）

（二）导航尺寸

1、IOS导航尺寸：高度60px，留白7px

2、Android导航尺寸：高度64px或48px，留白8px

（三）标签尺寸

1、IOS标签尺寸：高度98px

2、Android标签尺寸：高度96px

（四）工具栏尺寸

1、IOS工具栏尺寸：高度88px

2、Android工具栏尺寸：高度96px

（五）列表高度

1、IOS列表高度：高度88px

2、Android列表高度：高度96px

（六）资源状态

对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。

（七）字体

1、IOS默认英文为HelveticalNeue，中文为黑体

2、Android列表高度：默认为Droidsans fallback

（八）字号

字号通常按照标题及征文级别递减为42、36、34、30、24 （九）ICON

1、IOS常用尺寸有1024*1024、512*51

2、120*120、60*60

2、Android常用尺寸有512*512、200*200、72*72、48*48 （十）资源插图

1、长方形插图高度一般不超过背景宽度的二分之一

2、缩略图两张并列高度一般不超过200px，宽度要适中有留白

3、图文混排中图片一般不高过150*110

UI设计尺寸规范最新最全UI设计规范

iPhone 界面尺寸 设备分辨率PPI 状态栏高度导航栏高度标签栏高度 iPhone6P、6SP、7P 1242×2208 px 401PPI 60px 132px 146px iPhone6 - 6S - 7 750×1334 px 326PPI 40px 88px 98px iPhone5 - 5C - 5S 640×1136 px 326PPI 40px 88px 98px iPhone4 - 4S 640×960 px 326PPI 40px 88px 98px iPhone & iPod Touch 第一代、第二代、第三代 320×480 px 163PPI 20px 44px 49px UI设计规范：IOS、Android系统主流尺寸整理

iPhone图标尺寸： 设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏 iPhone6P - 6SP - 7(@3×)1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px iPhone6 - 6S - 7 (@2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone5 - 5C - 5S (@2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone4 - 4S (@2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone & iPod Touch第一代、第 二代、第三代1024×1024 px 120×120 px 57×57 px 29×29 px 38×38 px 30×30 px

APP界面UI设计规范

一、APP界面设计规范 （一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px） 其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px） （二）导航尺寸 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （六）资源状态 对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。 （七）字体

1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （八）字号 字号通常按照标题及征文级别递减为42、36、34、30、24（九）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48（十）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110

ios和Android APP设计规范要点

相信很多人都在开发设计APP时会遇到很多界面上的问题，要以多大尺寸来设计？分辨率是多少？该怎么切图给开发等等 下面的文字就给出一点点技巧总结，但也要给合团队在开发时的习惯。每个工程师们所使用的控件，书写布局习惯来实际移交的图是不一样的，但八九不离十，都是遵循一个原则，便捷开发、自适应强的开发模式 IOS篇 一、尺寸及分辨率 iPhone界面尺寸：320*480、640*960、640*1136 iPhone6：4.7英寸(1334×750)，iPhone6 Plus：5.5英寸(1920×1080) 设计图单位：像素72dpi。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计，现在iphone6和plus出来后有很多人会使用6的设计效果。 如果是我来做的话，我会使用640×1136，对plus做单独的修改适配，因为plus的屏幕实在是大了，遵循屏大显示更多内容的原则这里本应该是需要修的了。有更好办法的话希望大家可以分享一下。 Ps：作图的时候确保都是用形状工具(快捷键：U)画的，这样更方便后期的切图或者尺寸变更。 二、界面基本组成元素

iPhone的app界面一般由四个元素组成，分别是：状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。 这里取用640*960的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。 状态栏(status bar)：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px 导航栏(navigation)：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px 主菜单栏(submenu，tab)：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px 内容区域(content)：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px 至于我们经常说的iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。

Android人机界面(UI)设计规范(带目录)

Android 人机界面设计规范 1Android 设计的依据 1.1 框架结构及流程 是什么使得android 有着独特的用户体验？ 后台处理支持多任务功能 正在进行和事件驱动的提示信息 通过Widgets 和live folders 来实现实时信息的预览 用户想用时，任一应用程序都可以挑选和选择 android 不是关于程序的，它是关于活动，把任务分层， 1.2 架构基础 硬件平台 android 设备代表的是硬件和软件的完美组合。硬件辅助导航操作，并给android 提供更多更好的功能。当菜单没有开启，要把屏幕最大化时，菜单按钮可以在屏幕上提供更多的内容。返回按钮允许使用返回堆（back stack）。 竖屏与横屏 一般来说，用户界面开发竖屏与横屏。在新横屏也仍存在于新的Android 手机中。99％的android 布局支持横屏。 焦点和菜单 在触摸模式里没有焦点，只有轨迹球。Android 平台里没有鼠标焦点。确定你从未显示焦点。主菜单应该包括全部功能；它们与活动联系一起形成整体。菜单上的图标按重要性排序。如果有多于5 个图标，使用点击more menu 菜单来查看那些不太重要的菜单项。上下文菜单（长按）集中在一个特定对象。 总是把那些与所选项最相关的行为放在长按菜单的顶部。 需要记住的几点： 设计时要考虑速度和简洁 尽量分层来分等级 屏幕上的活动尽量最小 使用下载进度条，下载数据时，而不是让用户等待去看一个加载完全的页面。 考虑活动流而不是线性行为 1.3 屏幕上的行为

android 设计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持android 行为的标准，避免混淆用户。 1.4 表达 细节使得产品集中在细节。程序的美学会帮助你集中注意在那些应用体验核心的关键任务上。API DEMO 是开始你的工具包的好地方。 2 用户界面原则 这部分试图讲述创造一个好的用户界面的一些基本的交互设计原则。这些原则是基本的，不止能应用于android 的用户界面设计，也可以应用于其他。苹果建议开发者花费60％的开发时间来进行设计工作。下面的用户界面原则将为好的设计提供一个基础。 2.1 隐喻 隐喻是构建一个基于操作任务心智模型的模块；用它们来传递应用程序的概念和功能。基于真实世界的应用对象可以帮助用户很快的理解该应用程序。当你设计你的应用程序时，要注意andriod 中存在的隐喻，不要重新定义它们。同时，检查你的应用程序执行的任务，看是否有些自然隐喻你可以使用。 2.2 反映用户的心智模型 用户已经有了一个来描述你的程序正在进行的任务的心智模型。这个心智模型产生于真实世界经验、其它软件和一般电脑基本知识的结合。比如说，用户在真实世界里有写字、寄信的经验，也会产生特定的期待，像写一封新的信，选一个接受者，然后寄出信。一个忽略用户心智模型的电子邮件程序用起来会很困难和不舒服。这是因为程序强加给用户一个不熟悉的概念模型，而不是建立一个用户已有的知识经验模式。 在设计程序用户界面之前，试着去发现你的用户的心智模型,这样帮助用户去执行任务。心智模型中内在的隐喻，它代表了任务的概念组成。在写信这个例子中，隐喻包括信件、邮包和信封。在涉及到照片的任务的思考模式中，隐喻包括照片、照相机和专辑。我们要努力地发现用户的期望，包括任务组成、组织、窗口布局的工作流、菜单和工具栏组织、控制面板的使用。 要通过努力地何必把个下面的特征与用户心智模型相融合： 熟悉性 用户的心智模型主要是建立在经验的基础上 简单化 一项任务的心智模型通常是流线型，关注任务的基本组成部分。尽管对于一个给定的任务有很多可选的细节，但是基本的组成部分占大部分，并且不会占用用户的注意。 可利用性Availability

app颜色规范

竭诚为您提供优质文档/双击可除 app颜色规范 篇一：app设计的用色规范 我们先来回顾下。什么是手机app界面设计规范？ app设计规范指对app界面进行风格统一 ，对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包的大小。 这一节主要讲解：app设计的用色规范。我们先看下色轮图。 然后我们再来具体的看下app设计的色彩规范实例。 这是一个非常详细的手机app色彩使用规范实例。值得大家好好的看看。《找车app》 标准色规范： x轴：重要、一般、弱。 y轴：色彩代码、色块、使用场景 标准色重要：重要颜色中一般不超过3种，这里的例子

重要颜色之一红色需要小面积使用,用于特别需要强调和突 出的文字、按钮和icon；而黑色用于重要级文字信息比如标题、正文等。 标准色一般：都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。 标准色较弱：普遍用于背景色和不需要显眼的边角信息。 再次举例说明如何来定制属于自己手机app的色彩规范。这是一种表示方式。有这个规范，我们设计app和重构app 会清晰明了很多。 这是25学堂的老谭同学给大家精心整理的2种不能标 准色的表现形式。 app界面要给人简洁整齐，条理清晰感，依靠的就是界 面元素的排版和间距设计，还有色彩的合理、舒适度搭配。 其他的色彩运用原理以及需要遵循对比原则： 1：统一色调，针对软件类型以及用户工作环境选择恰 当色调： 如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等 2：如果没有自己的系列界面，采用标准界面则可以少 考虑此方面，做到与操作系统统一，读取系统标准色表

移动互联网手机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。 参考下图：

app设计规则 (6页)

本文部分内容来自网络整理，本司不为其真实性负责，如有异议或侵权请及时联系，本司将立即删除！ == 本文为word格式，下载后可方便编辑和修改！ == app设计规则 篇一：APP设计的用色规范 我们先来回顾下。什么是手机APP界面设计规范？ APP设计规范指对APP界面进行风格统一，对界面元素的样式、颜色和大小设 定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要，约定 设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包的大小。 这一节主要讲解：APP设计的用色规范。我们先看下色轮图。 然后我们再来具体的看下APP设计的色彩规范实例。 这是一个非常详细的手机APP色彩使用规范实例。值得大家好好的看看。《找 车APP》 标准色规范： X轴：重要、一般、弱。 Y轴：色彩代码、色块、使用场景 标准色重要：重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要 小面积使用,用于特别需要强调和突出的文字、按钮和icon；而黑色用于重要 级文字信息比如标题、正文等。 标准色一般：都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、 引导词比如提示性文案或者次要的文字信息。 标准色较弱：普遍用于背景色和不需要显眼的边角信息。 再次举例说明如何来定制属于自己手机APP的色彩规范。这是一种表示方式。 有这个规范，我们设计APP和重构APP会清晰明了很多。 这是25学堂的老谭同学给大家精心整理的2种不能标准色的表现形式。

APP界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计，还有色彩的合理、舒适度搭配。 其他的色彩运用原理以及需要遵循对比原则： 1：统一色调，针对软件类型以及用户工作环境选择恰当色调： 如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等 2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表 3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，着重号，以及图标等 4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试 5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文 字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足 够反 篇二：APP 界面 UI设计规则则 什么是UI？UI就是界面设计。专业的讲指对软件的人机交互、操作逻辑、 界面美观的整体设计。一个APP想要吸引并留住客户，美观实用简便的用户界 面设计是其重要的一环。在开发APP之初，就应重视选择经验丰富的开发团队，并 掌握UI设计的原则。 1依据手机的物理特性设计界面的原则 1）应尽量减少文字的输入。由于手机在输入上的低效性，澳环认为，在设计的过程中，应尽量减少用户的输入，如果有可能可以设置默认值，或者让用户选 择目标值。 2）信息结构好，屏与屏之间的逻辑关系清晰。由于手机屏幕相对较小，只能展示较少的信息量，这时候，在APP网站建设中，就需要有清晰的信息架构，让 用户能一目了然的知道APP的各个模块及能够自由切换。 3）移动APP的重要功能可以在界面中适当的提示，采取对重要高频使用的功能或信息放在首页或什么显眼的位置。2依据手机的移动特性设计界面的原则

APP界面设计规范二

一、Android设计常识 开始介绍之前先帮大家梳理一下Android常用单位，方便各位亲们更好的掌握并了解Android端设计规范。 Android常用单位 per inch)：数字影像的解析度，也就是每英寸所拥有的像素数，即像素密度；PPI计算公式：ppi=√（长度像素数2 + 宽度像素数2）/屏幕对角线英寸数 per inch)：是指印刷上的计量单位，也就是每英寸上能印刷的网点数，我们设计用于显示器的默认为（72像素/英寸）就好了； 屏幕尺寸（Screen Size）：一般我们所说的手机屏幕尺寸，比如3英寸、英寸等，都是指对角线的长度，而不是手机的面积； 分辨率（Resolution）：是指手机屏幕垂直和水平方向上的像素个数，比如分辨率为：720*1280，是指设备水平方向有720个像素点，垂直方向有1280个像素点 pixels)：像素，不同设备显示效果相同 （ point）：一个标准的长度单位，ios的逻辑单位，1Pt=1/72英寸，用于印刷业，非常简单易用；标注字体大小（72是早期台式机的DPI） （Scaled-independentpixels）：放大像素，安卓的字体单位； （Density-independentpixels）：是指设备的独立像素，不同的设备有不同的显示效果，它与设备硬件有关系； sp和dp基本一样，是android开发里特有的单位，都是为了保证文字在不同密度的显示屏上显示相同的效果；dp与设备硬件有关，与屏幕密度无关，sp与屏幕密度和设备硬件均无关； 换算关系 android开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关键。* dp：以160PPI屏幕为标准，则1dp=1px。 dp和px的换算公式：dp*ppi/160 = px。 对于320ppi的屏幕，1dp x 320ppi/160= 2px。 * sp：它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为100%时， 1sp=1px。 sp 与px 的换算公式：sp*ppi/160= px。

移动设备的界面设计尺寸规范

移动设备的界面设计规范 作图的时候确保都是用形状工具（快捷键：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 要求篇

APP应用开发的设计规范与标准

APP应用开发的设计规范与标准 APP设计规范： APP界面设计规范指导APP设计过程中的设计标准。根据统一的设计标准，使得整个APP在视觉上统一。提高用户对APP的产品认知和操作便捷性。 APP设计规范的重要性： 统一的标准，一、便于在设计过程中的团队合作，二、提高用户对APP的产品认知和操作便捷性。 APP设计规范具体内容： 1.遵循统一的准则，确定标准并遵循； 2.颜色使用恰当，遵循对比原则：色彩标准、色彩对比，突出内容、显示测试； 3.光标、图标和指示图片、地图等：统一的构图布局，色调、对比度、色阶和风格； 4.Font:中文采用宋体，英文采用Microsoft Sans Serif。大小：MSS字体8磅，宋体小五号字（9磅）五号字体（10磅）； 5.文字表达：在提示信息、帮助文档中的。用词、修饰及标点符号等等； 6.控件风格、布局； 7.布局的顺序：从左到右，从上到下；

8.快捷键、弹出菜单； 9.用户交互：按钮状态、弹出窗口位置、执行动作提示信息（视觉和听觉，甚至的触觉的）； 10.联机帮助：HELP文档。 产品设计、用户体验、交互设计、视觉设计、开发、运营 —————————————————【←总结】·【参考→】————————————————————— 【开发苹果APP界面标准规范】 一：遵循一致的准则，确立标准并遵循 无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。 这样得到的好处： 1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解 2：降低培训、支持成本，支持人员不会行费力逐个指导。3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加做法： 项目组有经验人士，确立UI规范：

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

【总结】移动应用界面设计的尺寸设置及规范 时间2014-05-04 15:15:07 青溪·札记 原文appdesign-sizesetting/ 主题用户界面设计移动应用 刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi 模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目） * dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度） dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。 ppi的运算方式是：PPI = √（长度像素数2 + 宽度像素数2） / 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。 以iphone5为例，其ppi=√（1136px2 + 640px2）/4 in=326ppi（视网膜Retina屏） 对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近 320 dpi （xhdpi模式），480 x 800 的手机很可能接近 240 dpi （hdpi模式），而320 x 480 的手机则很接近 160 dpi（mdpi模式）。

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

移动应用的界面设计画布尺寸设计多大（特别是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） Android SDK模拟机的尺寸 屏幕大小低密度（120）ldpx 中等密度（160）mdpi 高密度（240）hdpi 超高密度（320） xhdpi 小屏 幕 QVGA（240×320）480×640 普通屏幕WQVGA400（240X400） WQVGA432（240×432） HVGA（320×480） WVGA800（480×800） WVGA854（480×854）600×1024 640×960 大屏幕WVGA800 *（480X800） WVGA854 *（480X854） WVGA800 *（480×800）WVGA854 *（480×854）600×1024 超大屏幕1024×600 1024×768 1280×768WXGA （1280×800） 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目）* dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）

ios,app图标尺寸规范

竭诚为您提供优质文档/双击可除ios,app图标尺寸规范 篇一：ios界面设计尺寸规范 ios界面设计尺寸规范 一、尺寸及分辨率 iphone界面尺寸：320*480、640*960、640*1136、750*1334、1080*1920等。 ipad界面尺寸：1024*768、2048*1536等。 单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。ps ：作图的时候确保都是用形状工具（快捷键：u）画的，这样更方便后期的切图或者尺寸变更。 二、界面基本组成元素 iphone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。 640*960的尺寸设计下这些元素的尺寸。 状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px

导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px [下图说明：] 至于我们经常说的iphone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。 ps：在最新的ios7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计ios7风格的界面的时候多多注意下~ 三、字体大小 heitisc（黑体-简，黑体-简的英文名称为heiti sc。heiti为黑体的拼音，sc代表简体中文（simplifiedchinese）），是macosxsnowleopard（版本10.6）包含的简体中文字型，也是iphoneos 3.0（版本 4.0后改名为ios）及ipodnano第五代以来的预设简体中文字型。 黑体-简系为黑体，取代华文黑体成为macosxsnow leopard的预设简体中文字型。在过去，华文黑体是

APP+UI设计规范

APP UI设计规范（可公开版） 前言 APP UI设计，有何规律？从抽象到具体，前后台并行，大概要经过几个阶段，每个阶段，都有一些明确的阶段输出doc，具体： （上图是在著名的《用户体验要素》原图上进行改编） KPA#1：第一痛点创意

首先，要确定你的“第一痛点”（first-item）还没有人做过，最好的调查方式是到APP Store上搜索已有的APP程序。如果你发现已经有某个APP包含类似的痛点，那你需要比它做的“更好”，“更好”可以体现在体验（exp）创新上，也可以体现在功能（func）革命上。 中国的法律环境缺乏对APP痛点相关智识产权的严格保护，但并不意味着可以随心所欲地clone或“山寨”别人的痛点创意。为什么呢？任何APP都不是孤立存在的，受到APP 的资源、APP用户培育的节奏、社会大环境对APP生命周期的影响，简单clone成功可能性很小。 另一方面，第一痛点创意风险很大，所谓失之毫厘，谬以千里，推荐采用smc的《顾客需求确认表》做第一人称检验故事场景挖掘，最好能输出类似下面的脚本化体验故事/片段： 1.1）体验片段#1。比如定机票应用中，有头等舱和经济舱。经济舱是一个普通的人， 而头等舱是一个戴着帽子，系着领结，胸前别着手帕的这么一个人，很酷的老板角色，体现出了头等舱和经济舱之间的区别。要做头等舱的人，一般都愿意自己看到自己这么一个形象。 1.2）体验片段#2。比如微信4.0，刚打开的时候有一张图片，非常文艺非常在都市的 感觉的一张图片，配文字“如你所见，微信，是一个生活方式”。其实它在干嘛呢？它是在提示用户，新增了自己相册功能。它虽然是给用户介绍新功能，但是它把整个情绪融在里面。 1.3）体验片段#3：比如安心停车，该APP具备查找附近有剩余车位的停车场位置，以 及根据收费情况进行优先显示的基本功能，而当附近没有停车位时该APP应该按照“违章停车罚款概率”由低往高推荐免费停车地点，“违章停车罚款概率”来自违章停车处罚数据库中的地点数据，必须得到交警部门的支持。 KPA#2：‘交互界面’exp/func思维导图 ‘交互界面’（简称exp/func）是比草图还简单的交互界面，往往用一句话描述,包含必要的交互信息，比如点、选、录入等输入和文字、图片、动画、特效等输出。从“第一痛点创意”相关的1~3个exp/func出发，利用“思维导图”（简称mind-map）的发散思维模式，延伸、细化、穷举、关联一切‘交互界面’，就有可能将“第一痛点创意”真正落地，成为货真价实的“第一痛点”。 ‘思维导图’一般的呈现方式是“发散图形”，一般如下：

app用户界面设计大作业演示版.doc

教学站：杭州前进学号：201812925310039 姓名：詹浩裕 医护app用户界面设计说明书 修订历史记录

目录 1 引言................................................... - 2 - 1.1编写目的............................................ - 2 - 1.2项目背景............................................ - 2 - 1.3主要功能 (2) 2 应当遵循的界面设计规范 ................................. - 2 - 2.1用户界面设计原则.................................... - 2 - 2.2界面一致性 (4) 2.3布局合理化原则.......................... 错误!未定义书签。 3 引导页..................................... 错误!未定义书签。 4 主界面................................................. - 5 - 4.1主界面.............................................. - 6 - 4.2登录页面................................ 错误!未定义书签。 4.3各子界面 (7) 5 美学设计 (10) 6 界面资源设计 (10) 6.1图标资源 (10) 7 投诉与建议 (11)

APP界面UI设计规范

UI设计规范 一、APP界面设计规范 （一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px） 其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px） （二）导航尺寸 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （六）资源状态 对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。

（七）字体 1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （八）字号 字号通常按照标题及征文级别递减为42、36、34、30、24（九）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48（十）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110

app尺寸规范

竭诚为您提供优质文档/双击可除 app尺寸规范 篇一：app界面设计的规则 移动端界面设计之尺寸篇 ios 1.尺寸及分辨率 iphone界面尺寸：320x480、640x960、640x1136、ipad 界面尺寸：1024x768、2048x1536（单位都是像素，分辨率和网页一样，基本只要72ppi） 一般用640x960或者640x1136尺寸设计。 ps：作图最好用形状工具来画的，这样方便后期切图或者尺寸变化。 2.界面基本元素组成 iphone的app界面一般由四个元素组成，分别是：状态栏，导航栏，主菜单栏（页脚）以及中间区域。、这里用的是640x960的尺寸设计： 状态栏：即使信号、运营商、电量等显示手机状态的区域，其高度为：40px 导航栏：显示当前界面的名称，包含相应功能或者页面

间的跳转按钮，其高度为：88px主菜单栏（页脚）：类似页面的主菜单，提供整个页面的分类内容快速跳转，其高度为：98px 内容区域：展示应用提供的相应内容，整个应用中布局更最为频繁的，其高度为：734px（960-40-88-98=734）android 3.尺寸及分辨率 android界面尺寸：480x800、720x1280、1080x1920（单位都是像素，分辨率和网页一样，基本只要72ppi）一般用720x1280尺寸设计，这个尺寸在720x1280中显示完美，在1080x1920中看起来清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。 4.界面基本元素组成 android的app界面也是由四个元素组成，分别是：状态栏，导航栏，主菜单栏（页脚）以及中间区域。、这里用的是720x1080的尺寸设计： 篇二：app设计——字号规范 app设计——字号规范 主体： 导航主标题：34/36px 苹果标题：34px（ps：有些用36px） 正文：32px-34px

手机页面IOS和安卓UI设计规范

本文整理汇总了一些界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。 目录 o界面设计尺寸及栏高度 o边距和间距 o内容布局 o界面图片设计比例 o建立统一风格的图标 o APP版式设计规范 o界面文字设计规范 o设计适配 o切图规范 o设计稿标注 一、界面设计尺寸及栏高度 目前主流的iOS 设备主要有iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸），它们都采用了Retina 视网膜屏幕，其中iPhone 6s/7/8 Plus 和iPhone X 采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。 通过上面的讲解和图示我们了解了iPhone 不同设备的物理尺寸，那么他们的像素分辨率又是多少呢？也就是说我们用Photoshop 做设计新建画布应该设置多大呢？另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？（注意：iOS 严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图示来为你解答上面的问题。

注意：在进行iphone x 设计的时候我们依然可以采用熟悉的iphone 7 的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。

app设计字体规范

app设计字体规范 篇一：APP设计规范文档 APP设计规范文档 注：（*本文档分辨率大小是以安卓1920x1080为准）1. ###数值 （1）*标准界边距:40PX （2）*列表左边距:40PX *列表右边距:40PX *列表上边距:40PX *列表下边距:40PX *列表左边距:40PX *列表右边距:30PX *列表上边距:30 PX *列表下边距:30PX （3）*标题字体大小: 56PX *主内容字体大小: 46PX *次级内容字体大小: 36PX

*底部导航内容字体大小: 28PX 2. ###颜色 （1）*主背景色:#F3F3F3 *登录页面背景色: #FaFaFa *主前景色: 以APP主色调为准 *次级前景色:以设计效果图为准，具体到时候填上。 （2）*标题颜色:#FFFFFF *主内容颜色: #333333 *次内容颜色: 以设计效果图为准，具体到时候填上。*高亮内容颜色:以设计效果图为准，具体到时候填上。 （3）*列表分割线的颜色:#D9D9D9 （4）*标题字体的颜色:#545454 *主内容字体的颜色:#999999 #545454 *次级内容字体的颜色:#249FFF #DF3130 #F9A531 篇二：iOS和Android的app界面设计规范

iOS和Android的app界面设计规范 字数876阅读96439评论36喜欢344 记录一下iOS和Andoird的界面设计规范，方便进行标准的产品设计，并与设计师顺畅沟通 iOS篇 界面尺寸 设备 iPhone6 plus iPhone6 iPhone5/5s/5c iPhone4/4s iPad1/2 iPad mini 分辨率 750×1334 px 640×1136 px 640×960 px 1024×768 px 1024×768 px 状态栏高度导航栏高度标签栏高度 60px 40px 40px 40px 40px 20px 20px 132px 88px 88px 88px 88px 44px 44px 147px 98px 98px 98px 98px 49px 49px 1242×2208 px iPad3/4/Air/Air2/mini2 2048×1536 px Paste_