在企業(yè)內(nèi)部或者入駐電商平臺的商家、業(yè)務(wù)方，每天有大量的人在查看大量的指標(biāo)，用于監(jiān)控、分析業(yè)務(wù)的發(fā)展。同時，又有著能夠隨時隨地，方便快捷的查看分析數(shù)據(jù)的訴求。本文想簡單介紹下可以隨時隨地查看數(shù)據(jù)、分析數(shù)據(jù)的移動端產(chǎn)品界面的設(shè)計思路。

移動端BI產(chǎn)品，需要在有限的空間內(nèi)把大量的數(shù)據(jù)、圖表組織起來。任何產(chǎn)品設(shè)計，其實都離不開產(chǎn)品定位、用戶主體是誰、交互設(shè)計、開發(fā)維護、運營策略幾個方面，我們本次主要介紹產(chǎn)品前端設(shè)計方法。

設(shè)計一個移動端數(shù)據(jù)產(chǎn)品可從以下思路入手：

一、明確產(chǎn)品定位

本文要說的移動端BI產(chǎn)品，一般有如下幾種：

• 用于數(shù)據(jù)監(jiān)控、分析
• 平臺型數(shù)據(jù)產(chǎn)品
• 集中了以上兩點

以上幾類產(chǎn)品在界面展示設(shè)計上并無區(qū)別，區(qū)別在于框架的設(shè)計、前后臺的配置、運營、與用戶群體的不同。

例如平臺型數(shù)據(jù)產(chǎn)品，產(chǎn)品的定位是平臺，用戶可以在平臺上通過配置等方式得到自己想要的數(shù)據(jù)。同時保證數(shù)據(jù)的私有性，模式類似于維基與知乎，運營與管理只要確保平臺的穩(wěn)定性與擴展性即可。

二、數(shù)據(jù)內(nèi)容

關(guān)于數(shù)據(jù)內(nèi)容寫在前面是因為：數(shù)據(jù)內(nèi)容決定了產(chǎn)品如何架構(gòu)，決定了用戶用什么樣的思路去使用產(chǎn)品，決定了開發(fā)維護，以及運營。但不是本文重點，這里只說幾個重點：

時間

時間決定了數(shù)據(jù)的計算方式，更決定了你要如何設(shè)計產(chǎn)品能在不同時間維度中切換，你需要計算到什么時間粒度的數(shù)據(jù)，以及為什么這么做。

指標(biāo)以及指標(biāo)數(shù)量

數(shù)據(jù)產(chǎn)品的核心是指標(biāo)，指標(biāo)數(shù)量隨著公司業(yè)務(wù)的發(fā)展會不斷的增加和改變。指標(biāo)數(shù)量影響產(chǎn)品的維護與開發(fā)成本。如果所有指標(biāo)都由你的團隊來開發(fā)和維護，成本隨指標(biāo)數(shù)量成正比。這種情況尤其要著重考慮后臺的使用便捷性設(shè)計，充分考慮運營團隊的運營模式。好處是可控性高，數(shù)據(jù)質(zhì)量較容易把控，展示形態(tài)會比較豐富。如果是平臺式產(chǎn)品，指標(biāo)的多少對維護的成本影響較小，但需要考慮平臺的性能、擴展性、以及數(shù)據(jù)質(zhì)量等問題。

計算方式

按計算方式分為實時計算與離線計算。好的數(shù)據(jù)產(chǎn)品會做到用戶無感知計算方式的存在。例如當(dāng)日時點數(shù)據(jù)時，使用的是實時計算。當(dāng)周、月粒度的數(shù)據(jù)，則使用的是離線計算。在產(chǎn)品生命周期初期，如果中間層不能處理的很好，可以考慮將實時計算與離線計算獨立開，讓用戶感知到，但是在技術(shù)條件與產(chǎn)品的演進后，一定要做到用戶無感知，不要讓用戶在這一層面多費腦子。

