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