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

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

設計一個移動端數據產品可從以下思路入手：

一、明確產品定位

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

• 用于數據監控、分析
• 平臺型數據產品
• 集中了以上兩點

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

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

二、數據內容

關于數據內容寫在前面是因為：數據內容決定了產品如何架構，決定了用戶用什么樣的思路去使用產品，決定了開發維護，以及運營。但不是本文重點，這里只說幾個重點：

時間

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

指標以及指標數量

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

計算方式

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

三、構思產品結構

移動端產品有著隨時隨地使用，使用周期短、迅速獲取的特性，所以在結構的設計上，需要避繁就簡，直擊最重點的內容。

1、層級設計原則

將數據分層，將界面分層，利用層級設計的原則，有幾樣好處：

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

APP設計中運用的層次關系：

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

股票APP中的層次關系：（圖片來源雪球APP）

按照由匯總到細節的方式去做邏輯層，引導用戶按照這種思路去尋找自己的數據需求。

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

2、整體框架設計（主結構）

基本元素與導航框架，構成了數據產品的實體與結構。

（1）基本元素=數字與圖形

數字和圖形是產品的主要組成元素，刨除一些功能鍵，導航欄，設置框，剩下的界面基本被數字和圖形占據，它們是產品的實體。

1）數字

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

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

① 應用于健康產品中的數字展示：

（圖片來源IPHONE自帶健康）

② 應用于股票產品中的數字展示：

（圖片來源Wind資訊）

2）圖形

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

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

圖形在APP中的表現形式樣例：

（圖片來源網絡）

（2）主框架與頁面導航

主框架就是產品中的頁面間導航，以及頁面內導航，我把它拆成兩部分陳述。

設計移動產品，導航菜單的設計是重中之重，因為它決定了：

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

在確定了產品定位、數據內容后，設計導航框架時，需要結合以上4點來考慮。

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

利用APP的常用的幾種導航來確定產品的基本框架：

以上幾種導航模式，可以混合使用，可以根據產品的不同生命周期，來決定導航方案。這些模式決定了產品的整體結構。

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

底部標簽導航+列表：

底部標簽導航欄+TAB頁：

底部標簽導航欄+抽屜：

上述三種方案，底部標簽導航確定了APP的主結構，其他的導航方式都是在這主結構下的子導航，市面上的應用很大一部分是利用這種主結構。主結構的確定主要是為產品的使用、開發的方案，運營、以及擴展做好基礎以及方向，此步十分重要。

總的原則是，利用導航之間的各種組合，來達到交互上的最優。同時也需要考慮的是運維和開發的成本。

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

3、局部頁面布局

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

我們可以把數據融入到各種導航中，本著分層設計的要素，合理布局，讓數據在各種導航中體現層次感。

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

（1）瀑布流平鋪

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

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

（2）名片+導航

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

（3）九宮格式

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

（4）輪播模式+TAB頁

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

總的來說
，確定主體框架之后，頁面內的導航可以千變萬化，可以有創新，可以借鑒通用的導航方式，但是核心原則依然是圍繞著用戶體驗、開發維護、運營、以及數據內容的擴展。

4、局部細節

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

（1）數字聯動圖形

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

數字與圖形聯動方式：

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

IPHONE自帶的股票軟件：

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

（2）彈層

彈層應用：

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

1. 節省空間
2. 可以在同一頁面下其他元素保持風格統一

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

（3）表格

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

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

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

?（4）頂部導航欄

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

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

（5）圖形使用的一些細節

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

要善于利用適當的圖形表示相應的意思。例如，不要用柱形圖表示趨勢，如圖：近30天趨勢，折線圖遠比柱形圖簡潔直觀。

單位數值很大，Y抽起點是0，振幅卻很小時，圖形表現就猶如一根直線，很難看出變化。所以需要把起點值設置的更高，比例尺放大，就可以看出趨勢了?？梢栽谑褂眠^程中根據實際情況來優化。

（6）其他需要注意功能

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

數據解釋，對數據的定義說明、解釋是輔助數據產品的很重要的一環。

如果不能在產品內恰當的體現對數據的解釋，產品使用效果會打折扣，用戶也許會在大量的數據面前迷茫，不知如何下手。

單位統一，同一個篇幅下，單位要統一。精缺到幾位，關系著你的產品視覺程度。例如，小數點問題，不同應用對小數點的設計不同。一般建議數據取整，不保留小數點。

四、其他

關于開發

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

開發方案的確定由很多因素構成：

• 開發團隊的組成
• 開發時長
• 產品生命周期
• 擴展性

產品初期，結合迅速上線，先交出一版的情況，可以考慮除主架構之外的內容用H5開發。因為以現在的大多數互聯網公司以及整個環境的發展態勢，產品整個生命過程的需求把控是十分關鍵的，結合你團隊的開發資源，選擇相應的開發方案，對產品進程的把控是很關鍵的。

關于需求

用戶對產品的需求點，在產品中必不可少的有：

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

以上是我總結的一些經驗，但不見得一定適用于其他產品，所以，見仁見智吧。

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

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