三、構(gòu)思產(chǎn)品結(jié)構(gòu)

移動端產(chǎn)品有著隨時隨地使用，使用周期短、迅速獲取的特性，所以在結(jié)構(gòu)的設(shè)計上，需要避繁就簡，直擊最重點的內(nèi)容。

1、層級設(shè)計原則

將數(shù)據(jù)分層，將界面分層，利用層級設(shè)計的原則，有幾樣好處：

• 可以讓數(shù)據(jù)內(nèi)容有層次感，符合于用戶的瀏覽思路，由淺入深，由總至細，讓用戶快速獲取重要數(shù)據(jù)指標(biāo)。
• 便于用戶的交互體驗。
• 便于開發(fā)和維護。
• 便于權(quán)限分配時，不至于大面積留白。

APP設(shè)計中運用的層次關(guān)系：

例如股票APP中，大盤行情都是在第一層級上展示的，并且利用了數(shù)字的展示方式，可以在一屏中一覽當(dāng)日的所有市場行情。點擊某一個板塊，進入到本板塊的內(nèi)容，相當(dāng)于進入了下一層級，然后點擊具體的某一只股票，這樣一層層，瀏覽邏輯清晰。

股票APP中的層次關(guān)系：（圖片來源雪球APP）

按照由匯總到細節(jié)的方式去做邏輯層，引導(dǎo)用戶按照這種思路去尋找自己的數(shù)據(jù)需求。

注意：有利就有弊。多層次的設(shè)計，意味著操作次數(shù)的增加，去回的路徑會很長。有些數(shù)據(jù)會埋藏的很深，如果層次設(shè)計的不到位，大多數(shù)用戶可能都找不到想要的數(shù)據(jù)。我們需要在產(chǎn)品的整體框架與局部功能的設(shè)計上來優(yōu)化。多層次設(shè)計實際上是一個思想，層次的設(shè)計實現(xiàn)不見得按照切換頁面方式來實現(xiàn)，可以加入創(chuàng)新，結(jié)合開發(fā)方案，最終目的是簡化用戶操作。

2、整體框架設(shè)計（主結(jié)構(gòu)）

基本元素與導(dǎo)航框架，構(gòu)成了數(shù)據(jù)產(chǎn)品的實體與結(jié)構(gòu)。

（1）基本元素=數(shù)字與圖形

數(shù)字和圖形是產(chǎn)品的主要組成元素，刨除一些功能鍵，導(dǎo)航欄，設(shè)置框，剩下的界面基本被數(shù)字和圖形占據(jù)，它們是產(chǎn)品的實體。

1）數(shù)字

數(shù)字的表達，直觀、簡潔，且占用空間少，是很不錯的展示方式。缺點在于如果想更深入的了解數(shù)字的背后深層次的含義，例如趨勢，占比，分布等，便無法直觀的體現(xiàn)。

利用數(shù)字的展現(xiàn)方式，主要應(yīng)用于能夠一覽所有的重點數(shù)據(jù)的場景。例如股票中的滬深大盤，一眼就能看到幾個市場的指數(shù)。我們可以針對數(shù)據(jù)的內(nèi)容與用戶群體，來選擇不同的展現(xiàn)方式。在例如首屏的位置放入諸多重點數(shù)字可以快速的一覽業(yè)務(wù)的全貌。

① 應(yīng)用于健康產(chǎn)品中的數(shù)字展示：

（圖片來源IPHONE自帶健康）

② 應(yīng)用于股票產(chǎn)品中的數(shù)字展示：

（圖片來源Wind資訊）

2）圖形

圖形是數(shù)據(jù)產(chǎn)品中必不可少的元素，它在數(shù)據(jù)內(nèi)容的表達上表現(xiàn)的更豐富，不像數(shù)字一樣表達的過于單一。折線圖可以表達趨勢，餅圖可以看占比，豐富的圖對數(shù)據(jù)內(nèi)容的解釋既直接也更深入，還會在視覺上達到更好的效果。

