快速建设网站免费视频教程站长之家域名查询排行
🌟所属专栏：献给榕榕
🐔作者简介：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文件可以先不管，等我们所有原型设计好才会考虑前端编码
💙这里是个人时间管理网站项目开发全流程记录，欢迎感兴趣的朋友关注我，关注《献给榕榕》专栏，让我们一起享受项目开发的过程吧！💙