前端ui教学_网页游戏开发教学：小猪存钱罐（2）罐子界面基本设计

网页游戏开发教学：小猪存钱罐(2)罐子界面基本设计

原创首发声明：本系列文章仅在今日头条平台持续更新不再其他任何平台发布，如需转载请注明出处。

01. 小猪存钱罐前端模板设计准备：

首先我们要建立一个后端文件来指向前端文件，这个后端文件怎么起就看大家了，我们这里叫做小猪存钱罐，我们的后端就叫做pig.php吧，哈哈。在这个后端文件的主体先留空，最后一行指向我们的前台文件即可。

指向做完以后，我们就开始本教学第二步骤，设计前端了。

02. 小猪存钱罐的前端图标设计

按照我们上期的规划我们应该是把前端设计成这个样子的↓

那么我们现在需要准备3张图，仓库的顶部LOGO，可以暂时不卡通，普通存钱罐的图片，飞猪存钱罐的图片。首先度娘一个金库图吧，然后展开我们熟悉的FW修改这几张图。

大致这样就行了，然后我们按照惯例在img文件夹下面建立我们游戏的图片根目录。吧这几张图片切片导出放进去就行。

分别给图片命名，logo(不解释)fz(飞猪)xz(小猪)。

03. 存钱罐前端HTML页面设计

返回

储钱仓库

说明

Lv:10/100

上半部分是这样的。

接下来就是储蓄罐部分的UI了，整个设计没什么太大问题，现在出现一个简陋的界面！

这里我要开始对界面进行很长时间的微调了，这个界面略丑不是吗?微调特别费事，下面我会将思路一步步描述：

首先我尝试将每个块分开展示。这样是不是稍稍比上面好看了一丢丢，不过距离我们目标的效果还有一定差距，我们继续接着来进行修改。

最后在进行一丢丢的改动，吧下面的进度条变宽，存钱和砸罐按钮的颜色进行一下调整。加上圆角效果，使其更加的成熟话，变成一款产品。

调整到这样，我们单单看前端的界面好像没什么问题了，但其实我们后台代码已经非常的复杂了，我们需要使用各种选择器来优化我们的CSS代码，让程序阅读起来更加简洁和便利。

一个钱罐子写的太复杂了，优化后的效果如下。

怎么样是不是简洁了很多呢，但是因为今天时间不多了，我们下期文章在来讲述所有的优化代码如何编写。

下期预告：下期我们会详细讲解小猪存钱罐的罐体界面部分的CSS代码。

• 本文章某部分如需要详解，请给我们留言。
• 我们欢迎您 关注 转发 收藏本文章。如果复制转载请注明出处。
• ↓点击了解更多可以试玩小游戏