但是，圖在APP中占用的屏幕空間實在是太多了，拿IPHONE6 4.7寸的屏幕來說，豎屏放3個圖形已經(jīng)占據(jù)全屏了，想再放入其他內(nèi)容，必須要從交互設(shè)計上入手。所以，圖的存在也會影響著APP的整體設(shè)計結(jié)構(gòu)模式。

圖形在APP中的表現(xiàn)形式樣例：

（圖片來源網(wǎng)絡(luò)）

（2）主框架與頁面導(dǎo)航

主框架就是產(chǎn)品中的頁面間導(dǎo)航，以及頁面內(nèi)導(dǎo)航，我把它拆成兩部分陳述。

設(shè)計移動產(chǎn)品，導(dǎo)航菜單的設(shè)計是重中之重，因為它決定了：

• 用戶操作邏輯以及內(nèi)容邏輯
• 開發(fā)方案的確定以及維護成本
• 開發(fā)、內(nèi)容的擴展性
• 運營方式

在確定了產(chǎn)品定位、數(shù)據(jù)內(nèi)容后，設(shè)計導(dǎo)航框架時，需要結(jié)合以上4點來考慮。

曾有前輩總結(jié)過大致8種導(dǎo)航方式，數(shù)據(jù)產(chǎn)品常用且比較適合的，總結(jié)為下圖所示6種。也是大家熟知的幾種方案，不管什么APP，都離不開這些導(dǎo)航方案。我們可以結(jié)合數(shù)據(jù)內(nèi)容，尤其是數(shù)字的展示方式，融合到這些導(dǎo)航中，簡化產(chǎn)品學(xué)習(xí)成本。

利用APP的常用的幾種導(dǎo)航來確定產(chǎn)品的基本框架：

以上幾種導(dǎo)航模式，可以混合使用，可以根據(jù)產(chǎn)品的不同生命周期，來決定導(dǎo)航方案。這些模式?jīng)Q定了產(chǎn)品的整體結(jié)構(gòu)。

如果產(chǎn)品需要用戶頻繁的在不同分頁切換與產(chǎn)品內(nèi)容的擴展性，最優(yōu)的導(dǎo)航方式是底欄標(biāo)簽的方式（上圖左上），擴展性很強，在產(chǎn)品生命成熟期時可以使用這種方式。每個頁簽定位不同場景的內(nèi)容，在每一個頁面場景中可以又融入其他的導(dǎo)航，例如：

底部標(biāo)簽導(dǎo)航+列表：

底部標(biāo)簽導(dǎo)航欄+TAB頁：

底部標(biāo)簽導(dǎo)航欄+抽屜：

上述三種方案，底部標(biāo)簽導(dǎo)航確定了APP的主結(jié)構(gòu)，其他的導(dǎo)航方式都是在這主結(jié)構(gòu)下的子導(dǎo)航，市面上的應(yīng)用很大一部分是利用這種主結(jié)構(gòu)。主結(jié)構(gòu)的確定主要是為產(chǎn)品的使用、開發(fā)的方案，運營、以及擴展做好基礎(chǔ)以及方向，此步十分重要。

總的原則是，利用導(dǎo)航之間的各種組合，來達到交互上的最優(yōu)。同時也需要考慮的是運維和開發(fā)的成本。

產(chǎn)品交互框架設(shè)計是一個不斷調(diào)優(yōu)的過程，我在設(shè)計移動端數(shù)據(jù)產(chǎn)品時，經(jīng)歷了列表式、做抽屜式、平鋪式最后到導(dǎo)航組合的過程。這本身和產(chǎn)品的生命周期息息相關(guān)。因為在最一開始，需求收集是片面且信息量很少的，另外你需要確定好數(shù)據(jù)內(nèi)容，以及內(nèi)容的展示方式，還有后臺的設(shè)計以及開發(fā)方案、技術(shù)團隊的配合，這些都是在需求不斷變更、數(shù)據(jù)內(nèi)容不斷豐富的過程中演進的。

