快速构建网站或移动端页面:关于Bootstrap的学习笔记

举报
悟钧 发表于 2019/06/22 15:00:08 2019/06/22
【摘要】 最近在设计官网,并进行一些项目的原型设计和开发,寻找了很久,想找到一个更简单、快速的方式,基于一些已有的模板或框架进行快速建设,结果发现很多时间都是徒劳,走过的路分享给大家,以防再度踩坑:

最近在设计官网,并进行一些项目的原型设计和开发,寻找了很久,想找到一个更简单、快速的方式,基于一些已有的模板或框架进行快速建设,结果发现很多时间都是徒劳,走过的路分享给大家,以防再度踩坑:


网上搜索原型构建工具:包括WEB、APP(统称为移动端,包括Android和IOS),发现有国内外的现成工具,其中大致分析如下:

1、飞冰:ICE 或iceworks, 阿里家的前端图形化一键工具,有现成的模板、插件、物料库,很丰富,主要偏向于后台的界面搭建,且只能把核心的业务画面操作完成,后续如果需要研发时,则会出现一些架构上的调整,尝试了下,以非前端专业出身的角度来看,不够简单,只能达到部分需求


2、Element 2.9 Fullerene: 网站快速成型工具。Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,查看了官网,很简单的介绍,没有详细的模板或是资源,操作方式也 没有十分明确的写明,对于一个非前端专业出身来说,看不懂,只能放弃


3、UI Leader http://www.uileader.com/ 是一家前端解决方案领导者,有WeTouch移动云平台、QuickUI 4.0、Quick V等几款产品,做的都很不错,其中WeTouch 移动云平台是APP、小程序、H5 的一站式解决方案,目前的客户也比较多,多是企业级客户,分免费和收费版本,看了下,因之前没学过专业的jquery技术,所以只是基于存量的认知,感觉学习成本太高,所以放弃


4、Axure RP、Mockplus、Justinmind、墨刀等目前来看,对于WEB、APP都支持,但在移动互联网的时代,都更偏向于移动APP的原型设计,其中Axure RP和Justinmind属于国外的产品,Mockplus和墨刀属于国内的产品,均各自都有优势,但侧重点不同,下文有相关介绍,感兴趣的可以看下:


https://blog.csdn.net/jongde1/article/details/53128397


最后总结

个人感觉,去年有用过墨刀做APP原型,学习成本不高,上手比较简单,已有一些现场的参考项目,可以直接使用,但不是所有功能都可用,而xiaopiu为最近一段时间接触比较多的,网上评论也比较好,个人试用后,感觉比墨刀、mockplus做的好一些,有更多的国内外的参考模板,并支持组件、页面、项目等级别的范例创建或引入,比较方便


另外今年的产品中,普遍都增加的RPD的协作功能,在原型设计的同步,能更方便的把产品原型文档产出,确实很方便。


结合这段时间的经历和思考,确定在网站、后台系统、移动APP等方面的原型设计,目前来看没有办法使用一个工具全部搞定,想想也是,小而美,每块都选择适合自己的才是王道,大致确定下来的技术选型原则如下:


前台网站:

Bootstrap 4.X 来设计,并从网上搜索Bootstrap Template,作为物料库(模板库),然后使用SubLime Text2进行编辑,因为是新网站,所以建议用Bootstrap最新的版本,此版本已有很多新特性,且相信未来会更加流行,关于Bootstrap相关介绍链接:

Bootstrap 4.X介绍

https://v4.bootcss.com/

Sass相关介绍

https://www.sasscss.com/

Bootstrap4的示例项目

https://getbootstrap.com/docs/4.0/examples/

基于Bootstrap进行网站开发的慕课视频

http://www.imooc.com/learn/182

Bootstrap 3和4的对比

https://blog.csdn.net/weixin_42041193/article/details/81068002


Bootstrap Template的免费资源下载链接:(已验证,确实可免费下载)


https://startbootstrap.com/templates/


https://themehunt.com/items/popular


https://colorlib.com/wp/themes/


后台系统:

Gitee上的开源项目:


jeesite4、renren-fast、renren-fast-vue、renren-security,后三个都属于renren的,比较简单,且界面简洁


对应的Gitee链接如下:

https://gitee.com/thinkgem/jeesite4


https://gitee.com/renrenio/renren-fast


https://gitee.com/renrenio/renren-fast-vue


https://gitee.com/renrenio/renren-security


移动APP:

xiaopiu,可以免费创建10个项目,并建立自己的页面库、组件库、项目库等,方便后续做资源复用


https://www.xiaopiu.com/feature


以上文章也同步发表在了CSDN上, 均属本人原创

链接:https://blog.csdn.net/weixin_37896608/article/details/90732633 

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。