从0开发《工程测绘大师》小程序之页面UI设计篇（四）

上一篇我们构建了一个特别简单的Hello world 小程序，我们今天来做页面的UI设计。我做这个小程序的初衷其实是为了学习小程序的开发，小程序的文档看了三天才看完感觉累得够呛也没有太仔细深入研究，为了快速提高技术只能边学边实践。

上个学期刚好开设《VB测绘程序设计》这门课，这门课虽然只是考察课但是给了我很好的灵感，所以我想了一下还是做一个与结合测绘相关的计算，这样既可以让更多学测绘的人也用到它解决他们需要的计算繁杂问题，同时我也可以提升自己小程序开发的能力何乐不为呢。

目录

1. 常用原型UI设计软件

2. 初稿及标注

3. 如何进行切图

01、常用原型UI设计软件

进入今天的正题，我们如何自己设计一个页面设计图（因为我是第一次UI设计所以可能会特别丑，主要是走应该流畅，大家不喜勿喷。），目前可以设计页面设计图的软件很多，比如PS（cc2017）、Sketch、蓝湖、Axure、墨刀等。因为页面过于简单所以我采用PS（2017版）来进行设计，PS最好使用CC版本的因为他专门对UI设计专门做了增强，如果没有软件可以到《软件大全》里面下载就可以，安装也特别简单这里就不在赘述。

图1-1 PS软件

我们打开PS，在左上角点击文件–>新建–>>移动设备（这里有很多选择比如所web、移动设备等）

图1-2 PS界面

图1-3 PS界面

微信小程序官方推荐以iPhone6为设计稿，为什么要以iPhone6为设计稿这就要涉及到微信小程序的WXSS（层叠样式表）的尺寸单位问题了一般我们我们最常用的尺寸单位有以下五种，那微信特有的rpx有什么不同吗？

五种单位

px(像素)

rpx（微信特有）

vh

vw

rem

%

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应（也就是说它可以为不同设备进行适配）。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

表1 单位换算

根据上表我们可以发现iPhone6单位的换算1rpx 刚好等于 0.5px，而1px等于2rpx刚好是两倍关系而且最主要是换算后为整数没有太大偏差，所以用iPhone6作为设计稿是最佳选择，这样不管碰上什么机型都能更好的适配。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

图1-4 机型

我们选择iPhone6为设计稿进行创建，设计的时候还是需要会点基础的PS使用。

图1-5 iPhone6为设计稿

图1-6 初稿

我们最好给每个页面和每个图层进行命名，这样便于创建和查找节省工作时间。如果你想导出单个的图层可以先选中当前页面然后在点击右侧的图层，鼠标右键导出为你需要的格式就好。
图1-7 初稿

最后当我们把设计图设计好后储存为PSD格式的文件，为什么要导出PSD格式的文件呢？第一是因为方便文件的再次设计和修改，第二是因为PSD格式有着天然的切图优势，因为PSD保存的是图层文件，一些切图软件都有识别该图层的大小颜色等功能，这样便于后续的快速切图。
图1-8 导出PSD格式

图1-9 导出PSD格式

02、初稿及标注

当初稿设计出来的时候感觉勉强还可以的时候在进行切图，切记没有初稿就用代码来编写，因为这样效率会很低而且你会不断的重复调试修改。而有设计图就不一样了，你可以马上根据设计图用代码快速还原设计图，这样效率会高得多。
图2-1 最初的设计图（首页）

下图标注只是为了演示所以简单粗暴的标注了一下，只是让大家知道标注是怎么一回事就足够了。下图中用的标注工具是像素大厨（Pxcook）特别好用的一款的标注软件，会在下文切图中做详细说明。

图2-2 简单粗暴的标注图（首页）

图2-3 最初的设计图（程序列表）

图2-4 简单粗暴的标注（程序列表）

03、切图

切图说白了就是根据设计师设计的UI图，将UI设计图通过代码的形式将页面还原出来。目前切图软件和插件很多比如说Cutterman（它有很多系列的插件如图3-1，有些是收费的不过都很便宜一次付费永久使用。）、PxCook（像素大厨）这是一款特别好用的切图与标注为一体的软件而且是免费的、蓝湖（部分收费）我们今天将用PxCook进行切图和标注。

（注：这些软件在网上进行搜索下载即可。）

图3-1 Cutterman产品系列

图3-1 Cutterman产品系列Parker

我们开始讲解如何用Pxcook进行切图和标注，我们主要以图的形式进行描述因为这样会比较清晰。

图3-2 Pxcook界面

图3-2 新建web项目

这里我们要导入之前导出的PSD设计图，进行找到那个PSD文件进行添加即可。

图3-3 导入项目

图3-4 导入项目

图3-5 导入项目

选择某个页面进行双击进入标注与切图由于标注功能有点多将通过GIF图的方式进行演示，如下三幅GIF图演示了Pxcook是如何进行标注的，较为清晰明了。而且标注得时候我们还可以选择要标注的单位字号大小是否取整等。如果标注好了我们就可以进行切图了，这样一标注是不是就好切图了。

图3-6 标注界面

Pxcook除了能标注还可以进行快速AI切图和自动将图层内容生成代码（不过前提是图片文件格式必须是PSD的否则只能手动切图）在头部切换为开发模式我们就可以进行切图了。

图3-7 自动转换成代码

图3-8 自动转换成代码

我个人觉得Pxcook最强大的功能不是标注，而是可以快速将当前图层生成代码，这个代码你可以直接复制过去就使用（当然有些地方还是要修改的）。

图3-9 自动转换成代码

-END-

-预告-

以下小程序是本教程最终要开发的产品可以点击体验，下一篇为从0开发《工程测绘大师》小程序之实现首页篇（五）