3、局部頁面布局

頁面內(nèi)大塊展示區(qū)主要是內(nèi)容承載，實體是數(shù)字和圖形以及部分功能。在確定好主體框架之后，就是頁面內(nèi)的導(dǎo)航如何搭配了。頁面內(nèi)的導(dǎo)航、功能如何布局，可以當(dāng)做在主框架之后的分支設(shè)計，每一個場景設(shè)計都可以獨具創(chuàng)新，根據(jù)需求設(shè)計頁面。

我們可以把數(shù)據(jù)融入到各種導(dǎo)航中，本著分層設(shè)計的要素，合理布局，讓數(shù)據(jù)在各種導(dǎo)航中體現(xiàn)層次感。

我整理了幾個常見的方案：

（1）瀑布流平鋪

內(nèi)容平鋪的方式，開發(fā)簡單、維護方便，能夠快速一覽數(shù)據(jù)內(nèi)容。能夠確保指標(biāo)不多，數(shù)據(jù)內(nèi)容為高粒度匯總的情況下使用此類方式。一般用在產(chǎn)品初期階段。但數(shù)據(jù)內(nèi)容沒有做任何分層。

平鋪式如果沒有其他導(dǎo)航方式進行輔助，例如底欄標(biāo)簽的導(dǎo)航，抽屜導(dǎo)航做輔助，那么能承載的內(nèi)容與體驗成反比。也就是說，內(nèi)容越多，體驗越差。因為用戶要不斷下拉保證內(nèi)容信息的獲取，另外，如果想瞬間定位到某一塊內(nèi)容的時候，需要增加搜索功能以便實現(xiàn)。

（2）名片+導(dǎo)航

名片導(dǎo)航方式，就如同名片，按照業(yè)務(wù)或者場景進行分類，每一個名片代表一個業(yè)務(wù)或場景，名片內(nèi)體現(xiàn)高粒度匯總的數(shù)據(jù)（重要指標(biāo)），這樣可以一覽所有業(yè)務(wù)以及場景的總體情況。如需要繼續(xù)探索業(yè)務(wù)場景細節(jié)，根據(jù)導(dǎo)航進入下一頁，下一級菜單依舊可以按照名片的方式展示，也可以用其他方式如TAB頁、列表、九宮格等。遵循層次由總到細的原則，依照數(shù)據(jù)內(nèi)容的粒度層次依次傳遞。

（3）九宮格式

九宮格的利用方式，和名片+導(dǎo)航的方式類似，用這種方案設(shè)計，可以用于定位是平臺化的產(chǎn)品，集成很多入口。每一個九宮格，都是一個入口，可以是一個專項，可以是一個應(yīng)用的入口?？梢試@產(chǎn)品主題做發(fā)揮，例如為其他分析產(chǎn)品做入口，例如把用戶分析、流量分析、財務(wù)分析等當(dāng)做主題，每個主題可以由不同的人設(shè)計和負責(zé)，嵌入到產(chǎn)品中，對于用戶來說，集成在一個應(yīng)用中，總比切換應(yīng)用的感覺好的多。

（4）輪播模式+TAB頁

輪播模式+TAB頁的一個使用場景是，數(shù)據(jù)內(nèi)容能夠切分成兩個部分，分層的邏輯是二元的。分層在同一級，并且每個部分還可以配合其他導(dǎo)航方式繼續(xù)向下級延伸。也就是說，有兩個同級的起點。例如公司有兩塊主營業(yè)務(wù)，或者以兩個部門為起點等等。

總的來說
，確定主體框架之后，頁面內(nèi)的導(dǎo)航可以千變?nèi)f化，可以有創(chuàng)新，可以借鑒通用的導(dǎo)航方式，但是核心原則依然是圍繞著用戶體驗、開發(fā)維護、運營、以及數(shù)據(jù)內(nèi)容的擴展。

