?????♀??編者按：本文作者是螞蟻集團前端工程師芒僧，今年 8 月份開始到 9 月底，「支付寶 - 基金」里面的指數(shù)專區(qū)進行了一波大改版升級，這次借助 F2 4.0 強大的移動端手勢交互能力，我們嘗試了一種多維度探索式選基決策工具，本文具體介紹了它是如何實現(xiàn)的。

8 月份開始到 9 月底，「支付寶 - 基金」里面的指數(shù)專區(qū)進行了一波大改版升級，這次借助 F2 4.0 強大的移動端手勢交互能力，我們嘗試了一種多維度探索式選基決策工具（如上動圖所示）。

簡單來說，用戶可以在一個散點圖上根據(jù)「收益」和「波動」這兩個維度全覽對比整個市場里的指數(shù)基金，并選出適合自己的指數(shù)基金進行投資，這個功能我們愿稱其為「指數(shù)圖譜」?? 。

圖譜是這個業(yè)務場景上的叫法，實際上圖譜應該是關系圖而非統(tǒng)計圖.

?先看看有哪些功能點

1. 精細打磨的移動端手勢交互，平移、縮放、橫掃不在話下 ：

2. 底部產(chǎn)品卡和圖表的聯(lián)動交互：

3. 無懼數(shù)據(jù)點太多看不到細節(jié)，我們有自適應的氣泡抽樣展示和自動聚焦：

那么，怎么做的呢？

最開始看到這個需求的時候，當時覺得可行性比較低。因為需求里面針對圖譜的方案以及細節(jié)都特別模糊；不敢承諾各種功能和排期，所以先做了一輪比較完整的系分，增加一些說話的底氣 ??

?? 第一步：同類產(chǎn)品調(diào)研

因為設計同學的靈感來自于?大眾點評 APP?上面的「美食地圖」，所以第一步就是做了一次「同類產(chǎn)品調(diào)研」，仔細去看了一下 「美食地圖」上究竟有哪些花樣，有哪些體驗優(yōu)化的小細節(jié)，不看不知道，一看發(fā)現(xiàn)細節(jié)原來這么多啊 ??：

做完這一步之后，大概能夠知道自己距離“成品”有多遠的距離，方便自己評估工期；另外還可以在系分評審的時候把這些細節(jié)提出來，防止臨近發(fā)布了突然發(fā)現(xiàn)某個交互邏輯有個致命的漏洞（別問我怎么知道的，要命的）。這波調(diào)研之后，最終我們在實現(xiàn)上致敬了「美食地圖」50%?的體驗細節(jié)優(yōu)化 （狗頭）。

?? 第二步：功能點分析

第二步就是從需求本身的角度做功能點的分析，這樣可以方便我們拆分組件，為后續(xù)做分層設計打下基礎，明白哪些是需要支持可擴展的。這一步大家都熟悉，就不贅述了：

?? 第三步：通用化設計

有了功能點的分析之后，就可以進行通用化的設計了，這就來到了喜聞樂見的沉淀組件的設計環(huán)節(jié) ??

我們希望這個功能不僅僅是純業(yè)務代碼，期望下次能夠復用大部分核心功能?（理想很豐滿），所以在系分的時候是往通用化的方向去設計的，這里主要做了三件事情：分層設計、概念標準化、核心流程定義

1. 分層設計

拆的邏輯是按最基礎的?M(數(shù)據(jù)層) - C(控制層) - V(視圖層)?拆分的。

有了分層設計和功能點分析之后，就可以知道哪些應該放到組件內(nèi)，哪些接口應該被抽象成通用接口，哪些應該保留擴展性供使用者自己來定義，就可以畫個表格了，一一決定哪些模塊應該放到組件內(nèi)：

2. 概念標準化

下面來到造詞環(huán)節(jié)，把一些常用的概念都定義成一個個名字，這樣方便和后端、設計協(xié)同的時候效率更高，同時也方便自己定義清楚各個模型（類）。（這里其實取名越貼切越形象越好，有點考驗語言能力了屬實是）

3. 核心流程定義

