這是一款用於http://jing-ui.com網站后台管理界面，也可以用於管理系統或其它通用后台界面。有時候我也在思考，一般的用戶或者大部分用戶他們是否需要像ext,easyui這樣成型的界面解決方案，或許他們只是需要一款簡潔，方便的一個界面模板，而這款的宗旨是，頁面基本沒有過多的交互效果，簡潔粗暴的同時帶來的是界面加載速度的提升或操作便捷性的增加。2個css文件不超過20k，圖標采用的是字體圖標，圖標素材都來自於icomoon網站，沒有任何圖片。頁面整體采用扁平化處理，布局更趨向於暴露內容的本質，頁面塊之間的留白更多，字體更大，配色更單一，在form表單處參照了bootstrap的流行風格，也加入了一些css3的動畫效果，當然只有高級瀏覽器才支持。按鈕是參照bootstrap的兼容寫法，沒有采用圖片。這款主要是追求的頁面的速度與原始技術的表達。同時其它方面也加入了我這幾年對頁面設計及前端的一些理解與感悟。
另外為了滿足交互效果有要求的用戶，下次准備提供一版有js交互的，敬請期待。
1. Login頁面
這個頁面沒有過多的裝飾，只是讓用戶簡單的填寫，無心理壓力的點擊提交按鈕。
2. Main主界面
1). 主界面頂部還是采用經典的黑配藍的搭配，也沒采用固定定位，固定定位的缺點就是在小屏上反而減少了視口大小。
2). 左側菜單是固定寬度的布局，右側主區域則是自適應。
3). 左側菜單的圖標采用的字體圖標，關於這塊圖標，每個圖標完美的詮釋了后面菜單的語義，有些朋友可能懷疑自己審美不行或者選擇的能力較差。其實有些事情是練出來。這塊圖標的選擇化了很長時間，總體可能在半天左右，剛開始選擇完一套之后就沒管，但過了一天發現有幾個感覺不太適合，又開始尋找可替代的圖標，最后陷入了否定與自我否定的死循環中。還好，在經歷痛苦掙扎過程之后，在某一早晨，大腦清醒的情況下，果斷定了現在這套。
4). 右側鏈接的顏色明顯用藍色標注，這在用戶體驗上可能稍好一點，頁面鏈接出處用明顯的顏色標識，讓用戶在感知上一目了然。同時整體的信息塊之間用小灰線分隔，並且標題加粗，用戶關心的信息，顏色稍黑顯示。
3. 列表頁面
1). 左邊菜單是一樣的，為了標識當前的位置，在主顯示區有個簡單的sitemap。首頁->作品管理。這塊。
2). 提供基本的搜索入口，這個搜索為了方便是用table布局的，可以添加更多的字段，進行搜索。如果字段過多時，可以分行。查詢按鈕放在另一行右對齊。
3). 結果列表處，操作按鈕放在左上角，比如：新增作品，批量刪除等，為了是讓用戶醒目的看到操作。
4). 這個table是分為table>tr>th+td的布局結構。在td鼠標經過時有顏色變化，並且奇偶數行顏色進行css3的處理。整個頁面看起來素雅且不牛單調。th,td選擇了左對齊的方式，這樣頁面看起來有一種數據的規律感，如果是居中對齊，感覺視角上很零散，閱讀反而增加了障礙。
4. 新增與修改頁面
1). 這是一個新增修改頁面，整體的布局是采用table，為了不影響視角展現，采用了淡淡的邊線，這樣做的目的是體現細節的處理。邊線即不影響視角預覽，同時也是頁面具有引導意義。這塊也可以使用ul,li布局，但為了使邊絲均勻，簡單，就采用table。
2). 字段這塊采用的是右對齊，這塊處理的原因是方便視角的焦點快速的移動，曾在一本設計書上也有其它的看法：強調字段就左對齊，不強調則右對齊。但從視角上看左對齊還是信息點過於分散的缺點。
3). 提交按鈕用一種亮色暗示頁面操作的重心所在。
5. 設置頁面
1). 這塊的一個細節處理是在站長信息設置下面還有一個按鈕，一個頁面上有兩個提交按鈕，普通的用戶以為是要操作兩次，其實只是一個form表單。放兩個的目的在於，由於表單過多，防止意外的發生，上下各放一個，方便提交。
2. 另外一個處理是input[type="text"]的處理更寬，方便信息的錄入。
6. 在線預覽及下載地址：
前端開發qq群：159758989 ，禁止閑聊，非喜勿進~！