目錄
目錄X
全新架構(gòu)的動易SiteAzure之超乎想象的信息列表
在采訪研發(fā)中心大牛的時候,關(guān)于新架構(gòu)列表性能的段子讓我印象很深刻:
“問:實事求是的說,在同類產(chǎn)品中,新動易 SiteAzure 的列表顯示處于怎樣一種位置?
答:目前來說,基本上很少有我們這么牛X的?!?/em>
對于看似簡單的列表顯示功能,究竟有哪些技術(shù)特性讓我們的研發(fā)人員如此自信呢?舊架構(gòu)產(chǎn)品的信息列表在應(yīng)對客戶越來越多的需求時,略顯陳舊,主要表現(xiàn)在這幾個方面:
1. 信息列表的數(shù)據(jù)排序非常復(fù)雜,不能組合篩選;
2. 界面陳舊,交互不夠友好;
3. 信息分頁傳輸數(shù)據(jù)量大,每次操作或者刷新都是一次全新的請求,會產(chǎn)生50%以上的無用數(shù)據(jù),導(dǎo)致列表載入數(shù)據(jù)過慢,數(shù)據(jù)庫負載壓力過大。
新架構(gòu)的信息列表不僅解決了舊架構(gòu)的不足,動易研發(fā)工程師還賦予它更多有用的功能,不斷地極致的優(yōu)化著列表處理算法,試圖壓榨出它最大的性能體驗。那么,看似習以為常的列表管理界面,卻承載著管理流程中非常重要的任務(wù),在新架構(gòu)中會是怎樣一種體驗?zāi)兀?/div>
一、簡約而不簡單的新界面
在舊架構(gòu)的信息列表中,我們已經(jīng)將交互和 UI 優(yōu)化到了“頂峰”,面對客戶更多需求時,略顯陳舊的列表算法和體系已經(jīng)無所適從。因此,我們選擇了利用新架構(gòu)特性重塑信息列表。
以下為我們新的信息列表區(qū)域。
紅色區(qū)域:全 Ajax 當前頁面無刷新的新數(shù)據(jù)操作和快捷操作區(qū)域。
藍色區(qū)域:功能強大、篩選條件超多的信息篩選區(qū)域。
綠色區(qū)域:載入速度超快、超輕負載的信息列表顯示區(qū)域。
黃色區(qū)域:智能搜索區(qū)域。
二、Ajax 技術(shù) “沉浸式”操作體驗
在舊架構(gòu)的信息列表中,無論是何種操作,都無法在當前窗口內(nèi)完成,不僅缺乏友好的交互體驗,而且給數(shù)據(jù)庫也帶來了極大的負擔。在新架構(gòu)中,我們采用了 Ajax 技術(shù),操作和返回通知都在當前頁完成,客戶可以很好的專注當前操作,而不被頁面跳轉(zhuǎn)和新窗口而打擾。
如下圖,以設(shè)置某篇文章為置頂文章,設(shè)置后在當前頁面直接操作成功并提示操作信息。
設(shè)置置頂時,在當前頁面完成并提示
同時,信息列表對于數(shù)據(jù)格式有更好的展示效果。例如:所有的貨幣類型都是靠右對齊,方便用戶快速的瀏覽數(shù)據(jù)。
三、超強大與自由的篩選功能
隨著政府網(wǎng)站承載著政府轉(zhuǎn)型的責任越來越大,更多需要披露和維護的信息越來越多。如何能快速的多維度的在海量信息中找到自己需要的信息,這就是成為了客戶不斷增多的新需求。在舊架構(gòu)的產(chǎn)品中,這點是無法做到完美的。
全新架構(gòu)的 SiteAzure 能更好的滿足這些需求。它擁有目前同類產(chǎn)品中最多種條件混合篩選,例如:日期型數(shù)據(jù)就可以直接選擇本月、本周、本季度等,也可以完全自定義時間進行篩選。還支持多個屬性還可以同時進行篩選,方便客戶快速的定位想要的數(shù)據(jù),并且使用了更加方便的界面。
ID篩選
所屬節(jié)點篩選
審核狀態(tài)篩選
發(fā)布時間篩選
四、30% ~ 50% 速度提升的信息列表顯示
在舊架構(gòu)中,由于邏輯和機制的不同,列表每次刷新或者操作都需要傳輸大量的HTML代碼,且分頁傳輸數(shù)據(jù)量大,點擊不同分頁時都是一次全新的請求,會多出50%以上的無用數(shù)據(jù),極大的增加數(shù)據(jù)庫負載;新架構(gòu)的信息列表已經(jīng)完全彌補這些不足,每次在網(wǎng)絡(luò)上交互的都只是純粹的數(shù)據(jù),同時采用 AJAX 數(shù)據(jù)交互,數(shù)據(jù)交互速度有 30% ~ 50% 以上的提升。
● 數(shù)據(jù)列均支持正序和倒序排列。
● 對于樹形數(shù)據(jù)采用樹表格呈現(xiàn),更加易于操作和形象具體。
● 數(shù)據(jù)列表支持分頁和篩選狀態(tài)的記錄功能,在對數(shù)據(jù)進行各種操作以及頁面跳轉(zhuǎn)后仍可以返回到原來的分頁和篩選狀態(tài),使操作更加直觀和高效。
● 數(shù)據(jù)列表支持鼠標圈選操作,同時在列表獲取焦點后支持鍵盤翻頁操作,當前頁及每頁記錄數(shù)支持鼠標滾輪操作。
● 采用 Ajax 進行數(shù)據(jù)交互。整個列表無刷新且與服務(wù)器端交互數(shù)據(jù)更小,加載速度更快。
● 對于數(shù)據(jù)格式有更好的展示效果。例如:所有的貨幣類型都是靠右對齊,方便用戶快速的瀏覽數(shù)據(jù)。
值得一提的是新信息列表還支持子表格的特性,能夠很好的幫助后臺管理人員查閱相關(guān)列表信息。下面以在線訪談功能的子表格特性為例,快速查閱單條訪談信息里的訪談實錄的內(nèi)容。
列表中便可查閱訪談實錄的內(nèi)容
五、智能搜索區(qū)域
在新架構(gòu)中,我們給不同的數(shù)據(jù)類型采用了不同的用戶接口,搜索系統(tǒng)可以針對不同的屬性進行多種方式的搜索,其中包括開始于、結(jié)束于、不包含、包含、等于等多種方式的搜索條件,可以讓客戶最快速度排除干擾信息,找到自己想要的信息。
而且,我們在搜索結(jié)果中加入了關(guān)鍵字高亮的功能,為了可以快速識別所需的搜索結(jié)果。
這僅僅只是開始,更多全新架構(gòu)的動易SiteAzure 功能介紹將陸續(xù)推出!
掃描二維碼加入動易公司微信公眾平臺,
第一時間了解新產(chǎn)品動態(tài)!
用戶登錄
還沒有賬號?
立即注冊