第二周 原型图制作

界面设计需要了解不少的规范，但是我们以激发大家学习的热情为首要前提，所以先了解一些简单的知识。

01 苹果手机更新换代，所以有很多不同的尺寸，一般以750*1334px为设计原型进行制作，之后会根据不同的需求来进行切图。

如上图，px是像素的单位，在750*1334px的界面图中，状态栏高40px，导航栏高88px，标签栏高98px。所以我们在设计的时候一般会用辅助线把规范的高度标注出来。

安卓英文字体选用Roboto，中文用思源黑体

IOS系统英文字体使用San Fransico，中文用苹方体

我们先简单了解到这里，现在开始我们这周的任务教程。

01 打开PS原型图后，先文件——另存为——新江湖积分原型图（这么做的目的是把源文件保留，在制作的过程中要养成每隔一段时间，ctrl+s保存一下文件，防止程序崩溃）

02 用裁剪工具将画布拉大；

解锁背景图层，选中背景图层，单击前景色，会出现一个吸管工具，将吸管工具点一下背景，即可吸取背景颜色，alt+back键盘填充前景色

03 选择矩形工具，在画布上随机单击一下，会出现创建矩形的窗口，分别绘制出750*1334、40*40、88*88、98*98像素的方形。

04 视图——标尺，将标尺调用出来；将鼠标移动到标尺上，长按拖拉即可出现参考线，对图形添加参考线。

模板中没有按照使用的尺寸来设计，所以需要我们自己绘制出标准的画布，正好学习一下矩形工具和参考线。

06根据草图，从模板中寻找到相似的元素，复制到刚建立的方形中。选择移动工具，确保自动选择打勾并选择右边的图层。（这样在画布上点选图形，就会自动跳转到该图层了）。用移动工具框选所需要的元素，按住alt键的同时拖动图层，即可复制出元素，移动到合适位置，ctrl+T调整大小。

07 同时也可以自行绘制图形，如插入圆形图，选择圆形工具，在合适位置按住shift键画出圆形，ctrl+T调整图形大小。

06 其他圆形可以直接按住alt键拖动图层，即可复制出同样的圆形。将其放置在合适位置。最后用对齐工具进行对齐调整。

将所有对齐的圆形全部选中（按住shift键点选），运用对齐工具，进行对齐。有水平居中对齐、靠左靠右对齐、水平均匀分布和垂直均匀分布，大家都可以点选尝试一下。

07 有文字的地方可以拖动模板中的文字进行填充，也可以用文字工具输入合适的文字，如果有些字体没有安装的，都选用苹方或思源黑体；

字体大小设置

标题栏中间字号：36px

标题栏侧边字号：32px

商品名称的字号：28px

店铺名称的字号：24px

08 图层移动的快捷键：

选中后Ctrl+]向上移动一层

Ctrl+[ 向下移动一层

Ctrl+Shift+]移动到顶层

Ctrl+Shift+]移动到底层

总结：这次运用到移动工具、矩形圆形工具、截图工具、填充工具、尺寸放大、对齐工具、参考线绘制的知识点，有点小多，大家一定要坚持下去哦，操作多了就熟练啦！