怎樣設(shè)計出色的移動端可視化作品

時間：2023-09-17 07:24:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-17 07:24:01 來源：網(wǎng)站運(yùn)營

怎樣設(shè)計出色的移動端可視化作品：隨著移動辦公成為發(fā)展趨勢，移動端可視化報表成為了企業(yè)運(yùn)營管理的重要工具。特別是企業(yè)的中高層管理者以及外勤工作人員（如銷售人員），使用移動報表可以隨時隨地掌握最新的信息，決策效率大幅提升。

為什么移動端報表需要重新設(shè)計？

這一趨勢下，過去PC端的報表有了新的舞臺——在移動設(shè)備，特別是手機(jī)上進(jìn)行展現(xiàn)。然而移動端報表應(yīng)該怎么做呢？有些人認(rèn)為只是進(jìn)行簡單的適配，如同一個網(wǎng)頁既可以在PC端查看，也可以在手機(jī)瀏覽器查看，只不過畫面變小一點(diǎn)，僅此而已。然而是否對于特定設(shè)備進(jìn)行適配，用戶體驗(yàn)上會有明顯的差別。讓我們先來看一個知達(dá)學(xué)院官網(wǎng)的例子。

左邊的網(wǎng)頁未對手機(jī)屏幕進(jìn)行適配。當(dāng)用手機(jī)瀏覽器打開的時候看到的只是PC端網(wǎng)頁的等比例縮小版本。由于屏幕變小了，logo、菜單文字都顯得非常小，中間的圖片也小了很多，而兩側(cè)又多了一些空白區(qū)域，效果非常不好。而右邊的網(wǎng)頁則采用響應(yīng)式布局，根據(jù)設(shè)備的類型、分辨率、像素密度動態(tài)展現(xiàn)對應(yīng)的布局設(shè)計和素材。logo、文字、圖片大小恰到好處，菜單的部分也利用了移動控件集中到屏幕左上角。值得一提的是手機(jī)端考慮到一屏展現(xiàn)效果，默認(rèn)只展示四幅課程圖片，觀眾可以點(diǎn)擊“更多課程”（有些網(wǎng)站設(shè)計的是上下滑動）以查看其他課程信息。可以看出，是否適配，視覺效果和用戶體驗(yàn)差別很大，因此現(xiàn)在很多網(wǎng)站都針對手機(jī)端做了特別的設(shè)計。

網(wǎng)頁如此，可視化報表亦如此。

讓我們來看一個商場拍照積分識別監(jiān)控儀表板的例子。原本設(shè)計的是PC分辨率，結(jié)構(gòu)方正，PC端查看視覺效果不錯。

但當(dāng)我們用手機(jī)打開這幅儀表板的時候，如果不做適配的話，效果就比較糟糕了。可以看到在手機(jī)縱屏的情況下，圖片縮在手機(jī)屏幕的上方，顯的非常小，如果不進(jìn)行拖動和縮放，根本看不清楚。

即便是將手機(jī)橫過來，也不能一屏看完，最下方的內(nèi)容依然需要滾動才能看完整。另外對于手機(jī)屏幕來說，一下子呈現(xiàn)這么多圖表，信息量未免太大了。

于是我們針對手機(jī)屏幕進(jìn)行了適配，同時舍棄了一些不關(guān)鍵的圖標(biāo)，最后的效果是第一屏呈現(xiàn)最為關(guān)鍵的統(tǒng)計信息，滿足觀眾的基本需求。而上下滑動，可以查看更多的圖表?；谑謾C(jī)的大小，屏幕上一般只展現(xiàn)兩幅圖表，這樣觀眾可以在任意位置輕松的看清當(dāng)時屏幕上所展現(xiàn)的圖表。

由此可見，將可視化作品對于移動設(shè)備進(jìn)行適配非常關(guān)鍵?？墒请S之而來的問題也產(chǎn)生了：數(shù)據(jù)分析師對于制作PC端的儀表板駕輕就熟，而對于移動端設(shè)計缺乏經(jīng)驗(yàn)。這里我們來探討幾點(diǎn)移動端可視化作品設(shè)計原則，助各位小伙伴一臂之力。

一屏看懂

把最重要的信息放在最上方。人們對于手機(jī)端閱讀的習(xí)慣和PC端存在很大不同。PC端儀表板焦點(diǎn)在中心位置，因此最重要的信息往往放在畫面的中部。而手機(jī)儀表板，人們通常是從上往下閱讀，很多觀眾甚至只看第一屏的圖表而不往下滾動屏幕，因此越是下方的圖表損失的觀眾就越多。這個時候重要的信息就需要放置在最上方，讓觀眾一目了然的看到最重要的內(nèi)容。

