《01-乐动云课程项目-教育类iOS手机App设计-1.pptx》由会员分享，可在线阅读，更多相关《01-乐动云课程项目-教育类iOS手机App设计-1.pptx（39页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、乐动云课程项目-教育类iOS手机App设计-1课程目标n了解教育类App设计理论n掌握iOS标注规范与技巧n掌握教育类iOS手机App设计技巧n了解侧边栏导航与TAB导航2/39本章任务n复习iOS系统界面设计规范n了解乐动云课程项目需求n乐动云课程首页界面设计n乐动云课程课程详情页界面设计3/39目录n教育类App相关理论n乐动云课程项目需求分析&设计规划niOS系统界面设计规范回顾n乐动云课程手机App首页设计n乐动云课程详情页的设计4/39教育类App相关理论n教育类App常见分类l从用户人群的年龄来进行分类：5/39教育类App相关理论n教育类App常见分类l按照学习内容分类：视频类、
2、文档类、泛学习类等l按照平台分类：C2C（个人对个人）、B2C（机构对个人）、B2B2C（供应商到品牌商，品牌商再到用户）、C2C+O2O（个人对个人，线上到线下）、B2C+O2O（机构到个人，线上到线下）等6/39教育类App相关理论n教育类App的常见视觉风格l低幼儿童教育类App界面视觉风格7/39教育类App相关理论n教育类App的常见视觉风格l中小学生教育类App界面视觉风格8/39教育类App相关理论n教育类App的常见视觉风格l青年教育类App界面视觉风格9/39教育类App相关理论n教育类App的常见视觉风格l青年教育类App界面视觉风格10/39教育类App相关理论n教育类A
3、pp的常见功能l社交p得用户者，得天下！p口碑相传是传播App强大有效的途径11/39教育类App相关理论n教育类App的常见功能l工具12/39教育类App相关理论n教育类App的常见功能l标注学习进程13/39目录n教育类App相关理论n乐动云课程项目需求分析&设计规划niOS系统界面设计规范回顾n乐动云课程手机App首页设计n乐动云课程详情页的设计14/39乐动云课程项目需求分析n项目名称l乐动云课程-教育类手机App设计n乐动云课程项目需求分析l乐动云课程已经有了成熟的网页端产品，为拓展市场、提高知名度、为用户提供更便携式的教育产品，现阶段要设计并制作课工场手机端App15/39乐动云
4、课程项目需求分析n乐动云课程 主要目标用户分析l目标用户：即将大学毕业的学生、初入职场的新人、希望拓展工作技能的职场人士，需要学习实用技能的人群p年轻、有活力、乐于接受新兴事物p有主动学习、乐于学习的思想p专注力差、专注时间短16/39乐动云课程项目设计规划n整合乐动云课程web端产品的核心功能乐动云课程从网页到手机的功能如何进行筛选?视觉表达如何进行统一?17/39乐动云课程项目设计规划n整合乐动云课程web端产品的核心功能18/39乐动云课程项目设计规划n确立设计风格l界面以扁平化风格为主，简洁大方，容易适配到多终端，也利于用户沉浸在学习当中。间接的引导流程，令新用户也能很容易找到自己想学
5、习的课程l主体颜色采用蓝色 （#178bff），视觉风格保持与网页端产品相统一l使用默认字体、强调规范下的美学l图标：极简主义线条图标、简单、秀气、时尚。且文件体积较小，有利于用户下载安装19/39乐动云课程项目设计规划n确立结构布局l绘制原型图，确立界面的布局l原型图一般由产品经理提供20/39目录n教育类App相关理论n乐动云课程项目需求分析&设计规划niOS系统界面设计规范回顾n乐动云课程手机App首页设计n乐动云课程详情页的设计21/39iOS系统界面设计规范回顾niOS系统界面尺寸和分辨率l在实际工作中，可以使用 750 x1334px 进行设计nptliOS 开发中用到的长度单位，
6、是独立像素的意思l不随屏幕密度PPI发生变化，是固定单位iPhone型号设计尺寸 px屏幕像素密度ppi与px的换算关系iPhone6，6s，7，875013343262X分辨率1pt=2px22/39iOS系统界面设计规范回顾niOS系统中的栏l状态栏l导航栏l标签栏l工具栏iPhone型号设计尺寸 px状态栏导航栏标签栏iPhone6，6s，7，8750133440889823/39iOS系统界面设计规范回顾niOS系统中的栏l工具栏和标签栏的区别：p工具栏关注的是当前界面的操作，它的操作按钮中不能有屏幕的切换p标签栏关注的是整体导航，有屏幕的切换p在iOS系统中，如果同时需要工具栏和标签
7、栏，那么受屏幕大小的限制最好适时地隐藏标签栏24/39iOS系统界面设计规范回顾niOS系统的按钮与可点击区域l最小2222pt2424ptl在两倍屏中，即 4444px4848px为最小可点击区域的尺寸l如果确实由于空间有限，必须要缩小按钮或可点击区域的尺寸，可以在增大可点击区域其中一条边长的前提下适当缩减另一条边的尺寸，以方便用户更容易的进行操作25/39iOS系统界面设计规范回顾niOS系统字体与字号l苹方l在设计时中文可以使用苹方、冬青黑体、苹果丽黑l英文可以使用San Francisco、Helvetiall由于系统更新，所使用的字体也会有所变化，因此以官方发布为主26/39iOS系
8、统界面设计规范回顾niOS系统字体与字号l界面中使用文字的时候，要保证文字极易被识别l一款App中一般只使用一种或两种字体l为了保证适配方便，尽量使用双数字号l设计师可以通过文字的颜色、大小、所占比重、行间距来进行强调和区分27/39iOS系统界面设计规范回顾n文本输入、输出控件n按钮、滑块、选择控件n对话框、活动指示器、进度条28/39目录n教育类App相关理论n乐动云课程项目需求分析&设计规划niOS系统界面设计规范回顾n乐动云课程手机App首页设计n乐动云课程详情页的设计29/39演示案例演示案例：乐动云课程手机App首页设计n需求描述l界面设计尺寸：7501334px或按照测试机实际尺
9、寸进行设计l分辨率：72ppil字体：华文细黑或苹方n实现思路30/39乐动云课程手机App首页设计n案例重点解析：l使用7501334px这个尺寸进行设计是为了能够更好的进行双系统适配l标题图片的选择来自网页端产品31/39乐动云课程手机App首页设计n案例重点解析：l当页面较长时，可以将画布的高度拉伸，这样可以很方便的将本页所有内容设计进去。需要同时提供一个标准高度的尺寸，方便导入测试手机进行预览和测试32/39乐动云课程手机App首页设计n案例重点解析：l设计师在界面设计中，如果使用同一张占位图片，界面往往看起来太生硬，不够美观，所以建议不要只使用一张占位图片33/39目录n教育类App
10、相关理论n乐动云课程项目需求分析&设计规划niOS系统界面设计规范回顾n乐动云课程手机App首页设计n乐动云课程详情页的设计34/39演示案例演示案例：乐动云课程详情页的设计n需求描述l界面设计尺寸：7501334px或按照测试机实际尺寸进行设计l分辨率：72ppil字体：华文细黑或苹方n实现思路35/39课工场手机App首页设计n案例重点解析：l不同权重的文字选用不同的字号和颜色l对齐和平分l成套小图标的绘制36/39本章总结n教育类App有哪些特征？niOS系统界面设计规范有哪些需要格外注意的？37/39本章作业本章作业n完成乐动云课程首页、课程详情页的绘制n补充完成乐动云课程其他界面的绘制n设计并制作背单词Appp设计并制作首屏界面、课程详情页界面等p要求严格符合iOS设计标准n请教员根据班级情况布置预习38/39