移动端app的设计规范共23页文档
移动互联网手机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。
APP设计规范汇总
APP设计规范汇总1.响应式布局：设计应该适应不同屏幕尺寸和分辨率，以确保在各种设备上显示正常，并提供良好的用户体验。
2.一致的颜色和字体：应用程序中使用的颜色和字体应基于一套设计准则，并保持一致性。
这可以提高可读性和用户体验。
3.导航和菜单结构：在应用程序中，导航和菜单的结构应该简单明了，易于理解和使用。
用户应该能够轻松地找到他们所需的功能。
4.图标和按钮设计：图标和按钮应该具有一致的风格和设计语言，以便用户能够快速识别和操作。
5.图片和媒体素材：在应用程序中使用的图片和媒体素材应具有高质量和适当的分辨率，以确保它们在不同屏幕上显示正常。
6.键盘输入和文本输入：在设计输入字段和文本输入框时，应考虑到不同的输入方式和设备。
应该确保输入体验简单、流畅，并遵循文本输入的最佳实践。
7.错误处理和反馈机制：当应用程序出现错误时，应该提供清晰的错误提示和反馈机制，以帮助用户快速解决问题。
8.手势和交互设计：应该考虑到不同设备上的手势和交互方式，并确保它们易于使用和理解。
9.数据和隐私保护：设计应该确保用户数据的安全性和隐私保护，包括适当的安全措施和隐私政策。
10.文档和帮助：为应用程序提供清晰的文档和帮助指导，以帮助用户了解如何使用和解决问题。
11.可访问性和无障碍设计：设计应该考虑到残障人士和特殊需求用户的使用情况，并采取相应的无障碍设计措施。
12.应用程序性能和优化：设计应该考虑到应用程序的性能和优化，以确保应用程序在各种条件下都能流畅运行。
总之，APP设计规范是确保应用程序具有一致性、易于使用和良好用户体验的关键因素。
通过遵循这些规范，设计师和开发人员可以创建出优秀的移动应用程序。
移动端APP的设计原则
移动端APP的设计原则手机已经成为人们日常生活不可或缺的一部分。
移动端APP的崛起也随之而来。
无论是社交媒体、购物、支付，还是工具、游戏，用户通过手机APP来进行操作已经成为一种趋势。
作为一个APP设计师，应该怎么去设计一款移动端APP呢？本文将从功能性、可用性、可访问性和用户体验几个方面，探讨APP设计的原则。
1. 功能性一个APP应该具有明确的目的和功能。
在设计APP的时候，设计师必须清楚地了解用户的需求，然后针对这些需求进行设计。
这就需要设计师清楚地了解用户的心理和行为模式。
设计师需要在APP中放置明显的功能按钮，使用户能够快速的找到并使用所需要的功能。
此外，在设计APP时，应该注意APP的功能不要过于复杂，保持简单明了能更好地提供用户体验。
2. 可用性一个好的APP必须要具有良好的可用性，使用户轻松地使用它。
在设计APP时，需要考虑到用户的操作习惯和使用场景。
设计师应该早期测试APP的可用性，以检测存在的问题并及时改善设计，这能够有效地减少用户的疲劳感和失望感。
另外，应该保持APP界面的简洁性，不要过度追求美观而使UI变得过于复杂，这会造成用户迷失在APP界面中，无法实现需求。
3. 可访问性在移动设备上，为了提高APP的易访问性，需要考虑到屏幕大小、设备性能和网络连接等因素。
设计师需要注意到APP的布局和界面大小，以适应不同型号和尺寸的设备。
设计师还应该考虑APP的性能和加载速度，以提高用户的体验感。
如果APP包含较多的内容和图片，应该尝试压缩并控制其大小。
同时，在应用程序中提供离线和缓存功能可以极大地提高用户使用的便利性。
4. 用户体验用户体验是一款APP最重要的一项指标。
其要素包括交互设计、视觉设计和用户参与感。
在交互设计方面，应提供直观的用户界面，使用户可以直观地理解如何操作，并且提供及时的反馈。
在视觉设计方面，应该保持界面的美观，但不应过分夸张而让用户感到疲劳。
而在用户参与感方面，应该多参入用户的反馈，以及时调整和改善APP的设计。
移动终端APP安全设计规范
移动终端APP安全设计规范移动终端APP的安全性设计是确保用户信息和应用程序的完整性、机密性以及可用性的重要保障措施。
为了提高移动终端APP的安全性，开发人员需要遵循一系列的设计规范。
本文将介绍一些常用的移动终端APP安全设计规范，以帮助开发人员加强移动应用程序的安全性。
一、用户认证和授权设计规范1. 密码策略在用户注册和登录过程中，应该强制要求用户设置复杂的密码，并且定期要求用户更换密码。
密码应该至少包含数字、字母和特殊字符，并且长度不应少于8个字符。
2. 双因素认证为了进一步增强用户认证过程的安全性，可以引入双因素认证。
除了使用用户名和密码进行认证外，还可以要求用户输入动态验证码、指纹识别或面部识别等。
3. 权限管理在应用程序中，对用户权限进行有效管理是十分关键的。
应该仅为用户分配他们所需的权限，避免不必要的权限泄露和滥用。
同时，在用户授权过程中，应该明确说明将获取何种权限以及权限使用的目的。
二、数据存储和传输设计规范1. 敏感数据加密对于涉及敏感用户信息的数据，例如密码、银行卡号等，应在存储和传输过程中进行加密。
常用的加密算法有AES、RSA等。
在存储过程中，可以采用哈希算法对密码进行加密存储。
2. 安全传输在数据传输过程中，应使用安全的通信协议，例如HTTPS。
HTTPS通过SSL或TLS协议建立安全通信通道，保护数据的机密性和完整性。
3. 数据备份和灾难恢复为了防止数据丢失，开发人员应定期对数据进行备份，并确保备份数据的安全性。
在系统遭受灾难性事件后，能够及时恢复应用程序和数据是至关重要的。
三、安全漏洞防护设计规范1. 输入验证应对用户输入进行有效的验证，过滤恶意代码和非法字符，防止XSS（跨站脚本攻击）和SQL注入等攻击。
同时，开发人员应该对输入内容进行编码，确保数据的安全性。
2. 漏洞扫描与修复定期进行安全漏洞扫描，发现潜在的漏洞并及时进行修复。
与第三方安全机构进行合作，加强对应用程序的安全性测试和评估。
手机APP设计规范整理：图标和按钮视觉设计规范
⼿机APP设计规范整理：图标和按钮视觉设计规范⼿机APP设计规范指对整套APP界⾯进⾏视觉设计UI风格的统⼀，对界⾯元素的样式、颜⾊、图标按钮和⼤⼩设定统⼀的规范和使⽤原则。
⽅便以后协调合作和APP视觉迭代。
第⼀部分：APP界⾯⾥⾯的图标（iCON）设计规范我们在绘制APP UI界⾯设计⾥⾯的图标，在PS⾥⾯尽可能⽤形状来绘制。
保证图标和按钮是⽮量图。
切图的时候的格式都是PNG。
⽽且是图标和按钮的尺⼨⼤⼩必须为偶数。
App ⾥的图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。
⽽且每⼀个图标除了英⽂的命名以为，还需要⼀个中⽂名字的备注下图标所代表的含义。
让开发和其他同事看得懂。
这也是我们做APP视觉规范的最终⽬的。
每⼀个⼿机APP设计师的整理⾃⼰的APP图标视觉规范是不⼀样的。
25学堂就跟⼤家推荐2种图标视觉设计规范分类⽅法。
1、按照界⾯位置和模块来分类。
如下图：2、按照功能模块来分类：分为功能型图标和⽰意型图标。
如下图当然你也可以有⾃⼰的APP图标视觉规范规则。
只要你们⾃⼰可以看得明⽩就⾏。
以上2种APP界⾯⾥⾯的图标（iCON）设计规范分类⽅式，仅供参考。
第⼆部分：APP界⾯⾥⾯的按钮（Button）设计规范App ⾥的按钮拥有 4 种属性：分別为⼀般、点击、不能点击、选中按钮规范因不同功能和场景需要，设计不同的样式和颜⾊，在尺⼨上也分有：长、中、短；⽽且按不同⼿机平台长中短尺⼨也注意有所不同。
按钮切图⼀般以.9.png切图为最佳，⽆论是ios和andorid平台。
切记常见的图标和按钮视觉设计规范信息图如下：APP⾥⾯的按钮也分为：重要按钮、⼀般按钮和软弱按钮重要按钮：⼀般是指在整个界⾯当中⽐较⼤，醒⽬的位置，通常是指执⾏重要操作以及吸附在底部的按钮。
⽐如下单、搜索、确定、提交等等操作。
⼀般按钮：不是特别重要操作的按钮。
⽐如清空、退出、说明性的等按钮。
重要按钮和⼀般按钮都是⽂字是在按钮上的，⽽且占的⾯积⽐较⼤。
app设计规范
一、设计理念1.精于心，简于形通过精心的设计，使流程外观简约化，传达先进的技术给用户提供便捷简单的使用体验二、设计规范我们有统一的设计规范，用来规范App在外观展示上的规则，用来解决设计过程中遇到的问题。
好处：（1）使用户使用起来能够建立起精确的心理模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解.（2）降低培训、支持成本，支持人员不会很费力逐个指导。
（3）给用户统一感觉，不觉得混乱，心情愉快，满意度增加1.逻辑性设计为内容服务，根据逻辑关系通过视觉表现引导用户使用。
例如：app的标题和导航条通过字体的颜色大小突出重要度。
2.扩展性采取模块化设计的可扩展性，减少修改和再开发的成本例如：左右模块尺寸的统一可方便增加新的模块内容。
3.统一性用统一的视觉规范，变化不能超越统一的尺度，个性化内容要有统一风格的继承例如：无论每个功能模块如何追求个性，但不能脱离App的整体风格，要有继承和延续保持从属关系。
三、遵循视觉设计原理，确定设计方案1.例如以下原理：App中宽度、位置、边距为不可变数据。
App中背景白色为常用色值，对于特殊功能模块可根据特殊要求变更色彩或者使用背景图。
2.白色：雪花，纯静，清白，和平，轻盈, 纯洁、天真、洁净、真理黑色：夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致灰色：智能，成熟，财富，尊严，贡献, 抑制红色：胜利激情爱力精力性别热情、浪漫红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作黄色：明亮、光辉、黄金收获改革紫色正面：懦弱，叛逆，妒忌，危机创造、谜、忠诚、神秘、稀有绿色：植物，自然，春天，肥沃，希望, 安全自然、稳定、成长在北美文化中，绿色代表的是「行」，与环保意识有关，也经常被连结到有关财政方面的事物。
蓝色：天空，海洋，精神性，定度，和平, 个体忠诚、安全、保守、宁静选择颜色的时候尽量选择以上这些功能性的色系3.色彩构成（Interaction of color），可以理解为色彩的作用，是在色彩科学体系的基础上，研究符合人们知觉和心理原则的配色。
移动应用UI设计规范
移动应用UI设计规范在现如今移动设备的普及时代，移动应用已经成为了人们生活中不可或缺的一部分。
在这个快节奏的时代，优秀的移动应用UI 设计可以为用户带来更加舒适、便捷的使用体验，同时也成为了各个企业在竞争中的一种重要策略。
移动应用UI设计规范可以让移动应用更加符合用户的使用习惯和品牌特点,下面将详细介绍移动应用UI设计规范的相关要点。
一、界面风格与整体设计在移动应用进行UI设计时，设计师需要将整个界面设计分为若干个组件化的模块，需要保证整个UI设计所处的风格风格与公司或品牌形象保持一致。
需要确定一套配色方案、字体样式以及按钮等基础组件的样式,例如Adobe、Google等公司的移动应用UI 设计规范就都符合此要求。
另外，在整个UI界面设计上，需要重点关注一些常用的元素，如导航、底部工具栏、分页和弹窗等。
这样可以使得整个界面看起来清晰，便于用户快速找到需要的功能，并且可操作性更好。
二、交互方式和功能设计在移动应用UI设计过程中，设计师需要关注应用的交互方式和功能设计，例如手势识别、滑动、点击等，这些操作方式需要非常便捷，符合用户的操作需求。
为了增加用户的粘性和便捷性，应用中常见的一些操作可以做到一键完成，例如购物车下单、收藏等，以及一些其他智能化的功能，例如语音搜索、推荐等，也都是很好的体现。
当然，这些设计要求也需要考虑应用的功能性，需要根据应用的特点来进行评估和调整。
三、内容呈现在移动应用的UI设计中，良好的内容呈现也十分重要，需要设计出适合内容呈现的各种样式，例如列表、卡片、平铺等，然后根据不同的内容特点选择合适的样式。
另外，在内容的排版上，需要注意一些基本原则，例如清晰、简洁、易于理解等，这些原则可以提高用户的使用感受，并且也可以增加用户花费时间来了解您的产品的可能性。
四、文本编辑和排版在移动应用UI设计中，文本编辑和排版也十分重要，需要注意字号字体、行高、字形等要素。
设计过程中，为了便于调整文本排版风格，可以在设计语言方面采用 CSS 或 Web 标准作为主要标准，并且可以使用移动 UI 设计套件来方便地控制排版与绘图的样式和格式，以确保良好的可读性。
移动互联网应用(APP)适老化通用设计规范
移动互联网应用（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。