手機端里的數據表的表現方式

發布于:2017-11-13?? 編輯:admin 瀏覽:

跟著手機端利用層出不窮地發展,這次將數據圖表的表示延用得手機端。

比擬 web 端展現數據的空間優勢,要統籌手持設備的便捷、扼要而重點的特質,手機端該如何取舍?是否有更加適合的表示方法?下面是翻閱或試用了各種有數據的 app 后,將手機端利用中值得鑒戒的局部做了小小的總結,也讓我本人對不同數據圖表的特征有更深的理解。

收羅了 App 分類的進程中,發明較能體現數據利用表白的,多數散布在:財務、 健康、醫療、商務、工具、效力這多少類;其中以財務、健康、商務類的利用為最 普遍,今天就枚舉這三大類的圖表利用來跟 大家一起看看。

通常咱們所應用的數據圖表大多是能在highchart中找到,今天先以其中圖表為基本參照,來看看圖表在手機 app 里都是如何適當利用表白的。

一.財務類

應用財務類(理財)用戶的目標,通常是控制收支、收益的趨勢,從而省或賺錢。 這類利用通常會請用戶當時做好收支、賬單跟 估算設定,之后再開啟 app 時主 要的義務就是查看利用反饋了。Mint Bills & Money

 

上圖的是個記賬利用;左圖用了儀表盤(solidgauge)表現賬單到期的情況;左圖 則是用相似條形圖的方法,表現信譽卡的已用額跟 余額,及最小還款數。這樣在 既定范疇內,掃一下便可曉得總體開銷的情況;比擬兩者都有進度、過程的表白, 但描寫倒計時,左圖的表白就更適合一些;而描寫最小還款刻度,右圖會更清楚。

Mint

 

跟 上一個的 app 有相近的利用;這僅有一條的“重疊條形圖”后來感到更像是基本熱力求,并表現了當前所示的分值,便利查看當前信譽值,所在坐標;視覺 上加了箭頭既有了過程感,也有唆使作用。

Saver 2

 

仍是一款記賬 app,左圖以各開銷分類代表的不同色塊,來切分的甜圈圖(Donut chart),是在原始占比餅圖上做了更有效的利用;挖空餅心,放開銷的匯總金額, 這個做法在 app、跟 古代 web 圖表數據總覽里逐步成為主流;讓占比跟 總額都 輕松收入眼底。右圖是依據左圖的色塊細化詳細分類項,查看單項的估算跟 開銷占比情況。

MoneyWiz

 

左圖是以日歷治理的方法,方便查看對應賬單分類,能明現哪些日子是有開銷或 賬單提示的;右圖則用慣例的柱圖來對照月的收支。

TapToTrack

 

仍是記賬 app,左圖是用timeline的情勢,記載逐日收支數據細則,并用常識 顏色(紅綠)來表現收入\支出;右圖上半局部的折線圖,繼續了左圖中紅綠收 支用色標示,讓用戶查看逐月收支情況,下半局部是把細項收支做了排行(示意色不盡正確),占比表現出某個 highlight 出的子項支出跟 占比數據。

EnergyMonitorUI

 

在 Dribbble 上一張相干的能源監控圖設計稿;用極地風向圖(wind rose)來 表現 2013 年里的月度能耗,比擬同樣示意的柱圖,極地風向圖更有一些新意; 固然設計稿其余細節還有待再一步交代,卻也直觀表明能耗大月,為用戶后續采 取相應的節流辦法供給了輔助。

Yahoo Finance

 

這次不是記賬類利用了;不必多說這是 yahoo 的一款股票跟蹤 app。左圖是股 民們最熟習不外的,不同用色的折線圖表明當日走勢,還能夠通過地區、時間的抉擇\切換來查看不同緯度的數據表示;下部的紅綠漲跌也清楚可見;右圖用面積圖表現單支股票在不同時間趨勢變更,在設計看來有填色的是面積圖,反之就是折線\曲線圖了,但有填色當前坐標上還能夠設置細節時段的表示(右圖)。股票相干的數據圖表都利用得十分專業跟 固定,也算是一項龐雜業務為用戶樹立起 的常識跟 習慣,只有看到固定的圖表組合就無需多說了。

