經典黑色--網站管理界面

      這是一款用於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. 在線預覽及下載地址：

在線預覽  下載地址 提取密碼 b9ix

 

---

前端開發qq羣：159758989 ，禁止閒聊，非喜勿進~！