vue的濒危动物保护单页面webapp【字数：12484】
该项目是基于Vue的濒危动物保护单页面WebApp，主要有草图设计，UI设计Axtrue实现整体项目的UI设计和交互设计，vue.js，css3实现项目的功能。如今野生动物环境日趋严峻，宣传保护动物是必不可少的。在开始该项目之前，使之更加有吸引力，调查现有的动物App风格和交互。项目初始是用Balsamiq mockups进行初步的设计，将脑海中的想法简单的勾勒出来，就有一个清晰的流程。在UI样式方面，ps软件将之前的草图细化，使页面做的更加美观，该项目同时结合用户的操作习惯和审美，选择合适的风格去排列组合。在交互方面，用户可以使用Axture将页面能够在不用代码的情况下，能够通过点击完成一些简单的操作，理顺整个项目的交互操作是什么样的。最后使用vue.js，css3实现页面的静态布局和操作。论文将会介绍上面的软件，还有一些重要的相关技术，重点介绍项目风格的设计，项目的规划，还有设计的功能于此相关的实现的技术。最后是对毕设进行总结。
目 录
1.绪论 1
1.1研究背景 1
1.2研究目的 2
1.3研究意义 2
2.制作软件的介绍 3
2.1 Adobe?Photoshop软件 3
2.2 Balsamiq Mockups草稿软件 4
2.3 Axture RP交互设计软件 5
2.4 Vs Code代码编辑器 5
3.相关技术 7
3.1HTML5、CSS3、JavaScript、mock.js介绍 7
3.1.1 HTMl5介绍 7
3.1.2 CSS3介绍 7
3.1.3 JavaScript介绍 7
3.1.4 mock.js简介 7
3.2轻量级开发框架Vue.js 7
4.WebApp规划与设计 9
4.1 WebApp规划 9
4.1.1 WebApp定位 9
4.1.2 规划 9
4.1.3 项目框架图......................................................................... *好棒文|www.hbsrm.com +Q: *351916072*
..........................9
4.2 WebApp草图，UI，交互 10
4.2.1 草图设计 10
4.2.2 色彩搭配 11
4.2.3 风格设计 12
4.2.4 界面设计 13
4.2.5 Axture设计 21
5.webapp开发与实现 23
5.1 实现静态页面 23
5.1.1代码相同的部分 23
5.1.2代码不同部分的部分代码说明 25
5.2 Mock.js实现假数据 29
6.总结与思考 31
7.课题的影响 32
参考文献 33
致谢 34
1.绪论
1.1研究背景
近年互联网随着技术的的提高得到了高速的发展。互联网快速发展的同时，也成为了我们日常生活中的一个非常重要的工具，人们的生活开始和网络密不可分了，可以通过App订餐，购物，聊天，听音乐，看电影等等，从App中获得各种渠道来发布信息与传递信息。而随着技术的发展，WebApp逐渐兴起，因其低成本和跨平台等优势，被大部分的新项目所采纳。
单页面WebApp，平时我们看到的不少webApp以为是多页面的，看起来可以从一页跳到另一页。不过实际上这几页实际还是一个页面，因为它们是一次性加载进来的。而路由是单页面WebApp的基本元素。单页应用中，由于界面上动态生成的各种功能模块和元素，把功能模块划分为若干状态，每个状态对应相应的路由，同时还可以携带参数到对应的页面，通过根据不同的路径动态解析路由访问到不同的内容，匹配功能界面。所以优秀的交互设计，页面的布局能够更好的提升单页面WebApp的视觉效果、更能提高浏览者的体验感。
在设计项目时，除了视觉和技术还需要注意交互设计。产品做出来是给用户的，用户体验是否友好决定了产品的优劣。只有满足了用户的要求和体验感，才会继续愿意使用这个产品。在交互方面要注意的很多，简单归纳为色彩，图标，操作习惯，界面结构。
在色彩方面，要保证界面整体颜色种类不会过多或者其中一两种颜色占据比例大也可以。使用户在体验时，界面不会太过杂乱，看起来不会眼花缭乱。尽量做到以主题色为主，其他颜色为辅的设计，使界面看起来清爽有序，良好的配色也能够用户更加快速的获取有用的信息。2.在图标方面，在手机这种比较小的界面里使用时，要注意图标的大小要与界面整体结构相适宜，不能过分突出。每种类型的图标统一大小，并且图标应该是向用户清晰的表达出所代表的含义才行。3.在操作习惯方面，用户大多数是使用右手操作，所以有些交互要符合右手的操作习惯。比如箭头图标一般表示进入下一页面，所以一般放在界面的右边方便用户点击，有些展示用的小图标就放在左边无需操作。想一些小弹框确定按钮在右，删除按钮在左就是为了用户操作习惯而设计。4.在界面结构方面，一个产品的需求决定着这个项目的界面结构是什么样的。所以在确定好项目的需求后，就开始围绕着需求规划界面结构。
页面布局在项目里有重要的地位，一个好的界面布局，能使用户体验更加好，也能将页面里的信息更好的传达给用户，用户更加容易获取信息。实现双赢的效果，在页面布局里面有各种组成要素，例如图片，文字，导航，图标等。能把各种组成要素合理漂亮的组合成一个界面，是需要一定方式的。
布局的方式：1.文字与图片适宜。适量的图片与适量的文字搭配起来才能使界面更加美观，如果一个界面都是文字堆砌而成，用户看的过程中乏味无比，体验感不佳。所以合理图片与文字布局能使页面更加灵活，也丰富了页面的内容。2.有突出的重点。一个界面内总会有一些比较重要的内容，所以在页面排版时要稍加区分，能使用户注意到。一般要突出的东西放在页面中心或者靠上一点，字体加大或者有图片衬托，之后在其余地方添加次要的内容。能够页面更加有序。3.整体的布局。项目最终成果都要看最后的整体布局效果怎么样，所以有时采用对称的布局方法来排版页面内容。当然一味的用对称有点死板，所以有时候加入一些小图标或者不规则图案，来使页面更加生动而不僵硬。
1.2研究目的
采用单页面WebApp方式来宣传和认识濒危动物现在刻不容缓的现状。整个项目有动有静，搭配协调；简洁实用,尽量以最高效率的方式将用户想要了解濒危动物的信息传送到面前。
1.3研究意义
目 录
1.绪论 1
1.1研究背景 1
1.2研究目的 2
1.3研究意义 2
2.制作软件的介绍 3
2.1 Adobe?Photoshop软件 3
2.2 Balsamiq Mockups草稿软件 4
2.3 Axture RP交互设计软件 5
2.4 Vs Code代码编辑器 5
3.相关技术 7
3.1HTML5、CSS3、JavaScript、mock.js介绍 7
3.1.1 HTMl5介绍 7
3.1.2 CSS3介绍 7
3.1.3 JavaScript介绍 7
3.1.4 mock.js简介 7
3.2轻量级开发框架Vue.js 7
4.WebApp规划与设计 9
4.1 WebApp规划 9
4.1.1 WebApp定位 9
4.1.2 规划 9
4.1.3 项目框架图......................................................................... *好棒文|www.hbsrm.com +Q: *351916072*
..........................9
4.2 WebApp草图，UI，交互 10
4.2.1 草图设计 10
4.2.2 色彩搭配 11
4.2.3 风格设计 12
4.2.4 界面设计 13
4.2.5 Axture设计 21
5.webapp开发与实现 23
5.1 实现静态页面 23
5.1.1代码相同的部分 23
5.1.2代码不同部分的部分代码说明 25
5.2 Mock.js实现假数据 29
6.总结与思考 31
7.课题的影响 32
参考文献 33
致谢 34
1.绪论
1.1研究背景
近年互联网随着技术的的提高得到了高速的发展。互联网快速发展的同时，也成为了我们日常生活中的一个非常重要的工具，人们的生活开始和网络密不可分了，可以通过App订餐，购物，聊天，听音乐，看电影等等，从App中获得各种渠道来发布信息与传递信息。而随着技术的发展，WebApp逐渐兴起，因其低成本和跨平台等优势，被大部分的新项目所采纳。
单页面WebApp，平时我们看到的不少webApp以为是多页面的，看起来可以从一页跳到另一页。不过实际上这几页实际还是一个页面，因为它们是一次性加载进来的。而路由是单页面WebApp的基本元素。单页应用中，由于界面上动态生成的各种功能模块和元素，把功能模块划分为若干状态，每个状态对应相应的路由，同时还可以携带参数到对应的页面，通过根据不同的路径动态解析路由访问到不同的内容，匹配功能界面。所以优秀的交互设计，页面的布局能够更好的提升单页面WebApp的视觉效果、更能提高浏览者的体验感。
在设计项目时，除了视觉和技术还需要注意交互设计。产品做出来是给用户的，用户体验是否友好决定了产品的优劣。只有满足了用户的要求和体验感，才会继续愿意使用这个产品。在交互方面要注意的很多，简单归纳为色彩，图标，操作习惯，界面结构。
在色彩方面，要保证界面整体颜色种类不会过多或者其中一两种颜色占据比例大也可以。使用户在体验时，界面不会太过杂乱，看起来不会眼花缭乱。尽量做到以主题色为主，其他颜色为辅的设计，使界面看起来清爽有序，良好的配色也能够用户更加快速的获取有用的信息。2.在图标方面，在手机这种比较小的界面里使用时，要注意图标的大小要与界面整体结构相适宜，不能过分突出。每种类型的图标统一大小，并且图标应该是向用户清晰的表达出所代表的含义才行。3.在操作习惯方面，用户大多数是使用右手操作，所以有些交互要符合右手的操作习惯。比如箭头图标一般表示进入下一页面，所以一般放在界面的右边方便用户点击，有些展示用的小图标就放在左边无需操作。想一些小弹框确定按钮在右，删除按钮在左就是为了用户操作习惯而设计。4.在界面结构方面，一个产品的需求决定着这个项目的界面结构是什么样的。所以在确定好项目的需求后，就开始围绕着需求规划界面结构。
页面布局在项目里有重要的地位，一个好的界面布局，能使用户体验更加好，也能将页面里的信息更好的传达给用户，用户更加容易获取信息。实现双赢的效果，在页面布局里面有各种组成要素，例如图片，文字，导航，图标等。能把各种组成要素合理漂亮的组合成一个界面，是需要一定方式的。
布局的方式：1.文字与图片适宜。适量的图片与适量的文字搭配起来才能使界面更加美观，如果一个界面都是文字堆砌而成，用户看的过程中乏味无比，体验感不佳。所以合理图片与文字布局能使页面更加灵活，也丰富了页面的内容。2.有突出的重点。一个界面内总会有一些比较重要的内容，所以在页面排版时要稍加区分，能使用户注意到。一般要突出的东西放在页面中心或者靠上一点，字体加大或者有图片衬托，之后在其余地方添加次要的内容。能够页面更加有序。3.整体的布局。项目最终成果都要看最后的整体布局效果怎么样，所以有时采用对称的布局方法来排版页面内容。当然一味的用对称有点死板，所以有时候加入一些小图标或者不规则图案，来使页面更加生动而不僵硬。
1.2研究目的
采用单页面WebApp方式来宣传和认识濒危动物现在刻不容缓的现状。整个项目有动有静，搭配协调；简洁实用,尽量以最高效率的方式将用户想要了解濒危动物的信息传送到面前。
1.3研究意义
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/qrs/59.html