ARBITRAGE TRADER

 

股票 app。一格格的數據相似熱力求的情勢,通常在空間充裕的 web 端,在數據明細表格里更為常見;是一種十分好用的浮現方法:以不同色塊表現用戶預設的一些區間,看似密麻的數字,應用這種色塊能夠很快了解數據的范疇共性。

回想慣例的基本圖表利用在手機端,都會斟酌空間因素,也會在視覺上做更清楚的調劑;下面來看看財務類 app 的圖表利用回想:

此外,

– 賬單聯合日歷提示也是個很好的方法

– 用色原來就很主要,在有限空間的 app 里,用好顏色,會大幅晉升效力

– app 里也少不了過濾器,比方切換地區、時間等維度的控件,能夠有效調劑視圖的顆粒度

把控基本元素在有限空間針對性利用,凸顯重點,也是為用戶下一步的節流、投資等行動做指引。

二.健康類

健康大類里一種是活動健身,另一種是健康指標監控。健康類 app 的用戶重要關注本人的活動指標、實現度跟 變更等因素,通常也是在用戶依據領導設定好一 些監控尺度后,通過活動在 app 中記入新的數據,便利隨時查看跟 跟蹤。

FitPort

 

這是一款體重、計步的 app。左圖仍是用甜圈圖(也可看做圈形的條圖)表現今天練習的結果:步調數、錘煉公里數\實現度,及體重變更,前兩個是細甜圈圖,清晰表白了實現進度跟 差距,后一個是為堅持作風而做的一種視覺丑化來表現體重變更;右圖的底部在時間維度為天天的情況下,以柱圖跟 基準線來浮現一天里不同時段步調數變更,便利用戶找到一些本身的法則。 健康的另一類是健康指標的監控,有一局部醫療也暫羅在此列,共性是這類 app 都通過一定的外接設備隨身、隨時檢測、丈量身材數據,同步記載在 app 里; 而后用戶就能在 app 里查看指標變更,進而調劑飲食、生涯等習慣,改良現狀。

iHealth MyVitals 2.0

 

這是一款血壓監控 app。左圖的折線圖描寫最近,大概一天內某個時段的血壓范 圍、體重的變更趨勢,右圖是表現當前血壓數據的坐標,跟 參考范疇的變異熱力求,跟 前面理財 app 里的信譽值坐標很像,不同的是多一個維度,也是合乎血 壓(伸縮壓跟 舒張壓坐標)實際基礎數據請求;所以坐標熱力求也能夠機動利用。

iHealth Gluco-Smart

 

這是一款血糖監控 app。左圖是通過外接血糖監控設備在app里查看丈量數據;加了視覺后果的甜圈圖有儀器刻度感,提醒 7 日的飯前或夜間的血糖均值,下面的散點圖作為幫助具體圖表來標注高中低分辨產生的時段。在右圖中查看血糖變更趨勢里,折線圖表現飯前\夜間的血糖變更,不同用色線細節表白早餐、午餐、 晚餐跟 夜間的血糖變更。兩張圖都有綠色區域——平安范疇,也十分便于查看跟 對比本人的數據變更。

SnoreLab

 

這是一款鼾聲監控 app。左圖是對打鼾水平的監測表示,左側有從舒緩到重大的用色篩選,嚴密柱狀圖中色塊遵守了篩選器的三個維度,能夠直觀看到最厲害的打鼾情況散布在什么時段;下方還能回聽當時的鼾聲的輕重度;右圖用有色熱力折線圖表現每個時段鼾聲產生的水平;并將其轉換成詳細部位發聲的測評值,供用戶就醫時做有效醫治的參考。

