現(xiàn)今，軟件應(yīng)用大都選用圖表設(shè)計(jì)來(lái)可視化各類軟件數(shù)據(jù)，成功簡(jiǎn)化界面設(shè)計(jì)的同時(shí)，也大幅提升其用戶體驗(yàn)。試想，如若市場(chǎng)上的各種監(jiān)控、金融、保健以及旅游類軟件應(yīng)用，不再使用此類直觀吸睛的圖表設(shè)計(jì)，整個(gè)軟件應(yīng)用的用戶體驗(yàn)該多糟糕?。?/span>

更別說(shuō)，此類圖表設(shè)計(jì), 為設(shè)計(jì)師們提供了更多隨心創(chuàng)造和自我表達(dá)的空間， 其聯(lián)動(dòng)動(dòng)效和交互設(shè)計(jì)，也為設(shè)計(jì)師們提供了更多界面提升和優(yōu)化的可能性，設(shè)計(jì)師們也確實(shí)鐘愛(ài)于在其實(shí)際的設(shè)計(jì)中，添加各類圖表設(shè)計(jì)。

這也就解釋了為什么如今圖表會(huì)廣泛出現(xiàn)在各類軟件（包括Web和App）設(shè)計(jì)之中。

然而，Web和App設(shè)計(jì)之中的圖表種類繁多，例如常見(jiàn)的餅形圖、條形圖、折線圖、時(shí)刻表、示意圖、流程圖、直方圖、散點(diǎn)圖、點(diǎn)圖等等，作為設(shè)計(jì)師和開發(fā)人員，究竟如何才能完美設(shè)計(jì)和還原此類圖表設(shè)計(jì)呢？不用擔(dān)心！繼續(xù)閱讀，大家一定會(huì)找到想要的答案。

正如喬布斯所說(shuō)的那樣：“設(shè)計(jì)不應(yīng)該僅僅停留于外觀和個(gè)人感覺(jué)怎樣，而應(yīng)該更看重其功能如何。”

所以，圖表的設(shè)計(jì)也不應(yīng)該僅僅停留于視覺(jué)展示，其功能性和實(shí)用性也需要考慮在內(nèi)。

盡管，各類圖表大多是度量衡、條件、規(guī)則以及相關(guān)運(yùn)算結(jié)果的集合和呈現(xiàn)。但是，移動(dòng)端和Web端軟件應(yīng)用的圖表設(shè)計(jì)要求卻大不相同。導(dǎo)致這些不同的核心因素就是常見(jiàn)的屏幕尺寸、設(shè)備數(shù)據(jù)處理能力以及相關(guān)技術(shù)性限制等等。

此外，由于圖表僅僅只是整個(gè)Web/App設(shè)計(jì)中極小的一部分，通常只需要產(chǎn)品團(tuán)隊(duì)中的一名設(shè)計(jì)師、產(chǎn)品所有者或業(yè)務(wù)分析師即可輕松完成。然而，對(duì)于開發(fā)人員而言，由于數(shù)據(jù)和用戶情況的多變性，實(shí)現(xiàn)和還原此類圖表設(shè)計(jì)卻十分痛苦。

總之，無(wú)論如何，小編希望以下分享的相關(guān)圖表設(shè)計(jì)的套路和技巧，能夠幫助大家有效避免和解決相關(guān)設(shè)計(jì)問(wèn)題和痛點(diǎn)：

1. 是否真的需要圖表設(shè)計(jì)進(jìn)行數(shù)據(jù)展示？

在部分設(shè)計(jì)情境里，相較于復(fù)雜多變的圖表呈現(xiàn)，直接數(shù)字展示，更能有效的減少界面干擾，吸引和留住用戶。所以，具體的案例設(shè)計(jì)過(guò)程中，設(shè)計(jì)師需要注意考慮實(shí)際設(shè)計(jì)情境，是否真正需要圖表進(jìn)行數(shù)據(jù)展示，以有效避免華而不實(shí)的情況出現(xiàn)。

2. 是否選擇正確的圖表類型展示相關(guān)軟件數(shù)據(jù)？

設(shè)計(jì)時(shí)，也需要多次查看和確認(rèn)：選擇的圖表類型是否能夠完美呈現(xiàn)各類軟件數(shù)據(jù)。為確保選擇的圖表類型準(zhǔn)確無(wú)誤，可以嘗試通過(guò)移動(dòng)設(shè)備打開此圖表設(shè)計(jì)進(jìn)行測(cè)試。看看， 作為用戶，你是否能夠輕松理解圖表上展示的所有信息。

