术与道 移动应用UI设计必修课课件

术与道移动应用UI设计必修课演讲人2021-11-112020术与道移动应用UI设计必修课演讲人2021-11-1120101.02.03.04.05.目录对本书的赞誉本书涵盖了哪些内容其他术之篇道之篇01.02.03.04.05.目录对本书的赞誉本书涵盖了哪些2对本书的赞誉01对本书的赞誉013对本书的赞誉对本书的赞誉4本书涵盖了哪些内容02本书涵盖了哪些内容025本书涵盖了哪些内容本书涵盖了哪些内容6其他03其他037其他

其他8术之篇04术之篇04901基础知识0102030405061.1什么是UI设计1.2什么是App1.3智能手机的屏幕1.4网点密度与像素密度1.5常见手机屏幕规格1.6iPhone6Plus的屏幕01基础知识0102030405061.1什么是UI设计1001基础知识1.7智能手机的传感器01基础知识1.7智能手机的传感器1101基础知识1.1什么是UI设计1.1.1UI的相关概念1.1.2UI的学习方法01基础知识1.1什么是UI设计1.1.1UI的相关概1201基础知识1.2什么是App1.2.1App的概念1.2.2App的开发流程01基础知识1.2什么是App1.2.1App的概念1301基础知识1.3智能手机的屏幕1.3.1英寸（Inch）1.3.2像素（Pixel）1.3.3分辨率（Resolution）01基础知识1.3智能手机的屏幕1.3.1英寸（Inc1401基础知识1.4网点密度与像素密度1.4.1网点密度（DPI）1.4.2像素密度（PPI）1.4.3DPI与PPI1.4.4逻辑分辨率与像素倍率1.4.5视网膜屏幕01基础知识1.4网点密度与像素密度1.4.1网点密度1501基础知识1.5常见手机屏幕规格1.5.1热门手机规格1.5.2热门手机分辨率01基础知识1.5常见手机屏幕规格1.5.1热门手机规1601基础知识1.7智能手机的传感器1.7.1摄像头1.7.2麦克风1.7.3GPS1.7.4电子罗盘1.7.5重力感应器01基础知识1.7智能手机的传感器1.7.1摄像头1701基础知识1.7智能手机的传感器1.7.6加速度传感器1.7.7光线传感器1.7.8距离传感器1.7.9气压传感器1.7.10三轴陀螺仪01基础知识1.7智能手机的传感器1.7.6加速度传感1802设计风格012.1风格2.2颜色022.3如何选择颜色032.4字体0402设计风格012.1风格2.2颜色022.3如何选1902设计风格2.1风格2.1.1什么是设计风格2.1.2如何确立设计风格02设计风格2.1风格2.1.1什么是设计风格2002设计风格2.2颜色2.2.1认识色彩2.2.2RGB与HSB2.2.3颜色搭配基础02设计风格2.2颜色2.2.1认识色彩2102设计风格2.3如何选择颜色2.3.1常见App的颜色2.3.2颜色的性格02设计风格2.3如何选择颜色2.3.1常见App的颜2202设计风格2.4字体2.4.1衬线体和无衬线体2.4.2系统内置字体2.4.3什么时候选择内嵌字体2.4.4如何使用内嵌字体02设计风格2.4字体2.4.1衬线体和无衬线体2303图标与图片013.1App图标特点023.2App图标设计流程033.3App图标设计方法043.4iOS图标规范053.5Android图标规范063.6设计线性图标03图标与图片013.1App图标特点023.2App2403图标与图片3.7像素对齐13.8图片的使用203图标与图片3.7像素对齐13.8图片的使用22503图标与图片3.1App图标特点3.1.1独特的图形3.1.2表意准确3.1.3谨慎用色3.1.4避免使用大量文字3.1.5避免使用照片3.1.6适应不同场景03图标与图片3.1App图标特点3.1.1独特的图形2603图标与图片3.2App图标设计流程3.2.1第一步：寻找隐喻3.2.2第二步：抽象图形3.2.3第三步：竞品分析3.2.4第四步：确定风格3.2.5五步：调整细3.2.6第六步：场景测试03图标与图片3.2App图标设计流程3.2.1第一步2703图标与图片3.3App图标设计方法3.3.1正负形组合3.3.2折叠图形3.3.3局部提取3.3.4线性图标3.3.5透明渐变3.3.6色块拼接3.3.7图形复用3.3.8背景组合03图标与图片3.3App图标设计方法3.3.1正负形2803图标与图片3.4iOS图标规范3.4.1iOS图标适配3.4.2iOS图标标准03图标与图片3.4iOS图标规范3.4.1iOS图标2903图标与图片3.5Android图标规范3.5.1Android图标适配3.5.2图标的视觉统一3.5.3Android图标标准03图标与图片3.5Android图标规范3.5.1A3003图标与图片3.6设计线性图标3.6.1线性图标的风格3.6.2线性图标的绘制方法03图标与图片3.6设计线性图标3.6.1线性图标的风3103图标与图片3.7像素对齐3.7.1像素为什么要对齐3.7.2像素如何对齐3.7.3像素缩放的对齐3.7.4像素对齐的微调03图标与图片3.7像素对齐3.7.1像素为什么要对齐3203图标与图片3.8图片的使用3.8.1矢量图与位图3.8.2图片的格式3.8.3图片的使用3.8.4图片的存储3.8.5图片的比例03图标与图片3.8图片的使用3.8.1矢量图与位图3304iOS系统界面4.1栏4.2内容视图4.3临时视图04iOS系统界面4.1栏4.2内容视图4.3临时视3404iOS系统界面4.1栏4.1.1状态栏4.1.2导航栏4.1.3标签栏4.1.4工具栏04iOS系统界面4.1栏4.1.1状态栏3504iOS系统界面4.2内容视图4.2.1表格视图4.2.2文本视图4.2.3Web视图04iOS系统界面4.2内容视图4.2.1表格视图3604iOS系统界面4.3临时视图4.3.1对话框4.3.2操作列表04iOS系统界面4.3临时视图4.3.1对话框3705Android系统界面5.1导航机制5.2界面布局5.5Android系统的插件5.4操作方式5.3消息推送05Android系统界面5.1导航机制5.2界面布局3805Android系统界面5.1导航机制5.1.1硬件特性5.1.2iOS导航机制5.1.3Android导航机制05Android系统界面5.1导航机制5.1.1硬件3905Android系统界面5.2界面布局5.2.1结构差异5.2.2操作栏5.2.3多任务05Android系统界面5.2界面布局5.2.1结构4005Android系统界面5.3消息推送5.3.1推送方式5.3.2通知方式05Android系统界面5.3消息推送5.3.1推送4105Android系统界面5.4操作方式5.4.1编辑5.4.2选择5.4.3复制粘贴5.4.4删除05Android系统界面5.4操作方式5.4.1编辑4205Android系统界面5.5Android系统的插件5.5.1桌面插件5.5.2设计趋势05Android系统界面5.5Android系统的插件43道之篇05道之篇054406建立规范6.4布局6.5图片规范6.1组建规范6.2颜色规范6.3文字规范06建立规范6.4布局6.5图片规范6.1组建规范64506建立规范6.1组建规范6.1.1设计规范的目的6.1.2规范的组成06建立规范6.1组建规范6.1.1设计规范的目的4606建立规范6.2颜色规范6.2.1为什么选择HSB6.2.2创建调色板6.2.3调色板应用06建立规范6.2颜色规范6.2.1为什么选择HSB4706建立规范6.3文字规范6.3.1iOS系统6.3.2Android系统6.3.3系统字号06建立规范6.3文字规范6.3.1iOS系统4806建立规范6.4布局6.4.1框架6.4.2顶部导航栏6.4.3顶部标签栏6.4.4底部标签栏06建立规范6.4布局6.4.1框架4906建立规范6.5图片规范6.5.1用户头像6.5.2商品图片6.5.3无数据图片06建立规范6.5图片规范6.5.1用户头像5007设计组件7.4按钮规范7.5其他组件7.1控制元素7.2筛选器7.3表单控件07设计组件7.4按钮规范7.5其他组件7.1控制元5107设计组件7.1控制元素7.1.1活动指示器7.1.2进度指示器7.1.3页码控制器7.1.4刷新控件7.1.5滑动器7.1.6开关7.1.7步进器07设计组件7.1控制元素7.1.1活动指示器5207设计组件7.2筛选器7.2.1选择器7.2.2日期时间选择器7.2.3分段控件7.2.4选项卡7.2.5排序7.2.6地区选择07设计组件7.2筛选器7.2.1选择器5307设计组件7.3表单控件7.3.1单选框7.3.2复选框7.3.3文本框7.3.4下拉框7.3.5表格07设计组件7.3表单控件7.3.1单选框5407设计组件7.4按钮规范7.4.1背景+文字7.4.2背景+图标7.4.3图标+文字7.4.4文字07设计组件7.4按钮规范7.4.1背景+文字5507设计组件7.5其他组件7.5.1加载更多7.5.2非模态浮层7.5.3模态浮层07设计组件7.5其他组件7.5.1加载更多5608导航设计018.1扁平导航028.2内容主导式导航038.3列表式导航048.4其他导航08导航设计018.1扁平导航028.2内容主导式导航5708导航设计8.1扁平导航8.1.1标签导航8.1.2舵式导航8.1.3宫格式导航08导航设计8.1扁平导航8.1.1标签导航5808导航设计8.2内容主导式导航8.2.1陈列式导航8.2.2旋转木马式导航08导航设计8.2内容主导式导航8.2.1陈列式导航598.3列表式导航8.3.1列表式8.3.2抽屉式08导航设计8.3列表式导航8.3.1列表式08导航设计6008导航设计8.4其他导航8.4.1点聚式导航8.4.2瀑布式导航08导航设计8.4其他导航8.4.1点聚式导航6109界面设计9.1首页019.4个人中心049.2列表页029.5启动页059.3详情页039.6引导页0609界面设计9.1首页019.4个人中心049.2列6209界面设计9.1首页9.1.1搜索栏9.1.2标签栏9.1.3卡片式设计9.1.4楼层设计09界面设计9.1首页9.1.1搜索栏6309界面设计9.2列表页9.2.1消息列表9.2.2横向卡片9.2.3瀑布流09界面设计9.2列表页9.2.1消息列表6409界面设计9.3详情页9.3.1全局按钮9.3.2快速通道09界面设计9.3详情页9.3.1全局按钮6509界面设计9.4个人中心9.4.1头像区域9.4.2个人信息9.4.3功能模块09界面设计9.4个人中心9.4.1头像区域6609界面设计9.5启动页9.5.1品牌宣传类9.5.2首页样式类9.5.3情感故事类9.5.4节日氛围类09界面设计9.5启动页9.5.1品牌宣传类6709界面设计9.6引导页9.6.1功能介绍类9.6.2使用说明类9.6.3情感故事类09界面设计9.6引导页9.6.1功能介绍类6810设计适配0110.1iOS系统适配0210.2Android系统适配0310.3iOS系统适配Android系统0410.4标注设计0510.5点九图0610.6切图10设计适配0110.1iOS系统适配0210.2An6910设计适配10.1iOS系统适配10.1.1设计基准10.1.2设计适配10.1.3适配规则10设计适配10.1iOS系统适配10.1.1设计基准7010设计适配10.2Android系统适配10.2.1密度独立像素10.2.2设计基准10.2.3适配方法10设计适配10.2Android系统适配10.2.17110设计适配10.3iOS系统适配Android系统10.3.1设计目的10.3.2换算关系10.3.3适配方法10设计适配10.3iOS系统适配Android系统107210设计适配10.4标注设计10.4.1标注基准10.4.2标注方法10设计适配10.4标注设计10.4.1标注基准7310设计适配10.5点九图10.5.1什么是点九图10.5.2如何制作点九图10设计适配10.5点九图10.5.1什么是点九图7410设计适配10.6切图10.6.1界面切图10.6.2图标切图10.6.3命名规则10设计适配10.6切图10.6.1界面切图7511手势应用11.1为什么使用手势11.2常用手势操作11.3手势设计禁忌11手势应用11.1为什么使用手势11.2常用手势操作7611手势应用11.2常用手势操作11.2.1单击11.2.2双击11.2.3上下滑动11.2.4左右滑动11.2.5拖曳11.2.6张开/闭合11.2.7长按11.2.8摇晃11手势应用11.2常用手势操作11.2.1单击7711手势应用11.3手势设计禁忌11.3.1使用标准手势11.3.2定义标准手势11.3.3使用简单手势11.3.4手势使用说明11手势应用11.3手势设计禁忌11.3.1使用标准手78道之篇12设计资源12.1网站资源0112.3图片资源0312.2图标资源02道之篇12设计资源12.1网站资源0112.3图片资源79感谢聆听2020感谢聆听202080术与道移动应用UI设计必修课演讲人2021-11-112020术与道移动应用UI设计必修课演讲人2021-11-11208101.02.03.04.05.目录对本书的赞誉本书涵盖了哪些内容其他术之篇道之篇01.02.03.04.05.目录对本书的赞誉本书涵盖了哪些82对本书的赞誉01对本书的赞誉0183对本书的赞誉对本书的赞誉84本书涵盖了哪些内容02本书涵盖了哪些内容0285本书涵盖了哪些内容本书涵盖了哪些内容86其他03其他0387其他