一屏講清楚一個問題。近年來“一文讀懂”、“一圖看懂”系列的作品非常受歡迎，這是因?yàn)樾畔⒈〞r代人們面對海量的信息，每天需要做大量的篩選，自然對于每篇內(nèi)容的關(guān)注時間會變短。一個作品只有在最短時間內(nèi)吸引觀眾才能成功。對于移動端的數(shù)據(jù)可視化作品而言，第一屏展現(xiàn)內(nèi)容非常關(guān)鍵。且每一屏應(yīng)當(dāng)講清楚一個問題，不同的內(nèi)容可以以板塊區(qū)分，而不是向下無限拼接延展。事實(shí)上如果內(nèi)容不夠有趣，沒有多少觀眾會看到最后。

布局合理

區(qū)別于儀表板PC端設(shè)計——各種各樣的布局存在即合理，手機(jī)端受屏幕大小限制，推薦使用以下常用的幾種布局方式。

卡片布局。卡片布局是移動端儀表板最佳實(shí)踐之一，特別是展現(xiàn)多個指標(biāo)數(shù)據(jù)的時候，內(nèi)容清晰，結(jié)構(gòu)合理，同時可以結(jié)合一些藝術(shù)圖形和圖標(biāo)，深受觀眾喜愛。

橫向布局。將版面橫向切割擺放，每一個橫向區(qū)域平行展現(xiàn)圖表，也是常用的布局方式，但是與卡片布局相比，就顯得傳統(tǒng)了一些。

總分布局。總分布局往往由一幅主圖位于畫面上方概括分析內(nèi)容，然后下方展開更多的明細(xì)數(shù)據(jù)或者更多的分析維度。

簡化與優(yōu)化

圖片要“大”，文字要少。

• 圖片篇幅要大：一屏空間內(nèi)展現(xiàn)1-4幅圖片為宜，避免用戶通過縮放才能看清的情況出現(xiàn)。
• 使用簡單的圖：一些在PC端取得良好效果的復(fù)雜圖形展現(xiàn)太多數(shù)據(jù)點(diǎn)，并不適合手機(jī)。如散點(diǎn)圖、?；鶊D、玫瑰圖等包含較多數(shù)據(jù)點(diǎn)的圖表就適合PC端而不適合手機(jī)，反之條形圖、折線圖、餅圖等展現(xiàn)較少數(shù)據(jù)點(diǎn)的簡單圖形既適合PC端也適合手機(jī)端。
• 避免使用圖例：圖例是圖表的輔助說明信息，比圖表尺寸小的多，在移動設(shè)備上如果不放大基本看不清，應(yīng)當(dāng)避免使用。
• 使用較少的文字：為了便于觀眾看懂，PC端儀表板通常會有很多說明文字，移動端恰恰相反，觀眾基本以看圖為主，因此應(yīng)當(dāng)盡量減少文字信息，使用一目了然的圖表。

上方是一個移動端用戶分析作品案例。數(shù)據(jù)來自于微信小程序后臺，微信提供了到天的用戶統(tǒng)計信息，包含新老用戶、性別、年齡、省份、手機(jī)品牌等幾項標(biāo)簽。分析師設(shè)計了手機(jī)端的展現(xiàn)界面，該作品使用了四幅簡單的圖片，沒有使用圖例，取而代之的是直接將文字標(biāo)注在圖上，非常易于理解。

避免使用交互控件。篩選器、參數(shù)是PC端可視化儀表板常用的交互控件，可以為儀表板增加互動性和探索性，讓用戶按需查看自己需要的數(shù)據(jù)，非常受歡迎。然而移動端恰恰相反，由于狹小的屏幕空間限制了控件的操作性，用戶難以用手指從眾多選項中精準(zhǔn)的選到所需內(nèi)容。同時移動設(shè)備往往會放大互動控件，內(nèi)容過多的篩選器和參數(shù)將大篇幅的占用屏幕并遮擋其他圖表，體驗(yàn)非常不好。

整體來說移動端儀表板是不適合使用交互控件的。如果必須要用，也盡量減少選項，使用單選框、圖片文字點(diǎn)選、滑塊等便于手指操控的方式。

上方的案例使用了移動端的篩選控件。由于選項較多，點(diǎn)擊篩選器會看到整屏的選項，遮擋了其他圖表，更多的選項甚至需要向下滾動。事實(shí)上用戶很難從這樣的篩選器選到自己需要的內(nèi)容，既然如此，還是應(yīng)該換一種設(shè)計思路。