SleepCycle

 

跟 上一個 app 的右圖相似,是做睡眠監控的數據圖表。Dribbble的設計稿。 Dribbble里的絢美設計稿,許多愛好曲線加用色漸變,但也表白犯錯的也許多,而這張設計稿中的漸變用色是剛好地與曲線做了聯合,清楚地表白出配合時段察看睡眠深淺水平;甜圈實現度表現不同類型占比,對整體睡眠情況做了直觀總結。

回想

 

這類 app 里利用的經典圖表,除了監控指標、查看變更\趨勢外,著重提醒問題點,以便用戶調劑作息、飲食及練習計劃。

三.貿易類

貿易類重要用于監控業務數據:流量、拜訪、觸達等,其中糅合了一則效力工具,也是對時間應用的監控跟 治理。

Mandrill

 

這是款跟蹤郵件發送數據的 app。上半局部是在可選的時間范疇內,匯總數據提醒了郵件的翻開率、點擊率、去重翻開、點擊數、投訴、退訂數等關鍵指標;下半局部用有透明度的面積圖表現翻開率跟 點擊率。

MailChimp

 

這款也是郵件監測 app,大家都熟習的 MailChimp。用條形圖表現翻開率、點 擊率;關鍵數據局部,擺設出郵件投遞、翻開、點擊數\率,條形圖也能夠是拗成圈的細甜圈圖,通常做百分比的示意,實現度也是雷同的概念。

TODAY Calendar

 

這是一款時間\義務治理 app。仍然應用了日歷、用色塊辨別不同的義務(左圖),接著在右圖里的表盤上,就可見之前的義務部署、時間是否有矛盾或重疊,高深莫測;比線性地統計單項義務耗時要直觀許多。

Statistics

 

不記得 Dribbble仍是 Pinterest 里發明的,一張拜訪起源數據圖。上部的輿圖 有點相似輿圖(Map bubble),直觀表白起源地區;底部將 PV、訪客數、回訪數以半透明的面積圖浮現出來,也能夠依據這三個數據的先后邏輯,將其看做簡略的漏斗視圖。

回想貿易效力類更關注監控后果、指標數據等以便找到晉升點。

 

在收拾例子的進程中,想到很早之前 app 之初,如何遷徙 web 端或客戶端業務得手機時的思路:把業務最中心的骨干局部拿過來。而今回想如是:跟著手機 利用的比例大幅升高后,除了斟酌中心骨干,還要盡力把要用戶做的重要義務或 給用戶的有效領導,都昭示出來。就數據類的 app 而言,在有限空間內,匯總 數據或者叫關鍵指標,不可缺乏,而數據表會絕對少一點登場,元素構造就會大 致變成如下的樣子:

 

有多個元素\組合,就一定會斟酌優先級,就像火箭的中心跟 可棄局部,假如只 能在 apple watch 上或更小的空間上展現內容,咱們該留那一塊呢?

 

綜上是在工作探索中,對數據圖表在手機端利用的一點收拾跟 提煉;每個基本圖表都有本身的特色,控制它的特質,并能應用好它做更多的翻新,是可視化數據的價值所在。數據并不單調,有趣的數據圖表是它最好的翻譯官。以上觀點、案例及思考未免淺顯、片面,更多更好的利用有待大家連續發掘。

篮球胜分差开奖结果 北京快3助手安卓下载地址 湖北11选5走势图号码查询 天津快乐十分开奖结果 新疆时时彩2元网历史最大遗漏 香港六合彩王中王官方网 周一竞彩足球比分直播 网赚网盘下载辅助工具 3d开机号中华网 怎样淮确竞彩胜平负 江苏新11选5开奖详情 吉林快3计划网站 体彩p5和值走势图带连线 vr赛车彩票官方网站 泛亚电竞官方网站 香港六合彩57期开奖结果 甘肃11选5任三技巧稳赚