1.6 设计网页UI的常用工具
设计网页UI的方式相比之前发生了很大的改变，设计师不再依靠手绘，而是使用拥有强大图像编辑功能的制图软件。市场上出现了许许多多的制图软件，而各款软件的优缺点各不相同，下面简单介绍几款大众常用的制图/绘图软件。
1.6.1 Axure RP 9
Axure RP是美国Axure Software Solution公司的旗舰产品，是一款专业的快速原型设计软件，使负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。
作为专业的原型设计软件，Axure RP能快速且高效地创建原型，同时还支持多人团队设计和版本控制管理功能。Axure RP 9的下载界面如图1-40所示。
图1-40 Axure RP 9的下载界面
提示
Axure代表美国Axure公司，RP则是Rapid Prototyping（快速原型）的缩写。
用户将Axure RP 9安装完成后，可以通过双击桌面上的快捷方式图标或单击“开始”菜单中的启动图标来打开该软件。Axure RP 9启动后的欢迎界面如图1-41所示。
图1-41 Axure RP 9启动后的欢迎界面
通常在第一次启动软件时，系统会自动弹出“管理授权”对话框，要求用户输入被授权人账户和授权密码，授权密码通常是在用户购买正版软件后获得的。如果用户没有输入授权密码，则软件只能试用30天，30天后将无法正常使用。
提示
Axure RP能帮助产品原型设计师，快捷而简便地创建基于网站构架图的带注释页面的示意图、操作流程图，以及进行交互设计，并可自动生成用于演示的网页文件和规格文件。
1.6.2 Photoshop和Illustrator
Photoshop和Illustrator是现今非常流行的绘图软件，下面简单介绍这两款软件。
1. Photoshop
Photoshop是目前市场上使用最普遍的图像处理与合成软件，本书中的部分操作案例将使用Photoshop CC 2019完成。
在使用Photoshop CC 2019进行设计之前，首先需要将该软件安装到计算机中，然后双击桌面上的快捷方式图标即可成功启动Photoshop CC 2019。图1-42所示为Photoshop CC 2019的启动界面。
图1-42 Photoshop CC 2019的启动界面
将软件打开后，进入软件的欢迎界面，如图1-43所示。在欢迎界面中，用户可以选择打开已有的图像文件进行再次制作，也可以选择新建图像文件进行全新的创作。
图1-43 Photoshop CC 2019的欢迎界面
执行“打开”文件或“新建”文件命令后，进入软件的工作界面，如图1-44所示。在工作界面中，用户可以将前期的准备工作和产品理念注入设计图稿中。
图1-44 Photoshop CC 2019的工作界面
提示
在使用Photoshop CC 2019进行网页设计时，经常需要对各种对象进行变换，如移动、缩放、旋转和翻转图像等。这些操作大都可以通过执行“编辑→变换”命令来完成。渐变色可以实现多种颜色之间平滑过渡的填充效果，在网页UI设计中使用极为频繁。在Photoshop CC 2019中，用户可以通过多种方法创建渐变色。
2. Illustrator
Illustrator是由著名的Adobe公司推出的制作矢量图形的软件，是一款应用于出版、多媒体和在线图像的工业标准的矢量插画软件。
作为一款图像处理工具，Illustrator广泛应用于印刷出版、海报及书籍排版、专业插画、多媒体图像处理和互联网页面制作等场景，也可以为线稿提供较高的精度和控制，适合生产任何小型到大型的复杂项目。
Illustrator CC 2019是一款专业图形设计工具，提供了丰富的像素描绘功能，以及顺畅灵活的矢量图编辑功能，用户使用它能够快速创建设计工作流程。图1-45所示为Illustrator CC 2019的启动界面。
图1-45 Illustrator CC 2019的启动界面
Illustrator支持许多矢量图形处理功能，拥有很多拥护者，也经历了时间的考验。Illustrator CC 2019与之前的版本不一样，研发人员对其做出了更人性化、专业化的更新。
Illustrator CC 2019中的所用操作都是在文件中完成的，图1-46所示的欢迎界面，包括了基础的新建文件、从模板新建文件、打开文件和关闭软件等命令。
图1-46 Illustrator CC 2019的欢迎界面
Illustrator CC 2019的工作界面与以往的版本相比有了改观，用户使用起来更加灵活，如图1-47所示。在Illustrator CC 2019中，标尺、参考线和网格等都属于辅助工具，它们不能编辑对象，但可以帮助用户更好地完成编辑任务。
图1-47 Illustrator CC 2019的工作界面
提示
首先下载Adobe公司的Adobe Creative Cloud软件，打开此软件并注册Adobe ID，登录后找到Illustrator CC（2019）版本，单击“试用”按钮，进行软件下载。软件下载完成后会自动解压，无须用户手动解压。当下载的软件解压完成后，Adobe Creative Cloud会继续帮助用户安装Illustrator CC 2019。在安装过程中，如果有Adobe公司的其他产品正在运行，将无法安装，并弹出提示窗口。安装完成后，在Adobe Creative Cloud软件内会显示所安装的软件是否是最新版本，是否需要更新。
1.6.3 Sketch和Adobe XD
Sketch和Adobe XD是现今非常流行的原型制作软件，下面简单介绍这两款软件。
1. Sketch
Sketch是一款适合初学设计的人群使用的矢量绘图软件。矢量绘图是目前进行网页设计、图标设计及界面设计的最好方式，但除了矢量编辑的功能，Sketch还添加了一些基本的位图工具，如模糊和色彩校正。
提示
Sketch的界面设计非常简洁，上方的工具栏包含了最重要的操作。用户可以用右侧的“检查器”面板来调整被选中图层的内容，左侧的“图层”面板则会列出文件中的所有图层，中间就是用户正在创作的画布区域。简洁的界面会使初学者更容易上手。
Sketch是一款macOS系统独占软件，且该软件需要运行在OSX 10.11及以上版本的系统中。满足这两个条件后便可以下载并安装Sketch了。
在浏览器地址栏中输入https://www.sketch.com/，打开Sketch官方网站，如图1-48所示。在官方网站中单击“Try for Free”按钮即可下载试用版。
图1-48 Sketch官方网站
想要熟练掌握一个软件，就必须对它的界面、各项功能和各种按钮命令具有一定的熟悉度。例如，各种按钮命令都在界面的什么位置，用户不必记得非常清楚，但大致在界面的什么方位还是需要知道的。Sketch的工作界面如图1-49所示。
图1-49 Sketch的工作界面
Sketch完全遵循了macOS系统的软件设计规范，如果用户使用过苹果公司的iWork软件Pages、Numbers和Keynote，则会对这样的网页布局很熟悉。
Sketch的工作界面主要由菜单栏、工具栏、“检查器”面板、“图层”面板及画布区域组成，如图1-50所示。Sketch的工具栏在界面上方，包含设计中所需要的常用工具。“检查器”面板在界面的右侧，设计师可以在此调整已选择图层的参数。界面的左侧包含了所有的图层，画布在界面中间。
图1-50 Sketch工作界面的结构
提示
Sketch是为图标设计和界面设计而生的。它是一款有着出色UI的一站式应用，用户需要的工具几乎都触手可及。矢量绘图也是目前进行网页、图标及界面设计的最好方式。
2. Adobe XD
Adobe XD是一款集UI设计和UX设计于一体的专业设计软件，主要用于设计UI并为其添加简单的交互效果。它能够实现从设计页面到原型页面的转换，并能够将文档共享给项目团队的其他人员或者利益相关者。
使用Adobe XD，交互设计人员可以通过单个应用程序来设计面向Web和移动应用程序的交互式用户体验。
Adobe XD已实现与Photoshop、Illustrator和After Effects的良好集成。这表示用户可以在喜欢的应用程序中进行设计，再将这些资源导入Adobe XD中，并使用Adobe XD创建和共享原型。
用户可以在Adobe XD的画板上进行快速简单的UI设计。随后，将画板连接在一起以创建可与利益相关者共享和迭代的交互式原型。用户还可以使用插件，让其自动执行重复操作或一部分烦琐、复杂、重复的设计工作。
在启动Adobe XD时，用户会看到如图1-51所示的主页屏幕。用户可以选择主页屏幕左侧窗格的“附加设备”选项，然后在右侧窗格访问插件、用户界面套件和应用程序集成，如图1-52所示。“插件”通过自动执行复杂和重复的任务，或者在本机XD工作流程中集成外部服务或应用程序来扩展XD的功能。
图1-51 主页屏幕
图1-52 附加设备
通过主页屏幕，用户可以快速访问画板预设、附加设备、云文档和与用户共享的文件，并可以管理链接、删除的文件以及存储在计算机中的文件。用户还可以访问最近打开的XD文件、XD的新增功能、学习和支持文章，也可以提供反馈。
图1-53所示为Adobe XD的工作界面，包括主菜单、设计模式、原型模式、在移动设备上查看、预览、在线共享、工具栏、“属性”面板、画板和粘贴板等功能区域。
图1-53 Adobe XD的工作界面
1.6.4 PxCook和Cutterman
PxCook和Cutterman是设计师们非常喜欢使用的标注与切图软件，下面简单介绍这两款软件。
1. PxCook
网页UI的设计定稿之后，设计师需要对界面进行标注，借助一些专业的标注工具有利于设计师提高工作效率。
PxCook是一款标注切图的工具软件，发展到2.0版本后，PxCook开始支持PSD文件中的文字、颜色和距离等自动智能识别功能。虽然它还附带了切图功能，但该功能比较低级且使用起来较麻烦，所以不推荐使用。PxCook的设计界面如图1-54所示。
图1-54 PxCook的设计界面
提示
使用PxCook，设计师可以与团队一起同步最新设计稿，团队协作使得工作效率更高。设计师可以将设计稿上传到PxCook云或保存为本地文件，以满足全部需求。PxCook的操作非常简单，只需单击或拖曳，即可轻松获得间距尺寸、字体和阴影圆角等信息。效果图的图片格式即使是PNG和JPG，用户也能手动测量。PxCook支持标注的单位有px、pt、dp/sp和rem。
2. Cutterman
Cutterman是一款Photoshop CC的插件，使用它来切图非常方便。这款插件对Photoshop的版本要求比较高，Photoshop CS6以下的版本已经不再对其维护和更新。
用户安装完Photoshop CC后，可以执行“窗口→扩展功能→插件应用商店”命令来获取Cutterman插件，如图1-55所示[1]。插件安装完成后，用户需要注册账号，登录后就可以使用插件了。图1-56所示为“Cutterman-切图神器”面板。
图1-55 获取插件
图1-56 “Cutterman-切图神器”面板