30分鐘搞定後臺登陸界面（103個後臺PSD源文件、素材網站）

去年八月時要作一個OA系統爲了後臺界面而煩惱，後來寫了一篇博客（《後臺管理UI的選擇》）介紹了選擇過程與經常使用後臺UI，令我想不到的時居然有許多開發者與我同樣都爲這個事情而花費很多時間，最後界面效果仍是不佳；還好這個OA系統已經基本交付給客戶在使用了，但登陸界面仍是很是難看，這幾天花時間修改了一下，感受還行，在網上下載了很多的資源，如今將PSD、圖片與經常使用網址分享給你們，但願對大夥也有幫助。在網頁設計過程當中，若是有現成的 PSD 素材可使用，那麼能夠事半功倍，由於PSD文件是Photoshop的源文件，能夠直接打開後修改，比圖片要好處理多了。做爲網站不可或缺的部分，登陸表單的設計常常都讓設計師們頭疼。今天這篇文章和你們分享的103個完美設計的 PSD 登陸表單模板可以幫上設計師們的大忙，能夠從這些優秀的設計中獲取靈感。

看了一下共有103個PSD文件，先看幾張經常使用的再逐個介紹：

1、界面預覽

OA登陸界面：

管理信息系統登陸界面：

管理信息系統後臺界面：

2、PSD源文件預覽

後臺UI源文件效果預覽1.jpg

後臺UI源文件效果預覽2.jpg

後臺UI源文件效果預覽3.jpg

後臺UI源文件效果預覽4.jpg

後臺UI源文件效果預覽5.jpg

後臺UI源文件效果預覽6.jpg

後臺UI源文件效果預覽7.jpg

後臺UI源文件效果預覽8.jpg

後臺UI源文件效果預覽9.jpg

後臺UI源文件效果預覽10.jpg

後臺UI源文件效果預覽11.jpg

後臺UI源文件效果預覽12.jpg

後臺UI源文件效果預覽13.jpg

後臺UI源文件效果預覽14.jpg

後臺UI源文件效果預覽15.jpg

後臺UI源文件效果預覽16.jpg

後臺UI源文件效果預覽17.jpg

後臺UI源文件效果預覽18.jpg

後臺UI源文件效果預覽19.jpg

後臺UI源文件效果預覽20.jpg

後臺UI源文件效果預覽21.jpg

後臺UI源文件效果預覽22.jpg

後臺UI源文件效果預覽23.jpg

 

 

後臺UI源文件效果預覽24.jpg

後臺UI源文件效果預覽25.jpg

後臺UI源文件效果預覽26.jpg

後臺UI源文件效果預覽27.jpg

後臺UI源文件效果預覽28.jpg

後臺UI源文件效果預覽29.jpg

後臺UI源文件效果預覽30.jpg

後臺UI源文件效果預覽31.jpg

後臺UI源文件效果預覽32.jpg

後臺UI源文件效果預覽33.jpg

後臺UI源文件效果預覽34.jpg

後臺UI源文件效果預覽35.jpg

後臺UI源文件效果預覽36.jpg

後臺UI源文件效果預覽37.jpg

後臺UI源文件效果預覽38.jpg

後臺UI源文件效果預覽39.jpg

後臺UI源文件效果預覽40.jpg

後臺UI源文件效果預覽41.jpg

後臺UI源文件效果預覽42.jpg

後臺UI源文件效果預覽43.jpg

後臺UI源文件效果預覽44.jpg

後臺UI源文件效果預覽45.jpg

後臺UI源文件效果預覽46.jpg

後臺UI源文件效果預覽47.jpg

後臺UI源文件效果預覽48.jpg

後臺UI源文件效果預覽49.jpg

後臺UI源文件效果預覽50.jpg

後臺UI源文件效果預覽51.jpg

後臺UI源文件效果預覽52.jpg

後臺UI源文件效果預覽53.jpg

後臺UI源文件效果預覽54.jpg

後臺UI源文件效果預覽55.jpg

後臺UI源文件效果預覽56.jpg

後臺UI源文件效果預覽57.jpg

後臺UI源文件效果預覽58.jpg

後臺UI源文件效果預覽59.jpg

 

後臺UI源文件效果預覽60.jpg

後臺UI源文件效果預覽61.jpg

後臺UI源文件效果預覽62.jpg

後臺UI源文件效果預覽63.jpg

後臺UI源文件效果預覽64.jpg

後臺UI源文件效果預覽65.jpg

後臺UI源文件效果預覽66.jpg

後臺UI源文件效果預覽67.jpg

後臺UI源文件效果預覽68.jpg

後臺UI源文件效果預覽69.jpg

後臺UI源文件效果預覽70.jpg

後臺UI源文件效果預覽71.jpg

後臺UI源文件效果預覽72.jpg

後臺UI源文件效果預覽73.jpg

後臺UI源文件效果預覽74.jpg

後臺UI源文件效果預覽75.jpg

後臺UI源文件效果預覽76.jpg

後臺UI源文件效果預覽77.jpg

後臺UI源文件效果預覽78.jpg

後臺UI源文件效果預覽78.jpg

後臺UI源文件效果預覽80.jpg

後臺UI源文件效果預覽81.jpg

後臺UI源文件效果預覽82.jpg

後臺UI源文件效果預覽83.jpg

後臺UI源文件效果預覽84.jpg

後臺UI源文件效果預覽85.jpg

後臺UI源文件效果預覽86.jpg

後臺UI源文件效果預覽87.jpg

後臺UI源文件效果預覽88.jpg

後臺UI源文件效果預覽89.jpg

後臺UI源文件效果預覽90.jpg

後臺UI源文件效果預覽91.jpg

後臺UI源文件效果預覽92.jpg

後臺UI源文件效果預覽93.jpg