4、局部細節(jié)

數(shù)字如何排版，圖形如何擺放，彈層、功能鍵如何使用，這些細節(jié)決定產(chǎn)品的成敗。上文所述，圖占用空間但內(nèi)容表達豐富，數(shù)字直觀但缺乏解釋度，我們需要仔細設(shè)計把它們結(jié)合到一起，通過各種功能讓數(shù)據(jù)內(nèi)容表達具有關(guān)聯(lián)性，操作簡單，數(shù)據(jù)更易解讀。

（1）數(shù)字聯(lián)動圖形

數(shù)字和圖形的聯(lián)動，需要考慮使用的便利性。一般用戶的思路是，看到一個數(shù)值，還要想看更詳細的內(nèi)容，例如趨勢、占比、對比等，就需要圖表聯(lián)動的方式。

數(shù)字與圖形聯(lián)動方式：

上圖舉了兩個例子，一個是數(shù)在左，圖在右的聯(lián)動模式，這種模式缺點是圖較小，放多圖不太容易。另一個是圖置于屏幕最下方，保持常態(tài)，上方是各種不同的業(yè)務(wù)、場景指標(biāo)，點擊后，圖會顯示為點擊的業(yè)務(wù)數(shù)據(jù)內(nèi)容，隨之變化。IPHONE自帶的股票界面就是這樣的設(shè)計：

IPHONE自帶的股票軟件：

更多的情況下，一個數(shù)字（指標(biāo)）會包含有多個圖，可以看用折線圖看趨勢，餅圖看占比。根據(jù)需要，放置各種不同的圖。當(dāng)多圖時，可以用左右滑動的輪播方式，切換圖表。不可設(shè)置自動輪播，需設(shè)置好默認，讓用戶自己去操作。

（2）彈層

彈層應(yīng)用：

運用彈層功能的目的有2種：

1. 節(jié)省空間
2. 可以在同一頁面下其他元素保持風(fēng)格統(tǒng)一

為了避免過度打斷用戶思路，并引導(dǎo)用戶思路，利用彈層，并將彈層置底，“取消”按鈕的位置也便于手指操作。同時這樣設(shè)計也可以在同一數(shù)據(jù)層面下展示更多的內(nèi)容，也可顯得界面整潔、內(nèi)容更統(tǒng)一。通常會把圖形等占用空間大的組件放入彈層內(nèi)。缺點增加了用戶的操作頻次。

（3）表格

由于手機屏幕大小的問題，移動端只能做一些字段較少的表格，豎屏情況下，最多展示4列，還要看每列的內(nèi)容情況，況且如果數(shù)據(jù)內(nèi)容很多，會顯得很擁簇，視覺效果會大打折扣。

另外，如果用待滑動條的圖標(biāo)，還會讓使用以及開發(fā)頭疼，操作起來極其不便。

表格在移動端的展示與操作，十分不便，原則是：善用，少用。

?（4）頂部導(dǎo)航欄

頂部導(dǎo)航可以無限擴展，對于業(yè)務(wù)、場景分層很細的情況，例如像新聞類應(yīng)用，經(jīng)常會使用這種導(dǎo)航。在單獨的一個模塊中，可以常用這種導(dǎo)航，將業(yè)務(wù)分類。缺點在于一旦分類太多，埋藏太深，用戶需要滑動很多次才能找到自己需要的分類。但是可以考慮像新聞應(yīng)用一樣，設(shè)置一些?？吹臉I(yè)務(wù)分類。

此導(dǎo)航最好用于導(dǎo)航層級的最下層，由于需要操作，不便于放置到頂層導(dǎo)航之列，另外，也便于開發(fā)維護管理。

（5）圖形使用的一些細節(jié)