而且，需要注意的是：一定情境下，使用2-3個(gè)圖表分別展示相關(guān)數(shù)據(jù)，會(huì)比僅僅使用單個(gè)圖表更加簡(jiǎn)潔直觀。

比如，在具體的設(shè)計(jì)中，設(shè)計(jì)師可通過(guò)突出展示每個(gè)圖表設(shè)計(jì)，并以滑動(dòng)的方式進(jìn)行切換的設(shè)計(jì)技巧，更加直觀炫酷的展示各種軟件數(shù)據(jù)， 輕松解決單個(gè)圖表設(shè)計(jì)導(dǎo)致的過(guò)度復(fù)雜的問(wèn)題。而且，為確保每次切換或滑動(dòng)的過(guò)程中，用戶能夠自然的聚焦當(dāng)前圖表，其它圖表設(shè)計(jì)也最好做透明虛化處理。

3. 圖表配色是否符合設(shè)計(jì)情境？是否能夠激發(fā)用戶的情感認(rèn)同？

圖表設(shè)計(jì)中，不同數(shù)據(jù)的色彩搭配，也需要設(shè)計(jì)師謹(jǐn)慎選擇。例如，紅色并不適合搭配增長(zhǎng)勢(shì)頭良好的數(shù)據(jù)。而為更加直觀展示數(shù)據(jù)增長(zhǎng)進(jìn)度和梯度變化，搭配漸變色會(huì)更加適合。

4. 表格設(shè)計(jì)的條件和限制有哪些?

每個(gè)圖表設(shè)計(jì)的目的都是通過(guò)更加直觀清晰的視覺(jué)形式向用戶展示各類數(shù)據(jù)。為確保這一目的順利實(shí)現(xiàn)，設(shè)計(jì)交付時(shí)，設(shè)計(jì)師需要向開發(fā)人員提供對(duì)應(yīng)圖表的信息、實(shí)現(xiàn)條件以及設(shè)計(jì)限制等細(xì)節(jié)，例如各類數(shù)據(jù)對(duì)應(yīng)的名稱、時(shí)間區(qū)間、圖表數(shù)據(jù)計(jì)算公式等，從而保證圖表設(shè)計(jì)得到完美實(shí)現(xiàn)和還原。

5. 是否需要添加圖表圖例，幫助用戶理解？

圖表，用于展示簡(jiǎn)單數(shù)據(jù)時(shí)，清晰直觀，相當(dāng)實(shí)用。但是，當(dāng)圖表需要展示更多復(fù)雜數(shù)據(jù)，例如需要對(duì)比數(shù)據(jù)，甚至涉及一些額外計(jì)算時(shí)，為避免給用戶造成困惑，設(shè)計(jì)師就需要考慮是否添加一定圖例解釋和引導(dǎo)用戶。當(dāng)然，圖例設(shè)計(jì)中，也需要注意相應(yīng)說(shuō)明文字的長(zhǎng)度。因?yàn)橐苿?dòng)端的可展示數(shù)據(jù)的界面相對(duì)較小，過(guò)長(zhǎng)的文本設(shè)計(jì)反倒會(huì)影響到整個(gè)圖表的布局。

6. 如何展示圖表中的大數(shù)據(jù)？

誠(chéng)然，設(shè)計(jì)過(guò)程中，設(shè)計(jì)師大都愿意選用一些簡(jiǎn)潔干練的方式展示圖表中各種數(shù)據(jù)（例如使用一些簡(jiǎn)短干練的標(biāo)題、文字描述、地址以及符合設(shè)備屏幕尺寸和布局的占位符等等）。然而，實(shí)際設(shè)計(jì)過(guò)程中，現(xiàn)實(shí)往往不會(huì)盡如人意。比如，當(dāng)設(shè)計(jì)移動(dòng)端界面圖表時(shí)，由于手機(jī)屏幕展示空間相對(duì)有限，涉及的部分大數(shù)據(jù)就需要適當(dāng)簡(jiǎn)化瘦身之后，再進(jìn)行展示。當(dāng)然，為實(shí)現(xiàn)數(shù)據(jù)的簡(jiǎn)化瘦身，也可結(jié)合圖表圖例進(jìn)行設(shè)計(jì)。

