CH01-苹果商店页设计

本章目标

• 了解figma的相关知识
• 掌握figma的基本操作
• 掌握figma页面布局相关知识
• 了解UI相关设计软件
• 注册并登录figma账号

本章内容

课题导入

在UI设计领域，有非常多设计工具，但有一个软件——Figma。

主流的UI软件先出现的是sketch。

Figma的类似软件：sketch、XD、Figma、invision、即时设计等等。

如图1

（图1 UI设计工具）

适用领域

Figma作为一款专门针对UI界面开发的设计工具。

可以完成UI界面、网页、管理系统、H5等题材内容设计，如图2。

跟市面上UI设计师工作内容相当贴合，非常符合UI设计师需求。

UI界面：移动端页面、客户端页面等等。

网页：移动端网页、客户端网页等等。

管理系统：数据可视化设计、网页后端界面设计等等。

H5设计：手机APP引导页面、各种APP活动页面等等。

除了以上的内容，还能进行其他的相关设计，比如海报、logo等等。

FIGMA绝不只是UI设计工具，相对于Photoshop这类软件，figma还能进行简易交互的设计。

（图2 figma适用领域）

主要优势

Figma的主要优势。

网页登录、同步协作、分享便捷、渲染高效，如图3。

与Photoshop不同，figma只需要连接网络即可进行设计工作的开展。

其次，在设计团队进行工作的过程中，figma可以提供团队协作等功能。

（图3 figma主要优势）

功能特点

Figma是深度捆绑云服务和远程办公的软件。

线上保存、实时修改等等，如图4。

它代表了近未来的办公趋势和协作方法。

在现在这种快节奏的生活中，设计开始逐渐趋向于远程办公的形式了。

（图4 功能特点1）

团队协作、插件获取等等，如图5。

现在的设计团队不再是像以前一样，一个人一个项目团队，而是团队成员之间各司其职，共同完成设计项目。

而市面上常见的设计工具并不能支持多人团队线上协作，所以这也是figma软件的特点之一。

而在我们设计的过程中，使用插件能够让我们的设计事半功倍，figma也有提供免费的社区插件下载使用。

（图5 功能特点2）

安装方法

网页客户端、本地客户端，如图6。

figma具有网页端以及桌面端两种形式，在使用上也存在着小的差异。

网页端无需下载figma软件即可使用，但功能相对于桌面端会有所缺少。

客户端需要下载figma软件，后续汉化较为麻烦，所以推荐使用网页端即可。

（图6 安装方法）

注册账号

登录Figma.com，注册账号。

在网页中输入figma.com网址，进入后点击右上角注册按钮。

根据要求，输入邮箱地址等信息，在邮箱中验证通过后即注册成功。

注册完成之后，按照页面提示，进行账号登录。

（图7 注册账号）

课堂练习

苹果商店页面设计，如图8。

设计类型：通用UI界面设计。

知识重点：

1、Figma基本操作

2、工具栏的通用使用方法

3、图层蒙版的应用

（图8 课堂练习）

案例参考

选用两张苹果系统商店页面进行设计参考，如图9。

任何设计在创作之初都是需要寻找合适的参考的，为了练习figma页面布局以及基本操作功能，选择具有代表性的ios系统页面进行设计参考。

在主页面中，点击“新建文件”，即可得到一个类似于Photoshop“画布”的页面，在这个页面中我们就可以进行设计工作了。

在后续的工作中设计文件将越来越多，我们可以对其进行重命名操作，只需双击名称，更改即可。

（图9 案例参考）

设计步骤

首先，新建画框，快捷键“F”，也可以直接点击页面下方的井号功能图标，根据自己的需求选择合适大小的画框进行设计。

其次，将我们需要用到的组件导入文件中，例如“状态栏”、“导航栏”等等。

再次，我们根据画面的需求，添加文字、图形等元素，调整合适的间距。

最后，在我们设计工作完成之后，就可以将所有元素进行“添加画框”操作了，这一步是为了导出时的效果，导出我们根据自己的需求来就行啦。

（图10 新建画框）

课后练习

同学们可以自行寻找，或者使用老师提供的参考图，制作两张以上UI界面设计图。

要求如下：

尺寸为375*812px，也可直接使用iPhone X画框绘制，导出设置为4X倍数，文件格式为JPG格式，文件命名为“班级+姓名”。