圖形帶出的信息不能太多太亂，例如柱形圖，不能把每個柱子都帶上數(shù)字，當(dāng)數(shù)據(jù)很大時數(shù)字疊加看不清楚?？梢钥紤]點擊后，顯示數(shù)值。

要善于利用適當(dāng)?shù)膱D形表示相應(yīng)的意思。例如，不要用柱形圖表示趨勢，如圖：近30天趨勢，折線圖遠比柱形圖簡潔直觀。

單位數(shù)值很大，Y抽起點是0，振幅卻很小時，圖形表現(xiàn)就猶如一根直線，很難看出變化。所以需要把起點值設(shè)置的更高，比例尺放大，就可以看出趨勢了。可以在使用過程中根據(jù)實際情況來優(yōu)化。

（6）其他需要注意功能

數(shù)據(jù)刷新，刷新功能十分重要，數(shù)據(jù)可以設(shè)置自動刷新，但有時為了考慮用戶流量的問題，也會設(shè)置非自動更新。所以告知用戶刷新功能很有必要。很多用戶在不知道刷新功能如何使用時，只能退出應(yīng)用再次啟動才能達到數(shù)據(jù)刷新效果。

數(shù)據(jù)解釋，對數(shù)據(jù)的定義說明、解釋是輔助數(shù)據(jù)產(chǎn)品的很重要的一環(huán)。

如果不能在產(chǎn)品內(nèi)恰當(dāng)?shù)捏w現(xiàn)對數(shù)據(jù)的解釋，產(chǎn)品使用效果會打折扣，用戶也許會在大量的數(shù)據(jù)面前迷茫，不知如何下手。

單位統(tǒng)一，同一個篇幅下，單位要統(tǒng)一。精缺到幾位，關(guān)系著你的產(chǎn)品視覺程度。例如，小數(shù)點問題，不同應(yīng)用對小數(shù)點的設(shè)計不同。一般建議數(shù)據(jù)取整，不保留小數(shù)點。

四、其他

關(guān)于開發(fā)

在產(chǎn)品生命周期過程中，開發(fā)是和產(chǎn)品息息相關(guān)的，開發(fā)方式也決定了上線時間、運維、可視化效果等。移動端產(chǎn)品可以考慮H5與原生兩個開發(fā)方式。

開發(fā)方案的確定由很多因素構(gòu)成：

• 開發(fā)團隊的組成
• 開發(fā)時長
• 產(chǎn)品生命周期
• 擴展性

產(chǎn)品初期，結(jié)合迅速上線，先交出一版的情況，可以考慮除主架構(gòu)之外的內(nèi)容用H5開發(fā)。因為以現(xiàn)在的大多數(shù)互聯(lián)網(wǎng)公司以及整個環(huán)境的發(fā)展態(tài)勢，產(chǎn)品整個生命過程的需求把控是十分關(guān)鍵的，結(jié)合你團隊的開發(fā)資源，選擇相應(yīng)的開發(fā)方案，對產(chǎn)品進程的把控是很關(guān)鍵的。

關(guān)于需求

用戶對產(chǎn)品的需求點，在產(chǎn)品中必不可少的有：

• 能夠方便的做對比
• 實時計算要求較多，可以隨時調(diào)整活動策略
• 能夠多維度鉆取
• 便于查詢
• 能夠有收藏或者自定義功能

以上是我總結(jié)的一些經(jīng)驗，但不見得一定適用于其他產(chǎn)品，所以，見仁見智吧。

對于移動數(shù)據(jù)產(chǎn)品的界面設(shè)計就介紹完了，產(chǎn)品設(shè)計，設(shè)計思想是核心，本著各種基本原則，吸收優(yōu)秀產(chǎn)品的有點和設(shè)計思想，結(jié)合需求點與用戶特性，使用場景來打造產(chǎn)品。本身就是個不斷打磨的過程。

希望本篇文章能夠為做移動數(shù)據(jù)產(chǎn)品的伙伴提供幫助，文章中措辭也許并不考究，希望能夠指正。