基于Boostrap和Vue设计网页？网页设计流程，用画原型图吗逻辑谁来设计

本文目录

• 基于Boostrap和Vue设计网页
• 网页设计流程，用画原型图吗逻辑谁来设计
• Axure：超级好用的在线原型管理工具--Axhub
• 说到原型图，用axure 还是墨客或是其他工具
• 产品设计 | 6种原型图的优缺点

基于Boostrap和Vue设计网页

Boostrap:

Vue.js:

首先先对要画的网页进行一个原型设计，由于是公司的主页，因此最主要的功能就是介绍这个公司的业务还有一些新闻，在初步设计后，我的原型图大致为：

接着就可以开始尝试用boostrap 教程 和Vue.js来实现。

1、首先我们在 《head》 中先引入boostrap和Vue
.js，其中顺序不要变：

2、 顶端文字跑马灯效果：

然后在CSS样式中，设置 news 的 float 和 width :

最后在js中写跑马灯的实现，用定时器 timer 来计时滚动，判断复制的信息是否到达 box 的最左边来进行无限循环。

3、 导航栏
接着用boostrap来实现一个导航栏，导航栏一般放在页面的顶部。
我们可以使用 navbar 类来创建一个标准的导航栏，后面紧跟: navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 《ul》 元素并添加 class= navbar-nav 类； 然后在 《li》 元素上添加 nav-item 类， 《a》 元素上使用 nav-link 类；
导航栏可以用 bg-dark 和 navbar-dark 来设置导航的样式：

其中， navbar-brand 类用于显示品牌logo，如果使用图片，可以使用 navbar-brand 类来设置图片自适应导航栏:

效果如图：

4、 轮播图片 ：
查阅Boostrap教程，大概了解到有这几个类：

实现效果如图：

5、 网格

我们可以结合网格和 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片：

实现效果如图：

6、 折叠

实现效果如图：

7、 链接列表组

实现效果如下：

8、最后再增加一个页尾，然后完善下就完成了一个公司页面：

页尾效果如图：

整个网页最后的实现效果为：

1、Boostrap和vue.js提供的组件很丰富而且实现起来很容易，值得深入学习。
2、vue.js还需要再深入学习下，在这里只用到了一点点。

网页设计流程，用画原型图吗逻辑谁来设计

首先要有网页或者说是网站的需求方提供需求内容。
例如页面要包括哪些，如用户登录，注册，信息展示，甚至在线支付之类的东西。
然后还要有一些具体功能需求，如用户注册需要提供哪些资料，如身份证，地址之类的信息。
信息展示具体是哪些。
有需求方先要写明自己的需求，然后根据需求进行下一步的设计，原型图肯定要画，因为没有图就无法制作网页。
先把图画好，然后和对方商定细节，例如logo的大小，段落间距，字体颜色，之类的细节东西。
画好图并确定后就可以按照图来制作网页。
至于内部后台相关也要商定。
具体由谁来做什么要视情况而定。
例如如果对方公司有美工之类的，可能就直接给你一些素材甚至画好的图让你直接制作。
也有可能需要你自己画图或者找人画图。

Axure：超级好用的在线原型管理工具--Axhub

OMG，炒鸡好用的在线原型管理工具-Axhub，它来喽！话不多说，上链接： 点击“分享”按钮，复制原型地址，可分享给别人查看

说到原型图，用axure 还是墨客或是其他工具

这个要看你自己的需求是什么诺。
如果希望尽可能全面的展示界面所有细节，要得又不急的话，Axure无疑是不错的选择。根据需求一切重头搭建，专业全面， 只是可能耗费的时间长点。而且，如果是新手的话，可能也需要花些时间学习和熟悉工具使用方法，才能运用自如。
如果只是希望快速、前面的视觉化各种设计构想，快速与其它人讨论、分享和迭代的话， 摹客Mockplus就不错。软件主打“更快更简单”的设计。即使是新手，也可以几分钟就创建一个可以点击交互的原型设计，分享、协作、讨论都支持。
而且，它最近还新出了在线版本，添加更多全新功能，例如可扩展、可自由的组件库，主辅面板协作设计，状态交互和命令交互结合设计，铅笔随意绘制所需图形等。因为是在线版本，有浏览器就能用，不受地点和时间限制。

