目錄
目錄X
揭秘動(dòng)易SiteAzure的全新后臺(tái)管理界面
在全新架構(gòu)的動(dòng)易SiteAzure中，我們決定拋棄舊交互界面，打磨出新的交互邏輯和視覺(jué)界面。新SiteAzure的管理界面將更加符合政府用戶實(shí)際交互需求和視覺(jué)感官需求。
在設(shè)計(jì)全新的操作界面前，動(dòng)易研發(fā)中心的UI／UE小組，經(jīng)過(guò)了充分的調(diào)查和長(zhǎng)時(shí)間的深思熟慮，吸收了眾多軟件的設(shè)計(jì)精華，同時(shí)融入了我們多年的界面設(shè)計(jì)與交互經(jīng)驗(yàn)，利用最受歡迎的 bootstrap 前端開發(fā)框架打磨出了全新的動(dòng)易SiteAzure 后臺(tái)管理界面。
那么，全新界面都有哪些看點(diǎn)？
一、更加炫酷的UI，流行扁平化設(shè)計(jì)，操作更方便更人性化
動(dòng)易軟件經(jīng)典的藍(lán)色系風(fēng)格一直引領(lǐng)網(wǎng)站管理軟件的設(shè)計(jì)趨勢(shì)，但隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來(lái)，用戶對(duì)網(wǎng)站界面提出了新的需求，舊架構(gòu)的后臺(tái)界面設(shè)計(jì)已稍顯落后，新SiteAzure針對(duì)移動(dòng)互聯(lián)網(wǎng)特性進(jìn)行開發(fā)設(shè)計(jì)。
在界面設(shè)計(jì)上，全新架構(gòu)的動(dòng)易 SiteAzure 后臺(tái)管理界面 UI 參考了 Google Material Design 規(guī)范，Material Design 是一種領(lǐng)先的視覺(jué)設(shè)計(jì)理念，匯集了經(jīng)典設(shè)計(jì)的原則和規(guī)則，科技的可能性和規(guī)范。全新界面設(shè)計(jì)重視用戶體驗(yàn)和人性化，為用戶打造時(shí)尚而簡(jiǎn)約，功能強(qiáng)大卻易用的用戶體驗(yàn)。
后臺(tái)管理界面整體布局圖
白色區(qū)域：左側(cè)功能菜單區(qū)；
紅色區(qū)域：右側(cè)主體功能頁(yè)面區(qū)；
藍(lán)色區(qū)域：頂部切換及操作區(qū)（站點(diǎn)切換、選項(xiàng)卡切換、操作信息提示、全局或者個(gè)人的一些操作按鈕）；
二、動(dòng)畫效果使操作步驟更為立體、操作效果更為直觀簡(jiǎn)潔
全新架構(gòu)的動(dòng)易SiteAzure 后臺(tái)管理界面利用 HTML5 和 CSS3 技術(shù)，在界面操作中運(yùn)用了眾多動(dòng)畫效果，如光標(biāo)波紋效果、內(nèi)容自檢效果、超精美的圖表動(dòng)畫效果等，這些交互動(dòng)畫能夠提高產(chǎn)品的友好性以及有效增強(qiáng)網(wǎng)站的體驗(yàn)效果。
光標(biāo)波動(dòng)紋效果
（鼠標(biāo)點(diǎn)擊界面左側(cè)導(dǎo)航菜單中的功能按鈕時(shí)，可以看到按鈕顏色迅速發(fā)生變化，向石頭投入湖面一樣產(chǎn)生一波漣漪。）
超酷的內(nèi)容自檢狀態(tài)
（進(jìn)入內(nèi)容管理，系統(tǒng)會(huì)自檢當(dāng)前欄目的內(nèi)容數(shù)據(jù)，點(diǎn)擊數(shù)字即可進(jìn)入相關(guān)欄目）
超精美的圖表動(dòng)畫
（查看圖表時(shí)，在初始化數(shù)據(jù)的時(shí)候會(huì)出現(xiàn)很一種漸現(xiàn)的動(dòng)畫特效）
適當(dāng)?shù)膭?dòng)畫效果使界面平滑顯示而不是死板地呈現(xiàn)，讓用戶理解界面的變化，讓網(wǎng)頁(yè)的交互動(dòng)畫變得更加活潑風(fēng)趣，使用戶操作步驟更為立體，操作效果更為直觀簡(jiǎn)潔，豐富用戶體驗(yàn)。
三、基于響應(yīng)式設(shè)計(jì)，可以充分實(shí)現(xiàn)響應(yīng)式布局、適配移動(dòng)設(shè)備
我們正處在移動(dòng)互聯(lián)網(wǎng)快速發(fā)展的時(shí)代，智能手機(jī)和平板的普及，也就意味著越來(lái)越多的用戶會(huì)通過(guò)移動(dòng)設(shè)備訪問(wèn)互聯(lián)網(wǎng)。移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，用戶對(duì)網(wǎng)站界面設(shè)計(jì)的要求越來(lái)越高。
全新架構(gòu)的動(dòng)易SiteAzure 的管理界面符合最新HTML5.0標(biāo)準(zhǔn)，可以充分實(shí)現(xiàn)了響應(yīng)式布局、適配移動(dòng)設(shè)備，無(wú)論用戶正在使用 PC 、平板電腦或者手機(jī)，無(wú)論是全屏顯示還是非全屏的情況，無(wú)論屏幕是橫向還是豎向，頁(yè)面都能夠?qū)崿F(xiàn)自動(dòng)調(diào)整以適應(yīng)不同設(shè)備。
如下圖，同一內(nèi)容編輯頁(yè)面在手機(jī)端和平板端打開的效果對(duì)比，系統(tǒng)都可以完美適配。
手機(jī)端界面
平板端界面
基于響應(yīng)式設(shè)計(jì)的后臺(tái)管理界面可以滿足受眾需時(shí)需地使用任何移動(dòng)設(shè)備上網(wǎng)的需要，提高用戶滿意度，更好地適應(yīng)移動(dòng)互聯(lián)網(wǎng)發(fā)展需求。
四、集合豐富的控件，方便功能的優(yōu)化擴(kuò)展， 生成豐富的交互式用戶界面
產(chǎn)品設(shè)計(jì)是對(duì)產(chǎn)品界面、功能選擇和意義的組合，使其可以滿足用戶的需求。舊架構(gòu)產(chǎn)品具有強(qiáng)大的功能的產(chǎn)品的同時(shí)，易用性、人性化也得到眾多客戶的稱贊。新架構(gòu)產(chǎn)品同樣延續(xù)了這一特性，在設(shè)計(jì)的時(shí)候以“以人為本”為出發(fā)點(diǎn)，重視用戶體驗(yàn)和人性化設(shè)計(jì)。
為增強(qiáng)用戶體驗(yàn)，全新架構(gòu)的動(dòng)易SiteAzure 集合了豐富的控件（約50種的控件種類）讓用戶操作起來(lái)更為簡(jiǎn)便，更好的功能實(shí)現(xiàn)、更高的效率使用戶產(chǎn)生愉悅的用戶體驗(yàn)。這些出色的控件包括，如針對(duì)表單的郵箱后綴自動(dòng)補(bǔ)全控件、圖片上傳控件、樹形控件等。
此外，動(dòng)易SiteAzure 還對(duì)一些大型控件進(jìn)行了選型和完善，如全新升級(jí)的內(nèi)容編輯器，在保持原有編輯器功能的基礎(chǔ)上，加入了 Word 文檔直接導(dǎo)入、一鍵格式化紅頭文件、三屏無(wú)縫內(nèi)容輸入等功能；再如可視化圖表控件，直觀，生動(dòng)，可交互，支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、餅圖（環(huán)形圖）等常見(jiàn)圖表類型。
豐富的控件方便系統(tǒng)功能的優(yōu)化擴(kuò)展，操縱簡(jiǎn)單，提高了使用效率，提升系統(tǒng)易用性和人性化 。
五、字體圖標(biāo)增加系統(tǒng)網(wǎng)頁(yè)靈活性和兼容性
有些時(shí)候我們會(huì)遇到這樣的情況：在不同屏幕分辨率中，有些Web中使用的圖標(biāo)放大后會(huì)變得模糊不清。舊架構(gòu)后臺(tái)界面的圖標(biāo)基本都是使用位圖，同樣會(huì)出現(xiàn)這樣的問(wèn)題。為了解決屏幕分辨率對(duì)圖標(biāo)影響的問(wèn)題，全新架構(gòu)的動(dòng)易SiteAzure 采用了字體圖標(biāo)（Icon Font）來(lái)解決圖標(biāo)的兼容性問(wèn)題。
在縮放情況下舊系統(tǒng)圖標(biāo)產(chǎn)生模糊
在縮放情況下新系統(tǒng)圖標(biāo)依然銳利清晰
字體圖標(biāo)是一種全新的設(shè)計(jì)方式，新架構(gòu)使用字體來(lái)制作界面圖標(biāo)，具有如下優(yōu)勢(shì)：
● 圖標(biāo)字體比一系列的圖像要小，一旦圖標(biāo)字體加載了，圖標(biāo)就會(huì)馬上渲染出來(lái)，不需要下載一個(gè)圖像?？梢詼p少HTTP請(qǐng)求。
● 使用字體圖標(biāo)可以不受限于屏幕分辨率，很容易任意地縮放，圖標(biāo)進(jìn)行放大時(shí)，不會(huì)變成模糊；
● 圖標(biāo)字體可以設(shè)置其任何大小，還可以添加各種文字效果，包括顏色、Hover狀態(tài)、透明度、陰影和翻轉(zhuǎn)等效果；
● 瀏覽器兼容性較好（IE8+ 以及 FireFox 、 Chrome 、 Opera 等主流瀏覽器）
● 可以到很CSS很好支持
● 豐富了網(wǎng)頁(yè)圖標(biāo)元素
● 矢量圖意味著每個(gè)圖標(biāo)都能在所有大小的屏幕上完美呈現(xiàn)。新系統(tǒng)后臺(tái)界面都是矢量圖標(biāo)，在Mac Retina 高分辨率的顯示器上也能完美呈現(xiàn)。
動(dòng)易SiteAzure 后臺(tái)界面使用字體圖標(biāo)增加系統(tǒng)的網(wǎng)頁(yè)靈活性和兼容性，網(wǎng)頁(yè)能適應(yīng)不同的分辨率，使其無(wú)論在垂直的PC電腦、平板電腦還是智能手機(jī)上，都能到達(dá)最好的視覺(jué)效果，保證了用戶操作的流暢性。
六、縱向功能菜單創(chuàng)造更好的視覺(jué)感受
功能導(dǎo)航結(jié)構(gòu)在網(wǎng)站設(shè)計(jì)中是起到?jīng)Q定性作用的，后臺(tái)界面提供給用戶的最直接最方便的訪問(wèn)后臺(tái)內(nèi)容的工具。移動(dòng)互聯(lián)網(wǎng)時(shí)代，界面設(shè)計(jì)需要配合不同移動(dòng)設(shè)備屏幕，所以怎樣處理導(dǎo)航就顯得至關(guān)重要。
舊架構(gòu)后臺(tái)界面的功能菜單是采用頂部橫向?qū)Ш降男问?，這樣存在著一些不足之處：頂部功能導(dǎo)航占據(jù)了界面顯眼的頭部空間，使得界面操作空間變小，此外，還有跨設(shè)備的問(wèn)題，在小屏幕上橫向?qū)Ш娇赡芙財(cái)喑啥嘈小?/div>
在全新架構(gòu)的動(dòng)易SiteAzure 后臺(tái)界面中，功能導(dǎo)航菜單由橫向改為了縱向，導(dǎo)航菜單使用收縮展開效果，可折疊導(dǎo)航菜單，還提供了點(diǎn)擊隱藏菜單功能。這樣的縱向?qū)Ш结尫糯罅靠臻g，也釋放了界面的頭部空間，主體操作更明顯，不會(huì)奪走網(wǎng)站內(nèi)容的焦點(diǎn)，幫助網(wǎng)站創(chuàng)造更好的視覺(jué)感受。
縱向功能菜單演示
七、眾多快捷操作方式優(yōu)化操作體驗(yàn)
回憶一下，在舊架構(gòu)中，如果在列表頁(yè)中選擇某幾條信息，你是怎么做的？選擇多條信息，需要用鼠標(biāo)一個(gè)個(gè)移動(dòng)來(lái)點(diǎn)選信息。而現(xiàn)在，在全新架構(gòu)的動(dòng)易SiteAzure 列表頁(yè)中，而不需要這么麻煩了。
全新多選體驗(yàn)
新架構(gòu)設(shè)計(jì)力求操作方便、安全，產(chǎn)品設(shè)計(jì)盡量化簡(jiǎn)操作上的復(fù)雜程度，增加易用性。動(dòng)易SiteAzure 提供了眾多鼠標(biāo)快捷操作，如需要在列表頁(yè)中選擇某幾條信息，我們只需在鍵盤上按著ctrl，使用鼠標(biāo)滑選就可以完成多條信息的選擇了。
除了以上的列表頁(yè)的快捷多選，還有以下快捷操作方式：
● 列表頁(yè)的快捷排序功能。鼠標(biāo)單擊列表上方“標(biāo)題”、“審核狀態(tài)”“發(fā)布時(shí)間”即可進(jìn)行相應(yīng)列表的信息快捷排序。單擊“標(biāo)題”按首字符排序信息，單擊“審核狀態(tài)”按文章狀態(tài)分類排序信息。單擊“發(fā)布時(shí)間”按時(shí)間順序進(jìn)行排序信息。
● 列表頁(yè)可以按多種方式進(jìn)行刷選，包括可以按ID、所屬節(jié)點(diǎn)、審核狀態(tài)、發(fā)布時(shí)間（自定義選擇或按月選擇）。
● 列表頁(yè)的快捷列寬調(diào)整。鼠標(biāo)單擊列表頁(yè)列表邊框即可拖動(dòng)調(diào)整列寬。
● 列表頁(yè)的快捷切界頁(yè)面。使用鼠標(biāo)滾輪快捷切換頁(yè)數(shù)與條數(shù)。在頁(yè)碼填寫框，滑動(dòng)滾輪即可變換頁(yè)碼，如在填寫框中滑到第3頁(yè)，再按“Enter”即可到達(dá)第3頁(yè)。還可以使用鼠標(biāo)滾輪來(lái)選擇頁(yè)面顯示的記錄條數(shù)，在條數(shù)填寫框，滑動(dòng)滾輪即可變換條數(shù)，如在填寫框中滑到第11條記錄，再按“Enter”使頁(yè)面顯示信息數(shù)為11條。
這是一個(gè)體驗(yàn)為王的時(shí)代，所以我們?cè)谔峁?qiáng)大功能的同時(shí)，在系統(tǒng)界面的設(shè)計(jì)上也注重用戶交互需求和視覺(jué)感官需求，在用戶的角度上進(jìn)行策劃和設(shè)計(jì)，從多個(gè)角度去試驗(yàn)，在用戶界面（UI）、操作流程、功能設(shè)計(jì)等多個(gè)方面去衡量用戶使用感覺(jué)，做用戶真正需要的東西。
掃描二維碼關(guān)注動(dòng)易官方微信，獲取更多新產(chǎn)品信息！
Copyright ? 2003-2024 PowerEasy.All Rights Reserved. 廣東動(dòng)易軟件股份有限公司 版權(quán)所有
用戶登錄
還沒(méi)有賬號(hào)？
立即注冊(cè)