移动互联网之路——Sketch+Xcode移动UI与交互动效设计从入门到精通

移动互联网之路——Sketch+Xcode移动UI与交互动效设计从入门到精通
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者:
2018-09
版次: 1
ISBN: 9787302508946
定价: 88.00
装帧: 其他
开本: 16开
纸张: 胶版纸
页数: 256页
字数: 452千字
7人买过
  • 《移动互联网之路——Sketch Xcode移动UI与交互动效设计从入门到精通》分为9 章,分别为UI 入门必修课、初识Sketch、使用Sketch 绘制线框图、使用Sketch 设计图标、按钮设计、移动端界面设计、PC 端网页界面设计、UI 的输出与交互设计、使用Xcode 制作交互效果。通过
      《移动互联网之路——Sketch Xcode移动UI与交互动效设计从入门到精通》的学习,读者可以熟悉移动UI 设计的规范和设计要点,同时掌握移动UI 的输出及交互动效的添加方法。
      《移动互联网之路——Sketch Xcode移动UI与交互动效设计从入门到精通》适用于UI 设计师、网站设计人员和网页设计爱好者阅读,也可作为网页设计师、交互设计师、艺术院校师生及UI 设计爱好者的参考书。 目 录 

    第 1 章 UI 入门必修课 1

    1.1 UI、UE 和 ID   1 

    1.1.1 UI( 用户界面 )  2 

    1.1.2 UE( 用户体验 )  2 

    1.1.3 ID( 交互设计 )  2 

    1.2 用户体验的一般设计流程 2 

    1.2.1 原型   2 

    1.2.2 模型   3 

    1.2.3 演示版   4 

    1.2.4 中间步骤    4 

    1.3 iOS 和 Android 的设计特色  4 

    1.3.1 iOS 的设计特色 4 

    1.3.2 Android 的设计特色  8 

    1.4 移动 UI 的基本常识 11 

    1.4.1 移动 UI 设计中用到的单位   11 

    1.4.2 iOS 的界面设计规范 12 

    1.4.3 Android 的界面设计规范 14 

    1.5 网页 UI 的基本常识 17 

    1.5.1 安全网页宽度与首屏高度 17 

    1.5.2 常见网页布局形式 18 

    1.5.3 网页布局原则 21 

    1.5.4 网页中的配色方法 22 

    1.6 本章小结   24 

    第 2 章 初识 Sketch  25 

    2.1 绘制 Apple Watch 界面 25 

    2.1.1 插入 Apple Watch 画板 28 

    2.1.2 绘制 Apple Watch 界面首页   32 

    2.1.3 绘制 Apple Watch 界面 36

    2.2 绘制 iOS 旅游 APP 跳转页面   41 

    2.2.1 iOS 旅游 APP 跳转页面 42

    2.2.2 iOS 旅游 APP 跳转页面 48

    2.2.3 iOS 旅游 APP 跳转页面 51

    2.3 本章小结   53 

    第 3 章 使用 Sketch 绘制线框图 54 

    3.1 绘制计步 APP 线框图首页 54 

    3.1.1 新建并保存文件 55 

    3.1.2 绘制线框图的状态条 57 

    3.1.3 绘制计步图标线框 59 

    3.1.4 绘制睡眠状态条 63 

    3.1.5 绘制底部标签导航 66 

    3.2 绘制天气 APP 线框图 68 

    3.2.1 绘制线框图首页 68 

    3.2.2 绘制首页下滑页 73 

    3.2.3 绘制搜索页和设置页 76 

    3.3 本章小结   79 

    第 4 章 使用 Sketch 设计图标  80 

    4.1 绘制简洁 iOS 功能图标  80 

    4.1.1 绘制指南针图标 83 

    4.1.2 绘制时钟和相机图标  87 

    4.1.3 绘制计算器和拍摄图标 90 

    4.1.4 绘制日记事图标 94 

    4.2 绘制一组 APP 应用图标 96 

    4.2.1 绘制旅行箱图标 97 

    4.2.2 绘制轮船图标 100 

    4.2.3 绘制帐篷和太阳伞图标 103 

    4.2.4 绘制酒杯、救生圈、天气、冰激凌图标 105 

    4.2.5 绘制飞机图标 114 

    4.3 本章小结   117 

    第 5 章 按钮设计 118 

    5.1 绘制一组播放器按钮 118 

    5.1.1 绘制循环按钮 121 

    5.1.2 绘制播放和暂停按钮  126 

    5.1.3 绘制语音和关闭按钮  128 

    5.1.4 绘制喇叭按钮 131 

    5.1.5 绘制选择、撤销、随机和退出按钮 134 

    5.1.6 绘制按键和滑杆按钮 138 

    5.2 绘制质感按钮   141 

    5.2.1 绘制金属拉丝质感按钮 141 

    5.2.2 绘制纹理质感按钮 143 

    5.2.3 绘制水晶质感按钮 146 

    5.3 本章小结   148 

    第 6 章 移动端界面设计 149 

    6.1 绘制计步 APP 界面 149 

    6.1.1 绘制计步 APP 首页计步显示区    150 

    6.1.2 绘制计步 APP 首页其他部分   154 

    6.2 绘制天气 APP 界面 159 

    6.2.1 绘制天气 APP 首页插画背景   160 

    6.2.2 绘制天气 APP 其他界面内容   164 

    6.3 本章小结   173 

    第 7 章 PC端网页界面设计 174 

    7.1 设计制作 PC 端支付网页 174 

    7.1.1 绘制 PC 端支付网页购物车界面   176 

    7.1.2 绘制 PC 端支付网页其他界面   181 

    7.2 设计制作家居网站页面  185 

    7.2.1 绘制 PC 端家居页面的整体结构   188 

    7.2.2 绘制 PC 端家居网页广告部分   192 

    7.3 本章小结   202 

    第 8 章 UI 的输出与交互设计 203 

    8.1 导出 APP 应用图标 203 

    8.2 导出移动端 APP 界面 206 

    8.3 为网页划分切片   211 

    8.4 导出点九切图   215 

    8.5 本章小结   218 

    第 9 章 使用 Xcode 制作交互效果 219 

    9.1 Xcode 的安装   219 

    9.2 认识 Xcode 界面 225 

    9.2.1 按区域划分 Xcode 界面 225 

    9.2.2 工具栏   226 

    9.2.3 工具区   227 

    9.2.4 编辑区   229 

    9.2.5 导航区   230 

    9.2.6 调试区   231 

    9.3 创建和删除项目   232 

    9.4 为旅游 APP 的跳转页面制作点击效果   239 

    9.5 制作完整的天气 APP 运行效果   243 

    9.6 本章小结   248 

    通关必读 

    什么是 Sketch   26 

    为什么选择 Sketch   26 

    Sketch 快捷键   37 

    Sketch 是否能替代 Photoshop 41 

    图标的源文件格式   52 

    Sketch 汉化   52 

    线框图的基本概念   55 

    绘制线框原型的注意事项    66 

    画好 APP 线框图流程图的要点   78 

    线框原型的优势   79 

    iOS 和 iOS 图标的特点   81 

    图标设计的必要性   81 

    UI 图标的分类   82 

    不同系统图标的更换方法    91 

    图标集的制作流程   95 

    图标的源文件格式   104 

    了解图标的属性   115 

    UI 设计中最常见的按钮如何设计 119 

    移动界面中色彩的应用   133 

    按钮是用户体验的重要因素   139 

    阴影和内阴影的设置   142 

    为什么界面设计大多喜欢用蓝色   152 

    iOS 应用界面设计规范    162 

    移动界面中文字的使用技巧   168 

    APP 界面配色原则   168 

    网页设计 PC 端和移动端的区别 175 

    扁平化设计在 UI 设计中的应用   179 

    理解以用户为中心   191 

    界面设计中的内容与形势统一   191 

    网站常见设计风格   199 

    适配多分辨率移动界面    203 

    交付给开发的文件   210 

    了解移动设备的手势   214 

    移动交互动效设计的注意事项   217 

    常见的交互动画效果   231 

    交互式动画实现法则   236 

    为什么在学习 Sketch 之后要了解 Xcode    248 

    操作指南 

    安装 Sketch   26 

    启动 Sketch   27 

    自定义工具栏   31 

    自定义快捷键   39 

    修改参考线颜色   50 

    使用内置模板   58 

    添加和删除自定义模板   59 

    设置填充和描边选项   65 

    为圆角矩形设置不同的圆角半径   71 

    调整图层排列顺序   72 

    设置缩放显示  101 

    使用缩放工具   102 

    使用钢笔工具绘制路径    111 

    使用钢笔工具绘制红心形状  113 

    设置重叠的填充样式   120 

    使用动态模糊调整图层  147 

    创建路径文本    157 

    使用旋转复制工具   163 

    自定义和使用文本样式   172 

    使用蒙版并设置蒙版不透明度   198 

    获取与安装 Xcode   219 

    启动 Xcode   221 

    导入和显示图片   234 

    知识链接 

    Sketch 的欢迎窗口   29 

    Sketch 的主界面   30 

    工具栏   31 

    Sketch 中的工具   35 

    画布   41 

    Sketch 的系统偏好设置    44 

    其他新建和保存文件的方法   56 

    设置文件存储标签和存储路径   57 

    插入与设置文本选项   61 

    使用形状检查器   63 

    添加阴影和内阴影   65 

    插入圆角矩形   70 

    图层面板   71 

    图层类型   71 

    隐藏和锁定图层   72 

    复制、剪切和粘贴图层   75 

    搜索图层   76 

    在画布中移动和选择图层   85 

    选择并移动重叠图层   86 

    在检查器中精确设置对象大小   88 

    在检查器中变换对象   89 

    iOS 系统中图标的尺寸   91 

    编辑形状   99 

    标尺和参考线  109 

    使用网格   110 

    Sketch 中的贝塞尔曲线  110 

    锚点和曲线的控制   112 

    使用渐变   124 

    图案填充   127 

    噪点填充   131 

    布尔运算   136 

    模糊   145 

    文本转化为轮廓  158 

    旋转复制   162 

    创建和编辑组件   170 

    混合模式   184 

    编辑位图   186 

    蒙版  197 

    分享设计稿  205 

    获取和使用 Sketch 插件   208 

    切片图层检查器   212 

    为什么要使用点九切图  217 

    Xcode 的快捷键   220 

    使用 Xcode 欢迎窗口   222 

    交互设计与交互式动画  222 

    Xcode 中的应用模板   234
  • 内容简介:
    《移动互联网之路——Sketch Xcode移动UI与交互动效设计从入门到精通》分为9 章,分别为UI 入门必修课、初识Sketch、使用Sketch 绘制线框图、使用Sketch 设计图标、按钮设计、移动端界面设计、PC 端网页界面设计、UI 的输出与交互设计、使用Xcode 制作交互效果。通过
      《移动互联网之路——Sketch Xcode移动UI与交互动效设计从入门到精通》的学习,读者可以熟悉移动UI 设计的规范和设计要点,同时掌握移动UI 的输出及交互动效的添加方法。
      《移动互联网之路——Sketch Xcode移动UI与交互动效设计从入门到精通》适用于UI 设计师、网站设计人员和网页设计爱好者阅读,也可作为网页设计师、交互设计师、艺术院校师生及UI 设计爱好者的参考书。
  • 目录:
    目 录 

    第 1 章 UI 入门必修课 1

    1.1 UI、UE 和 ID   1 

    1.1.1 UI( 用户界面 )  2 

    1.1.2 UE( 用户体验 )  2 

    1.1.3 ID( 交互设计 )  2 

    1.2 用户体验的一般设计流程 2 

    1.2.1 原型   2 

    1.2.2 模型   3 

    1.2.3 演示版   4 

    1.2.4 中间步骤    4 

    1.3 iOS 和 Android 的设计特色  4 

    1.3.1 iOS 的设计特色 4 

    1.3.2 Android 的设计特色  8 

    1.4 移动 UI 的基本常识 11 

    1.4.1 移动 UI 设计中用到的单位   11 

    1.4.2 iOS 的界面设计规范 12 

    1.4.3 Android 的界面设计规范 14 

    1.5 网页 UI 的基本常识 17 

    1.5.1 安全网页宽度与首屏高度 17 

    1.5.2 常见网页布局形式 18 

    1.5.3 网页布局原则 21 

    1.5.4 网页中的配色方法 22 

    1.6 本章小结   24 

    第 2 章 初识 Sketch  25 

    2.1 绘制 Apple Watch 界面 25 

    2.1.1 插入 Apple Watch 画板 28 

    2.1.2 绘制 Apple Watch 界面首页   32 

    2.1.3 绘制 Apple Watch 界面 36

    2.2 绘制 iOS 旅游 APP 跳转页面   41 

    2.2.1 iOS 旅游 APP 跳转页面 42

    2.2.2 iOS 旅游 APP 跳转页面 48

    2.2.3 iOS 旅游 APP 跳转页面 51

    2.3 本章小结   53 

    第 3 章 使用 Sketch 绘制线框图 54 

    3.1 绘制计步 APP 线框图首页 54 

    3.1.1 新建并保存文件 55 

    3.1.2 绘制线框图的状态条 57 

    3.1.3 绘制计步图标线框 59 

    3.1.4 绘制睡眠状态条 63 

    3.1.5 绘制底部标签导航 66 

    3.2 绘制天气 APP 线框图 68 

    3.2.1 绘制线框图首页 68 

    3.2.2 绘制首页下滑页 73 

    3.2.3 绘制搜索页和设置页 76 

    3.3 本章小结   79 

    第 4 章 使用 Sketch 设计图标  80 

    4.1 绘制简洁 iOS 功能图标  80 

    4.1.1 绘制指南针图标 83 

    4.1.2 绘制时钟和相机图标  87 

    4.1.3 绘制计算器和拍摄图标 90 

    4.1.4 绘制日记事图标 94 

    4.2 绘制一组 APP 应用图标 96 

    4.2.1 绘制旅行箱图标 97 

    4.2.2 绘制轮船图标 100 

    4.2.3 绘制帐篷和太阳伞图标 103 

    4.2.4 绘制酒杯、救生圈、天气、冰激凌图标 105 

    4.2.5 绘制飞机图标 114 

    4.3 本章小结   117 

    第 5 章 按钮设计 118 

    5.1 绘制一组播放器按钮 118 

    5.1.1 绘制循环按钮 121 

    5.1.2 绘制播放和暂停按钮  126 

    5.1.3 绘制语音和关闭按钮  128 

    5.1.4 绘制喇叭按钮 131 

    5.1.5 绘制选择、撤销、随机和退出按钮 134 

    5.1.6 绘制按键和滑杆按钮 138 

    5.2 绘制质感按钮   141 

    5.2.1 绘制金属拉丝质感按钮 141 

    5.2.2 绘制纹理质感按钮 143 

    5.2.3 绘制水晶质感按钮 146 

    5.3 本章小结   148 

    第 6 章 移动端界面设计 149 

    6.1 绘制计步 APP 界面 149 

    6.1.1 绘制计步 APP 首页计步显示区    150 

    6.1.2 绘制计步 APP 首页其他部分   154 

    6.2 绘制天气 APP 界面 159 

    6.2.1 绘制天气 APP 首页插画背景   160 

    6.2.2 绘制天气 APP 其他界面内容   164 

    6.3 本章小结   173 

    第 7 章 PC端网页界面设计 174 

    7.1 设计制作 PC 端支付网页 174 

    7.1.1 绘制 PC 端支付网页购物车界面   176 

    7.1.2 绘制 PC 端支付网页其他界面   181 

    7.2 设计制作家居网站页面  185 

    7.2.1 绘制 PC 端家居页面的整体结构   188 

    7.2.2 绘制 PC 端家居网页广告部分   192 

    7.3 本章小结   202 

    第 8 章 UI 的输出与交互设计 203 

    8.1 导出 APP 应用图标 203 

    8.2 导出移动端 APP 界面 206 

    8.3 为网页划分切片   211 

    8.4 导出点九切图   215 

    8.5 本章小结   218 

    第 9 章 使用 Xcode 制作交互效果 219 

    9.1 Xcode 的安装   219 

    9.2 认识 Xcode 界面 225 

    9.2.1 按区域划分 Xcode 界面 225 

    9.2.2 工具栏   226 

    9.2.3 工具区   227 

    9.2.4 编辑区   229 

    9.2.5 导航区   230 

    9.2.6 调试区   231 

    9.3 创建和删除项目   232 

    9.4 为旅游 APP 的跳转页面制作点击效果   239 

    9.5 制作完整的天气 APP 运行效果   243 

    9.6 本章小结   248 

    通关必读 

    什么是 Sketch   26 

    为什么选择 Sketch   26 

    Sketch 快捷键   37 

    Sketch 是否能替代 Photoshop 41 

    图标的源文件格式   52 

    Sketch 汉化   52 

    线框图的基本概念   55 

    绘制线框原型的注意事项    66 

    画好 APP 线框图流程图的要点   78 

    线框原型的优势   79 

    iOS 和 iOS 图标的特点   81 

    图标设计的必要性   81 

    UI 图标的分类   82 

    不同系统图标的更换方法    91 

    图标集的制作流程   95 

    图标的源文件格式   104 

    了解图标的属性   115 

    UI 设计中最常见的按钮如何设计 119 

    移动界面中色彩的应用   133 

    按钮是用户体验的重要因素   139 

    阴影和内阴影的设置   142 

    为什么界面设计大多喜欢用蓝色   152 

    iOS 应用界面设计规范    162 

    移动界面中文字的使用技巧   168 

    APP 界面配色原则   168 

    网页设计 PC 端和移动端的区别 175 

    扁平化设计在 UI 设计中的应用   179 

    理解以用户为中心   191 

    界面设计中的内容与形势统一   191 

    网站常见设计风格   199 

    适配多分辨率移动界面    203 

    交付给开发的文件   210 

    了解移动设备的手势   214 

    移动交互动效设计的注意事项   217 

    常见的交互动画效果   231 

    交互式动画实现法则   236 

    为什么在学习 Sketch 之后要了解 Xcode    248 

    操作指南 

    安装 Sketch   26 

    启动 Sketch   27 

    自定义工具栏   31 

    自定义快捷键   39 

    修改参考线颜色   50 

    使用内置模板   58 

    添加和删除自定义模板   59 

    设置填充和描边选项   65 

    为圆角矩形设置不同的圆角半径   71 

    调整图层排列顺序   72 

    设置缩放显示  101 

    使用缩放工具   102 

    使用钢笔工具绘制路径    111 

    使用钢笔工具绘制红心形状  113 

    设置重叠的填充样式   120 

    使用动态模糊调整图层  147 

    创建路径文本    157 

    使用旋转复制工具   163 

    自定义和使用文本样式   172 

    使用蒙版并设置蒙版不透明度   198 

    获取与安装 Xcode   219 

    启动 Xcode   221 

    导入和显示图片   234 

    知识链接 

    Sketch 的欢迎窗口   29 

    Sketch 的主界面   30 

    工具栏   31 

    Sketch 中的工具   35 

    画布   41 

    Sketch 的系统偏好设置    44 

    其他新建和保存文件的方法   56 

    设置文件存储标签和存储路径   57 

    插入与设置文本选项   61 

    使用形状检查器   63 

    添加阴影和内阴影   65 

    插入圆角矩形   70 

    图层面板   71 

    图层类型   71 

    隐藏和锁定图层   72 

    复制、剪切和粘贴图层   75 

    搜索图层   76 

    在画布中移动和选择图层   85 

    选择并移动重叠图层   86 

    在检查器中精确设置对象大小   88 

    在检查器中变换对象   89 

    iOS 系统中图标的尺寸   91 

    编辑形状   99 

    标尺和参考线  109 

    使用网格   110 

    Sketch 中的贝塞尔曲线  110 

    锚点和曲线的控制   112 

    使用渐变   124 

    图案填充   127 

    噪点填充   131 

    布尔运算   136 

    模糊   145 

    文本转化为轮廓  158 

    旋转复制   162 

    创建和编辑组件   170 

    混合模式   184 

    编辑位图   186 

    蒙版  197 

    分享设计稿  205 

    获取和使用 Sketch 插件   208 

    切片图层检查器   212 

    为什么要使用点九切图  217 

    Xcode 的快捷键   220 

    使用 Xcode 欢迎窗口   222 

    交互设计与交互式动画  222 

    Xcode 中的应用模板   234
查看详情