(五)手把手带你搭建精美简洁的个人时间管理网站—基于Axure的首页原型设计
🌟所属专栏:献给榕榕
🐔作者简介:rchjr——五带信管菜只因一枚
😮前言:该专栏系为女友准备的,里面会不定时发一些讨好她的技术作品,感兴趣的小伙伴可以关注一下~
👉 文章简介:基于Axure的首页原型设计(初稿)
经过小小的准备时间,终于是可以开始进入设计环节了,据我所知一个产品的开发包括了规划、分析、设计、开发、测试、维护等几个阶段。先前的分析虽然很拉,但也确实是必要的。
那么接下来就正式进入项目的第三个环节——原型设计。我的计划是先设计出几个重要界面的原型,然后再用前端实现,途中可以记录需要用到的后端技术,最后再用后端实现与前端的交互。
🔥1 素材准备
这里的素材最主要指一些logo的获取,需要用到的工具包括Snipaste、PhotoShop。为了方便起见,素材网站选自免费正版的图片网站pixabay:/
具体步骤如下:
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文件可以先不管,等我们所有原型设计好才会考虑前端编码
💙这里是个人时间管理网站项目开发全流程记录,欢迎感兴趣的朋友关注我,关注《献给榕榕》专栏,让我们一起享受项目开发的过程吧!💙
(五)手把手带你搭建精美简洁的个人时间管理网站—基于Axure的首页原型设计
🌟所属专栏:献给榕榕
🐔作者简介:rchjr——五带信管菜只因一枚
😮前言:该专栏系为女友准备的,里面会不定时发一些讨好她的技术作品,感兴趣的小伙伴可以关注一下~
👉 文章简介:基于Axure的首页原型设计(初稿)
经过小小的准备时间,终于是可以开始进入设计环节了,据我所知一个产品的开发包括了规划、分析、设计、开发、测试、维护等几个阶段。先前的分析虽然很拉,但也确实是必要的。
那么接下来就正式进入项目的第三个环节——原型设计。我的计划是先设计出几个重要界面的原型,然后再用前端实现,途中可以记录需要用到的后端技术,最后再用后端实现与前端的交互。
🔥1 素材准备
这里的素材最主要指一些logo的获取,需要用到的工具包括Snipaste、PhotoShop。为了方便起见,素材网站选自免费正版的图片网站pixabay:/
具体步骤如下:
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文件可以先不管,等我们所有原型设计好才会考虑前端编码
💙这里是个人时间管理网站项目开发全流程记录,欢迎感兴趣的朋友关注我,关注《献给榕榕》专栏,让我们一起享受项目开发的过程吧!💙