從最早的平面和廣告設計到後續接觸到網頁設計再到現在火熱的移動端設計,從最初的逼真寫實質感風格到現在的扁平化的出現,設計趨勢,形式,風格一直在變;然而很少人有對後臺系統介面設計感興趣,很多人都覺得後臺沒什麼可設計的,設計起來很枯燥無味;其實我個人覺得後臺介面做好了還是很挑戰人的,他是一個很精細的活,同時也是一個邏輯性很強的活,他一樣可以設計的很酷和簡約高大上。非常考驗設計師對細節和易用性,統一性的把控。當然要做好一個系統後臺介面設計還需要設計師對產品邏輯有充分的理解。
下面就我自己最近參與公司的智慧校園平臺後臺介面設計做些分析與總結:
1、登入頁設計
登入頁banner背景設計採用的是品牌色草綠色系,整個背景是由多個校園相關元素的簡筆畫形式構成,簡單清晰又不影響使用者登入。
2、整個專案視覺風格簡約、層級、扁平化,視覺設計品牌形象化,圖示元素設計應用統一化,標準化。
專案設計上考慮是基於微信的應用,又是功能為主導的系統平臺,所以整個後臺介面設計上採用了接近微信企業後臺的藍灰和草綠色的簡約配色,讓品牌形象更加突出,提升凝聚力突出主要功能和內容;板塊的佈局也是採用了左右結構佈局左側為主要功能選單欄,右側為對應的功能板塊和內容,方便了後續選單欄目的擴充套件與增加,同時也符合使用者上下左右的瀏覽習慣;左側選單欄通過色塊的深淺和字型的大小來區分與間隔,為介面提供了更加清晰的層級劃分與更優的易用性。圖示的應用上採用了1px寬的規格大小統一的線性圖示,使整個介面看起來更簡約,現代,時尚。登入進來的使用者頭像採用了圓頭像的設計形式,打破了以往過於規矩化的方形,相比方形頭像,圓形更容易聚焦又能節省空間更適合人物頭像的擷取,然後融合在方形的板塊佈局中,增強了其現代感。
3.色塊化的介面與簡約化表單樣式更容易模版化,更方便開發的複用與效率的提高,也可以為以後類似的系統平臺提供模版複用。
4.整個介面與表單內容自動適配瀏覽器和多尺寸電腦螢幕寬高,提升介面的統一性。
再分享一些國外優秀的後臺介面設計:
http://agileui.com/supina-demo/
http://demo.pixelcave.com/appui/index.php
http://themes.shamsoft.net/flaty/index.html
http://themepixels.com/demo/webpage/bracket/index.html
http://www.keenthemes.com/preview/conquer/index.html
http://thevectorlab.net/flatlab/#
http://aqvatarius.com/themes/index.php?template=taurus多端適配
http://www.riaxe.com/marketplace/thin-admin/index.html
設計反思:
相對國內很多流程複雜的系統和後臺介面的保守設計,國外系統設計顯得更open,不管功能體驗還是細節處理都值得我們去學習。現在很多後臺介面設計體驗也慢慢的前臺化,活躍化,視覺化;主要體現在介面設計更簡約,易用性更強,細節設計更規範,在很多細節的處理上也會有體驗不錯的小動效設計加入,使整個本來功能繁瑣枯燥的系統產品更有親和感。我們在設計產品之前一定要對產品功能有個深入的理解才能給使用者操作帶來更好的易用性與視覺體驗。