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

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