下载文档原格式
android,ios设计规范
在Android和iOS中，设计规范是非常重要的。
这个规范指导着开发人员和设计师如何创建高质量的用户界面和体验。
以下是Android和iOS的设计规范的一些关键要点。
1. Material Design：这是Google为Android设计推出的新规范。
它强调材料和真实感，通过阴影、深度、反射和运动来模拟真实的物体。
这个规范提供了一组可扩展的设计模板和指南，以帮助设计师和开发人员创建一致的应用程序体验。
2. Design for Android：这是为Android设计的老规范，它提供了一组最佳实践和设计指南。
这些指南包括如何设计指令、如何使用标准图标和如何设计用户界面。
3. 安卓适配性方案：由于Android的硬件和软件规范的多样性，应用程序需要适应不同的屏幕尺寸、分辨率和设备特性。
Google提供了一些适配性方案和工具，以帮助开发人员创建适应性强的应用程序。
二、iOS设计规范
2. iOS设计资源中心：这是一个面向开发人员和设计师的网站，提供了许多iOS设计资源，包括模板、图标和样式表。
总结：
设计规范对于应用程序的成功至关重要。
它可以帮助开发人员和设计师创建一致、易于使用的用户界面和体验。
Android和iOS的设计规范都是基于最佳实践和设计原则的。
开发人员和设计师应该尝试遵循这些规范，以帮助他们创建高质量的应用程序。
相信很多人都在开发设计APP时会遇到很多界面上的问题，要以多大尺寸来设计？分辨率是多少？该怎么切图给开发等等下面的文字就给出一点点技巧总结，但也要给合团队在开发时的习惯。
每个工程师们所使用的控件，书写布局习惯来实际移交的图是不一样的，但八九不离十，都是遵循一个原则，便捷开发、自适应强的开发模式IOS篇一、尺寸及分辨率iPhone界面尺寸：320*480、640*960、640*1136iPhone6：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。
一.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下则为华文黑体，所有字体要用双数字号。
【总结】移动应用界面设计的尺寸设置及规范时间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 = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数。
即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。
以iphone5为例，其ppi=√（1136px² + 640px²）/4 in=326ppi（视网膜Retina屏）对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近 320 dpi （xhdpi模式），480 x 800 的手机很可能接近 240 dpi （hdpi模式），而320 x 480 的手机则很接近 160 dpi（mdpi模式）。
技术规格及要求范文项目名称：设计与开发一款社交媒体应用程序1.平台兼容性：- 应能在主流操作系统上运行，包括Windows、macOS和Linux。
- 应为移动平台开发，支持Android和iOS。
2.用户注册和登录：-提供用户注册和登录功能，用户可以创建账号并通过用户名和密码进行登录。
-用户账号信息应安全保存并加密存储。
3.用户界面：-设计简洁直观的用户界面，易于使用和导航。
-界面应具备良好的响应性能，确保快速和流畅的用户操作体验。
4.用户资料：-用户资料应支持多种格式，例如文本、图片和音频。
5.社交功能：-允许用户添加好友，并与好友之间进行私聊和群聊。
-提供用户个人动态功能，用户可以发表文字、图片和视频等内容。
-提供点赞、评论和转发等互动功能。
6.数据管理：-数据库应能有效地保存和管理用户账号信息、个人资料和社交数据等。
-数据库应提供数据备份和恢复功能，以确保数据的安全性。
7.推送通知：-支持推送通知功能，用户可以接收到关注对象的动态以及系统通知等。
8.安全性：-用户密码应使用加密算法进行存储和传输，确保用户账号的安全性。
-数据传输应使用加密协议，如TLS/SSL，确保数据的机密性和完整性。
-应具备防止常见的网络攻击和安全漏洞的能力，如SQL注入、跨站脚本攻击等。
9.性能优化：-应进行系统性能测试，保证系统在高并发和大数据量时能保持稳定。
-在可行的情况下，使用缓存机制和异步处理等方式来提升系统的响应速度和并发能力。
10.可维护性：-应使用结构化的代码编程风格，提高代码的可读性和可维护性。
-代码应具备良好的注释和文档，便于项目维护和后续开发。
11.发布和更新：-应具备自动化部署和发布功能，以提高发布效率和减少错误。
-支持软件版本更新，包括修复漏洞和引入新功能。
12.国际化支持：-在界面设计和文本内容上，应考虑多语言的支持，以满足不同用户群体的需求。
以上是设计与开发一款社交媒体应用程序所具备的技术规格及要求。
app设计规范应用程序设计规范是指在开发和设计应用程序时遵循的一系列规则和准则。
一个统一的设计规范可以帮助开发人员和设计师保持一致的风格和标准，以提高应用程序的可维护性、可扩展性和用户体验。
以下是一些常用的应用程序设计规范：1. 一致性：应用程序的各个部分应该具有统一的外观和交互方式。
例如，按钮、输入框、标签等组件应该在整个应用程序中有相同的样式和行为。
2. 响应式布局：应用程序应该能够在不同的设备和屏幕尺寸上自适应。
这意味着应用程序的布局、字体大小和图标大小等要能够根据屏幕尺寸自动调整。
3. 使用易于理解的命名：应用程序中的变量、函数和组件命名应该简单、清晰明了。
这样可以提高代码的可读性和可维护性。
4. 有意义的错误处理：应用程序应该在出现错误时给予用户明确的反馈，并提供解决问题的方法。
错误信息应该清楚明了，避免使用术语和缩写导致用户难以理解。
5. 安全性：应用程序应该具有一定的安全机制，以保护用户的个人信息和敏感数据。
例如，密码应该进行加密存储，用户输入应该进行验证和过滤等。
6. 可访问性：应用程序应该易于被残障人士访问和使用。
例如，提供辅助功能选项，如放大和音频阅读等。
7. 编码规范：应用程序应该遵循一致的编码风格和规范。
这可以提高代码的可读性、可维护性和可扩展性。
常见的编码规范包括使用有意义的变量名、避免冗余代码和保持一致的缩进风格。
8. 国际化支持：应用程序应该具备本地化和国际化的能力，以支持多种语言、货币和文化习惯。
这可以提供更好的用户体验，并扩大应用程序的市场范围。
9. 性能优化：应用程序应该经过优化，以提高响应速度和性能。
例如，减少网络请求次数、压缩和缓存静态资源等。
10. 用户体验设计：应用程序应该注重用户体验，使其易于使用、直观和吸引人。
例如，使用清晰的导航、易于理解的图标和直观的界面设计等。
总之，应用程序设计规范对于开发和设计团队是非常重要的。
它们能够提供一致的风格和标准，提高应用程序的质量和用户体验。
本文整理汇总了一些界面设计（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的主页指示器的位置。
二、边距和间距在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们进行了解。
web 设计规范Web 设计规范是指网站设计过程中需要遵循的一些标准和规则。
一个良好的设计规范可以提高网站的用户体验，使用户能够更好地理解和操作网站。
下面是一些值得关注的 web 设计规范：1. 布局规范：- 采用响应式设计，以适应不同尺寸的屏幕。
- 使用一致的页面布局，包括标题栏、侧边栏、内容区等。
- 确保页面元素的对齐和间距合理，保证页面整体美观。
- 使用网格系统进行页面设计，以保持一致性和可扩展性。
2. 导航规范：- 设计易于导航的菜单，确保用户能够轻松找到他们需要的信息。
- 使用面包屑导航和站内搜索功能，帮助用户在大型网站中迅速定位目标页面。
- 标记当前页面，以便用户清晰地知道他们所处的位置。
3. 内容规范：- 使用清晰、简洁的文字，避免使用太长或复杂的句子。
- 对页面内容进行分类和分组，以便用户更好地理解页面结构。
- 使用合适的字体、字号和颜色，确保文字易于阅读。
4. 图片和多媒体规范：- 使用高质量的图像和多媒体，避免使用模糊或拉伸的图片。
- 优化图像和多媒体文件的大小，以提高页面加载速度。
- 为图像添加替代文本，以便无法加载图像的用户了解图像内容。
5. 颜色和视觉规范：- 使用品牌颜色，确保网站的一致性和识别性。
- 考虑色盲用户和视力受损者，确保页面颜色对他们来说也是可辨认的。
- 使用适当的对比度，确保文字和背景之间的对比度足够高，以提高可读性。
6. 表单规范：- 使用简洁、明确的表单字段，以降低用户错误和困惑的可能性。
- 提供即时的错误提示和验证，以帮助用户在提交表单之前检查错误。
- 使用自动填充和下拉列表等功能，提高用户填写表单的效率。
7. 错误处理规范：- 为用户提供清晰、简洁的错误提示信息，帮助他们理解错误的原因和解决方法。
- 提供返回功能，让用户可以回到上一页或返回首页。
- 避免过多的弹出窗口和不必要的重定向，以减少用户的困惑和不安全感。
8. 页面加载规范：- 优化页面加载速度，减少不必要的文件和请求。
网站及APP界面设计规范1. 引言在当今数字时代，网站和移动应用程序（APP）的界面设计对于用户体验至关重要。
一个优秀的界面设计可以提升用户的满意度，使其更轻松地使用产品或服务。
为了确保界面设计的一致性和效果，制定一套规范是必要的。
本文将介绍网站和APP界面设计的几个方面，包括布局、色彩、字体、图标和交互等。
2. 布局（1）容器宽度：在网页设计中，为了提供更好的可读性和视觉效果，常用的容器宽度是960像素或1200像素。
对于APP设计，可以根据屏幕尺寸自适应调整容器宽度。
（2）栅格系统：网页和APP的布局通常采用栅格系统，以保持一致性和美观性。
建议使用12栅格系统，便于布局元素的平衡和调整。
（3）内容呈现：在网页和APP中，内容应该按照逻辑顺序呈现，以确保用户能够轻松地获取所需信息。
重要的内容应置于页面或屏幕上部，次要内容可以放置在下部。
3. 色彩选择（1）品牌色彩：根据品牌形象和定位，选择一到三种主要颜色作为品牌色彩，并在整个网站和APP中保持一致使用。
（2）辅助色彩：辅助色彩用于突出重要信息，例如按钮、标签等。
建议选择与品牌色彩相搭配的颜色，并在整体设计中使用相对较少，以免过于花哨。
（3）背景色彩：背景色彩应该选择以增加整体网站和APP的可读性。
一般情况下，使用浅色背景和深色文字是较为安全的选择。
4. 字体选择（1）品牌字体：根据品牌形象和定位，选择一种或两种字体作为品牌字体，并在整个网站和APP中保持一致使用。
品牌字体应具备良好的可读性。
（2）内容字体：内容字体应具备良好的可读性，建议选择无衬线字体，例如Arial、Helvetica或Roboto等。
字号大小应根据不同设备的屏幕尺寸进行适当调整。
5. 图标设计（1）图标风格：图标设计应简洁清晰，符合整体界面风格。
常见的图标风格包括扁平化风格、线条风格和立体风格等。
根据品牌形象和界面需要，选择适合的图标风格。
（2）图标一致性：相似功能的图标应保持一致，以避免用户的混淆和困惑。
网站及APP界面设计规范一、导言随着互联网的发展和普及，网站和APP已成为人们获取信息、进行交流和娱乐的重要工具。
优秀的界面设计不仅能提升用户体验，还能增强品牌形象。
为此，制定网站及APP界面设计规范显得尤为重要。
二、通用规范1. 清晰简洁：界面设计要简洁明了，避免过多复杂的元素和繁杂的布局。
突出主要功能按钮和信息，减少用户的认知负担。
2. 一致性：保持整体界面的一致性，使用户在不同页面间能够快速适应和导航。
3. 响应式设计：考虑不同终端设备的适应性，确保在不同屏幕尺寸下均能正常显示和使用。
4. 易用性：界面设计要考虑到用户的习惯和操作习惯，尽量降低学习成本，提供友好的交互和易操作性。
5. 色彩搭配：选择适宜的色彩搭配，遵循品牌形象和用户需求，使界面更加有吸引力和舒适感。
三、页面设计规范1. 导航栏- 导航栏应该位于页面的顶部或适当位置，固定在页面上方，确保用户在任何页面都能方便地浏览和操作。
- 导航栏的布局要合理，根据功能和重要性进行排列，避免导航过多造成混乱。
- 导航栏的样式要与品牌一致，醒目易辨认，提供适当的反馈。
2. 首页- 首页要简洁明了，突出网站或APP的核心功能和服务。
- 提供简洁的导航，帮助用户快速找到所需内容。
- 首页图片和文字要有足够的吸引力，能够吸引用户继续浏览或使用。
3. 内容布局- 界面布局要合理，内容分类明确，便于用户查找和理解。
- 使用网格布局或层次布局，确保信息层次清晰。
- 避免过多的滚动和分页，提供足够的内容预览和摘要。
- 整个页面的排版要对齐、统一，字体和字号要清晰可辨。
4. 按钮和操作- 按钮要有明确的边框和背景色，区分于普通文本。
- 按钮的文字要简洁明了，准确表达功能或指令。
- 按钮要具备反馈效果，如点击后有明显的变化或动画效果。
- 操作要简单明了，提供清晰的提示和指引，避免用户困惑或迷失。
5. 图片和多媒体- 图片要清晰、高质量，尽量避免模糊或拉伸的情况。
