AXURE原型設計:手機版可視化視圖應用案例

2020-12-06 人人都是產品經理

將數據可視化,可以更快地理解和處理信息,是數據分析中重要的部分。本文從四個案例出發,分析如何做好數據可視化,希望對你有幫助。

數據可視化在數據分析中扮演著越來越重要的角色,試想一下,如果你把一堆數據拿給你的老闆或者甲方爸爸看,那肯定會被痛批一頓。

但是如果你把數據做成可視化的圖標就不一樣,因為可視化視圖可以快速、直觀、清晰地將數據呈現出來,讓人能夠更快地理解和處理他們的信息,從而做出決策。

下面我們先看看幾個數據可視話的案例:

1. 運動健康案例

2. 資產理財案例

3. 用戶畫像案例

4. 遊戲評分案例

通過上面的案例,我們能明顯的體會到可視化視圖的好處。隨著5G技術的發展,人們使用手機的時間越來越多,所以手機版的可視化視圖成了app軟體裡必不可少的一部分。所以,在我們做原型設計的時候,需要我們靈活的運用可視化視圖。

可視化視圖看起來好像很高大上的東西,實際上就是由多種統計圖表來組成,例如柱狀圖、條形圖、散點圖、折線圖、餅圖、雷達圖、漏鬥金子塔圖,熱力圖,水泡圖……下面我就和大家介紹一下不同圖表的作用,以及在什麼情況下用什麼樣的圖標更為恰當。

1)柱狀圖類圖表

從下圖可以看出,柱狀圖的圖標有很多,包括單柱狀圖、組合柱狀圖、堆疊柱狀圖、百分比柱狀圖、瀑布圖、階梯圖、直方圖等等。

單柱狀圖:

單是一種以長方形的長度為變量的統計圖表,通過長方形的高度來衡量變量的值。例如某一商品不同月份的銷售額。

組合柱狀圖:

組合柱狀圖是在單柱狀圖的基礎上,用不同顏色的長方形顯示兩個或兩個以上變量的值,能更加直觀的將變量進行對比。例如不同商品的銷售額。

堆疊柱狀圖:

和組合柱狀圖很像,只不過是將多個變量的值堆在一起,能夠清楚的看到總量的對比。

百分比堆疊柱狀圖:

百分比堆疊柱狀圖,在堆疊柱狀圖的基礎上轉化為百分比,不能看出總量的對比,但是更清楚的看到多個商品的佔比,原理和餅圖類似,可以說是多個餅圖組成了寶粉筆堆疊柱狀圖。

瀑布圖:

瀑布圖能夠顯示正負值,適用於收入支出的案例。

階梯圖:

階梯圖普遍用於在不同的數值範圍內的變量取不同的值,例如階梯水費、電費,個人所得稅率圖。

直方圖:

直方圖比較適合研究分布狀況,例如正太分布等。

2)條形圖

條形圖分成單條形圖、多條形圖、堆疊條形圖、百分比堆疊條形圖、甘特圖。

其實條形圖就是橫過來的柱狀圖,大部分應用一直,但是條形圖更適合做排行圖和甘特圖。

排名圖:

排名圖由高到低降序排列,更直觀的各個變量的佔比和排名。

甘特圖:

適合用於項目排期等計劃圖標。

3)散點圖

散點圖就是把各個值在對應的坐標上顯示出來,常用於做模型分析,例如回歸分析等。

4)折線圖

折線圖主要是體現變量的變化規律的,例如基金的歷史收益等等。

5)餅圖

餅圖、環形圖主要是對比各個變量的佔比。

6)雷達圖

雷達圖更適合做一個綜合的分析,例如說學生是否全面發展,或者說是遊戲的評分等等。

7)漏鬥圖和金字塔圖

漏鬥圖:

漏鬥圖主要是用來衡量策略是否有用的,例如投放廣告有10000人觀看,從觀看廣告、瀏覽網站、加入購物車、生成訂單、支付訂單、到最終完成交易的各個階段的人數。

金字塔圖:

金字塔圖更實用與類似人體所需營養的分布,這樣的案例,或者說是一個企業的架構圖,高層、中層、底層的人數和佔比。

8)水波圖

水波圖多數用於反饋實時數據,例如實時的銷售量。

本文由 @秀 原創發布於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

