（五）手把手带你搭建精美简洁的个人时间管理网站—基于Axure的首页原型设计

🌟所属专栏：献给榕榕
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该专栏系为女友准备的，里面会不定时发一些讨好她的技术作品，感兴趣的小伙伴可以关注一下~
👉 文章简介：基于Axure的首页原型设计（初稿）

经过小小的准备时间，终于是可以开始进入设计环节了，据我所知一个产品的开发包括了规划、分析、设计、开发、测试、维护等几个阶段。先前的分析虽然很拉，但也确实是必要的。

那么接下来就正式进入项目的第三个环节——原型设计。我的计划是先设计出几个重要界面的原型，然后再用前端实现，途中可以记录需要用到的后端技术，最后再用后端实现与前端的交互。

🔥1 素材准备

这里的素材最主要指一些logo的获取，需要用到的工具包括Snipaste、PhotoShop。为了方便起见，素材网站选自免费正版的图片网站pixabay:https://pixabay.com/zh/videos/

具体步骤如下：

1.输入时间关键词，选择一张合适的图片

 2. 用Snipaste截图并复制

3.打开PS，点击新建，会显示剪贴板，点击它就可以把我们复制的图片导入进去

4. 抠出时钟并复制，然后点击新建把复制的时钟导入

 5.最后去掉图片的背景使之成为png格式，并点击导出保存作为logo

 🔥2 原型设计

首先让我们回顾一下此时的项目文件夹，可以发现我增加了一个Prototyping文件夹用于存放所有的原型文件，同时在html模板中我创建了base.html作为父模板和对应的base.css文件，同时还增加了两张图片作为测试。

这些新增内容我后续都会详细讲解的，不会让大家跟不上我的节奏。

 好的，接下来让我们看看如何创建首页的原型文件的。这里我们先打开Axure（我用的是9版的），然后创建my-index文件（我之前已经设计好了，这里再重做一遍） 

然后创建一个页面改名为首页，并拖入一个box开始顶部导航栏的设计。按照如下设定修改其样式

 然后我们添加标题，导入logo

 之后在右边设计几个label。为他们设计点击后打开新链接的动作（还是事件我忘记叫啥了），并设置鼠标放上去后改变颜色的效果

 这时我们点击预览看看效果

 第二步，设置信息介绍部分

首先为整个页面设置黑白的混色

然后添加1个盒子和一张图片分别作为文字介绍框和图片介绍框

 然后输入文字介绍信息

 第三部分，设计一个开始使用环节

我们用一个大盒子作为进一步介绍应用优点的地方，并提供一个“开始使用”的按钮作为登录注册的跳转点。

如下图，只需要一个盒子，三个段落和一个按钮即可

第四部分也是最后一部分，设计一个版权栏

如下图，我们全部用label做，然后给他们添加点击可跳转其他页面的效果

 大功告成，看看预览效果 

 我后面把文字介绍的背景颜色换了

 🔥3 项目文件夹更新

到这里来更新一下我们的项目文件夹。

我们把上面做的my-inde原型替换掉我之前做的index作为新的index文件，同时我们有了2张新的图片一个是logo一个是展示图表。至于模板文件和css文件可以先不管，等我们所有原型设计好才会考虑前端编码

---

💙这里是个人时间管理网站项目开发全流程记录，欢迎感兴趣的朋友关注我，关注《献给榕榕》专栏，让我们一起享受项目开发的过程吧！💙