導讀
小編是個後端軟件開發者，由於沒有“藝術細胞”，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框架還是不錯的，有的設計人員說騰訊系已經讓人有了審美疲勞，你們認為呢？
相關推薦
推薦幾個流行WEB UI開源框架
推薦幾個流行的WEB UI開源框架,順序不分先後哦(*^__^*)Ace Admin響應式Bootstrap網站後臺管理系統模板ace admin，非常不...
移動端購物車樣式定義與購買數據展示
在IndexController.class.php首頁控制器文件，新增shopcar（）方法，代碼如下：在View/Index目錄下新增shopcar....
18個 公認的 世界頂級 UI開源框架 彙總
原創：W3C中文教程（W3Schools.wang）作為開發者，我們需要了解一些寶貴的UI開源框架資源，它們可以幫助我們更快更好地實現一些現代化的界面，包括一些移動設備的網頁界面風格設計。本文彙總了目前18個公認的世界頂級UI開源框架（附官網、Github以及各自的教程），...
6個最好的HTML框架，用於開發一個偉大的移動UI
在這個移動時代，企業正在迅速擁抱移動解決方案，使他們的業務成為更高的預期。雖然有幾種方法可用於移動應用開發，但HTML5移動應用開發是最受歡迎的。雖然具有很少或根本沒有技術知識的人員可以聘請開發人員獲得多種應用程序來滿足他們的需求，但是有許多有魅力的HTML5框架和工具可以...
推薦中...