UI設計圖表設計技巧

現今,軟體應用大都選用圖表設計來視覺化各類軟體資料,成功簡化介面設計的同時,也大幅提升其使用者體驗。試想,如若市場上的各種監控、金融、保健以及旅遊類軟體應用,不再使用此類直觀吸睛的圖表設計,整個軟體應用的使用者體驗該多糟糕啊!

更別說,此類圖表設計, 為設計師們提供了更多隨心創造和自我表達的空間, 其聯動動效和互動設計,也為設計師們提供了更多介面提升和最佳化的可能性,設計師們也確實鍾愛於在其實際的設計中,新增各類圖表設計。

這也就解釋了為什麼如今圖表會廣泛出現在各類軟體(包括Web和App)設計之中。

然而,Web和App設計之中的圖表種類繁多,例如常見的餅形圖、條形圖、折線圖、時刻表、示意圖、流程圖、直方圖、散點圖、點圖等等,作為設計師和開發人員,究竟如何才能完美設計和還原此類圖表設計呢?不用擔心!繼續閱讀,大家一定會找到想要的答案。

正如喬布斯所說的那樣:

“設計不應該僅僅停留於外觀和個人感覺怎樣,而應該更看重其功能如何。”

所以,圖表的設計也不應該僅僅停留於視覺展示,其功能性和實用性也需要考慮在內。

儘管,各類圖表大多是度量衡、條件、規則以及相關運算結果的集合和呈現。但是,移動端和Web端軟體應用的圖表設計要求卻大不相同。導致這些不同的核心因素就是常見的螢幕尺寸、裝置資料處理能力以及相關技術性限制等等。

此外,由於圖表僅僅只是整個Web/App設計中極小的一部分,通常只需要產品團隊中的一名設計師、產品所有者或業務分析師即可輕鬆完成。然而,對於開發人員而言,由於資料和使用者情況的多變性,實現和還原此類圖表設計卻十分痛苦。

總之,無論如何,小編希望以下分享的相關圖表設計的套路和技巧,能夠幫助大家有效避免和解決相關設計問題和痛點:

1. 是否真的需要圖表設計進行資料展示?

在部分設計情境裡,相較於複雜多變的圖表呈現,直接數字展示,更能有效的減少介面干擾,吸引和留住使用者。所以,具體的案例設計過程中,設計師需要注意考慮實際設計情境,是否真正需要圖表進行資料展示,以有效避免華而不實的情況出現。

2。 是否選擇正確的圖表型別展示相關軟體資料?

設計時,也需要多次檢視和確認:選擇的圖表型別是否能夠完美呈現各類軟體資料。為確保選擇的圖表型別準確無誤,可以嘗試透過移動裝置開啟此圖表設計進行測試。看看, 作為使用者,你是否能夠輕鬆理解圖表上展示的所有資訊。

而且,需要注意的是:一定情境下,使用2-3個圖表分別展示相關資料,會比僅僅使用單個圖表更加簡潔直觀。

比如,在具體的設計中,設計師可透過突出展示每個圖表設計,並以滑動的方式進行切換的設計技巧,更加直觀炫酷的展示各種軟體資料, 輕鬆解決單個圖表設計導致的過度複雜的問題。而且,為確保每次切換或滑動的過程中,使用者能夠自然的聚焦當前圖表,其它圖表設計也最好做透明虛化處理。

3。 圖表配色是否符合設計情境?是否能夠激發使用者的情感認同?

圖表設計中,不同資料的色彩搭配,也需要設計師謹慎選擇。例如,紅色並不適合搭配增長勢頭良好的資料。而為更加直觀展示資料增長進度和梯度變化,搭配漸變色會更加適合。

4。 表格設計的條件和限制有哪些?

每個圖表設計的目的都是透過更加直觀清晰的視覺形式向用戶展示各類資料。為確保這一目的順利實現,設計交付時,設計師需要向開發人員提供對應圖表的資訊、實現條件以及設計限制等細節,例如各類資料對應的名稱、時間區間、圖表資料計算公式等,從而保證圖表設計得到完美實現和還原。

5。 是否需要新增圖表圖例,幫助使用者理解?

圖表,用於展示簡單資料時,清晰直觀,相當實用。但是,當圖表需要展示更多複雜資料,例如需要對比資料,甚至涉及一些額外計算時,為避免給使用者造成困惑,設計師就需要考慮是否新增一定圖例解釋和引導使用者。當然,圖例設計中,也需要注意相應說明文字的長度。因為移動端的可展示資料的介面相對較小,過長的文字設計反倒會影響到整個圖表的佈局。

6。 如何展示圖表中的大資料?

誠然,設計過程中,設計師大都願意選用一些簡潔幹練的方式展示圖表中各種資料(例如使用一些簡短幹練的標題、文字描述、地址以及符合裝置螢幕尺寸和佈局的佔位符等等)。然而,實際設計過程中,現實往往不會盡如人意。比如,當設計移動端介面圖表時,由於手機螢幕展示空間相對有限,涉及的部分大資料就需要適當簡化瘦身之後,再進行展示。當然,為實現資料的簡化瘦身,也可結合圖表圖例進行設計。

