01 乐动云课程项目-教育类iOS手机App设计-1
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
百度文库26/39
iOS系统界面设计规范回顾
iOS系统字体与字号
界面中使用文字的时候，要保证文字极易被识别 一款App中一般只使用一种或两种字体 为了保证适配方便，尽量使用双数字号 设计师可以通过文字的颜色、大小、所占比重、行间距来进行强调和区分
27/39
iOS系统界面设计规范回顾
文本输入、输出控件 按钮、滑块、选择控件 对话框、活动指示器、进度条
工具栏关注的是当前界面的操作，它的操作按钮中不能有屏幕的切换 标签栏关注的是整体导航，有屏幕的切换 在iOS系统中，如果同时需要工具栏和标签栏，那么受屏幕大小的限制最好适时地隐藏标
签栏
24/39
iOS系统界面设计规范回顾
iOS系统的按钮与可点击区域
最小22×22pt~24×24pt 在两倍屏中，即 44×44px~48×48px为最小可点击区域的尺寸 如果确实由于空间有限，必须要缩小按钮或可点击区域的尺寸，可以在增大可点
3/39
目录
教育类App相关理论 乐动云课程项目需求分析&设计规划 iOS系统界面设计规范回顾 乐动云课程手机App首页设计 乐动云课程详情页的设计
4/39
教育类App相关理论
教育类App常见分类
从用户人群的年龄来进行分类：
5/39
教育类App相关理论
教育类App常见分类
低幼儿童教育类 App界面视觉风格
7/39
教育类App相关理论
教育类App的常见视觉风格
中小学生教育类App界面视觉风格
8/39
教育类App相关理论
教育类App的常见视觉风格
青年教育类App界面视觉风格
9/39
教育类App相关理论
教育类App的常见视觉风格
青年教育类App界面视觉风格
17/39
乐动云课程项目设计规划
整合乐动云课程web端产品的核心功能
18/39
乐动云课程项目设计规划
确立设计风格
界面以扁平化风格为主，简洁大方，容易适配到多终端，也利于用户沉浸在学习 当中。间接的引导流程，令新用户也能很容易找到自己想学习的课程
主体颜色采用蓝色
（#178bff），视觉风格保持与网页端产品相统一
14/39
乐动云课程项目需求分析
项目名称
乐动云课程-教育类手机App设计
乐动云课程项目需求分析
乐动云课程已经有了成熟的网页端产品，为拓 展市场、提高知名度、为用户提供更便携式的 教育产品，现阶段要设计并制作课工场手机端 App
15/39
乐动云课程项目需求分析
乐动云课程 主要目标用户分析
击区域其中一条边长的前提下适当缩减另一条边的尺寸，以方便用户更容易的进 行操作
25/39
iOS系统界面设计规范回顾
iOS系统字体与字号
苹方 在设计时中文可以使用苹方、冬青黑体、苹果丽黑 英文可以使用San Francisco、Helvetial 由于系统更新，所使用的字体也会有所变化，因此以官方发布为主
乐动云课程项目-教育类 iOS手机App设计-1
课程目标
了解教育类App设计理论 掌握iOS标注规范与技巧 掌握教育类iOS手机App设计技巧 了解侧边栏导航与TAB导航
2/39
本章任务
复习iOS系统界面设计规范 了解乐动云课程项目需求 乐动云课程首页界面设计 乐动云课程课程详情页界面设计
21/39
iOS系统界面设计规范回顾
iOS系统界面尺寸和分辨率
在实际工作中，可以使用 750x1334px 进行设计
iPhone型号
设计尺寸 px
iPhone6，6s，7，8 750×1334
屏幕像素密度ppi 326 @2X分辨率
与px的换算关系 1pt=2px
pt
iOS 开发中用到的长度单位，是独立像素的意思 不随屏幕密度PPI发生变化，是固定单位
目标用户：即将大学毕业的学生、初入职场的新人、希望拓展工作技能的职场人 士，需要学习实用技能的人群
年轻、有活力、乐于接受新兴事物 有主动学习、乐于学习的思想 专注力差、专注时间短
16/39
乐动云课程项目设计规划
整合乐动云课程web端产品的核心功能
乐动云课程从网页到手机的功能如何进行筛选? 视觉表达如何进行统一?
22/39
iOS系统界面设计规范回顾
iOS系统中的栏
状态栏 导航栏 标签栏 工具栏
iPhone型号
设计尺寸 px
iPhone6，6s，7，8 750×1334
状态栏 40
导航栏 88
23/39
标签栏 98
iOS系统界面设计规范回顾
iOS系统中的栏
工具栏和标签栏的区别：
28/39
目录
教育类App相关理论 乐动云课程项目需求分析&设计规划 iOS系统界面设计规范回顾 乐动云课程手机App首页设计 乐动云课程详情页的设计
10/39
教育类App相关理论
教育类App的常见功能
社交
得用户者，得天下！ 口碑相传是传播App
强大有效的途径
11/39
教育类App相关理论
教育类App的常见功能
工具
12/39
教育类App相关理论
教育类App的常见功能
标注学习进程
13/39
目录
教育类App相关理论 乐动云课程项目需求分析&设计规划 iOS系统界面设计规范回顾 乐动云课程手机App首页设计 乐动云课程详情页的设计
使用默认字体、强调规范下的美学
图标：极简主义线条图标、简单、秀气、时尚。且文件体积较小，有利于用户下 载安装
19/39
乐动云课程项目设计规划
确立结构布局
绘制原型图，确立界面的布局 原型图一般由产品经理提供
20/39
目录
教育类App相关理论 乐动云课程项目需求分析&设计规划 iOS系统界面设计规范回顾 乐动云课程手机App首页设计 乐动云课程详情页的设计
按照学习内容分类：视频类、文档类、泛学习类等 按照平台分类：C2C（个人对个人）、B2C（机构对个人）、B2B2C（供应商到品
牌商，品牌商再到用户）、C2C+O2O（个人对个人，线上到线下）、B2C+O2O （机构到个人，线上到线下）等
6/39
教育类App相关理论
教育类App的常见视觉风格
iOS系统界面设计规范回顾
iOS系统字体与字号
界面中使用文字的时候，要保证文字极易被识别 一款App中一般只使用一种或两种字体 为了保证适配方便，尽量使用双数字号 设计师可以通过文字的颜色、大小、所占比重、行间距来进行强调和区分
27/39
iOS系统界面设计规范回顾
文本输入、输出控件 按钮、滑块、选择控件 对话框、活动指示器、进度条
工具栏关注的是当前界面的操作，它的操作按钮中不能有屏幕的切换 标签栏关注的是整体导航，有屏幕的切换 在iOS系统中，如果同时需要工具栏和标签栏，那么受屏幕大小的限制最好适时地隐藏标
签栏
24/39
iOS系统界面设计规范回顾
iOS系统的按钮与可点击区域
最小22×22pt~24×24pt 在两倍屏中，即 44×44px~48×48px为最小可点击区域的尺寸 如果确实由于空间有限，必须要缩小按钮或可点击区域的尺寸，可以在增大可点
3/39
目录
教育类App相关理论 乐动云课程项目需求分析&设计规划 iOS系统界面设计规范回顾 乐动云课程手机App首页设计 乐动云课程详情页的设计
4/39
教育类App相关理论
教育类App常见分类
从用户人群的年龄来进行分类：
5/39
教育类App相关理论
教育类App常见分类
低幼儿童教育类 App界面视觉风格
7/39
教育类App相关理论
教育类App的常见视觉风格
中小学生教育类App界面视觉风格
8/39
教育类App相关理论
教育类App的常见视觉风格
青年教育类App界面视觉风格
9/39
教育类App相关理论
教育类App的常见视觉风格
青年教育类App界面视觉风格
17/39
乐动云课程项目设计规划
整合乐动云课程web端产品的核心功能
18/39
乐动云课程项目设计规划
确立设计风格
界面以扁平化风格为主，简洁大方，容易适配到多终端，也利于用户沉浸在学习 当中。间接的引导流程，令新用户也能很容易找到自己想学习的课程
主体颜色采用蓝色
（#178bff），视觉风格保持与网页端产品相统一
14/39
乐动云课程项目需求分析
项目名称
乐动云课程-教育类手机App设计
乐动云课程项目需求分析
乐动云课程已经有了成熟的网页端产品，为拓 展市场、提高知名度、为用户提供更便携式的 教育产品，现阶段要设计并制作课工场手机端 App
15/39
乐动云课程项目需求分析
乐动云课程 主要目标用户分析
击区域其中一条边长的前提下适当缩减另一条边的尺寸，以方便用户更容易的进 行操作
25/39
iOS系统界面设计规范回顾
iOS系统字体与字号
苹方 在设计时中文可以使用苹方、冬青黑体、苹果丽黑 英文可以使用San Francisco、Helvetial 由于系统更新，所使用的字体也会有所变化，因此以官方发布为主
乐动云课程项目-教育类 iOS手机App设计-1
课程目标
了解教育类App设计理论 掌握iOS标注规范与技巧 掌握教育类iOS手机App设计技巧 了解侧边栏导航与TAB导航
2/39
本章任务
复习iOS系统界面设计规范 了解乐动云课程项目需求 乐动云课程首页界面设计 乐动云课程课程详情页界面设计
21/39
iOS系统界面设计规范回顾
iOS系统界面尺寸和分辨率
在实际工作中，可以使用 750x1334px 进行设计
iPhone型号
设计尺寸 px
iPhone6，6s，7，8 750×1334
屏幕像素密度ppi 326 @2X分辨率
与px的换算关系 1pt=2px
pt
iOS 开发中用到的长度单位，是独立像素的意思 不随屏幕密度PPI发生变化，是固定单位
目标用户：即将大学毕业的学生、初入职场的新人、希望拓展工作技能的职场人 士，需要学习实用技能的人群
年轻、有活力、乐于接受新兴事物 有主动学习、乐于学习的思想 专注力差、专注时间短
16/39
乐动云课程项目设计规划
整合乐动云课程web端产品的核心功能
乐动云课程从网页到手机的功能如何进行筛选? 视觉表达如何进行统一?
22/39
iOS系统界面设计规范回顾
iOS系统中的栏
状态栏 导航栏 标签栏 工具栏
iPhone型号
设计尺寸 px
iPhone6，6s，7，8 750×1334
状态栏 40
导航栏 88
23/39
标签栏 98
iOS系统界面设计规范回顾
iOS系统中的栏
工具栏和标签栏的区别：
28/39
目录
教育类App相关理论 乐动云课程项目需求分析&设计规划 iOS系统界面设计规范回顾 乐动云课程手机App首页设计 乐动云课程详情页的设计
10/39
教育类App相关理论
教育类App的常见功能
社交
得用户者，得天下！ 口碑相传是传播App
强大有效的途径
11/39
教育类App相关理论
教育类App的常见功能
工具
12/39
教育类App相关理论
教育类App的常见功能
标注学习进程
13/39
目录
教育类App相关理论 乐动云课程项目需求分析&设计规划 iOS系统界面设计规范回顾 乐动云课程手机App首页设计 乐动云课程详情页的设计
使用默认字体、强调规范下的美学
图标：极简主义线条图标、简单、秀气、时尚。且文件体积较小，有利于用户下 载安装
19/39
乐动云课程项目设计规划
确立结构布局
绘制原型图，确立界面的布局 原型图一般由产品经理提供
20/39
目录
教育类App相关理论 乐动云课程项目需求分析&设计规划 iOS系统界面设计规范回顾 乐动云课程手机App首页设计 乐动云课程详情页的设计
按照学习内容分类：视频类、文档类、泛学习类等 按照平台分类：C2C（个人对个人）、B2C（机构对个人）、B2B2C（供应商到品
牌商，品牌商再到用户）、C2C+O2O（个人对个人，线上到线下）、B2C+O2O （机构到个人，线上到线下）等
6/39
教育类App相关理论
教育类App的常见视觉风格