相關焦點

  • Axure 3D教程:製作3D地圖原型
    編輯導語:很多時候我們會用到3D的效果,今天筆者教大家用axure做一個3D的效果,本文以三維世界地圖為案例,簡單的闡述axure製作3D原型的技巧,我們一起來看一下。一、Axure製作出來的3D效果原型預覽地址:https://7w42g3.axshare.com/#g=1上圖就是axure製作出來的3D地圖的效果,大家可以體驗一下,主要是用圖片+動態面板的效果來實現的,下面開始教學。
  • 美院資深設計師借用圖撲案例,淺談數據時代的可視化設計
    色彩搭配不僅是整體風格色調把控,還有與場景融合的面板顏色搭配,如何讓整個畫面和諧,比較考驗設計師的藝術基礎功底,色彩設計在可視化應用中最重要的是要做到整體思考,不能只顧局部的顏色搭配。在搭配的時候也要注意不要使用純色互補色進行搭配,在遇到補色,對比色時可以嘗試降低其中一種顏色的純度。畫面要注意不灰,不粉,不色頻,與行業相符不會讓人覺得奇怪。
  • Axure RP 9 教程:模擬微信系列(2)
    今天給大家送上模擬微信系列第二篇,我們使用簡單的函數組合來達到我們想要的顯示效果,只要懂得其原理,我們就可以使用axure提供的函數做更多的效果。另外,我們展示使用更多的交互來滿足微信消息列表消息的變化效果。
  • 熱力圖在可視化設計中的應用
    編輯導語:我們在高峰期使用地圖時會發現有些道路變成了紅色的,這就代表那條道路現在是擁堵的情況,這也是熱力圖的作用;本文作者分析了熱力圖在可視化設計中的應用,我們一起來學習一下。假設今天在西湖玩了整整一天,在16點打算回家了,但是大家也都知道杭州的交通是非常擁堵的,不清楚這個點回去的路況是怎麼樣的?
  • Earth NullSchool全球天氣可視化模擬網 在地理教學中的應用初探
    摘要:Earth NullSchool全球天氣可視化模擬網是一款表現和再現力極強、參與性高、調控簡單靈活的在線網頁版地理教學軟體
  • iPad應用10大設計準則:簡化功能 有首頁視圖
    而產品在視覺外觀、交互方式、情感聯接等方面的表現更會直接影響到用戶對於應用的體驗滿意度。在本文中,我們將共同了解一些你在設計工作中需要認真考慮與貫徹的指導準則。我們不會對創建iPad應用的完整設計流程進行講解,也不會將時間花費在幾乎任何一篇移動應用設計文章都會提到的那些細節當中的小方法小竅門上。本文的主要目的是幫助你在實際的iPad應用項目中制定更加合理與正確的產品設計決策。
  • MVC設計模式(模型-視圖-控制器)設計模式介紹
    3 MVC的實現   3.1 分析應用問題,對系統進行分離   分析應用問題,分離出系統的內核功能、對功能的控制輸入、系統的輸出行為三大部分。設計模型部件使其封裝內核數據和計算功能,提供訪問顯示數據的操作,提供控制內部行為的操作以及其他必要的操作接口。以上形成模型類的數據構成和計算關係。這部分的構成與具體的應用問題緊密相關。
  • Android版谷歌地球更新 增加街景視圖支持
    新版谷歌地球加入了對谷歌街景的支持,儘管桌面版谷歌地球早就具備該功能,但在手機版卻一直沒有谷歌街景,不過谷歌此次僅在Android版谷歌地球中中加入街景功能,iOS版本中該功能依然缺席。
  • 數據可視化在移動端的應用
    隨著大數據行業的快速發展,數據可視化設計在移動端的應用越來越多。今天我們就數據可視化在移動端的使用場景、特點、注意事項以及各個使用場景進行一次簡單的分享。應用場景數據可視化在移動端的主要體現是「數據圖表」,我們最常用的數據設計組件就是:柱狀圖、折線圖、環形圖等,它們簡單易懂,容易被用戶接受。
  • 用Python演繹5種常見可視化視圖
    注意:想要更深層次的理解,需要自己動手跑代碼,體驗數據可視化過程如果你想要用Python進行數據分析,就需要在項目初期開始進行探索性的數據分析,這樣方便你對數據有一定的了解。其中最直觀的就是採用數據可視化技術,這樣,數據不僅一目了然,而且更容易被解讀。
  • 通過可視化來了解你的Spark應用程式
    在過去,Spark UI一直是用戶應用程式調試的幫手。而在最新版本的Spark 1.4中,我們很高興地宣布,一個新的因素被注入到Spark UI——數據可視化。在此版本中,可視化帶來的提升主要包括三個部分: Spark events時間軸視圖  Execution DAG Spark Streaming統計數字可視化
  • PCB版設計的AR應用已經開始測試 目前僅限部分平臺使用
    移動eCAD查看器軟體工具允許用戶將手機和平板電腦放在PCB上面,並立即突出顯示電路板上的任何信號,組件和層。該軟體目前處於測試階段,其創建者Trevor Reeves和Mihir Shah希望該技術將成為未來EE與PCB的交互鏡頭。 DebuggAR目前是一款僅限iPhone的智慧型手機應用工具,可讓工程師和學生對其設計進行組件級和網絡級檢查。
  • 規範流程下的原型設計——你的原型真的有價值嗎?
    標準設計流程下的原型原型作為設計流程中的一個關鍵部分,被廣泛應用在設計的各個階段,注意是各個階段,而不僅僅是原型設計階段。重溫一下,設計思維共有五個階段:共情(理解用戶)、定義(定義問題)、構思(構思方案)、原型、測試。如果你沒有閱讀我翻譯過的往期文章,可能不太清楚。設計思維是IDEO(全球性的設計服務企業)根據多年的設計經驗與實踐輸出的一份設計流程研究成果,其最初目的是用於解決社會級難題如教育、貧困等。後來被廣泛的應用於各個設計領域,尤其是偏體系化的網際網路產品設計中。
  • Axure RP 9 案例:那些熟悉的交互,原來都可以用函數實現
    在原型設計中,利用函數都可以實現哪些交互呢?吸附導航、數學計算、音量/進度滑竿、文字計數等等這些交互效果都可以實現。那麼具體怎麼在Axure中運用函數呢?看看文中的案例分析吧,相信你一定有所收穫!截取第一張圖片時,最好能截取長屏,如果你的手機不支持長屏截取,你需要多截取幾屏圖片了。如果頁面長度不夠,將無法在瀏覽器中滾動窗口。下面我們開始原型的製作:1. 拖動圖像元件至設計區域,雙擊圖像元件從本地導入第一張圖片。
  • 東莞平面設計全科班學費_平面設計培訓價格_東莞市石碣振華電腦...
    課程介紹:平面設計課程包含PS、Ai、CDR、品牌電商設計、品牌logo設計、品牌物料、Dw、網頁設計、電商設計、Icon、Axure交互等學習內容:PS1.介紹軟體(應用領域、優勢)/軟體界面與設置/視圖縮放與移動/選擇工具/屏幕顯示模式/包裝效果圖/選區自由變換/保存格式/
  • 原型設計6種原型圖的優缺點
    原型圖的格式,屬於「道」,「法」,「器」,這3個層次中的「器」。如果想在用戶體驗上,走的更遠;那麼就需要在「道」,「法」,這2個層次上,積累更多的項目經驗,還有不同崗位的思維方式和溝通思路。網際網路產品設計過程中,原型圖的常用格式,我見過6種以上。它們的優點和缺點,介紹如下:1.
  • 嵌入式BI應用案例:金麒麟數據可視化分析平臺(集成ERP、MES)
    嵌入式BI應用案例:金麒麟數據可視化分析平臺(集成ERP、MES) 嵌入式BI應用案例:金麒麟數據可視化分析平臺(集成ERP、MES) 2020-12-02 15:16:45  來源:網際網路
  • 構建可視化思維 一個原創作者三年XMind經驗總結
    而思維導圖就是一個非常好的結構化/可視化的工具,我依稀記得有句順口溜「字不如表,表不如圖」。比如之前我整理的遠程辦公類軟體合集,如果只用文字進行描述大概是這樣:「今天我給大家介紹遠程辦公工具,分別是雲工作平臺飛書、釘釘以及微信企業版。
  • 基於WebGL的三維數據可視化大屏開發流 ThingJS
    三維數據大屏可視化系統包含多源數據連接、生成二維/三維視圖、構建可視化大屏、大屏功能應用等一體化服務,基於多年可視化項目經驗,ThingJS平臺得出從數據源上傳到可視化大屏應用的完整流程,供參考。(2) 可視化視圖構建功能之圖形展現可視化大屏提供豐富的二維及三維圖形展現, 平面圖表是常見的視圖元素。界面側邊欄提供應有盡有的可視化視圖列表,包含了太陽圖、柱狀圖、餅圖、玫瑰圖、折線圖、雷達圖、靜態和動態地圖、環狀圖、文本標籤雲等常用圖形。用戶點擊可視化視圖選項後,系統會進行視圖類型與數據結構匹配。
  • 聯想發布新款AR眼鏡,通過與PC、手機相連實現AR、3D可視化、遠程協作
    該眼鏡希望通過虛擬顯示和3D可視化,在各個層面助力員工工作。 硬體配置方面來看,ThinkReality A3智能眼鏡搭載的是高通驍龍XR1晶片,解析度為1080p,無板載電池。 這款眼鏡可通過與電腦、智慧型手機連接實現AR、3D可視化、遠程協作等操作。