评测腾讯开源的移动端UI样式包-Frozen UI
ccwgpt 2024-09-23 04:16 29 浏览 0 评论
导读
小编是个后端软件开发者，由于没有“艺术细胞”，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框架还是不错的，有的设计人员说腾讯系已经让人有了审美疲劳，你们认为呢？
相关推荐
- 用Deepseek扩写土木工程毕业论文实操指南
-
用Deepseek扩写毕业论文实操指南一、前期准备整理现有论文初稿/提纲列清楚论文核心框架（背景、现状、意义、方法、数据、结论等）梳理好关键文献，明确核心技术路线二、Deepseek扩写核心思路...
- 985学霸亲授，DeepSeek也能绘6大科研图表，5分钟就出图
-
在实验数据处理中，高效可视化是每个科研人的必修课。传统绘图软件操作复杂、耗时费力，而智能工具DeepSeek的出现彻底改变了这一现状。本文将详解如何用DeepSeek一键生成六大科研常用图表，从思维导...
- AI写论文刷屏?大学生正在丢掉的思考力
-
一、宿舍深夜：当论文变成"Ctrl+C+V"凌晨两点的大学宿舍，小王对着电脑屏幕叹气。本该三天前开始写的近代史论文，此刻还一片空白。他熟练打开某AI写作网站，输入"论五四运动的...
- Grok在辅助论文写作上能不能既“聪明”又“可怕”?!
-
AcademicIdeas-学境思源AI初稿写作随着人工智能技术的飞速发展，论文写作这一学术任务正迎来新的助力。2025年2月18日，美国xAI公司推出了备受瞩目的Grok3模型，其创始人埃隆·...
- 大四论文沟通场景!音频转文字难题听脑AI来化解
-
大四学生都知道，写论文时和导师沟通修改意见，简直是“过关斩将”。电话、语音沟通完，想把导师说的修改方向、重点要求记下来，麻烦事儿可不少。手写记不全，用普通录音转文字工具，转完还得自己慢慢找重点，稍不注...
- 论文写作 | 技术路线图怎么画?(提供经典优秀模板参考)
-
技术路线图是一种图表或文字说明，用于描述研究目标、方法和实施计划。它展示了研究的整体框架和步骤，有助于读者理解研究的逻辑和进展。在课题及论文中，技术路线图是常见的一部分，甚至是一个类似心脏一样的中枢器...
- 25年信息系统项目管理师考试第2批论文题目写作建议思路框架
-
25年信息系统项目管理师考试第2批论文题目写作建议思路框架--马军老师
- 微信购物应尽快纳入法律框架（微信购物管辖）
-
符向军近日，甘肃省工商行政管理局发布《2016年上半年信息分析报告》。报告显示，微信网购纠纷迅猛增长，网络购物投诉呈上升趋势。投诉的主要问题有出售的商品质量不过关、消费者通过微信付款后对方不发货、购买...
- 泛珠三角区域网络媒体与腾讯微信签署《战略合作框架协议》
-
新海南客户端、南海网7月14日消息（记者任桐）7月14日上午，参加第四届泛珠三角区域合作网络媒体论坛的区域网络媒体负责人及嘉宾一行到腾讯微信总部座谈交流，并签署《战略合作框架协议》（以下简称《框架协...
- 离线使用、植入微信-看乐心Mambo手环如何打破框架
-
从2014年开始智能手环就成功进入人们的生活，至今已经演变出数据监测、信息推送、心率监测等诸多五花八门的功能，人们选择智能手环并不指望其能够改变身体健康情况，更多的是通过数据来正视自身运动情况和身体健...
- 华专网络:如何零基础制作一个网站出来?
-
#如何零基础制作一个网站出来?#你是不是觉得网站建设很复杂，觉得自己是小白，需求不明确、流程搞不懂、怕被外包公司坑……这些问题我都懂！今天华专网络就用大白话给你捋清楚建站的全流程，让你轻松get网站制...
- WAIC2024丨明日上午9点，不见不散!共同探讨智能社会与全球治理框架
-
大咖云集，硕果闪耀WAIC2024世界人工智能大会智能社会论坛将于7月5日9:00-12:00与你相约直播间WAIC2024上海杨浦同济大学哔哩哔哩多平台同步直播探讨智能社会与全球治理框架WAIC...
- 约基奇:森林狼换来戈贝尔时大家都在嘲笑 他们的阵容框架很不错
-
直播吧5月4日讯西部季后赛半决赛，掘金将迎战森林狼，约基奇赛前接受采访。约基奇说道：“当蒂姆-康纳利（森林狼总经理、前掘金总经理&曾选中约基奇）做了那笔交易（换来戈贝尔）时，每个人都在嘲笑他...
- 视频号带货为什么一个流量都没有?顶级分析框架送给你
-
视频号带货为什么一个流量都没有？遇到问题，一定是步步来分析内容，视频号带货一个流量都没有，用另外一个意思来讲，就可以说是零播放。为什么视频号带货一个流量都没有？跟你说再多，都不如来个分析框架。1、是否...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)