7. 假設(shè)需要同時(shí)展示最大和最小值，如何設(shè)計(jì)圖表，才能做到美觀而不突兀？

假設(shè)，我們需要設(shè)計(jì)一個(gè)分別展示99%、 0.75%、 0.25%三種軟件數(shù)據(jù)的餅圖，如何設(shè)計(jì)才能使整個(gè)圖表美觀而協(xié)調(diào)？這是需要設(shè)計(jì)師提前就考慮到的問(wèn)題。

8. 假如圖表中部分?jǐn)?shù)據(jù)因?yàn)槟承┰蛉笔r(shí)，圖表應(yīng)該如何呈現(xiàn)？

比如，設(shè)計(jì)師可以直接隱藏圖表相關(guān)部分，或者直接將其顯示為灰色，并標(biāo)記為“0”或直接添加問(wèn)號(hào)進(jìn)行展示。

9. 如若用戶并未提供相關(guān)圖表數(shù)據(jù)時(shí)，又該如何設(shè)計(jì)？

此時(shí)，一般而言，設(shè)計(jì)師可事先為圖表添加一個(gè)空白狀態(tài)的設(shè)計(jì)。而它可以是一個(gè)沒(méi)有任何數(shù)據(jù)的空白圖表設(shè)計(jì)，也可以是帶有特殊占位符的圖表設(shè)計(jì)?？傊O(shè)計(jì)師可以根據(jù)需要進(jìn)行選擇。

10. 圖表X軸和Y軸應(yīng)該如何設(shè)計(jì)和搭建？

眾所周知，這類圖表元素的設(shè)計(jì)，應(yīng)該由用戶的具體數(shù)據(jù)而定。為確保最后的設(shè)計(jì)真正準(zhǔn)確實(shí)用，設(shè)計(jì)師需要向開發(fā)人員講明如何計(jì)算X軸和Y軸相關(guān)數(shù)據(jù)以及圖表軸上必須有多少刻度等重要信息。

11. 是否選用漸變色視覺(jué)化圖表中數(shù)據(jù)的梯度變化？

比如，當(dāng)圖表中數(shù)字大于 2000時(shí), 圖標(biāo)選用紅色漸變色進(jìn)行展示。當(dāng)數(shù)據(jù)數(shù)字小于 2000時(shí), 則可使用橙色進(jìn)行展示。

12. 假若用戶無(wú)權(quán)限查看相關(guān)圖表數(shù)據(jù)時(shí)， 又該如何設(shè)計(jì)？

此時(shí)，設(shè)計(jì)師則需要為該圖表添加一個(gè)禁止查看的狀態(tài)設(shè)計(jì)。

13. 圖表在加載狀態(tài)下，又該如何呈現(xiàn)？

對(duì)于部分圖表而言，數(shù)據(jù)展示，需要一定時(shí)間從后臺(tái)檢索或計(jì)算相關(guān)數(shù)據(jù)。這時(shí)，為避免給用戶帶來(lái)不佳的用戶體驗(yàn)，就需要設(shè)計(jì)師添加一個(gè)圖表加載狀態(tài)的設(shè)計(jì)，以明確告知用戶：正在為你加載相關(guān)數(shù)據(jù)。

14. 圖表是靜態(tài)，動(dòng)態(tài)，還是響應(yīng)式的設(shè)計(jì)？

關(guān)于這類問(wèn)題， 不同的設(shè)計(jì)項(xiàng)目，會(huì)有不同的情況， 需要設(shè)計(jì)師因情況而定。例如響應(yīng)式圖表設(shè)計(jì)，需要設(shè)計(jì)師向開發(fā)人員提供多套不同設(shè)備或系統(tǒng)的相關(guān)設(shè)計(jì)數(shù)據(jù)，以方便開發(fā)人員進(jìn)一步設(shè)計(jì)和落實(shí)。

15. 當(dāng)用戶單擊、雙擊或長(zhǎng)按圖表時(shí)，又應(yīng)該給用戶怎樣的反饋？

一般而言，單擊圖表區(qū)域，能夠切換全屏，查看圖表細(xì)節(jié)。雙擊，則可擴(kuò)展圖表。長(zhǎng)按，則可聚焦并突出展示圖表特定區(qū)域。

16. 是否可查看圖表歷史數(shù)據(jù)？