這一步是腦補環(huán)節(jié)，在腦子里跑一遍整體的流程，也是整個需求最核心的流程，比如這里會分成四種流程：初始化流程 、散點圖交互流程、底部卡片交互流程、頂部tab交互流程；

進而可以將四種流程里面的各節(jié)點做一些歸類，比如都會有圖表渲染、數(shù)據(jù)補全、卡片渲染這些共同的節(jié)點，而這些節(jié)點就可以實現(xiàn)成具體模型里的具體方法。

?? 第四步：難點分析

根據(jù)上面拆分的各模塊，列出哪些點是實現(xiàn)有困難的，耗時長的。這樣就可以在評估工期的時候多 Battle 一下，還能砍砍需求，更可以讓底層引擎/SDK來突破這些難點（比如找 F2 的核心開發(fā)者） :

?? 最后一步：

按照上述的設計進行代碼編寫。

難點實現(xiàn)

1. 移動端的圖表手勢交互體驗優(yōu)化

開發(fā)之初，F(xiàn)2 只支持單軸（x或者y）的平移縮放，也不支持全方向交互；在 swipe 上的體驗也不太好（阻尼感很強），所以在項目開發(fā)過程中， F2 完成了很多體驗優(yōu)化，打磨出很多細致入微的良好體驗：

• X軸、Y軸可同時開啟平移、縮放

• swiper 體驗效果優(yōu)化

• 移出可視區(qū)之后的蒙層遮擋能力（view-clip)

• zIndex 元素層疊渲染

• 平移縮放性能優(yōu)化

2. 氣泡抽樣展示優(yōu)化

因為散點圖上的點在初始化的縮放比例下分布非常密集，所以如果每個點上面都繪制一個氣泡的話，就會顯得密密麻麻的，根本無從下手（如下圖1所示）。針對這樣的問題，做了「氣泡抽樣展示」的優(yōu)化。

實現(xiàn)方式上就是渲染前遍歷所有的點，如果在這個點周圍某個半徑距離之內(nèi)有其他點，那么就認為這個點是臟點（dirty point)，最后篩選出所有“干凈”的點進行氣泡展示。

如下圖圖1所示，灰色點（右上角）是干凈點，而灰白色的點（偏中間的位置）因為其在圓圈半徑范圍之內(nèi)有其他點存在，所以這個點是臟點。? ? ? ?

多提一句，這樣的過濾方式會使得密集區(qū)域的點都不會展示氣泡，后續(xù)會進行優(yōu)化。

3. 獲取到可視區(qū)內(nèi)的所有點

由于做了氣泡抽樣展示，所以上圖中的底部卡片只會展示用戶可視區(qū)內(nèi)散點圖上有氣泡的點（細心的盆友可以發(fā)現(xiàn)，散點圖上有兩種點，一種是帶氣泡的交互點，一種是不帶氣泡的縮略點）。那么就需要一個獲取「可視區(qū)內(nèi)所有的點」，實現(xiàn)思路如下：

? ? ? ? ? ? ? ? ? ? ? ? ?

4. 數(shù)據(jù)懶加載

底部卡片的數(shù)量是由散點圖上點的數(shù)量決定的，而每張卡上都有不少的數(shù)據(jù)量（基金產(chǎn)品信息、指數(shù)信息、標簽信息），所以不能一次性就把所有點里關聯(lián)的數(shù)據(jù)都查詢出來（會導致接口返回數(shù)據(jù)過多）。

這里采取的是懶加載的方式 ，每次只在交互后查詢相鄰 N+2/N-2 張的卡片數(shù)據(jù)，并且增加了一份內(nèi)存緩存來存儲已經(jīng)查詢過的卡片數(shù)據(jù)：

基本的流程圖如下：

實際線上效果

項目上線之后，我們發(fā)現(xiàn)散點圖區(qū)域的交互率（包含平移，縮放）非常高，可以看出用戶對新類型的選基工具抱有新鮮感，也樂于去進行探索；也有部分用戶能夠通過工具完成決策或者進行產(chǎn)品之間的詳細對比（即點擊底部卡片上的詳情按鈕），起到了一個工具類產(chǎn)品的作用 ?? 。

致謝

感謝 AntV 以及 F2 對移動端圖表交互能力的支持。