UI 开发的三种模式
1.手写标签和样式代码,生成页面
2.可视化拖拽 UI 组建,生成页面
3.直接输入设计稿,输出可用页面
可视化布局工具
1、layoutlt:这款在线工具可以快速简单的搭建基于Bootstrap响应式布局,操作简单,拖动即可,胜在方便快捷。
http://www.ibootstrap.cn/
https://www.layoutit.com/build
2、diygw
1)在线设计,无需下载 账号密码同QQ
http://www.diygw.com/index.html
2) 帮助文档
说明:
1)移动端:移动端基于WEUI库
WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计, 令用户的使用感知更加统一。包含容器组件、FLEX布局、九宫格、选项卡、底部导航、滑块组件、图文列表、面板组 件、文本链接、链接组件、图片组件、图标、进度条、按钮、单行文本、多行文本、单选列表、多选列表、开关选择、 滑动条、上传组件、时间、下拉列表、单选列表等各式元素。
2)电脑端:移动端基于Bootstrap库
Bootstrap,来自Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁 灵活,使得Web开发更加快捷。包含组件布局、路径导航、图片组件、文本内容、选项卡、手风琴、轮播组件、面板组 件、表格组件、菜单导航、表单、文本框、密码框、多文本框、单选框、复选框、按钮、下拉框、图片上传、搜索框
3)可视化动态数据设计
3、缺点:
不适合代码的二次开发
一般是基于某一种框架的或者在某一框架的基础进行封装的框架