前言

随着移动网络的发展，越来越多的人开始使用手机和平板电脑浏览互联网。作为网页设计师，需要快速准确地完成网站、网页的UI设计。而Photoshop等专业软件在制作移动端网站页面时，稍显烦琐。此时，Sketch的出现大大增强了移动端网页设计的便捷程度。

Sketch作为一个为UI(User Interface)设计而生的工具，全矢量、轻量级、像素级精准，非常适合做移动端的UI设计和简单的扁平图标设计。Sketch界面简洁，功能清晰，没有悬浮面板。Sketch界面的画布可无限延伸，不受图形尺寸限制。读者可以通过直接拖曳的方式，快速完成网站界面的UI设计与制作。Sketch自带的大量模板，可以让读者将工作重点放在设计上，而不用考虑不同的系统规范。Sketch提供了便捷的导出方式，可以让读者任意导入符合要求的UI素材。

本书将以案例实战的方式，让读者快速掌握UI设计要求和Sketch的基本操作。本书也对Xcode交互动画制作进行了讲解，帮助读者了解UI交互的制作方法和技巧。

来，跟随本书一起开启这趟美妙的移动UI与交互设计之旅吧！

本书的结构与内容

本书采用商业案例带动基础知识的形式，由浅入深地讲解了Sketch各方面的知识点和应用技巧。全书共分为8章，采用逐级渗透的讲解方法，全面地向读者讲解Sketch在PC端和移动端网站UI设计中的应用。

第1章　网页UI设计入门。主要讲解了UI设计的发展史、网页UI设计制作的流程、UI设计的注意事项和配色对于UI设计的影响等内容。

第2章　初识Sketch。主要讲解了Sketch的安装与启动、了解Sketch界面、设置Sketch的快捷键、新建和保存Sketch文件、使用Sketch画板和使用Sketch模板等内容。

第3章　绘制线框原型。主要讲解了线框原型的基本概念、绘制线框原型的注意事项、图层面板的使用、图层类型、图层调整以及绘制计步App线框图等内容。

第4章　使用Sketch绘制图标。主要讲解了矢量工具的使用、路径的使用、使用“形状”绘制图标、使用“蒙板”绘制图标、添加阴影效果为图标添加质感、Android图标设计准则、图标设计的三大原则以及极简化设计等内容。

第5章　Android UI设计。主要讲解了组件的编辑及使用、应用Sketch UI设计、移动App UI设计、Android系统UI设计、“文本”命令、“文本”检查器以及绘制Android信息界面等内容。

第6章　iOS UI设计。主要讲解了iOS系统界面读者元素、iOS系统UI设计规范、iOS系统UI设计原则、iPhone X的App UI设计、iOS App UI设计模板、iOS UI设计规范和移动App设计过程中的要点等内容。

第7章　PC端UI设计。主要讲解了PC端和移动端网页设计的区别、铅笔工具和剪刀工具、PC端网页UI设计原则、PC端网页UI设计要点以及PC端网页UI设计风格等内容。

第8章　UI的输出与交互设计。主要讲解了图标的输出、UI界面的输出、UI设计的交互以及Sketch插件的安装与使用等内容。

本书版面结构说明

为了达到使读者轻松自学，深入了解Sketch功能的目的，本书设计了“知识点讲解”“操作案例”“提示”和“知识点睛”等小项目。

1.知识点讲解。当前标题下知识点的详细讲解，常常伴有图片注解等信息，不仅丰富了图书页面结构，还可以帮助读者快速接受新知识。

2.操作案例。通过实际动手操作，更加快速地掌握学习到的知识。由于操作案例的步骤较少，更利于读者迅速掌握知识点，同时在每个案例的操作步骤前带有本案例的设计分析和色彩分析，更利于读者对案例的掌握和理解。

3.提示。包含了Sketch的各种使用技巧和操作过程中的注意事项。

4.知识点睛。汇集了大量技术性提示和相关知识点的补充讲解，有利于读者进一步了解UI设计。

本书适用人群

本书适用于有一定移动网页设计基础的设计初学者及网页设计爱好者，也可以作为专业网站UI设计人员以及相关专业人员的参考图书，同时还可以作为相关专业在校学生及教师参考用书。

本书配套资源

本书为读者提供了配套教学视频、素材、源文件、PPT教学课件等资源，读者可到人邮教育社区（http://www.ryjiaoyu.com）上免费下载。