导读
小编是个后端软件开发者，由于没有“艺术细胞”，UI设计常被用户们吐槽。就在小编万念俱灰的时候，惊喜地发现腾讯出了Frozen UI，Frozen UI官网上说：“简单易用，轻量快捷，为移动端服务的前端框架”。来，跟随小编来评测下Frozen UI框架。
进入Frozen UI官网，我们看到：
官网
从官网上看，我们可以看到浓浓的“腾讯系”风格。
我们下载了Frozen UI源码包，她是基于zepto的JS框架！
从快速开始上,我们按照惯例，写个“Hello Word”。我用的是PHPstorm编辑器，因为我是PHP开发者嘛。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>“冰雪缘”头条评测frozen ui</title>
<link rel="stylesheet" href="dist/css/frozen.css">
</head>
<body>
<header class="ui-header ui-header-positive ui-border-b">
<i class="ui-icon-return" onclick="history.back()"></i><h1>hello Word</h1><button class="ui-btn">回首页</button>
</header>
<footer class="ui-footer ui-footer-btn">
<ul class="ui-tiled ui-border-t">
<li data-href="#" class="ui-border-r"><div>底部菜单</div></li>
<li data-href="#" class="ui-border-r"><div>底部菜单</div></li>
<li data-href="#"><div>底部菜单</div></li>
</ul>
</footer>
<section class="ui-container">
<h1>Hello Word</h1>
</section>
<script src="dist/lib/zepto.min.js"></script>
<script src="dist/js/frozen.js"></script>
<script>
(function (){
})();
</script>
</body>
</html>可以看到的是，使用Frozen UI需要包含
frozen.css
zepto.min.js
frozen.js
等三个文件。我们预览下结果
结果
咳咳，浓浓的腾讯风啊……不过设计还没得挑剔。
Frozen UI包括基础样式，如下：
文本
布局
网格
占位
1px解决方案
箭头链接
文字截断
两端留白
两端对齐
所有图标
我们试试图标吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>“冰雪缘”头条评测frozen ui</title>
<link rel="stylesheet" href="dist/css/frozen.css">
</head>
<body>
<header class="ui-header ui-header-positive ui-border-b">
<i class="ui-icon-return" onclick="history.back()"></i><h1>hello Word</h1><button class="ui-btn">回首页</button>
</header>
<footer class="ui-footer ui-footer-btn">
<ul class="ui-tiled ui-border-t">
<li data-href="#" class="ui-border-r"><div>底部菜单</div></li>
<li data-href="#" class="ui-border-r"><div>底部菜单</div></li>
<li data-href="#"><div>底部菜单</div></li>
</ul>
</footer>
<section class="ui-container">
<ul style="margin: 1rem 0 0 1rem">
<li>
<i class="ui-icon-checked"></i>
</li>
<li>
<i class="ui-icon-add"></i>
</li>
</ul>
</section>
<script src="dist/lib/zepto.min.js"></script>
<script src="dist/js/frozen.js"></script>
<script>
(function (){
})();
</script>
</body>
</html>运行结果：
运行结果
我们来看看UI组件，包括：
按钮
面板
头像
红点
徽标
标签
角标
搜索框
列表
表单
表格
通知
普通提示
工具提示
新消息提示
浮层提示
选择器
进度条
加载中
菜单
对话框
选项卡
轮播图
vip
我们来试试“红点”组件吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>“冰雪缘”头条评测frozen ui</title>
<link rel="stylesheet" href="dist/css/frozen.css">
</head>
<body>
<header class="ui-header ui-header-positive ui-border-b">
<i class="ui-icon-return" onclick="history.back()"></i><h1>hello Word</h1><button class="ui-btn">回首页</button>
</header>
<footer class="ui-footer ui-footer-btn">
<ul class="ui-tiled ui-border-t">
<li data-href="#" class="ui-border-r"><div>底部菜单</div></li>
<li data-href="#" class="ui-border-r"><div>底部菜单</div></li>
<li data-href="#"><div>底部菜单</div></li>
</ul>
</footer>
<section class="ui-container" style="margin: 1rem 0 0 1rem">
<div class="ui-reddot">内容内容</div>
<div class="ui-reddot-border">内容内容</div>
<div class="ui-reddot-s">内容内容</div>
<div class="ui-center-hor">内容内容<i class="ui-reddot ui-reddot-static"></i></div>
</section>
<script src="dist/lib/zepto.min.js"></script>
<script src="dist/js/frozen.js"></script>
<script>
(function (){
})();
</script>
</body>
</html>预览：
运行结果
还有JS部分，包括：
Core
Tap
Dialog
Loading
Scroller
Slider
Tab
Tips
Cover
Parallax
我们以Dialog为例，评测一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>“冰雪缘”头条评测frozen ui</title>
<link rel="stylesheet" href="dist/css/frozen.css">
</head>
<body>
<header class="ui-header ui-header-positive ui-border-b">
<i class="ui-icon-return" onclick="history.back()"></i><h1>hello Word</h1><button class="ui-btn">回首页</button>
</header>
<footer class="ui-footer ui-footer-btn">
<ul class="ui-tiled ui-border-t">
<li data-href="#" class="ui-border-r"><div>底部菜单</div></li>
<li data-href="#" class="ui-border-r"><div>底部菜单</div></li>
<li data-href="#"><div>底部菜单</div></li>
</ul>
</footer>
<section class="ui-container" style="margin: 1rem 0 0 1rem">
<div class="ui-btn" id="btn1">这是dialog</div>
</section>
<script src="dist/lib/zepto.min.js"></script>
<script src="dist/js/frozen.js"></script>
<script>
(function (){
$("#btn1").click(function(){
var dia=$.dialog({
title:'温馨提示',
content:'温馨提示内容',
button:["确认","取消"]
});
dia.on("dialog:action",function(e){
console.log(e.index)
});
dia.on("dialog:hide",function(e){
console.log("dialog hide")
});
})
})();
</script>
</body>
</html>运行结果：
Dialo
Frozen UI框架还是不错的，有的设计人员说腾讯系已经让人有了审美疲劳，你们认为呢？
本文暂时没有评论，来添加一个吧(●'◡'●)