产品设计 | 6种原型图的优缺点

互联网产品设计过程中，原型图的常用格式，我见过6种以上。

它们的优点和缺点，介绍如下：
可以在另一台电脑上，阅读和Axure原型图；

在Axure预览模式下，可以在浏览器左侧显示网页的目录；

Axure软件有Mac版本和windows版本。
如果接收文件同事的电脑，没安装Axure，就打不开了；

在手机微信聊天窗口上，不能直接阅读Axure原型图；

Axure低版本，不能打开高版本的Axure文件。
可以在另一台Mac电脑上，阅读和Sketch原型图；

Ui设计师，可以直接在Sketch里面，把原型图，做成高保真的Ui设计稿；

可以导出PDF格式的多页面PDF原型图。

只能在Mac电脑上，阅读和。暂时没有windows版本的Sketch软件，不支持windows电脑；

不能在手机微信聊天窗口上，直接阅读Sketch原型图；

Sketch低版本，不能打开高版本的Sketch文件。
可以在Mac或Windows电脑上，阅读和PPT格式的原型图；

在手机微信App聊天窗口上，直接阅读PPT格式的原型图；

可以通过其它软件，将画好的原型图，导入PPT里面。
ppt页面的面积太小，不支持表达多个页面之间的跳转关系；页面的缩放，难以操作；

PPT里面的画图控件太少，画图工具隐藏的比较深，操作起来，不方便；
可以在任何电脑上，用浏览器打开，直接阅读Html原型图；

不能在手机微信聊天窗口上，直接阅读Html压缩包的原型图；

可以先用Axure设计原型图，然后导出Html网页格式。

不支持网页的再次，不支持在浏览器左侧显示网页的目录；

邮件接收Html原型图的压缩包，需要解压，然后还需要在众多网页文件中，一个个点开查看；

页面之间的跳转关系，难以表达清楚。
可以在任何电脑上，阅读和jpg图片格式的原型图；

邮件发送图片格式的原型图，文件可以很小；

可以在手机微信聊天窗口上，直接阅读jpg格式的原型图；

可以先用其它软件设计原型图，然后导出jpg图片格式。

在电脑上，图片格式，比较难操作：比如：调整到100%大小，并左右移动查看页面跳转关系；

在手机上，微信发送的时候，具有流程关系的一大张图片格式的原型图，会压缩，导致微信接收后不清晰。
可以通过其它软件，将画好的原型图，导出为PDF格式；

可以在Windows或Mac上阅读；支持软件：Adobe Reader，福昕pdf，Acrobat；
可以在智能手机上，阅读pdf格式的原型图；支持手机APP软件：WPS，Acrobat，甚至微信app的聊天窗口，直接发送，对方直接打开。

在电脑上，页面容易调整到100%大小，并且左右移动查看页面的跳转关系；

Mac电脑自带的预览pdf软件，可以合并多个pdf，旋转pdf的某一张内页；

电脑版的福昕pdf软件，可以给pdf内页添加标注文本，可以在多页面的pdf左侧添加目录链接。

如果需要重新pdf里面的某一页，那么就要提取多页pdf文件中的某一页，待修改好之后，再合并到多页PDF文件里；

电脑阅读和手机阅读pdf，最好是已经安装了专业的PDF阅读器。

APP产品设计的原型图，重在表达意思，只要意思传达到位了，那么格式可以不必在意。

原型图的格式，属于“道”，“法”，“器”，这3个层次中的“器”。

如果想在用户体验上，走的更远；那么就需要在“道”，“法”，这2个层次上，积累更多的项目经验，以及不同岗位的思维方式和沟通思路。