7。 假設需要同時展示最大和最小值,如何設計圖表,才能做到美觀而不突兀?

假設,我們需要設計一個分別展示99%、 0。75%、 0。25%三種軟體資料的餅圖,如何設計才能使整個圖表美觀而協調?這是需要設計師提前就考慮到的問題。

8。 假如圖表中部分資料因為某些原因缺失時,圖表應該如何呈現?

比如,設計師可以直接隱藏圖表相關部分,或者直接將其顯示為灰色,並標記為“0”或直接新增問號進行展示。

9。 如若使用者並未提供相關圖表資料時,又該如何設計?

此時,一般而言,設計師可事先為圖表新增一個空白狀態的設計。而它可以是一個沒有任何資料的空白圖表設計,也可以是帶有特殊佔位符的圖表設計。總之,設計師可以根據需要進行選擇。

10。 圖表X軸和Y軸應該如何設計和搭建?

眾所周知,這類圖表元素的設計,應該由使用者的具體資料而定。為確保最後的設計真正準確實用,設計師需要向開發人員講明如何計算X軸和Y軸相關資料以及圖表軸上必須有多少刻度等重要資訊。

11。 是否選用漸變色視覺化圖表中資料的梯度變化?

比如,當圖表中數字大於 2000時, 圖示選用紅色漸變色進行展示。當資料數字小於 2000時, 則可使用橙色進行展示。

12。 假若使用者無許可權檢視相關圖表資料時, 又該如何設計?

此時,設計師則需要為該圖表新增一個禁止檢視的狀態設計。

13。 圖表在載入狀態下,又該如何呈現?

對於部分圖表而言,資料展示,需要一定時間從後臺檢索或計算相關資料。這時,為避免給使用者帶來不佳的使用者體驗,就需要設計師新增一個圖表載入狀態的設計,以明確告知使用者:正在為你載入相關資料。

14。 圖表是靜態,動態,還是響應式的設計?

關於這類問題, 不同的設計專案,會有不同的情況, 需要設計師因情況而定。例如響應式圖表設計,需要設計師向開發人員提供多套不同裝置或系統的相關設計資料,以方便開發人員進一步設計和落實。

15。 當用戶單擊、雙擊或長按圖表時,又應該給使用者怎樣的反饋?

一般而言,單擊圖表區域,能夠切換全屏,檢視圖表細節。雙擊,則可擴充套件圖表。長按,則可聚焦並突出展示圖表特定區域。

16。 是否可檢視圖表歷史資料?

一般而言,簡單滑動圖表頁面或輕按相關按鈕,即可檢視相應圖表的歷史資料。值得注意的是:設計師需要給圖表資料新增一個時限,並非所有的歷史資訊都可檢視。

17。 是否需要突出展示對使用者重要的資料?

比如,以當今流行的減肥類卡路里跟蹤軟體為例,如果使用者達到了每日熱量(即卡路里)限制的90%,設計師則可在每日熱量跟蹤圖表中,將相關展示專案和超出部分的資料增長,使用橙色進行突出展示。然後,在超過100%之後,選用紅色進行標記,以顯示使用者已經遠遠偏離規定飲食(即每日卡路里的限制)。

18。 是否需要為圖表新增動效?

圖表資料也可動態展示。比如,柱形圖,一次展示一條。餅形圖,一次展示一部分,以增加介面趣味性和靈動性。

19。 圖表資料展示是否遵循特定的順序?

如若設計師希望按升序展示使用者資料時,則需要在交付的過程中,向開發工程師明確提出這一設計需求。

20。 使用者是否可以自定義圖表資料?

一般而言,使用者可自由選擇需要顯示或突出展示的圖表資訊。

希望以上分析的相關設計技巧和套路能夠幫助大家成功最佳化Web/App設計中圖表的外觀和使用者體驗。總之,在具體的圖表設計過程中,設計師和開發人員需要從不同的角度進行思考:

產品角度(考慮圖表設計是否符合產品特色、風格以及品牌形象)

使用者角度(考慮使用者是否能夠輕鬆獲取和理解圖表呈現的相關資料)

開發角度(考慮圖表設計是否能夠完美的實現和還原)

事實上,圖表設計中,最容易出現的問題就是:構圖美觀炫酷、資料直觀清晰,卻唯獨忽視了使用者的真正需求。如若設計師希望能夠避免這類問題的出現,設計圖表時,請牢記以上問題和套路。

當然,如若你認為你的圖表設計已然完美無缺時,也不要忘記嘗試使用不同的資料系統(比如大小資料集、資料缺失等等)進行測試,以確保在各種情況下,圖表對使用者而言,都是可讀、可識別、可理解的。

正如《小王子》作者Antoine de Saint-Exupery 所說的那樣:

“實現完美,並非無以復加,而是毫無冗雜。”

從設計中刪除不必要的元素或內容,不僅能夠簡化設計本身,還能夠有效提升其使用者體驗。

總之,希望以上介紹的圖表設計技巧和套路,能夠幫助廣大設計師和開發人員解決一定設計問題和痛點的同時,成功打造最佳的Web/App設計。

頂部