其他88术之篇04术之篇048901基础知识0102030405061.1什么是UI设计1.2什么是App1.3智能手机的屏幕1.4网点密度与像素密度1.5常见手机屏幕规格1.6iPhone6Plus的屏幕01基础知识0102030405061.1什么是UI设计9001基础知识1.7智能手机的传感器01基础知识1.7智能手机的传感器9101基础知识1.1什么是UI设计1.1.1UI的相关概念1.1.2UI的学习方法01基础知识1.1什么是UI设计1.1.1UI的相关概9201基础知识1.2什么是App1.2.1App的概念1.2.2App的开发流程01基础知识1.2什么是App1.2.1App的概念9301基础知识1.3智能手机的屏幕1.3.1英寸（Inch）1.3.2像素（Pixel）1.3.3分辨率（Resolution）01基础知识1.3智能手机的屏幕1.3.1英寸（Inc9401基础知识1.4网点密度与像素密度1.4.1网点密度（DPI）1.4.2像素密度（PPI）1.4.3DPI与PPI1.4.4逻辑分辨率与像素倍率1.4.5视网膜屏幕01基础知识1.4网点密度与像素密度1.4.1网点密度9501基础知识1.5常见手机屏幕规格1.5.1热门手机规格1.5.2热门手机分辨率01基础知识1.5常见手机屏幕规格1.5.1热门手机规9601基础知识1.7智能手机的传感器1.7.1摄像头1.7.2麦克风1.7.3GPS1.7.4电子罗盘1.7.5重力感应器01基础知识1.7智能手机的传感器1.7.1摄像头9701基础知识1.7智能手机的传感器1.7.6加速度传感器1.7.7光线传感器1.7.8距离传感器1.7.9气压传感器1.7.10三轴陀螺仪01基础知识1.7智能手机的传感器1.7.6加速度传感9802设计风格012.1风格2.2颜色022.3如何选择颜色032.4字体0402设计风格012.1风格2.2颜色022.3如何选9902设计风格2.1风格2.1.1什么是设计风格2.1.2如何确立设计风格02设计风格2.1风格2.1.1什么是设计风格10002设计风格2.2颜色2.2.1认识色彩2.2.2RGB与HSB2.2.3颜色搭配基础02设计风格2.2颜色2.2.1认识色彩10102设计风格2.3如何选择颜色2.3.1常见App的颜色2.3.2颜色的性格02设计风格2.3如何选择颜色2.3.1常见App的颜10202设计风格2.4字体2.4.1衬线体和无衬线体2.4.2系统内置字体2.4.3什么时候选择内嵌字体2.4.4如何使用内嵌字体02设计风格2.4字体2.4.1衬线体和无衬线体10303图标与图片013.1App图标特点023.2App图标设计流程033.3App图标设计方法043.4iOS图标规范053.5Android图标规范063.6设计线性图标03图标与图片013.1App图标特点023.2App10403图标与图片3.7像素对齐13.8图片的使用203图标与图片3.7像素对齐13.8图片的使用210503图标与图片3.1App图标特点3.1.1独特的图形3.1.2表意准确3.1.3谨慎用色3.1.4避免使用大量文字3.1.5避免使用照片3.1.6适应不同场景03图标与图片3.1App图标特点3.1.1独特的图形10603图标与图片3.2App图标设计流程3.2.1第一步：寻找隐喻3.2.2第二步：抽象图形3.2.3第三步：竞品分析3.2.4第四步：确定风格3.2.5五步：调整细3.2.6第六步：场景测试03图标与图片3.2App图标设计流程3.2.1第一步10703图标与图片3.3App图标设计方法3.3.1正负形组合3.3.2折叠图形3.3.3局部提取3.3.4线性图标3.3.5透明渐变3.3.6色块拼接3.3.7图形复用3.3.8背景组合03图标与图片3.3App图标设计方法3.3.1正负形10803图标与图片3.4iOS图标规范3.4.1iOS图标适配3.4.2iOS图标标准03图标与图片3.4iOS图标规范3.4.1iOS图标10903图标与图片3.5Android图标规范3.5.1Android图标适配3.5.2图标的视觉统一3.5.3Android图标标准03图标与图片3.5Android图标规范3.5.1A11003图标与图片3.6设计线性图标3.6.1线性图标的风格3.6.2线性图标的绘制方法03图标与图片3.6设计线性图标3.6.1线性图标的风11103图标与图片3.7像素对齐3.7.1像素为什么要对齐3.7.2像素如何对齐3.7.3像素缩放的对齐3.7.4像素对齐的微调03图标与图片3.7像素对齐3.7.1像素为什么要对齐11203图标与图片3.8图片的使用3.8.1矢量图与位图3.8.2图片的格式3.8.3图片的使用3.8.4图片的存储3.8.5图片的比例03图标与图片3.8图片的使用3.8.1矢量图与位图11304iOS系统界面4.1栏4.2内容视图4.3临时视图04iOS系统界面4.1栏4.2内容视图4.3临时视11404iOS系统界面4.1栏4.1.1状态栏4.1.2导航栏4.1.3标签栏4.1.4工具栏04iOS系统界面4.1栏4.1.1状态栏11504iOS系统界面4.2内容视图4.2.1表格视图4.2.2文本视图4.2.3Web视图04iOS系统界面4.2内容视图4.2.1表格视图11604iOS系统界面4.3临时视图4.3.1对话框4.3.2操作列表04iOS系统界面4.3临时视图4.3.1对话框11705Android系统界面5.1导航机制5.2界面布局5.5Android系统的插件5.4操作方式5.3消息推送05Android系统界面5.1导航机制5.2界面布局11805Android系统界面5.1导航机制5.1.1硬件特性5.1.2iOS导航机制5.1.3Android导航机制05Android系统界面5.1导航机制5.1.1硬件11905Android系统界面5.2界面布局5.2.1结构差异5.2.2操作栏5.2.3多任务05Android系统界面5.2界面布局5.2.1结构12005Android系统界面5.3消息推送5.3.1推送方式5.3.2通知方式05Android系统界面5.3消息推送5.3.1推送12105Android系统界面5.4操作方式5.4.1编辑5.4.2选择5.4.3复制粘贴5.4.4删除05Android系统界面5.4操作方式5.4.1编辑12205Android系统界面5.5Android系统的插件5.5.1桌面插件5.5.2设计趋势05Android系统界面5.5Android系统的插件123道之篇05道之篇0512406建立规范6.4布局6.5图片规范6.1组建规范6.2颜色规范6.3文字规范06建立规范6.4布局6.5图片规范6.1组建规范612506建立规范6.1组建规范6.1.1设计规范的目的6.1.2规范的组成06建立规范6.1组建规范6.1.1设计规范的目的12606建立规范6.2颜色规范6.2.1为什么选择HSB6.2.2创建调色板6.2.3调色板应用06建立规范6.2颜色规范6.2.1为什么选择HSB12706建立规范6.3文字规范6.3.1iOS系统6.3.2Android系统6.3.3系统字号06建立规范6.3文字规范6.3.1iOS系统12806建立规范6.4布局6.4.1框架6.4.2顶部导航栏6.4.3顶部标签栏6.4.4底部标签栏06建立规范6.4布局6.4.1框架12906建立规范6.5图片规范6.5.1用户头像6.5.2商品图片6.5.3无数据图片06建立规范6.5图片规范6.5.1用户头像13007设计组件7.4按钮规范7.5其他组件7.1控制元素7.2筛选器7.3表单控件07设计组件7.4按钮规范7.5其他组件7.1控制元13107设计组件7.1控制元素7.1.1活动指示器7.1.2进度指示器7.1.3页码控制器7.1.4刷新控件7.1.5滑动器7.1.6开关7.1.7步进器07设计组件7.1控制元素7.1.1活动指示器13207设计组件7.2筛选器7.2.1选择器7.2.2日期时间选择器7.2.3分段控件7.2.4选项卡7.2.5排序7.2.6地区选择07设计组件7.2筛选器7.2.1选择器13307设计组件7.3表单控件7.3.1单选框7.3.2复选框7.3.3文本框7.3.4下拉框7.3.5表格07设计组件7.3表单控件7.3.1单选框13407设计组件7.4按钮规范7.4.1背景+文字7.4.2背景+图标7.4.3图标+文字7.4.4文字07设计组件7.4按钮规范7.4.1背景+文字13507设计组件7.5其他组件7.5.1加载更多7.5.2非模态浮层7.5.3模态浮层07设计组件7.5其他组件7.5.1加载更多13608导航设计018.1扁平导航028.2内容主导式导航038.3列表式导航048.4其他导航08导航设计018.1扁平导航028.2内容主导式导航13708导航设计8.1扁平导航8.1.1标签导航8.1.2舵式导航8.1.3宫格式导航08导航设计8.1扁平导航8.1.1标签导航13808导航设计8.2内容主导式导航8.2.1陈列式导航8.2.2旋转木马式导航08导航设计8.2内容主导式导航8.2.1陈列式导航1398.3列表式导航8.3.1列表式8.3.2抽屉式08导航设计8.3列表式导航8.3.1列表式08导航设计14008导航设计8.4其他导航8.4.1点聚式导航8.4.2瀑布式导航08导航设计8.4其他导航8.4.1点聚式导航14109界面设计9.1首页019.4个人中心049.2列表页029.5启动页059.3详情页039.6引导页0609界面设计9.1首页019.4个人中心049.2列14209界面设计9.1首页9.1.1搜索栏9.1.2标签栏9.1.3卡片式设计9.1.4楼层设计09界面设计9.1首页9.1.1搜索栏14309界面设计9.2列表页9.2.1消息列表9.2.2横向卡片9.2.3瀑布流09界面设计9.2列表页9.2.1消息列表14409界面设计9.3详情页9.3.1全局按钮9.3.2快速通道09界面设计9.3详情页9.3.1全局按钮14509界面设