移動端的表單、圖表設計相對與web和PC應該注意些什麼？特別是內容很多的時候。
如折線圖、餅圖、柱形圖、表格等等
原文發表於：APP的數據圖表設計，你以為簡單？
做APP的數據圖表設計之前，你考慮過移動端屏幕大小與屬性嗎？考慮過可視化數據圖表，提升APP氣質嗎？考慮過在APP和WEB端，數據圖表的展示有何不同嗎？
也許你都考慮過，但作為一篇科普文，還是要從最基礎的說起。
問：以數據圖表為主的APP有哪些？
前期，yoyo通過App Store、MobilePattern、Dribbble瘋狂搜圖，積累了以下豐富的案例。
MobilePattern ：
http://www.mobile-patterns.com/stats
http://inspired-ui.com/tagged/visualization
Dribbble：
https://dribbble.com/search?q=data
https://dribbble.com/search?q=statistics
通常，我們見到有數據圖表的APP無外乎下面這幾類：
[天氣類]
到App Store隨手一搜「天氣」，搜索列表中展示的APP無一不是在風景圖上添加了天氣溫度等。以下推薦了一個名為「Fresh Air」的APP，從設計上區別於常規天氣APP,可以根據時間和溫度背景色有調整。
[運動類]
隨著各種手環的流行，大家對步數、睡眠質量等數據也更加看重。國外除了Fitbit、Jawbone、MisfitShine手環外，國內的科技公司也相繼推出各種價格上更佔優勢的手環，比如小米手環。鑒於這類APP大家都比較熟悉，以下就列舉了一個大家可能不太了解的APP，界面以深色底為主：FitPort，它的數據比較豐富，除了記錄步數外，還對體重和能量消耗有記錄。
[健康類]
健康類的APP除了關注身心健康外，還有一些智能硬體能檢測環境的安全、舒適性，比如下面的NEST，是一款家庭恆溫器，它可以通過記錄用戶的室內溫度數據，智能識別用戶習慣，並將室溫調整到最舒適的狀態。
Clue
Clue是一款姨媽助手，在數據展示上比美柚等做得更輕鬆，它會根據不同階段的心情做可視化，比如臨近姨媽期用一些爆炸雲朵表達煩躁的心情。
[財務類]
各種記賬類APP和理財類APP幾乎囊括了所有圖表樣式，趨勢圖、餅狀圖、柱狀圖應有盡有。以下列舉的Spendee在圖表設計上算是行業翹楚。
[專業數據分析類]
隨著移動辦公的需要，有一些專業的數據分析平台精鍊了產品功能，需要在移動端展現。以下列舉的Google Quicklytics 便是Google Analytics在移動端的產品體現。
問：如何製作數據圖表？
看了以上這些APP，基本對數據圖表有了直觀的感受。如果你的APP也需要呈現數據圖表，那yoyo接下來的分享希望對你有所幫助。
1. 配色
A）深色底
深色底上的圖表通常為了營造一種氛圍，展示數據信息一般較少，此時可以選用鮮亮的色彩，這樣圖表信息容易從深色中跳出來。
Dribbble
B）淺色底
如果需要清晰展示大量的數據信息，建議選用淺色底，數據信息在淺色底上的識別度相對較高。但需要注意的是：如果數據信息量太小，淺色底上會顯得頁面太空，這會讓用戶覺得你的平台沒有內容或者熱度。當然，這可以通過圖形質感、顏色等優化。
下面就深色底和淺色底的閱讀效率進行比較：
在以數據分析為主、有大量數據的頁面中，淺色底的頁面可讀性更高，閱讀效率也會更高。
C）色彩底
有時，為了讓頁面更加生動，可以將數據信息展示在大面積色塊上。
商務類APP可採用用藍色、綠色系作為底色。
運動類APP可選用的色彩自由度更高，偏活力的色彩，如橙色、黃色、橘色等都可以。
D）圖片底
為了讓數據閱讀更加輕鬆，可採用圖片底。在一些天氣類APP中，這種使用方式比較常見，圖片內容與數據信息產生關聯，提升可讀性。
健康類APP，讓閱讀數據時能有更加輕鬆的心情。
Misfit Shine
天氣類APP，首頁呈現會根據當時天氣情況自動拉取背景圖片。
2. 圖表類型
接下來會簡單介紹我們通常在APP中見到的圖表類型。
A）折線圖
[折線圖] 將序列顯示為一組由單個線條連接的點；用於表示在一段連續時間內發生的大量數據。
B）曲線圖
[曲線圖] 使用光滑的曲線來連接。如果數據是連貫實時的，且任意兩點間的數據具有分析價值，用[曲線圖] 比用[折線圖] 更合適，如24小時數據。
C）餅圖
[餅圖] 常用於顯示每個組成成分的數值相對總體的百分比。
D）環形圖，表現進度
[環形圖] 即中心為空的餅圖。除了顯示佔比，還可用來顯示進度載入，擬鐘錶/ 計時器設計。
E）條形圖柱狀圖
[條形圖] 將序列顯示為若干組水平圖條。
[柱形圖] 將序列顯示為按類別分組的垂直圖條。
F）熱度圖
[熱度圖] 常用在基於地理位置，對一段時間的數據（常常是離散量）累積量進行分布統計的圖表，進而可以分析數據密集區域/稀疏區域。這是一種展示效果較好的表達方式。
G）雷達圖
[雷達圖] 在比較多個類別數據序列以及查看整體情況很有用，既可以查看自身整體發展的均衡情況，也可以對比兩個序列整體的優劣勢。這也是一種展示效果不錯的數據表達方式，在展示整體綜合信息上很直觀。
H）列表
列表是一種常見的表達方式，通常我們見到的列表往往是如下最右的Spendee的界面，但也有一些APP做了可視化嘗試，在列表中通過對數據可視化做一些分區，詳見如下左和中Elevate的界面。
3. 圖表組織
了解基本的圖表類型後，接下來的重點是進行圖表的組織。
移動設備最大的特點是屏幕小，用戶每次可接收的數據信息量小，所以如何有效組織圖表信息是一個重要的設計點。
A）如何展示單個數據？
鑒於APP屏幕小，單個頁面中就展示一個重要數據，如何設計？
此時選用圓形，會是一個不錯的選擇，因為它在頁面中形成視覺中心。不管是餅狀圖，還是環形圖，或是擁有視覺中心的雷達圖，都會讓頁面上呈現一個視覺重點。
單個數據未免有些單調，為了讓頁面更加豐富，可採用深色、彩色、圖片為背景輔以純色的圖形（如芝麻信用分），或者將像Clue一樣，用重色將圖形撐滿，求得視覺上的飽滿。
B）如何展示主次數據?
要在頁面中展示兩到三種類型的數據，如何設計？
此時要注意以稍大的篇幅突出重點數據，弱化次要數據，盡量讓主次數據的圖表類型不一致，曲線圖、餅圖、環形圖、柱狀圖等基礎圖表，交替使用，這樣使得整個頁面層次清晰，內容豐富。
上：中右（Dribbble）
下：中（FitPort）右（Spendee）
C）如何展示大量數據？
還有一種類型，整個頁面要分幾大模塊展示大量的數據信息，如何設計？
用戶可能要刷幾屏才能把所有的數據閱讀完，此時，建議每個模塊單獨採用一種圖表類型，各個模塊的圖表類型均不同，這樣會減輕用戶對數據展示的疲勞度。
戳動效→
https://d13yacurqjgara.cloudfront.net/users/3816/screenshots/1040703/stats-animated.gif
4. 動效
動效可以提升產品趣味性，尤其在展示大量數據信息時，使用動效能緩解閱讀壓力。數據圖表中常見的動效有以下幾種：
A）以時間先後動態呈現數據
B）導航切換
https://d13yacurqjgara.cloudfront.net/users/29889/screenshots/2029434/streams-ui.gif
C）展示更多功能
https://d13yacurqjgara.cloudfront.net/users/5214/screenshots/1861371/energy_panel.gif
D）屏幕橫縱向切換數據
https://d13yacurqjgara.cloudfront.net/users/224485/screenshots/2013151/weather-dashboard.gif
5. 字體
一款字體使用的好，能彰顯整個APP的氣質，讓整個APP特立獨行。但鑒於APP字體版權及字體包大小，多數APP開發者都不把字體作為考慮範疇。
CityGuides是一款特別出色的APP，其圖表設計很棒，字體選用也與整個風格設計相得益彰，非常出彩。有興趣的可以網上下載這個字體（Optigiant），非商業用途的情況很受用。
附
APP中數據圖表設計遠不止於此，還是實踐出真知。
最後附上一個在數據圖表設計上有豐富經驗的團隊Rally。https://dribbble.com/rally
代表作：City Guides、Snowbird
轉載請註明：文章來自微信公眾帳號-yoyofootprint
之前遇過類似問題。
一定要明確，移動端尤其是手機端應用功能都比較輕量，當發現涉及到大量表單、超大量數據需要展示的時候，我們可能得回到【使用場景和目的】階段反思現有功能及參數，盡量簡化。也就是說，這種情況很可能是需求太寬泛，功能本身設計得太模糊了。沒有競品參考時尤其如此。實際上高票答案給出的案例數據量都不可和pc端app同日而語，但這個結果是對的。
數據過細展示、沒有主次詳略會使用戶目標不明確。最好能重新處理和組裝原始數據，明確每個參數對用戶的指導意義。絕不放生肉。個人覺得這個問題到視覺手裡能解決的餘地已經很小了，無非是從排版、色彩、文字等幾個方面明確層級突出重點。高保真圖能說明的問題並不多。問題都在PM這邊。1.表單設計.盡量少的輸入,而是讓用戶直接點擊選擇.只關心核心的問題,把一些其他的東西盡量去掉,或者自動補充上來.
2.圖表設計因為手機界面太小.所以儘可能的每個界面只展示一個圖標,並且種類不要太多.下面適當用文字表述.如果是曲線圖之類的,可以考慮K線圖一樣的操作,可以放大,縮小時間這樣的xy軸的時間間隔參數做展示提示.內容特別多的情況下,盡量做少到輸入,多選擇.分二到三個界面完成所有內容.數據圖表展示的目的是用來看和分析，從數據分析的思路上來討論一下。（圖片源自報表工具FineReport的移動端demo）1、展示關鍵指標，拒絕冗雜。一個類目的分析，相關的指標展現只要取最關鍵的幾個就行，版面上展示1~2個大塊或偶數類的小塊就好，不宜太多。
嗯 同意樓上輸入方面，就是移動平台上 統一需要減少輸入，因為輸入成本高。展示方面，盡量讓用戶同一時間關注一件事情，而不是一大堆擺出來。
推薦閱讀：
※如何看待三星的Android5.1.1中類似Android棉花糖新加入的省電模式？
※2A移動電源充手機會傷害手機嗎？
※如何買到預裝軟體相對少的安卓手機？
※對中國人來說，基於安卓的MIUI 的綜合實力超過蘋果 iOS 了嗎？
※androidstudio可以引入別的project的library module作為library？