几款开发、画原型图、前端框架分享

小鱼儿 2022-09-25 14:20 251阅读 0赞

工欲善其事必先利其器，好用的工具大大提高工作效率。在做GIS系统中，有幸跟杨琛师哥一起做项目，新接触了几款前端IDE、原型工具，以及前端框架。整理了一下，有需要的就拿去玩玩儿。

一、两款画原型图工具：

> 1、墨刀：
> 
> 用途：移动端原型工具。
> 
> 特点：快速上手、简单易学、专用移动端、交互丰富，可在线使用、有安装包、国产。
> 
> 官网： [https://modao.cc/][https_modao.cc]
> 
> 用户体验： [http://next.36kr.com/posts/953][http_next.36kr.com_posts_953]
> 
>   
> 
> 
> 2、ProcessOn
> 
>     用途：免费在线作图工具，可以画原型图、思维导图、UML图等等等。
> 
>     特点：模板丰富，在线免安装，图例丰富，简单易学。
> 
>     官网：[https://www.processon.com/ ][https_www.processon.com]
> 
>          用户体验： [ http://www.iplaysoft.com/processon.html][http_www.iplaysoft.com_processon.html]

二、一款前端IDE：

> 3、hbuilder：
> 
> 用途：前端IDE。
> 
> 特点：快、绿柔护眼、国产。
> 
> 官网： [http://www.dcloud.io/][http_www.dcloud.io]
> 
> 用户体验： [http://www.w3cways.com/1401.html][http_www.w3cways.com_1401.html]

三、两款前端框架：

> 4、MUI：
> 
> 用途：最接近原生APP体验的高性能前端框架
> 
> 特点：轻量（100\+k、60+k）、以iOS平台UI为基础，补充部分Android平台特有的UI控件、体验流畅。
> 
> 官网：[http://dev.dcloud.net.cn/mui/][http_dev.dcloud.net.cn_mui]
> 
> 组件：[http://dev.dcloud.net.cn/mui/ui/][http_dev.dcloud.net.cn_mui_ui]
> 
> 用户体验：订餐系统
> 
>  
> 
> 体验MUI：
> 
> ![Center][]
> 
> （Mui + hbuilder）：
> 
>     mui组件已被封装成[HBuilder][http_www.dcloud.io]代码块，只需要简单几个字符，就可以快速生成各个组件对应的HTML代码，因此和[Hbuilder][http_www.dcloud.io]两个一起用，效果会更好。
> 
>  
> 
> 5、weui
> 
> 用途：专为开发微信HTML5应用的开源Web UI组件库
> 
> 特点：为微信Web开发量身设计，可以令用户的使用感知更加统一。
> 
> GitHub：[https://github.com/weui/weui/wiki/Form][https_github.com_weui_weui_wiki_Form]
> 
> 用户体验：[http://www.wtoutiao.com/p/12bcQei.html][http_www.wtoutiao.com_p_12bcQei.html]
> 
>   
> 
> 
> 体验weui：[https://weui.io/\#/][https_weui.io]
> 
> ![Center 1][]

工具不难学，多用更熟练。

[https_modao.cc]: https://modao.cc/
[http_next.36kr.com_posts_953]: http://next.36kr.com/posts/953
[https_www.processon.com]: https://www.processon.com/
[http_www.iplaysoft.com_processon.html]: http://www.iplaysoft.com/processon.html
[http_www.dcloud.io]: http://www.dcloud.io/
[http_www.w3cways.com_1401.html]: http://www.w3cways.com/1401.html
[http_dev.dcloud.net.cn_mui]: http://dev.dcloud.net.cn/mui/
[http_dev.dcloud.net.cn_mui_ui]: http://dev.dcloud.net.cn/mui/ui/
[Center]: /images/20220717/58b589dd319242939bbce08118bb9da4.png
[https_github.com_weui_weui_wiki_Form]: https://github.com/weui/weui/wiki/Form
[http_www.wtoutiao.com_p_12bcQei.html]: http://www.wtoutiao.com/p/12bcQei.html
[https_weui.io]: https://weui.io/#/
[Center 1]: /images/20220717/b2b87e90f62e45d78cb23adc9f6f0273.png