阅读量:0
京东APP设计视觉规范iOS完整版是一套针对京东iOS应用的界面设计指南，包括色彩、字体、布局等规范。
京东APP设计视觉规范iOS完整版参考
色彩规范
| 颜色名称 | 色值（RGB） | 应用场景 |
| 主色调 | #E02E24 | 按钮、链接、重点文字等 |
| 辅色1 | #FFC83B | 提示信息、次要按钮 |
| 辅色2 | #2FB65F | 成功提示、重要通知 |
| 辅色3 | #FFFFFF | 背景、正文 |
| 辅色4 | #333333 | 标题、副标题 |
| 辅色5 | #999999 | 辅助文字、次级内容 |
| 辅色6 | #CCCCCC | 分割线、背景填充 |
| 辅色7 | #E5E5E5 | 输入框背景、卡片背景 |
字体规范
| 字体类别 | 字体名称 | 字号大小 | 行高 | 应用场景 |
| Helvetica Neue | 36px/44px | 自动 | 页面主标题 | |
| 副标题 | Helvetica Neue | 30px/38px | 自动 | 模块标题 |
| Helvetica Neue | 24px/32px | 自动 | 正文内容 | |
| 辅助文本 | Helvetica Neue | 16px/24px | 自动 | 注释、提示信息 |
| 按钮文本 | Helvetica Neue | 18px/26px | 自动 | 按钮上的文本 |
图标规范
| 图标类型 | 图标尺寸 | 使用场景 |
| 功能图标 | 48x48px | 导航栏、工具栏 |
| 操作图标 | 24x24px | 列表项操作、表单提交按钮 |
| 提示图标 | 18x18px | 消息通知、提示信息 |
| 装饰图标 | 根据需求定制 | 页面装饰、品牌展示 |
布局规范
栅格系统：采用12列栅格系统，以12为单位进行页面布局，确保元素对齐和间距一致。
间距规范：定义了不同元素之间的标准间距，如8px、16px、24px等，用于控制元素间的呼吸感。
响应式设计：确保在不同设备上都能提供良好的用户体验，通过媒体查询调整布局和样式。
交互规范
动画效果：定义了入场、出场、点击反馈等动画效果的持续时间、缓动函数等参数。
手势操作：明确了滑动、拖拽、缩放等手势操作的行为和反馈方式。
状态反馈：对于加载、错误、空状态等提供了明确的视觉反馈方案。
常见问题解答
Q1: 如何确保设计的一致性？
A1: 遵循上述规范中的色彩、字体、图标和布局规则，使用统一的设计语言和组件库，定期进行设计评审和用户测试以确保设计的一致性和可用性。
Q2: 如果遇到特殊情况需要自定义设计怎么办？
A2: 在特殊情况下，可以根据具体需求适当调整规范，但需确保整体风格与京东品牌形象保持一致，并经过团队讨论和审批流程，应记录下特殊处理情况，以便未来参考或优化。
【京东APP设计视觉规范iOS完整版参考】
本规范旨在为京东APP iOS端的设计提供一套统一的视觉标准，确保产品界面的一致性和美观性，提升用户体验，以下是对京东APP设计视觉规范的详细说明。
颜色规范
1、主色调
主色调：#FF6A00（橙色）
辅助色调：#333333（深灰色）、#666666（灰色）、#999999（浅灰色）
2、色彩搭配原则
遵循色彩心理学，使用和谐、对比、渐变等手法，提升视觉效果。
保持色彩一致性，避免过度使用颜色，造成视觉疲劳。
字体规范
1、主字体
PingFang SC Bold（粗体）
正文：PingFang SC Regular（常规）
2、字体大小
1824号
正文：1416号
描述：1214号
3、字体粗细
加粗
正文：常规
描述：常规
图标规范
1、图标风格
简洁、直观、易识别
使用扁平化设计，避免过于复杂的图形
2、图标尺寸
小图标：24x24
中图标：32x32
大图标：48x48
布局规范
1、间距
水平间距：816px
垂直间距：816px
行间距：16px
2、导航栏
导航栏高度：44px
导航栏16号字，居中显示
区
内容区左右边距：15px
内容区上下边距：15px
交互规范
1、按钮点击效果
按钮按下时，背景色变浅，文字颜色加深
按钮不可点击时，背景色变暗，文字颜色变浅
2、轮播图
轮播图切换动画：淡入淡出
轮播图指示点：圆形，颜色与背景形成对比
3、列表
列表项高度：50px
列表项点击效果：背景色变浅
动画规范
1、动画时长
平滑动画：0.30.5秒
切换动画：0.20.3秒
2、动画效果
使用简单的动画效果，避免过于复杂的动画
保持动画一致性，避免不同页面动画效果不一致
响应式设计
1、适配不同屏幕尺寸
使用自适应布局，确保在不同屏幕尺寸下界面正常显示
2、适配不同分辨率
使用矢量图标和矢量图形，确保在不同分辨率下清晰显示
京东APP设计视觉规范iOS完整版为设计师提供了一套详细的视觉标准，旨在提升用户体验，确保产品界面的一致性和美观性，设计师在使用规范时，应充分考虑用户需求，不断创新，为用户提供更好的产品体验。
仅为示例，实际规范可能包含更多细节和具体要求，建议查阅京东官方提供的最新设计规范文档以获取最准确的信息。
