2017最新通用APP UI 设计规范
UI设计规范
一.APP设计规范(ios)————设计稿一般不使用Android的尺寸（因为Android的五花八门）1. iphone界面的设计尺寸（设计稿默认iphone6）（1）iphone6 plus设计版[iPhone7 plus]（@3x）分辨率1242x2208px ppi:401 状态栏：60px 导航栏：132px 标签栏：146px（2）iphone6 plus放大版（@3x）分辨率1125x2001px ppi:401 状态栏：54px 导航栏：132px 标签栏：146px（3）iphone6 plus物理版（@3x）分辨率1080x1920px ppi:401 状态栏：54px 导航栏：132px 标签栏：146px（4）iphone6 [iPhone7]（设计稿默认）（@2x）分辨率750x1334px ppi:326 状态栏：40px 导航栏：88px 标签栏：98px（5）iphone5 - 5c -5s（@2x）分辨率640x1136px ppi326 状态栏：40px 导航栏：88px 标签栏：98px（6）iphone4 – 4s（@2x）分辨率640x960px ppi:326 状态栏：40px 导航栏：88px 标签栏：98px（1）iphone & ipod Touch第一、二、三代（@1x）分辨率320x480px ppi:163 状态栏：20px 导航栏：44px 标签栏：49px2. iphone图标设计尺寸（1）iphone6 plus （@3x）App store：1024x1024px 程序应用：180x180 主屏幕：152x152 Spotlight搜索：87x87px 标签栏：75x75px 工具栏和导航栏：66x66px（2）iphone6（@2x）App store：1024x1024px 程序应用：120x120 主屏幕：152x152 Spotlight搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px（3）iphone5-5c-5s（@2x）App store：1024x1024px 程序应用：120x120 主屏幕：152x152 Spotlight搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px（4）iphone4-4s（@2x）App store：1024x1024px 程序应用：120x120 主屏幕：114x114 Spotlight搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px（5）iphone & ipod Touch第一、二、三代（@1x）App store：1024x1024px 程序应用：120x120 主屏幕：57x57 Spotlight搜索：29x29px 标签栏：38x38px 工具栏和导航栏：30x30px3. ipad界面设计尺寸（1）ipad3 – 4 - 5 – 6 – Air – Air2 – mini2分辨率2048x1536px ppi:264 状态栏：40px 导航栏：88px 标签栏：98px（2）ipad1 – 2分辨率1024x768px ppi:132 状态栏：20px 导航栏：44px 标签栏：49px（2）ipad Mini分辨率1024x768px ppi:163 状态栏：20px 导航栏：44px 标签栏：49px4. ipad图标设计尺寸（1）ipad3 – 4 - 5 – 6 – Air – Air2 – mini2App store：1024x1024px 程序应用：180x180 主屏幕：144x144 Spotlight搜索：100x100px 标签栏：50x50px 工具栏和导航栏：44x44px（2）ipad1 – 2App store：1024x1024px 程序应用：90x90 主屏幕：72x72 Spotlight搜索：50x50px 标签栏：25x25px 工具栏和导航栏：22x22px（3）ipad MiniApp store：1024x1024px 程序应用：90x90 主屏幕：72x72 Spotlight搜索：50x50px 标签栏：25x25px 工具栏和导航栏：22x22px5. ios字体大小规范iPhone 上的字体英文为：HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。
app ui设计规范
app ui设计规范App UI设计规范是指在进行手机应用开发过程中，为了确保应用的用户界面（UI）在外观、交互和功能上都能够满足用户需求和期望而制定的设计规范。
下面是一份1000字的App UI设计规范：1. 品牌形象统一在设计App界面时，需要保持应用的整体品牌形象统一。
包括使用品牌颜色、字体、图标等元素，以及保持一致的视觉风格和风格指南。
这可以帮助用户更好地识别和记忆您的应用。
2. 简洁明了的布局应用界面的布局应该简洁明了，避免杂乱无章的元素和信息堆叠。
有一个明确的信息层次结构，并确保主要功能和操作可见和易于访问。
3. 内容可读性应用的内容应该易于阅读和理解。
使用易于辨认的字体和适当的字号、行距和字距。
避免在背景和文本之间使用过于鲜艳的对比色，以保护用户的视觉体验。
4. 导航结构清晰应用的导航结构应该清晰明了。
使用明确的导航栏和底部标签栏来引导用户浏览和操作。
避免过多的嵌套菜单和混乱的导航路径，以提高用户的导航效率。
5. 易于操作的交互元素应用的交互元素应该易于操作。
按钮、输入框、滑块等交互元素应具备足够的大小和间距，以确保用户准确地点击或滑动。
同时，需要提供明确的反馈，如按钮点击后的动画或弹出的确认框。
6. 多设备适配应用的UI设计需要适配不同尺寸和分辨率的设备。
确保界面元素在不同设备上的显示效果一致，并且能够根据屏幕大小和方向进行自适应调整。
7. 错误处理和反馈应用应该有清晰的错误处理和反馈机制。
当用户操作错误或发生问题时，应提供有用的错误信息，并指导用户如何纠正错误。
同时，避免弹出过多的错误提示框，以免用户感到困扰。
8. 良好的可访问性应用需要考虑用户的可访问性需求。
确保界面元素具备足够的对比度，以方便视觉障碍用户的浏览。
同时，提供辅助功能，如语音导航和放大预览等，以满足不同用户的需求。
9. 高效的反馈时间应用需要提供高效的反馈时间，以增强用户体验。
减少加载时间和操作延迟，确保应用的响应速度在合理范围内。
app,ui,设计(网页设计)的命名规范和ps图层结构规范
竭诚为您提供优质文档/双击可除app,ui,设计(网页设计)的命名规范和ps图层结构规范篇一：web+ui+设计命名规范讲解webui设计命名规范这套规范并非单纯的css、html或javascript命名规范，它涉及了很多使用photoshop这类设计工具进行网页设计过程中的命名规范。
(好久没写文章了，有点罗嗦，吼吼~)。
首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。
但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套webui设计命名规范总结自我的一些web设计经验和国外设计师的命名繁体中文：英语：原始制作者信息网站简介搜索关键字网页的css规范网页标题这里是你的网页标题head区可以选择加入的标识设定网页的到期时间。
一旦网页过期，必须到服务器上重新调阅。
禁止浏览器从本地机的缓存中调阅页面内容。
用来防止别人在框架里调用你的页面。
自动跳转。
5指时间停留5秒。
网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。
默认是all。
收藏夹图标js调用规范所有的javascript脚本尽量采取外部调用css书写规范所有的css的尽量采用外部调用书写时重定义的最先，伪类其次，自定义最后（其中a:linka:visiteda:hovera:actived要按照顺序写）便于自己和他人阅读。
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。
APP UI设计规范(可公开版)1.3
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应该按照“违章停车罚款概率”由低往高推荐免费停车地点，“违章停车罚款概率”来自违章停车处罚数据库中的地点数据，必须得到交警部门的支持。
软件UI界面设计规范
软件UI界面设计规范——软件II原则一、易用性按钮名称应该易懂，用词准确，摒弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知义最好。
理想情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
易用性细则：1）完成相同或相近功能的按钮用Frame框括起来，常用按钮要支持快捷方式。
2）完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
3）按功能将界面划分局域块，用Frame框括起来，并要有功能说明或标题4）界面要支持键盘自动浏览按钮功能，即按Tab键能自动顺序切换功能，总体为从上到下，同时行间为从左到右的方式。
5）同一界面上的控件数最好不要超过10个，多余10个时可以考虑使用分页界面显示。
6）分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab7）默认按钮要支持Enter操作，即按Enter后自动执行默认按钮对应操作。
8）可写控件检测到非法输入后应给出说明并能自动获得焦点。
9）复选框与选项框按选择几率的高低而先后排列。
10）复选框与选项框要有默认选项，并支持Tab选择。
11）选项数相同时，多用选项框而不用下拉列表框。
12）界面控件较小时使用下拉框而不用选项框。
13）选项数较少时使用选项框，相反则使用下拉列表框。
14）专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。
二、规范性通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键菜单”的标准格式，可以说:界面遵循规范化的程度越高，则易用性相应就越好，小型软件可不提供工具箱。
规范性细则：1）常用菜单要有快捷方式。
2）完成相同或相近功能的菜单用横线隔开放在同一位置。
3）菜单前的图标能直观的代表要完成的操作。
4）菜单深度一般要求最多控制在三层以内。
5）工具栏要求可以根据用户的需求自己选择定制。
6）相同或相近功能的工具栏放在一起。
7）工具栏中的每一个按钮要有工具提示。
APP界面UI设计规范
APP界面UI设计规范应用程序(UI)设计规范是指开发应用程序的界面时需要遵循的一系列设计原则、指导准则和最佳实践，以提供一致、可靠和易于使用的用户界面。
一个好的应用程序界面设计规范可以帮助开发人员创建用户友好、一致性强、易于理解和操作的应用程序。
在设计应用程序界面时，设计人员需要考虑以下方面：1.一致性：应用程序的各个界面应该保持一致性，包括颜色、字体、图标、按钮和布局等。
这样可以使用户在不同界面间切换时能够更容易地适应和理解。
2.可视化引导：在设计界面时，应该使用可视化引导技术，如箭头、颜色提示和动画等，以引导用户完成操作。
这可以减少用户的迷茫感和错误操作，提升用户的操作效率和满意度。
3.易于辨识：应用程序界面中的元素应该能够被用户轻松地辨识和理解。
例如，按钮和图标应该具有明确的含义和作用，以便用户快速识别并进行相应操作。
4.响应性：应用程序的界面应该能够对用户的操作做出及时的响应，例如，按钮点击后应该有明显的反馈效果，界面刷新和加载时应该有合理的动画提示。
5.可定制性：应用程序界面的设计应该允许用户根据自己的喜好和需求进行定制，例如，颜色主题、字体大小和布局等。
这样可以提升用户的个性化体验和满意度。
7.错误处理：应用程序界面应该能够及时、明确地提示用户操作存在的错误，并提供解决方案和反馈机制。
例如，使用弹出窗口或警告框来提示用户输入错误或操作不当。
8.可访问性：应用程序的界面设计应该考虑到不同用户群体的特殊需求和能力。
例如，为视力障碍用户提供屏幕阅读器支持，为听力障碍用户提供文字提示和字幕等。
9.性能优化：应用程序界面的设计应该尽量减少对系统资源的占用，以提升程序的运行速度和系统的稳定性。
例如，使用合适的图像压缩和文件压缩技术，避免过多的网络请求和数据加载。
10.文档化：设计人员应该及时、清晰地记录应用程序界面的设计规范和指导准则，以便开发人员和维护人员参考和使用。
这可以保证应用程序的界面设计在不同版本和不同开发环境下的一致性。
APP UI设计规范
设计尺寸
提交的图标尺寸不是固定的，所以，去找和你搭档的工程师，让他给你出一份需要提交的图标尺寸文档。 差不多用的到的就这些，有时间可以去查看一下苹果的IOS人机指导手册或者开发文档，上面有更加详细 的数据说明。
但实际工作中需要的并不像手册上提供的尺寸那么多，所以工作之中，和你的工程师搭档去沟通，你要 知道的是你们公司开发所用的数据，而不是苹果提供给你的数据。
V
3 页面标注
页面标注
标注是重中之重，工程师能不能完整的还原设计稿，很大一 部分取决于标注；如果不清楚你该怎么标，一定要和工程师 沟通！ 每个工程师实现效果的方法不同，我在这里所说的，是我的 标注习惯，但应该适用于大部分的设计师和工程师。 不需要每一张效果图都进行标注，你标注的页面能保证工程 师开发每个页面的时候都能顺利进行即可； 这里的标注软件使用的是PxCook，先标一个空白文档，看 看都需要什么吧
设计尺寸
你需要使用的字体
如果是用Mac设计的小伙伴,直接就用苹果黑体字就好了;不过用Windows的就没那么幸运了, PC上还 没和iPhone默认字体效果完全一样的字体,通常都是拿其他字体代替。 苹果丽黑 Hiragino Sans GB W3(普通)/W6(粗体) 比较接近iPhone字体的一款字体,这是我之前- 直使用的设计字体。 黑体-简 STHeitiSC-Light Mac里面拷出来的苹果黑体,比较贴近iPhone手机字体，目前在用。
设计尺寸
图标的提交尺寸
IOS系统可以自动把图片裁剪为圆角,所以提交图标的时候,你只需要提交正方形的 PNG图片即 可。因为需 要的图标非常多,不可能全部加进去,只能选择最好的尺寸,我们的工程师要求我提供以下图标尺寸: 1024*1024 高清屏的APP Store 512*512 普通屏幕的APP.Store 120*120 6以及以下的主屏幕尺寸 180*180 6 plus的主屏幕图标尺寸 58*58 Settings on devices with retina display87*87 Settings on iPhone 6 Plus 80*80 Spotlight on devices with retina display 分享一个苹果官方开发文档的链接，里面的是各版本的图标尺寸: App lcon for iPadand iPhone
APPUI设计规范
APPUI设计规范APPUI设计规范是指在移动应用程序的用户界面设计过程中所遵循的一系列准则和标准。
一个好的UI设计规范能够提高用户的使用体验，提升应用的可用性和吸引力。
本文将从布局、颜色、图标、字体等方面介绍APPUI设计规范。
一、界面布局1.保持简洁：尽量避免过多的元素和复杂的结构，确保界面整洁清晰，提高用户的阅读和操作效率。
2.合理分组：将相似功能的操作按钮和信息内容进行归类分组，以便用户快速找到需要的功能和信息。
3.明确导航：使用易于理解和直观的导航结构，确保用户可以方便地浏览应用的各个功能模块。
二、颜色选择1.采用品牌色：根据应用的品牌定位和设计风格，选择合适的主色调，并在整个应用中保持一致。
2.使用鲜明对比色：在重要的提示信息和操作按钮上使用鲜明对比的颜色，以吸引用户的注意和引导其行为。
3.注意色彩搭配：颜色的搭配要遵循一定的规则，保持整体的和谐统一，并考虑用户群体的习惯和审美需求。
三、图标设计1.简洁清晰：图标应该尽量简洁明了，以便用户一目了然地了解其功能。
2.保持一致性：在整个应用中使用一套统一的图标风格，以提升用户的辨识度和学习记忆。
3.考虑大小：图标的大小需要根据不同的设备和屏幕进行适配，确保在各种分辨率的屏幕上均能够清晰显示。
四、字体设计1.选择合适字体：根据应用的风格和定位，选择合适的字体类型和字号，以提升用户的可读性和阅读体验。
2.排版规范：合理设置字体的行间距、字间距和对齐方式，以保证文字内容的整齐美观和易于阅读。
3.注意字体颜色：字体颜色的选择要与背景颜色形成良好的对比，以确保文字清晰可见。
五、交互设计1.简洁明了：操作按钮和功能入口要清晰明了，避免复杂的操作流程和冗余的功能内容，提高用户的操作效率。
2.反馈及时：对于用户的操作反馈要及时明确，使用动画、声音等方式增强用户的交互感受。
3.手势操作：合理运用手势操作，提供多种途径和方式供用户进行交互，以满足不同用户的操作习惯。
APP UI 设计规范[文字可编辑]
![APP UI 设计规范[文字可编辑]](https://img.taocdn.com/s3/m/99daca9e482fb4daa48d4b38.png)
Iphone6 plus
1024x1024 180x180 px 114x114
px
px
Iphone6/6s 1024x1024 120x120
px
px
114x114 px
Iphone5/5c 1024x1024 120x120
/5s
px
px
114x114 px
Iphone4/4s 1024x1024 120x120
px
px
114x11Leabharlann pxSpotlight 搜索 87x87 px
58x58 px
58x58 px
58x58 px
标签栏 75x75 px 75x75 px 75x75 px 75x75 px
工具栏 /导 航栏 66x66 px
44x44 px
44x44 px
44x44 px
Iphone6 图例
一般的规范最低要求8pt空白或边距。这将有足够留白空间，使得布 局更容易扫描和文本更具可读性。而且在此基础上，UI元素应对齐，文本 应该有相同的基线位置。
Android篇
Android 界面尺寸
界面尺寸（1280x720px）
状态栏高度：50 px 导航栏高度：96 px 标签栏高度：96 px Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中， 当然高度也是和标签栏一样的：96 px 内容区域高度为：1038 px （1280-50-96-96=1038）
常用尺寸
? 一般把48dp作为可触碰UI原件的标准，48dp=72px=9mm，这是一个用户 手指能够准确舒适触碰的最小尺寸。
? Android界面默认list的高度是：48dp=72px； ? Android界面每个元素之间最小的间距是：8dp=12px； ? Android界面默认btn的高度是：40dp=60px ? px=ppi/160*dp
app界面设计规范
app界面设计规范应用界面设计规范（UI Design Guidelines）一、概述应用界面设计规范是为了提供一致的用户体验，减少用户学习成本，提高用户使用效率而制定的标准化规范。
本文档旨在为应用界面设计人员提供详细的设计指导和规范要求。
二、布局设计规范1. 布局要合理：应用界面应根据功能模块和信息层级进行布局，使用户可以快速找到所需信息。
2. 控件位置要合理：常用的功能按钮和交互控件应放置在用户易于触及和操作的位置，并保持一定的统一性。
3. 色彩搭配要合理：应用界面的色彩搭配应符合用户习惯和品牌风格，并且能够提高信息的可读性和识别度。
三、交互设计规范1. 操作一致性：相同类型的操作在不同页面中应保持一致，例如相同的功能按钮应具有相同的样式和位置。
2. 避免误操作：应用界面应减少对用户的误操作机会，例如提供撤销、确认和验证功能等。
3. 提示信息清晰：错误提示、成功提示和帮助文本应清晰明了，避免用户产生困惑。
4. 导航逻辑清晰：应用界面的导航逻辑应清晰明了，用户能够很容易地找到自己的位置和目标。
四、字体和图标设计规范1. 字体选择要恰当：应用界面的字体应选择易于阅读和识别的字体，同时需要考虑字体的风格与品牌一致。
2. 字体大小要合适：应用界面的字体大小应根据不同位置和用途进行调整，以便用户能够轻松阅读。
3. 图标样式要一致：应用界面的图标样式应统一，避免使用不同风格的图标对用户造成困扰。
五、界面美观设计规范1. 色彩选择要科学：应用界面的色彩选择应遵循色彩搭配原则，以提高用户体验和美感。
2. 美观布局要简洁：应用界面的布局应简洁美观，避免过多的装饰和样式干扰用户的使用。
3. 图片使用要合理：应用界面中的图片应具有明确的用途，且不应过于花哨和复杂。
六、响应式设计规范1. 考虑不同屏幕尺寸：应用界面的设计应考虑不同屏幕尺寸的适配性，以保证在不同设备上都能有良好的显示效果。
2. 响应速度要快：应用界面应做到快速响应用户的操作，减少用户等待时间。
软件ui设计规范标准
软件UI设计规范标准一、设计原则1.1 用户导向UI设计应以用户为中心，关注用户需求，提供简洁、直观的操作界面，提升用户体验。
1.2 一致性保持界面元素的一致性，包括图标、按钮、颜色、字体等，有助于用户快速熟悉和上手。
1.3 美观性界面设计应美观大方，符合审美潮流，为用户带来愉悦的视觉体验。
1.4 可用性确保界面布局合理，操作便捷，提高软件的易用性。
二、布局规范2.1 分栏布局采用固定分栏布局，如一栏、两栏、三栏等，使内容分布更加清晰。
2.2 模块划分将功能模块进行合理划分，便于用户快速找到所需操作。
2.3 留白处理适当留白，避免界面过于拥挤，提高阅读体验。
2.4 对齐方式保持元素对齐，使界面看起来更加整洁。
三、色彩搭配3.1 色彩选择根据品牌调性选择主色调，搭配辅助色，形成和谐统一的视觉感受。
3.2 色彩对比保证文字与背景色的对比度，提高可读性。
3.3 色彩情感运用色彩传达情感，如蓝色代表稳重、红色代表热情等。
四、图标设计4.1 形状规范图标形状应简洁明了，易于识别。
4.2 尺寸规范保持图标尺寸一致，便于用户快速理解。
4.3 风格统一图标风格应与整体界面风格保持一致，形成统一的视觉语言。
五、字体规范5.1 字体选择选择易读性强的字体，如微软雅黑、Arial等。
5.2 字号规范根据内容重要性和阅读场景，设置合适的字号。
5.3 字体颜色确保字体颜色与背景色对比明显，提高可读性。
六、交互设计6.1 反馈机制为用户提供明确的操作反馈，如按钮、输入框等。
6.2 动效设计合理运用动效，提升用户体验，但不过度装饰。
6.3 逻辑流程设计简洁明了的操作流程，降低用户学习成本。
七、界面元素设计7.1 按钮设计按钮形状：采用圆形、方形或长方形，确保形状一致性；按钮大小：根据功能重要性和操作频率设置合适的大小；按钮间距：保持适当的间距，避免按钮过于紧凑或稀疏；按钮颜色：主按钮采用品牌色，次按钮采用辅助色，区分不同功能。
软件UI设计规范标准
软件UI设计规范目录UI规范 (1)1用户界面设计理念 (5)1.1美观 (5)1.2易理解 (8)1.3鼓励 (8)1.4一致 (8)1.5交互 (11)1.6效率 (14)1.7熟悉 (15)1.8灵活 (16)1.9容错 (17)1.10可预测 (18)1.11简洁 (18)1.12透明 (18)1.13权衡 (18)2通用设计原则 (19)2.1字体使用原则 (19)2.1.1中文字体 (19)2.1.2英文字体 (19)2.2文字对齐原则 (19)2.3界面配色原则 (21)2.4按钮设计原则 (22)2.5文本校验原则 (24)2.6兼容性和个性化原则 (27)2.7键盘响应 (28)2.7.1TAB键 (28)2.7.2Enter键 (29)2.7.3导航键（上下左右） (29)2.7.4DEL键 (29)2.8鼠标 (29)3各模块设计原则 (30)3.1启动/登录界面 (30)3.2主界面 (31)3.3导航 (31)3.4窗体布局 (33)3.5提示信息 (34)3.6文本框 (36)3.7弹出框/弹出窗口 (38)3.8下拉框/单选框/复选框 (39)3.9列表页面 (41)3.10报表规范 (43)3.11附件 (43)3.12各类控件的标准大小 (44)建立UI规范的目的将阳春白雪式的用户体验细化到具体的可执行的要求，建立各行业线关于界面元素设计及界面布局的通用规则及要求，提升公用组件复用度及用户体验，从而增加浪潮软件的产品竞争力。
1用户界面设计理念1.1美观●使用可视元素图1.1.1●对元素进行分组图1.1.2对齐图1.1.3图1.1.4（反例）1.2易理解●一个系统应该很容易被用户学会和理解，用户应该知道：1、看什么2、做什么3、何时做4、在哪做5、为何做6、如何做●信息的放置顺序应该经过深思熟虑，最小化用户记忆和寻找的成本●必要的时候，一步步引导用户进行操作图1.2.11.3鼓励●一旦用户完成了某个关键操作，要及时告知用户，提升用户的信心图1.3.11.4一致●一个系统从头到尾的外观，行为，操作应该是一致的图1.4.1（反例）图1.4.2（反例）●同样的行为，应该总是产生同样的结果图1.4.3（反例）图1.4.4（反例）●相同功能的按钮视觉上保持一致，不同功能的按钮视觉上有所区别图1.4.5（反例）1.5交互用户在交互过程中占有绝对主动权1、动作必须是用户请求的结果2、耗时较长的动作必须可以被打断图1.5.1从用户的需求出发呈现上下文图1.5.2图1.5.3（反例）●系统能够对用户的请求快速地作出响应●对用户的所有动作提供可视化的反馈信息●达成目标的方式应该是灵活的，并和用户的技能，习惯，经验，偏好相适应图1.5.4图1.5.5●提供反悔或取消的机会（undo cancel）图1.5.61.6效率●最小化用户眼和手的移动幅度图1.6.1●简化用户操作的步骤图1.6.2（反例）图1.6.3●尽可能预料用户的想法和需求图1.6.41.7熟悉●尽可能使用用户熟悉的概念和语言●尽可能使界面自然，模仿用户的行为模式●完美地兼容老产品1.8灵活●系统必须对不同用户的需求很敏锐，并且提供不同层次类型的功能，基于：1、用户的知识和技能2、用户经验3、用户的个人偏好4、用户的习惯5、当时的条件图1.8.11.9容错●对于常见的人为失误有妥善的应对措施图1.9.1●当错误发生时，提供建设性的提示图1.9.2●无论发生什么错误，尽最大努力确保用户不丢失工作成果图1.9.31.10可预测●用户能够预测到每个任务的正常进度图1.10.1●所有用户希望达成的目标都应该完成1.11简洁●尽可能简洁的用户界面：突出重要的功能，隐藏复杂的，不常用的功能图1.11.11.12透明●让用户关注他的任务而不是实现机制●计算机内部的工作内容应该是不可见1.13权衡●最后的设计应该是基于一系列设计原则相互权衡的结果●人们的需求总是凌驾于技术之上2通用设计原则2.1字体使用原则2.1.1中文字体●同级菜单，字体大小格式统一。
app ui设计规范
app ui设计规范App UI设计规范是指在开发移动应用程序时，为了保证用户体验和一致性，制定的一系列设计规则和准则。
以下是一些常见的App UI设计规范：1. 一致性：在整个应用程序中保持一致的设计风格和布局，以提供统一的用户体验。
包括统一的颜色方案、按钮设计、图标风格等。
2. 简洁性：简洁的界面可以提高用户易用性和效率。
界面要避免过多的文字和冗余的功能，尽量保持页面简洁明了。
3. 易用性：界面要设计得易于操作和理解。
按钮和功能要放置在用户能够轻松找到和使用的位置，避免复杂的操作流程。
4. 响应性：用户在操作时，要即时地得到反馈。
比如按钮按下时的动画效果，以及及时显示加载进度等。
5. 导航设计：应用程序的导航要简单和易于使用。
常见的导航包括底部导航栏、侧边栏导航等。
导航要清晰标注当前所在页面，以及提供路径返回的方式。
6. 分层和分组：将相关的功能或信息组织到一起，提供分层和分组显示，以便用户快速找到所需的内容。
7. 字体和颜色选择：选择合适的字体和颜色方案，以保证页面的可读性和视觉效果。
字体大小要适中，颜色要符合品牌形象和用户喜好。
8. 图标设计：图标是用户界面的重要组成部分，要选择简洁易懂的图标，遵循常用的图标设计规范，如用家庭图标表示“家”等。
9. 色彩运用：色彩对于用户体验是非常重要的，要选择适合应用场景的色彩方案。
比如，使用暖色调来营造温暖的氛围，使用冷色调来传达静谧的感觉。
10. 排版规范：正确的排版可以提高页面的可读性和可视性。
要选择适合屏幕尺寸的字体大小和行间距，保持标题、正文和标签的一致性。
11. 按钮和交互设计：按钮要易于点击和辨认，尺寸要适中。
交互设计要符合用户习惯和预期，提供直观的反馈。
12. 图片和多媒体设计：要选择高质量的图片和多媒体素材，以提高用户体验。
图片要清晰，加载速度要快。
13. 错误处理：应对用户错误操作时，要友好地提示并提供帮助。
比如，显示错误信息、提供撤销操作等。
2017年移动端设计规范
iPhone界面尺寸设备分辨率逻辑分辨率尺寸PPI 状态栏高度导航栏高度标签栏高度iPhone X 1125×2436 px 375×812 pt 5.8 英寸458 ppi 88 px 132 px 146 pxiPhone 6, 6s+, 7+, 8+ 1242×2208 px 414×736 pt 5.5 英寸401 ppi 60 px 132 px 146 pxiPhone 6, 6s, 7, 8 750×1334 px 375×667 pt 4.7 英寸326 ppi 40 px 88 px 98 pxiPhone 5, 5s, 5c, SE 640×1136 px 320×568 pt 4.0 英寸326 ppi 40 px 88 px 98 pxiPhone4, 4S 640×960 px 320×480 pt 3.5 英寸326 ppi 40 px 88 px 98 pxiPhone 2G, 3G, 3GS 320×480 px 320×480 pt 3.5 英寸163 ppi 20 px 44 px 49 pxiPhone图标尺寸iPad的设计尺寸iPad图标尺寸Android SDK模拟机的尺寸Android系统图标尺寸Android安卓系统dp/sp/px换算表主流Android手机分辨率和尺寸OPPO R9s 5.5英寸1080x1920 px Vivo X9 5.5英寸1080x1920 pxVivo Xplay6 5.46英寸1440x2560 px 荣耀V9 5.7英寸1440x2560 px华为Mate 9 5.9英寸1080x1920 px 一加手机5 5.5英寸1080x1920 pxVivo X9Plus 5.88英寸1080x1920 px 魅族魅蓝Note 5 5.5英寸1080x1920 px荣耀9 5.15英寸1080x1920 px 三星GALAXY S8+ 6.2英寸1440x2960 px华为P10 Plus 5.5英寸1440x2560 px 魅族PRO 7 5.2英寸1080x1920 px努比亚Z17 5.5英寸1080x1920 px 小米5 5.15英寸1080x1920 pxPC平台浏览器界面参数与份额PC屏幕分辨率比例。
UI设计UI设计规范完整版精选全文
高效性与 准确性
3.1.2
UI设计规范包括的内容
3
1.图标设计规范
图标是具有高度概括性的、用于传达视觉信息的小尺寸图像，常与文本搭配使用。图标不仅 能传达出丰富的信息，还能提升整个界面美感和信息可识别性。同时，有的图标还具有交互性和 功能性，用户点击这些图标会执行特定的操作，触发相应的功能。
3.1.2
15
1. Windows系统的界面尺寸规范
由于Windows系统也在不断的升级改版，其界面尺寸有很多，常见的界面尺寸主要包括如 图所示的8种主要尺寸。
3.2.3 Windows系统的UI设计规范
16
2.控件规范
与Android系统和iOS系统一样，Windows系统中的控件也需要制定相应的设计规范。
图片的比例
在UI设计中，对于图 片的比例没有严格的 规定，设计人员可根 据需要进行调整。
图片的尺寸规范
• App个人中心界面的用户头像大小多 为144px×144px和120px×120px 个人资料界面的用户头像大小多为
• 96px×96px 消息列表界面的用户头像大小多为 80px×80px
• 帖子详情页界面的用户头像大小多为 44px×44px和60px×60px。
了解UI设计规范
3.1.1 UI设计规范的原则
2
一致性
UI设计规范的一致性原则表现在产品界面的各个方面， 如在设计布局界面时，需要使标题字体、内容字体、链 接字体等保持一致；在进行交互设计时，界面中的交互 组件、交互流程、用户行为、交用的设计细节规范必不可少，这不仅能够降低设计人 员的沟通成本，提高设计的准确性，还遵循了UI设计规范 的高效性和准确性原则。
导航栏
Logo图标
app ui设计规范有什么？ 让你快速的掌握住
相信家对于 ui设计非常的感兴趣吧。
接下来就让们来看看app ui设计规范的相关的内容吧，相信家看完之后，将会有非常的收获的，家还在等什么呢？就让们全面的认识一下吧。
一、UI设计UI设计(或称界面设计)指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。
UI设计分为实体UI和虚拟UI，互联网说的UI设计虚拟UI，UI即User Interface(用户界面)的简称。
好的UI设计不仅让软件变得有个性有品位，还要让软件的操作变得舒适简单、，充分体现软件的定位和特。
二、app ui设计规范1、Android篇标注规范：画布小：以720 1280分辨率为准进行标注。
字体：按照像素标注，只使用 24 pt，28 pt，36 pt 和 44 pt 的字体，并pt 值除以 2 作为 sp 数值交给工程师。
颜色：按照实际的颜色值标注，Android颜色值取值为十六进制的值比如一绿色的值，给工程师的值为 5bc43e。
间距：每个主要的控件必须标注出来，各种边距必须标注清楚。
所有尺寸的 p 值除以2作为 dp 数值交给工程师。
切图：统一采用Png格式部分需要适配的图片需要.9格式图片优化：图片压缩优化ICON 可采用PNG 8支持完全透明和完全不透明两种和256色需要高清的可采用 PND24/32切图命名:每个页面按照设计高保真分目录：hdpi(480 800)hdpi(720 1080) dpi(1080 1920)。
依图片性质命名。
例如 bg_.png、btn_.png、img_.png、tab_.png等。
设计图单位：像素72dpi。
在设计的时候并不每个尺寸都要一套，尺寸按自己的来设计，比较方便预览，一般用640 1136或者750 1334的尺寸来设计，现在iPhone6和plus出来后有很多人会使用6的设计。
Ps：作图的时候确保都用形状工具(快捷键：U)画的，这样更方便后期的切图或者尺寸变更。
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，留白 7px2、Android 导航尺寸：高度64px 或 48px，留白 8px（三）标签尺寸1、IOS 标签尺寸：高度98px2、Android 标签尺寸：高度96px（四）工具栏尺寸1、IOS 工具栏尺寸：高度88px2、Android 工具栏尺寸：高度96px（五）列表高度1、IOS 列表高度：高度88px2、Android 列表高度：高度96px（六）资源状态关于资源往常设计弹起、点击、点击后、不行用四种状态，往常弹起、点击、点击后用不一样颜色表示、不行用状态用低度灰色表示。
（七）字体1、IOS 默认英文为HelveticalNeue，中文为黑体2、Android 列表高度：默以为Droidsans fallback（八）字号字号往常依据标题及征文级别递减为42、36、34、30、24 （九） ICON1、IOS 常用尺寸有 1024*1024、512*512、120*120、60*602、Android 常用尺寸有 512*512、200*200、72*72 、48*48 （十）资源插图1、长方形插图高度一般不超出背景宽度的二分之一2、缩略图两张并列高度一般不超出200px，宽度要适中有留白3、图文混排中图片一般不高过150*110。
app界面设计规范
app界面设计规范app界面设计规范篇一：移动app界面设计规范色彩篇移动app界面设计规范——色彩篇色彩在我们的APP界面设计中，是一个很让人头疼的事情。
无论是APP UI设计大神还是APP设计新手，都是需要制定一套属于自己的配色方案或配色计划色彩，从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比。
强调大胆的阴影和高光。
引出意想不到且充满活力的颜色。
调色板调色板以一些基础色为基准，通过填充光谱来为Android、Web 和iOS环境提供一套完整可用的颜色。
基础色的饱和度是500。
篇二：安卓界面设计规范目前主流的安卓手机分辨率有以下3种：hdpi，对应800*480的手机。
主流机型，很多。
如小米1 ，1s 三星 htc 等 xdpi，对应1280*720的手机。
三星Galaxy系列和华为p6.xxdpi，对应1080*1920的手机。
小米手机，华为荣耀手机系列为主加上 htc one。
下面是当面流行的安卓手机的屏幕尺寸和分辨率：小米 3和小米4 屏幕尺寸和分辨率： 5英寸1920×1080像素魅族MX2 屏幕尺寸和分辨率：英寸1280×800像魅族MX3 屏幕尺寸和分辨率：英寸1800×1080像素HTC one 屏幕尺寸和分辨率：英寸1920×1080像素华为荣耀6屏幕尺寸和分辨率： 5英寸 1920×1080像素华为p6屏幕尺寸和分辨率：英寸1280×720像素华为p7屏幕尺寸和分辨率：5英寸1920×1080像素什么是屏幕像素密度？屏幕像素密度，即每英寸屏幕所拥有的像素数，英文简称PPI。
在目前我们的安卓APP设计项目当中，我们并不会去为每一种分辨率去设计一套UI界面。
这是一种追求完美和理想的状态。
小公司肯定是耗不起这样的。
所以，这个时候我们需要学会变通。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
通用APP UI设计指导规范版本：V1.0.0时间：2016-08-09编写：交互设计部陈锐目录一、前言 (6)二、名词解释 (6)1.PX (6)2.PPI (7)3.DPI (7)4.Pt (8)5.SP (8)6.DP (9)三、iOS 设备 (10)1.界面尺寸 (10)1.1设备尺寸 (10)1.2设计基准 (11)1.3控件尺寸 (11)1.4关于IPhone分辨率 (12)1.5关于IPad分辨率 (14)1.6状态栏及标签栏参照 (16)2.ICON图标尺寸 (17)2.1.尺寸对照表 (17)2.2.图标圆角比例 (17)2.3.Icon命名规则 (18)2.4.APP图标变化 (20)2.6.图标网格 (22)3.布局设计规范 (22)3.1.状态栏规范 (22)3.2.导航栏规范 (23)3.3.搜索栏 (24)3.4.工具栏 (24)3.5.Stepper控件 (24)3.6.提示框 (25)3.7.分段控制框 (25)3.8.滑块\开关 (26)3.9.布局标准控件 (26)3.10.ios标准色 (27)3.11.文字规范 (27)3.12.间距和对齐方式 (28)4.交互规范 (28)5.标注规范 (36)6.切图规范 (36)6.1.软件切图区别 (36)6.2.切图规范 (36)6.3.可重复元素 (37)6.4.图片边缘锯齿和抗锯齿问题 (39)6.6.常用命名 (40)四、Android设备 (41)1.界面尺寸 (41)1.1设备尺寸 (41)1.2设计基准 (42)1.3控件尺寸 (42)1.4状态栏及标签栏参照 (43)2.ICON图标尺寸 (43)2.1.尺寸对照表 (43)2.2.设计规范 (44)3.布局设计规范 (44)3.1.48dp定律 (44)3.2.间距留白 (45)3.3.触摸区域及间距留白示例 (45)3.4.文字规范 (47)3.5.触摸与反馈 (47)3.6.小部件设计 (48)3.7.通知设计 (55)4.Material Design (65)5.Android设计指南 (65)6.标注规范 (66)7.切图规范 (66)7.1软件切图区别 (66)7.2切图规范 (66)7.3可重复元素 (67)一、前言此规范并非局限设计理念的规范，此规范只是为了提高快速开发类APP UI视觉的通用约定规范，对于大多数项目周期时间较短项目，建议设计师和前端开发人员参照此规范。
二、名词解释1.PX像素（px）简单的来说就是颜色点。
我们的屏幕都是由很多的小块的颜色构成的，这每一个颜色块我们就把它称为像素。
如下图所示。
就拿我们从小的伙伴马里奥来做个例子，整张图片就是通过很多不同颜色的点构成的，把所有的颜色点集合在一起，就成了图，而组成图片的这些点就是我们的像素了。
英文全称：pixels per inch，即像素每英寸，也叫像素密度，它是描述在水平的和垂直的方向上，每英寸距离的图像包含的像素（pixel）数目。
因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。
当然，显示的密度越高，拟真度就越高。
3.DPI英文全称：dots per inch，直接来说就是一英寸多少个像素点（像素/英寸）。
常见取值120，160，240。
我一般称作像素密度，简称密度。
dpi的数值越大，就越清晰，同样拿我们的马里奥举例。
第一张图是100dpi的图片，第二章是10000dpi的图片，但是图片的大小一致。
简单点说就是一样大小的图片，第二张图片上的像素点比第一张多，所以就图片质量就更加的细腻，更加的清晰。
第一次推出iPhone时，这两个单位都是一样：1pt等于1px。
然后当视网膜屏到来，1pt 成为2px。
因此现在正确算法是iPhone4,5,6=@2x, iPhone6Plus=@3x。
（pt（point）是印刷业上长使用的单位，磅的意思，是一种固定的长度单位，可以用测量设备测量的单位。
pt=px*3/4 1pt=1/72英寸）5.SPSP是Android中专门为字体设计的单位，由于我们市场上安卓手机的分辨率越来越多，所以去适配的时候就出现了很多的麻烦，数据太多。
所以Android为了更好的适配给出了这个设计单位。
在mdpi密度的屏幕中：1px=1sp。
主要用于字体显示，可以根据用户的字体大小进行缩放，打个比方：上面对应的是三种分辨率的屏幕显示，第一个是一倍的mdpi，第二个是两倍的xhdpi，第三个是三倍的xxhdpi。
如果mdpi上的字体是12px，那么所对应的是12sp。
因为sp在任何分辨率上都不会改变，所以也都是12sp，而xhdpi的字体大小显示就是：12*2=24px，xxhdpi 的字体大小显示就是12*3=36px，以此类推。
6.DPDP也是一个为了Android适配时用到的单位，Android为了适配不同分辨率给出的单位，它也不会因为屏幕分辨率大小不一样而发生变化。
适配分辨率的时候也是记住，在mdpi密度的屏幕中：1dp=1px，其余的分辨率用倍率乘以这个dp值就行了，如图所示。
好了，介绍了基本的几个概念，那可能有的人就不明白了，为什么要了解这些概念？目前的市场上的手机有不同的分辨率：160/320/480dpi等。
所以，我们不可能去记住那么多的数据，因此我们就通过DP这个单位和与PX的转化去记住。
注意的是转化的时候不止是图标转化，间距和所有元素的大小也要相应的进行改变。
而且还有一点值得注意的是，因为我们设计常用单位是PX ，设计的时候我们用这个单位，但是开发人员则用dp ，所以在这个设计过程中去适配不同的手机，Android使用dp这个单位来进行px之间的转化，就是一个上述概念中的一个使用单位。
三、iOS 设备1.界面尺寸1.1设备尺寸1.2设计基准IphonePS设计建议采用750×1334px为基准，切图@3x，@2x，@1xSketch设计建议采用375×667pt为基准，切图@3x，@2x，@1x IpadPS设计建议采用2048×1536px为基准，切图@2x，@1xSketch设计建议采用1024×768pt为基准，切图@2x，@1x1.3控件尺寸1.4关于IPhone分辨率iPhone有4个主要的分辨率：320x480pt（4）、320x568pt（5）、375x667pt（6）、414x736pt（6P）布局不是整体缩放，而是扩大的基础上的分辨率。
例如，导航栏只调整宽度，但保持相同的高度。
它里面的元素保持不变。
iPhone6Plus的横向模式是唯一像iPad的iPhone。
换句话说，左导航将会出现，更换标签栏的布局。
差异关系各代iphone屏幕分辨率之间的差异及关系1.5关于IPad分辨率而iPad有两个主要分辨率：768×1024pt（iPad），1024×1366pt（iPad Pro）iPad 的新功能Slide Over、Split View。
，Slide Over可以从侧边调用出另外一个应用，同时在屏幕上展示。
Split View：一个屏幕，做两件事！你终于可以在一个屏幕上同时打开两个应用，一边处理表格一边编辑文档；一边浏览网页一边刷朋友圈……1.6状态栏及标签栏参照状态栏标签栏在各款iphone设备上的参照状态栏标签栏在各款ipad设备上的参照2.ICON图标尺寸2.1.尺寸对照表2.2.图标圆角比例图标R角比例：图标尺寸/R角= 5.72.3.Icon命名规则IOS7到IOS8需要的icon尺寸以及名称注：请放大观看IOS6及之前版本需要的icon尺寸及名称注：请放大观看2.4.APP图标变化图标是用户看到您的APP第一件事。
它会出现在主屏幕上，App Store商店中, spotlight 搜索和设置里。
iPhone不再支持@1x，所以你不必生成它。
APP图标现在只需要使用：@2x、@3x。
有3种类型：应用程序图标，Spotlight搜索和设置。
而iPad使用：@1x、@2x。
2.5.超椭圆从iOS7开始，已经从简单的圆角转变到一个超椭圆形。
2.6.图标网格Apple使用黄金分割在它们的一些图标上。
这让图标保持良好的比例，同时确保了美感。
虽然这是一个很好的规范，但它不是严格要求。
甚至Apple在很多图标上也省略了它。
3.布局设计规范注：以下标注的pt单位以iphone6为基准，20pt = 40px 12pt = 24px，以此类推。
3.1.状态栏规范用户依赖于状态栏的重要信息，如信号，时间和电池。
文本和图标可以是白色或黑色，但背景可以被设计成任何颜色，并与导航栏合并。
3.2.导航栏规范导航栏是用于屏幕的快速信息。
左边部分可用于配置文件，菜单按钮，而右边的部分是一般用于动作按钮，如添加，编辑，完成。
请注意，如果您使用这些系统图标，您不需要为它们单独设计。
3.4.工具栏3.5.Stepper控件提示对话框是用于输送关键信息和提示快速操作。
提示应保持最少文字，退出一定是明显。
3.7.分段控制框3.8. 滑块\开关3.9. 布局标准控件ios 1334x750px Iphone6/6s3.10.ios标准色3.11.文字规范一般的规范是按钮用44pt、小文字用12pt、正文文本用17pt和标题用20pt+。
3.12.间距和对齐方式一般的规范最低要求8pt空白或边距。
这将有足够留白空间，使得布局更容易扫描和文本更具可读性。
而且在此基础上，UI元素应对齐，文本应该有相同的基线位置。
4.交互规范必背：ios可点击区域最小为44x44pt。
更多可以参考IOS9人机界面指南：/ios9-guideline-ch1.html5.工作流程1、选择一种尺寸作为设计和开发基准；2、定义一套适配规则，自动适配剩下两种尺寸；3、特殊适配效果给出设计效果。
来看一套样例：第一步、视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。
设计定稿后在750px的设计稿上做标注，输出标注图。
同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。
第二步、输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。
第三步、开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。
此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。
第四步、适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus （414pt）和iPhone 5S及以下（320pt）的界面效果。