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