一般而言，簡(jiǎn)單滑動(dòng)圖表頁(yè)面或輕按相關(guān)按鈕，即可查看相應(yīng)圖表的歷史數(shù)據(jù)。值得注意的是：設(shè)計(jì)師需要給圖表數(shù)據(jù)添加一個(gè)時(shí)限，并非所有的歷史信息都可查看。

17. 是否需要突出展示對(duì)用戶重要的數(shù)據(jù)？

比如，以當(dāng)今流行的減肥類卡路里跟蹤軟件為例，如果用戶達(dá)到了每日熱量（即卡路里）限制的90%，設(shè)計(jì)師則可在每日熱量跟蹤圖表中，將相關(guān)展示項(xiàng)目和超出部分的數(shù)據(jù)增長(zhǎng)，使用橙色進(jìn)行突出展示。然后，在超過(guò)100%之后，選用紅色進(jìn)行標(biāo)記，以顯示用戶已經(jīng)遠(yuǎn)遠(yuǎn)偏離規(guī)定飲食(即每日卡路里的限制)。

18. 是否需要為圖表添加動(dòng)效？

圖表數(shù)據(jù)也可動(dòng)態(tài)展示。比如，柱形圖，一次展示一條。餅形圖，一次展示一部分，以增加界面趣味性和靈動(dòng)性。

19. 圖表數(shù)據(jù)展示是否遵循特定的順序？

如若設(shè)計(jì)師希望按升序展示用戶數(shù)據(jù)時(shí)，則需要在交付的過(guò)程中，向開發(fā)工程師明確提出這一設(shè)計(jì)需求。

20. 用戶是否可以自定義圖表數(shù)據(jù)？

一般而言，用戶可自由選擇需要顯示或突出展示的圖表信息。

希望以上分析的相關(guān)設(shè)計(jì)技巧和套路能夠幫助大家成功優(yōu)化Web/App設(shè)計(jì)中圖表的外觀和用戶體驗(yàn)。總之，在具體的圖表設(shè)計(jì)過(guò)程中，設(shè)計(jì)師和開發(fā)人員需要從不同的角度進(jìn)行思考：

• 產(chǎn)品角度（考慮圖表設(shè)計(jì)是否符合產(chǎn)品特色、風(fēng)格以及品牌形象）

• 用戶角度（考慮用戶是否能夠輕松獲取和理解圖表呈現(xiàn)的相關(guān)數(shù)據(jù)）

• 開發(fā)角度（考慮圖表設(shè)計(jì)是否能夠完美的實(shí)現(xiàn)和還原）

事實(shí)上，圖表設(shè)計(jì)中，最容易出現(xiàn)的問(wèn)題就是：構(gòu)圖美觀炫酷、數(shù)據(jù)直觀清晰，卻唯獨(dú)忽視了用戶的真正需求。如若設(shè)計(jì)師希望能夠避免這類問(wèn)題的出現(xiàn)，設(shè)計(jì)圖表時(shí)，請(qǐng)牢記以上問(wèn)題和套路。

當(dāng)然，如若你認(rèn)為你的圖表設(shè)計(jì)已然完美無(wú)缺時(shí)，也不要忘記嘗試使用不同的數(shù)據(jù)系統(tǒng)（比如大小數(shù)據(jù)集、數(shù)據(jù)缺失等等）進(jìn)行測(cè)試，以確保在各種情況下，圖表對(duì)用戶而言，都是可讀、可識(shí)別、可理解的。

正如《小王子》作者Antoine de Saint-Exupery 所說(shuō)的那樣：“實(shí)現(xiàn)完美，并非無(wú)以復(fù)加，而是毫無(wú)冗雜?！?/span>

從設(shè)計(jì)中刪除不必要的元素或內(nèi)容，不僅能夠簡(jiǎn)化設(shè)計(jì)本身，還能夠有效提升其用戶體驗(yàn)。

總之，希望以上介紹的圖表設(shè)計(jì)技巧和套路，能夠幫助廣大設(shè)計(jì)師和開發(fā)人員解決一定設(shè)計(jì)問(wèn)題和痛點(diǎn)的同時(shí)，成功打造最佳的Web/App設(shè)計(jì)。

更多圖表設(shè)計(jì)素材下載：數(shù)據(jù)可視化信息圖表設(shè)計(jì)模板 

原文作者：dashdevs. sci-tech crew

原文鏈接：https://uxplanet.org/design-checklist-for-the-perfect-charts-189fa35032df