使用移動端原生功能。移動設(shè)備自帶了很多實(shí)用功能，如手勢操作、截屏功能、交互控件差異、橫豎屏切換等等。這些功能會讓用戶在移動端執(zhí)行不同于PC端的操作。因而我們在設(shè)計移動端儀表板的時候也要充分考慮與利用這些移動端特性，給用戶帶來更好的體驗(yàn)。

便于分享

PC端的作品用于移動端查看，經(jīng)常會掃描二維碼，然而這一招不適用于移動端分享。假設(shè)你拿著一部手機(jī)，有人通過微信或郵件發(fā)了你一個二維碼，或者在手機(jī)瀏覽器里看到了一個二維碼鏈接，這個時候如果你的應(yīng)用或設(shè)備不支持長按識別二維碼功能，你是不是很抓狂這要怎么打開？

為了避免這樣的問題發(fā)生，我們將對可視化作品如何在移動端分享進(jìn)行總結(jié)。要在移動端分享可視化作品，除了將作品導(dǎo)出成圖片、PDF做靜態(tài)查看以外，基本的做法是將可視化作品發(fā)布成網(wǎng)頁鏈接，網(wǎng)頁可以最好的保留可視化作品的互動功能。

原生App。不少可視化工具提供了原生的移動端應(yīng)用，如Tableau Mobile。用戶可以通過下載安裝相應(yīng)的App，配置連接信息，并搜索相應(yīng)的報表進(jìn)行查看。

瀏覽器查看。通過移動端瀏覽器打開報表網(wǎng)址，報表會根據(jù)設(shè)備類型獲取預(yù)置的移動端設(shè)計或者根據(jù)屏幕大小進(jìn)行自動適配。

微信分享。通過普通的網(wǎng)頁鏈接或二維碼進(jìn)行分享，用戶難以通過網(wǎng)址或者二維碼分辨這是什么內(nèi)容，所以這種分享方式并不理想。優(yōu)化的做法是采用插件、分享接口、開發(fā)有辨識度的分享鏈接或二維碼、與其他內(nèi)容集成或者截圖的方式進(jìn)行分享。

訂閱推送。訂閱的效果是用戶會收到推送信息，而推送的內(nèi)容包括圖文、鏈接，是一種非常方便用戶獲取信息的方式。

集成方式。集成方式指通過開發(fā)方式將PC報表嵌入進(jìn)企業(yè)其他應(yīng)用：如企業(yè)微信、門戶網(wǎng)站、公眾號、企業(yè)App等。集成過程中還可以做單點(diǎn)登錄和權(quán)限管理，是很多企業(yè)會采用的一種方式。

以上是將Tableau報表與企業(yè)微信做集成的例子。圖一展現(xiàn)的是在企業(yè)微信里新增Tableau報表功能。圖二是點(diǎn)擊進(jìn)去看見的一級報表目錄，總共5個文件夾。圖三是點(diǎn)其中的一個文件夾看到的二級目錄，其中有三個是文件夾和一張報表。圖四是打開報表的樣子。用戶只要進(jìn)入了企業(yè)微信，就無需再輸入密碼即可根據(jù)設(shè)定的權(quán)限看到自己的報表。值得一提的是，根據(jù)權(quán)限設(shè)計，每位用戶看到的文件夾、報表甚至報表的內(nèi)容都可以不同。

總結(jié)

這一期我們對于移動端可視化作品為什么需要重新設(shè)計，以及怎樣設(shè)計進(jìn)行了經(jīng)驗(yàn)分享。移動端可視化作品設(shè)計主要把握四大原則：

? 一屏看懂

? 布局合理

? 簡化與優(yōu)化

? 便于分享

根據(jù)這個思路，大家可以嘗試改造自己PC端的可視化作品，讓它們在移動端綻放新的活力。




生活中大大小小的事情，都離不開決策。我們相信數(shù)據(jù)驅(qū)動的決策行為不僅理性，而且更具有說服力。我們想借「數(shù)據(jù)星球」這個欄目觸達(dá)各類生活及工作中與數(shù)據(jù)相關(guān)的場景，與大家一起了解其背后蘊(yùn)含的數(shù)據(jù)思維。




文章內(nèi)容會同步更新在知達(dá)學(xué)院微信公眾號中，可添加關(guān)注我們。

公眾號微信號：JEDI_EDU

公眾號名稱：知達(dá)學(xué)院

咨詢詳情可添加客服。

知達(dá)客服微信號：jedi-edu