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