html 门户网站模板,响应式网站建设源码,女排联赛最新排行榜,如何分析他人网站流量#x1f31f;所属专栏#xff1a;献给榕榕#x1f414;作者简介#xff1a;rchjr——五带信管菜只因一枚 #x1f62e;前言#xff1a;该专栏系为女友准备的#xff0c;里面会不定时发一些讨好她的技术作品#xff0c;感兴趣的小伙伴可以关注一下~#x1f449;文章简介…所属专栏献给榕榕作者简介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文件可以先不管等我们所有原型设计好才会考虑前端编码 这里是个人时间管理网站项目开发全流程记录欢迎感兴趣的朋友关注我关注《献给榕榕》专栏让我们一起享受项目开发的过程吧
