网站首页 软件下载 游戏下载 翻译软件 电子书下载 电影下载 电视剧下载 教程攻略
书名 | UI设计必修课 |
分类 | 教育考试-考试-计算机类 |
作者 | 李万军编 |
出版社 | 电子工业出版社 |
下载 | ![]() |
简介 | 内容推荐 本书通过大量的案例分析,详细介绍了Sketch 4在设计移动UI中的应用,分别针对Sketch绘制线框原型、设计图标、设计移动UI、设计网站UI和UI的输出与交互进行了讲解。通过学习读者应该熟悉移动UI设计的规范和设计要点。同时掌握移动UI的输出以及交互动效的添加方法。本书在每一章中都根据该章节内容添加专家支招,为读者解答一些与实际工作相关的疑难问题。 作者简介 李万军,资历UI设计师,有丰富的UI设计经验,先后从事电商设计,软件界面、网站界面和游戏界面的设计工作,先后出版多本设计图书。 目录 Chapter 01 移动UI设计师的入门 1.1 移动UI的发展 ...................................................................... 2 1.1.1 早期设计保证软件可用性 ............................................................. 2 1.1.2 中期设计保证软件易用性 ............................................................. 2 1.1.3 后期设计保证软件实用性 ............................................................. 4 1.1.4 未来UI设计的展望 ......................................................................... 5 1.2 移动UI设计师的工作流程 .................................................. 6 1.3 iOS和Android设计特色 ...................................................... 7 1.3.1 iOS的设计特色 ............................................................................... 7 1.3.2 Android的设计特色 ...................................................................... 11 1.4 移动UI设计师应了解的基本常识 .....................................14 1.4.1 移动UI设计中用到的单位 ........................................................... 14 1.4.2 iOS的界面设计规范 ..................................................................... 16 1.4.4 Android的界面设计规范 .............................................................. 18 1.4.5 为触控而设计 ............................................................................... 20 1.4.6 从iOS10的特点看设计趋势 ......................................................... 20 1.5 专家支招 .............................................................................22 1.5.1 移动UI设计师常用的设计工具有哪些? ................................... 22 1.5.2 什么是屏幕密度? ....................................................................... 23 1.6 本章小结 ..............................................................................23 Chapter 02 初识Sketch 2.1 Sketch的安装和启动 ...........................................................26 2.1.1 实战――安装Sketch .................................................................... 26 2.1.2 实战――启动Sketch .................................................................... 27 2.2 Sketch的欢迎介绍 ...............................................................28 2.3 Sketch的主界面 ...................................................................29 2.3.1 菜单栏 ........................................................................................... 29 2.3.2 工具栏 ........................................................................................... 31 实战――自定义工具栏 ........................................................................... 32 2.3.3 工具介绍 ....................................................................................... 33 2.3.4 画布 ............................................................................................... 33 2.3.5 检查器 ........................................................................................... 35 2.3.6 图层面板 ....................................................................................... 36 2.3.7 画板 ............................................................................................... 36 2.3.8 蒙板 ............................................................................................... 37 2.3.9 布尔运算 ....................................................................................... 37 2.3.10 符号与共享样式 ......................................................................... 37 2.4 Sketch的快捷键 ...................................................................38 2.4.1 Sketch的快捷键列表 .................................................................... 39 2.4.2 实战――自定义快捷键 ............................................................... 43 2.5 Sketch的系统偏好设置 .......................................................44 2.5.1 通用选项卡 ................................................................................... 45 2.5.2 画布选项卡 ................................................................................... 46 2.5.3 图层选项卡 ................................................................................... 47 2.5.4 插件选项卡 ................................................................................... 48 2.5.5 预设选项卡 ................................................................................... 49 2.5.6 Cloud选项卡 ................................................................................. 49 2.6 Sketch的标尺、参考线和网格 ................................................ 49 2.6.1 标尺 ............................................................................................... 49 2.6.2 参考线 ........................................................................................... 50 2.6.3 网格 ............................................................................................... 51 2.7 Sketch的常见问题 ...............................................................53 2.7.1 Sketch是否支持Windows系统? ................................................. 53 2.7.2 Sketch能否替代Photoshop? ....................................................... 53 2.7.3 Sketch是否有汉化版 .................................................................... 53 2.7.4 Sketch如何升级? ........................................................................ 53 2.7.5 Sketch价格能不能优惠? ............................................................ 54 2.8 专家支招 ..............................................................................54 2.8.1 Sketch怎么兼容低版本文件? .................................................... 54 2.8.2 Sketch是否有类似Axure的组件库的功能? .............................. 55 2.9 本章小结 ..............................................................................55 Chapter 03 从线框原型开始 3.1 线框原型的基本概念 ..........................................................58 3.2 绘制线框原型的注意事项 ..................................................59 3.2.1 巧用明暗对比的运用 ................................................................... 59 3.2.2 不使用截图和颜色 ....................................................................... 60 3.2.3 标记屏高度 ........................................................................... 60 3.2.4 合理的布局和间距 ....................................................................... 61 3.3 Sketch绘制线框原型 ...........................................................61 3.3.1 文件的新建和保存 ....................................................................... 61 3.3.2 回到Sketch文档的历史版本 ........................................................ 63 3.3.3 画板预设 ....................................................................................... 64 3.3.4 画板检查器 ................................................................................... 65 3.3.5 图层面板 ....................................................................................... 66 3.3.6 关于模版 ....................................................................................... 70 3.3.7 图层组的检查器 ........................................................................... 71 3.3.8 形状图层的检查器 ....................................................................... 73 3.3.9 文字图层的检查器 ....................................................................... 76 3.4 使用Sketch绘制线框原型 ...................................................78 3.4.1 实战――计步APP线框图的绘制 ................................................ 78 3.4.2 实战――内容列表页线框图的绘制 ........................................... 82 3.5 完整线框原型的绘制 ..........................................................86 3.5.1 实战――注册页1线框图的绘制 ................................................. 86 3.5.2 实战――注册页2线框图的绘制 ................................................. 90 3.5.3 实战――注册页3线框图的绘制 ................................................. 92 3.5.4 实战――注册页4线框图的绘制 ................................................. 94 3.6 绘制线框原型的思考 ..........................................................95 3.7 专家支招 ..............................................................................96 3.7.1 画好APP线框图流程图的要点有哪些? .................................... 96 3.7.2 线框原型的优势有哪些? ........................................................... 97 3.8 本章小结 ..............................................................................97 Chapter 04 使用Sketch设计图标 4.1 图标的设计准则 ................................................................ 100 4.1.1 图标设计的必要性 ..................................................................... 100 4.1.2 了解图标的属性 ......................................................................... 102 4.1.3 不同系统中的图标格式 ............................................................. 105 4.1.4 不同系统图标的更换方法 ......................................................... 105 4.2 图标集的制作过程 ............................................................ 109 4.2.1 创建制作清单 ............................................................................. 109 4.2.2 设计草图 ..................................................................................... 109 4.2.3 数字呈现 ..................................................................................... 110 4.2.4 确定最终效果 ............................................................................. 110 4.2.5 命名并导出 ..................................................................................111 4.3 使用Sketch插入面板 ......................................................... 111 4.3.1 插入矢量 ......................................................................................111 4.3.2 插入铅笔 ..................................................................................... 115 4.3.3 插入形状 ..................................................................................... 116 4.3.4 插入文本 ..................................................................................... 120 4.3.5 插入图片 ..................................................................................... 121 4.4 图形的布尔运算 ................................................................ 121 4.5 实战――绘制iOS APP图标 ............................................. 124 4.6 实战――绘制音乐应用图标 ............................................ 128 4.7 图标的源文件格式 ............................................................ 132 4.8 专家支招 ............................................................................ 133 4.8.1 iOS系统中图标的尺寸 ............................................................... 133 4.8.2 如何获得专业图标 ..................................................................... 134 4.9 本章小结 ............................................................................ 134 Chapter 05 使用Sketch设计移动UI 5.1 移动UI的设计原则............................................................ 136 5.1.1 视觉一致性原则 ......................................................................... 136 5.1.2 视觉简易性原则 ......................................................................... 137 5.1.3 从用户的考虑角度出发 ............................................................. 137 5.2 移动界面的色彩搭配与视觉效果 .................................... 138 5.2.1 冷暖色调的对比 ......................................................................... 138 5.2.2 色彩的意向 ................................................................................. 138 5.2.3 色彩的搭配技巧 ......................................................................... 139 5.2.4 APP界面配色原则 ...................................................................... 140 5.2.5 APP UI设计的用色规范 ............................................................. 142 5.3 iOS应用界面设计规范...................................................... 142 5.3.1 Sketch的iOS UI模板 ................................................................... 143 5.3.2 模板使用的注意事项 ................................................................. 144 5.4 安卓界面及Material Design设计规范 .............................. 146 5.5 移动界面中色彩应用 ........................................................ 147 5.5.1 Sketch颜色面板的使用 .............................................................. 148 5.6 文字的创建与编辑 ............................................................ 157 5.6.1 文本的添加 ................................................................................. 158 5.6.2 文本的编辑 ................................................................................. 158 5.6.3 文本路径 ..................................................................................... 160 5.6.4 文本转换轮廓 ............................................................................. 160 5.7 使用共享样式 .................................................................... 161 5.8 文字的导出 ........................................................................ 163 5.9 实战――绘制iOS音乐播放界面...................................... 164 5.10 实战――绘制iOS社交APP界面 .................................... 168 5.11 实战――绘制iOS支付APP界面 .................................... 172 5.12 专家支招 .......................................................................... 176 5.12.1 移动界面中的文字使用技巧 ................................................... 176 5.12.2 移动界面中的色彩选择 ........................................................... 177 5.13 本章小结 .......................................................................... 178 Chapter 06 使用Sketch设计PC端网站UI 6.1 网页设计PC端和移动端的区别 ....................................... 180 6.1.1 屏幕尺寸不同 ............................................................................. 180 6.1.2 操作方式不同 ............................................................................. 180 6.1.3 网络环境不同 ............................................................................. 181 6.1.4 传感器不同 ................................................................................. 181 6.1.5 使用场景和使用时间的不同 ..................................................... 181 6.1.6 软件迭代时间和更新频率不同 ................................................. 181 6.1.7 功能设计上的区别 ..................................................................... 181 6.2.1 图标和徽章 ................................................................................. 182 6.2 扁平化设计在UI设计中的应用........................................ 182 6.2.2 圆角和折角 ................................................................................. 183 6.2.3 标签和条纹 ................................................................................. 184 6.2.4 装饰元素 ..................................................................................... 185 6.3.1 分组和取消分组 ......................................................................... 186 6.3 编辑绘制的图形 ................................................................ 186 6.3.2 编辑和变换图形 ......................................................................... 187 6.3.3 旋转图形 ..................................................................................... 187 6.3.4 蒙板 ............................................................................................. 189 6.3.4 剪刀与描边宽度 ......................................................................... 192 6.4 位图的编辑 ........................................................................ 192 6.4.1 编辑位图 ..................................................................................... 193 6.4.2 色彩校正 ..................................................................................... 195 6.5.1 阴影 ............................................................................................. 195 6.5 应用样式 ............................................................................ 195 6.5.2 内阴影 ......................................................................................... 196 6.5.3 模糊 ............................................................................................. 196 6.6 混合模式 ............................................................................ 198 6.7 组件 .................................................................................... 199 6.7.1 创建组件 ..................................................................................... 200 6.7.2 覆盖文本 ..................................................................................... 200 6.7.3 管理组件 ..................................................................................... 201 6.8 实战――绘制企业PC端网站界面 ................................... 202 6.9 实战――绘制企业PC端网站界面 .................................. 205 6.10 专家支招 .......................................................................... 215 6.10.1 理解以用户为中心 ................................................................... 215 6.10.2 界面设计中的内容与形式统一 ............................................... 215 6.11 本章小结 .......................................................................... 216 Chapter 07 UI的输出与交互设计 7.1 适配多分辨率移动界面 .................................................... 218 7.1.1 适配安卓设备 ............................................................................. 218 7.1.2 适配iOS设备 ............................................................................... 218 7.1.3 使用自适应设计插件 ................................................................. 218 7.2 实现在设备上实时预览 .................................................... 219 7.3 分享设计稿 ........................................................................ 219 7.4 交付给开发的文件 ............................................................ 220 7.5 使用Sketch切图 ................................................................. 221 7.5.1 切片图层检查器 ......................................................................... 223 7.5.2 点九切图 ..................................................................................... 224 7.6 使用Sketch标注 ................................................................. 227 7.7 设计移动交互动效 ............................................................ 230 7.7.1 了解移动设备的手势 ................................................................. 230 7.7.2 移动交互动效设计的注意事项 ................................................. 233 7.7.3 常见的动效制作软件 ................................................................. 234 7.8 使用Sketch插件 ................................................................. 237 7.8.1 插件的安装 ................................................................................. 237 7.8.2 实用的插件 ................................................................................. 238 7.9 专家支招 ............................................................................ 240 7.9.1 如何多移动界面进行标注 ......................................................... 240 7.9.2 常见角度动画效果 ..................................................................... 241 7.10 本章小结 .......................................................................... 242 |
随便看 |
|
霍普软件下载网电子书栏目提供海量电子书在线免费阅读及下载。