01-乐动云课程项目-教育类iOS手机App设计-1

乐动云课程项目-教育类

iOS手机App设计-1课程目标了解教育类App设计理论掌握iOS标注规范与技巧掌握教育类iOS手机App设计技巧了解侧边栏导航与TAB导航2/39本章任务复习iOS系统界面设计规范了解乐动云课程项目需求乐动云课程首页界面设计乐动云课程课程详情页界面设计3/39目录教育类App相关理论乐动云课程项目需求分析&设计规划iOS系统界面设计规范回顾乐动云课程手机App首页设计乐动云课程详情页的设计4/39教育类App相关理论教育类App常见分类从用户人群的年龄来进行分类：5/39教育类App相关理论教育类App常见分类按照学习内容分类：视频类、文档类、泛学习类等按照平台分类：C2C（个人对个人）、B2C（机构对个人）、B2B2C（供应商到品牌商，品牌商再到用户）、C2C+O2O（个人对个人，线上到线下）、B2C+O2O（机构到个人，线上到线下）等6/39教育类App相关理论教育类App的常见视觉风格低幼儿童教育类

App界面视觉风格7/39教育类App相关理论教育类App的常见视觉风格中小学生教育类App界面视觉风格8/39教育类App相关理论教育类App的常见视觉风格青年教育类App界面视觉风格9/39教育类App相关理论教育类App的常见视觉风格青年教育类App界面视觉风格10/39教育类App相关理论教育类App的常见功能社交得用户者，得天下！口碑相传是传播App

强大有效的途径11/39教育类App相关理论教育类App的常见功能工具12/39教育类App相关理论教育类App的常见功能标注学习进程13/39目录教育类App相关理论乐动云课程项目需求分析&设计规划iOS系统界面设计规范回顾乐动云课程手机App首页设计乐动云课程详情页的设计14/39乐动云课程项目需求分析项目名称乐动云课程-教育类手机App设计乐动云课程项目需求分析乐动云课程已经有了成熟的网页端产品，为拓展市场、提高知名度、为用户提供更便携式的教育产品，现阶段要设计并制作课工场手机端App15/39乐动云课程项目需求分析乐动云课程主要目标用户分析目标用户：即将大学毕业的学生、初入职场的新人、希望拓展工作技能的职场人士，需要学习实用技能的人群年轻、有活力、乐于接受新兴事物有主动学习、乐于学习的思想专注力差、专注时间短16/39乐动云课程项目设计规划整合乐动云课程web端产品的核心功能乐动云课程从网页到手机的功能如何进行筛选?视觉表达如何进行统一?17/39乐动云课程项目设计规划整合乐动云课程web端产品的核心功能18/39乐动云课程项目设计规划确立设计风格界面以扁平化风格为主，简洁大方，容易适配到多终端，也利于用户沉浸在学习当中。间接的引导流程，令新用户也能很容易找到自己想学习的课程主体颜色采用蓝色（#178bff），视觉风格保持与网页端产品相统一使用默认字体、强调规范下的美学图标：极简主义线条图标、简单、秀气、时尚。且文件体积较小，有利于用户下载安装19/39乐动云课程项目设计规划确立结构布局绘制原型图，确立界面的布局原型图一般由产品经理提供20/39目录教育类App相关理论乐动云课程项目需求分析&设计规划iOS系统界面设计规范回顾乐动云课程手机App首页设计乐动云课程详情页的设计21/39iOS系统界面设计规范回顾iOS系统界面尺寸和分辨率在实际工作中，可以使用750x1334px进行设计ptiOS开发中用到的长度单位，是独立像素的意思不随屏幕密度PPI发生变化，是固定单位iPhone型号设计尺寸px屏幕像素密度ppi与px的换算关系iPhone6，6s，7，8750×1334326@2X分辨率1pt=2px22/39iOS系统界面设计规范回顾iOS系统中的栏状态栏导航栏标签栏工具栏iPhone型号设计尺寸px状态栏导航栏标签栏iPhone6，6s，7，8750×133440889823/39iOS系统界面设计规范回顾iOS系统中的栏工具栏和标签栏的区别：工具栏关注的是当前界面的操作，它的操作按钮中不能有屏幕的切换标签栏关注的是整体导航，有屏幕的切换在iOS系统中，如果同时需要工具栏和标签栏，那么受屏幕大小的限制最好适时地隐藏标签栏24/39iOS系统界面设计规范回顾iOS系统的按钮与可点击区域最小22×22pt~24×24pt在两倍屏中，即44×44px~48×48px为最小可点击区域的尺寸如果确实由于空间有限，必须要缩小按钮或可点击区域的尺寸，可以在增大可点击区域其中一条边长的前提下适当缩减另一条边的尺寸，以方便用户更容易的进行操作25/39iOS系统界面设计规范回顾iOS系统字体与字号苹方在设计时中文可以使用苹方、冬青黑体、苹果丽黑英文可以使用SanFrancisco、Helvetial由于系统更新，所使用的字体也会有所变化，因此以官方发布为主26/39iOS系统界面设计规范回顾iOS系统字体与字号界面中使用文字的时候，要保证文字极易被识别一款App中一般只使用一种或两种字体为了保证适配方便，尽量使用双数字号设计师可以通过文字的颜色、大小、所占比重、行间距来进行强调和区分27/39iOS系统界面设计规范回顾文本输入、输出控件按钮、滑块、选择控件对话框、活动指示器、进度条28/39目录教育类App相关理论乐动云课程项目需求分析&设计规划iOS系统界面设计规范回顾乐动云课程手机App首页设计乐动云课程详情页的设计29/39演示案例：

乐动云课程手机App首页设计需求描述界面设计尺寸：750×1334px或按照测试机实际尺寸进行设计分辨率：72ppi字体：华文细黑或苹方实现思路30/39乐动云课程手机App首页设计案例重点解析：使用750×1334px这个尺寸进行设计是为了能够更好的进行双系统适配标题图片的选择来自网页端产品31/39乐动云课程手机App首页设计案例重点解析：当页面较长时，可以将画布的高度拉伸，这样可以很方便的将本页所有内容设计进去。需要同时提供一个标准高度的尺寸，方便导入测试手机进行预览和测试32/39乐动云课程手机App首页设计案例重点解析：设计师在界面设计中，如果使用同一张占位图片，界面往往看起来太生硬，不够美观，所以建议不要只使用一张占位图片33/39目录教育类App相关理论乐动云课程项目需求分析&设计规划iOS系统界面设计规范回顾乐动云课程手机App首页设计乐动云课程详情页的设计34/39演示案例：乐动云课程详情页的设计需求描述界面设计尺寸：750×1334px或按照测试机实际尺寸进行设计分辨率：72ppi字体：华文细黑或苹方实现思路35/39课工场手机App首页设计案例重点解析：不同权重的文字选用不同的字号和颜色对齐和平分成套小图标的绘