後臺UI源文件效果預覽94.jpg

後臺UI源文件效果預覽95.jpg

後臺UI源文件效果預覽96.jpg

後臺UI源文件效果預覽97.jpg

後臺UI源文件效果預覽98.jpg

後臺UI源文件效果預覽99.jpg

後臺UI源文件效果預覽100.jpg

後臺UI源文件效果預覽101.jpg

後臺UI源文件效果預覽102.jpg

後臺UI源文件效果預覽103.jpg

3、工具分享

批量PSD轉JPG，103個PSD（Photoshop源文件）若是要一個個用Photoshop查看比較麻煩，該工具能夠批量導出，Photoshop自動功能也能夠作到但失敗率很高，該工具親測好用。在下載區域能夠下到。該工具綠色免費，不須要安裝只有一個可執行文件。

 

 批量文件更名，批量將文件名修改爲本身指定的，能夠按數字字母等多種方式，我使用的是好壓中的工具，也可上網下載靈者改名等一些工具軟件，若是須要提供的請留言。

4、資源說明

全部的PSD文件均來自互聯網，每個文件均可以正常使用，我都打開過

有一些字體須要您本身安裝，安裝的方法是下載對應缺乏的字體後在控制面板中找到字體，複製進去便可

PhotoshopCS5之後的版本編輯時穩定性要高不少，不容易崩潰

該PSD僅供學習使用，請謹慎用於商業項目，若是您是PSD文件的做者，能夠隨時聯繫我刪除相關文件，同時也感謝您的無私奉獻

5、素材下載網站

下面這些網站是我找模板、素材、圖標、圖片等資源經常使用到的，但願對你們有用，有好的也不要忘記推薦，我會及時添加到博客末尾的，謝謝。

http://588ku.com 千庫網

http://www.redocn.com/ 紅動中國

http://www.uisdc.com/ 優設

http://www.58pic.com 千圖網

http://huaban.com 花瓣

http://www.sccnn.com/ 素材中國

http://sc.chinaz.com/psd/ 站長素材

http://699pic.com 攝圖網

http://www.uimaker.com/ ui製造者

http://sucai.zcool.com.cn/ 站酷

http://color.koya.io/ 扁平化配色

http://www.ooopic.com/ 我圖網

http://www.nipic.com/ 暱圖網

http://www.51yuansu.com 覓元素

http://www.iconfont.cn/ 阿里巴巴圖標庫

http://www.iconarchive.com/ IconArchive

https://www.iconfinder.com/ ICONFINDER

http://www.easyicon.net/ Easyicon

http://findicons.com/ Findicons

https://500px.com/ 500px

https://pixabay.com/ Pixbay

http://www.vcg.com/ 視覺中國

http://pngimg.com/ 找png圖片

http://image.baidu.com 百度圖片搜索

http://card.qdsay.com 雲配色

http://uigradients.com 在線漸變色

國外設計網站:
http://dribbble.com/

http://reeoo.com/

http://www.behance.net/

http://tympanus.net/codrops/

http://www.e-interactive.es/#axzz2uOyjyyNn

http://www.designboom.com/

國內ui設計網站:
http://www.xiaoketang.net/
http://www.guimobile.net/
http://ui.cn/
http://www.iconfans.com/index.php#
http://www.woxihuan.com/
http://www.xueui.cn/
http://www.uimaker.com/
http://www.uisheji.com/
http://www.chinaui.com/
http://opus.arting365.com/
http://www.visionunion.com/interface.jsp
http://www.design63.com.cn/

圖標素材:
http://icomoon.io/app/#/select

配色網站:
http://colorschemedesigner.com/
https://kuler.adobe.com/explore/newest/

素材網站大全：

PIXABAY：http://pixabay.com/
素材中國：http://www.sucai.com.cn
每天素材：http://www.ttcnn.com/ ;
素材中國：http://www.sccnn.com/ ;
素材世界：http://www.sssccc.net/ ;
圖酷：http://www.tucoo.com/ ;
懶人圖庫：http://www.lanrentuku.com/ ;
三聯：http://www.3lian.com/ ;
素材天下：http://www.sucaitianxia.com/ ;
聯盟素材：http://sc.68design.net/ ;
藝雅中國：http://www.yiyacn.com/ ;
韓國設計網：http://www.krwz.com/ ;
all-free-down：http://all-free-download.com/ ;
齊愛素材網：http://www.72sc.com/ ;
設計無限：http://www.sj00.com/ ;
牛圖網：http://niutuku.com/ ;
千圖網：http://www.58pic.com
vector4free：http://vector4free.com/ ;
fordesigner：http://www.fordesigner.com/ ;
SMASHING：http://www.smashingmagazine.com/
16素材網：http://www.16sucai.com/fla/
站長素材：http://sc.chinaz.com
閃秀：http://www.flash34.com/ ;
花瓣：http://www.duitang.com/ ;
堆糖：http://www.duitang.com/ ;
黃蜂網：http://woofeng.cn/
致設計：http://www.zhisheji.com/

中間也有一些是收費的，固然多數是收費與免費結合的。有時候你去網盤搜索或國外一些素材網站也會有驚喜的。

6、下載

後臺UI源文件效果圖打包下載：http://download.csdn.net/detail/zhangguo5/9786673

後臺UI源文件效果圖打包下載：https://pan.baidu.com/s/1qYNMAIC 密碼: vs12

精美后臺管理系統模版html+PSD：https://pan.baidu.com/s/1bpCbRQn 密碼: ae2t

批量導出PSD文件圖片工具：https://pan.baidu.com/s/1eSacdf8 密碼: crj3

須要PSD源文件+工具與相關資料的朋友請留下您的郵箱！

第一批已發送

沒有收到的朋友請留言我將再次發送給你們。

第二批已發送