奇酷UI圖表設(shè)計技巧打造最優(yōu)設(shè)計師
來源:
奇酷教育 發(fā)表于:
奇酷教育-UI培訓(xùn)_UI培訓(xùn)班_UI設(shè)計_UI設(shè)計培訓(xùn)班
1. 是否真的需要圖表設(shè)計進(jìn)行數(shù)據(jù)展示?
在部分設(shè)計情境里,相較于復(fù)雜多變的圖表呈現(xiàn),直接數(shù)字展示,更能有效的減少界面干擾,吸引和留住用戶。所以,具體的案例設(shè)計過程中,設(shè)計師需要注意考慮實際設(shè)計情境,是否真正需要圖表進(jìn)行數(shù)據(jù)展示,以有效避免華而不實的情況出現(xiàn)。
2. 是否選擇正確的圖表類型展示相關(guān)軟件數(shù)據(jù)?
設(shè)計時,也需要多次查看和確認(rèn):選擇的圖表類型是否能夠完美呈現(xiàn)各類軟件數(shù)據(jù)。為確保選擇的圖表類型準(zhǔn)確無誤,可以嘗試通過移動設(shè)備打開此圖表設(shè)計進(jìn)行測試??纯?, 作為用戶,你是否能夠輕松理解圖表上展示的所有信息。
比如,在具體的設(shè)計中,設(shè)計師可通過突出展示每個圖表設(shè)計,并以滑動的方式進(jìn)行切換的設(shè)計技巧,更加直觀炫酷的展示各種軟件數(shù)據(jù), 輕松解決單個圖表設(shè)計導(dǎo)致的過度復(fù)雜的問題。而且,為確保每次切換或滑動的過程中,用戶能夠自然的聚焦當(dāng)前圖表,其它圖表設(shè)計也最好做透明虛化處理。
3. 圖表配色是否符合設(shè)計情境?是否能夠激發(fā)用戶的情感認(rèn)同?
圖表設(shè)計中,不同數(shù)據(jù)的色彩搭配,也需要設(shè)計師謹(jǐn)慎選擇。例如,紅色并不適合搭配增長勢頭良好的數(shù)據(jù)。而為更加直觀展示數(shù)據(jù)增長進(jìn)度和梯度變化,搭配漸變色會更加適合。
4. 表格設(shè)計的條件和限制有哪些?
每個圖表設(shè)計的目的都是通過更加直觀清晰的視覺形式向用戶展示各類數(shù)據(jù)。為確保這一目的順利實現(xiàn),設(shè)計交付時,設(shè)計師需要向開發(fā)人員提供對應(yīng)圖表的信息、實現(xiàn)條件以及設(shè)計限制等細(xì)節(jié),例如各類數(shù)據(jù)對應(yīng)的名稱、時間區(qū)間、圖表數(shù)據(jù)計算公式等,從而保證圖表設(shè)計得到完美實現(xiàn)和還原。
5. 是否需要添加圖表圖例,幫助用戶理解?
圖表,用于展示簡單數(shù)據(jù)時,清晰直觀,相當(dāng)實用。 但是,當(dāng)圖表需要展示更多復(fù)雜數(shù)據(jù),例如需要對比數(shù)據(jù),甚至涉及一些額外計算時,為避免給用戶造成困惑,設(shè)計師就需要考慮是否添加一定圖例解釋和引導(dǎo)用戶。當(dāng)然,圖例設(shè)計中,也需要注意相應(yīng)說明文字的長度。因為移動端的可展示數(shù)據(jù)的界面相對較小,過長的文本設(shè)計反倒會影響到整個圖表的布局。
6. 如何展示圖表中的大數(shù)據(jù)?
誠然,設(shè)計過程中,設(shè)計師大都愿意選用一些簡潔干練的方式展示圖表中各種數(shù)據(jù)(例如使用一些簡短干練的標(biāo)題、文字描述、地址以及符合設(shè)備屏幕尺寸和布局的占位符等等)。然而,實際設(shè)計過程中,現(xiàn)實往往不會盡如人意。比如,當(dāng)設(shè)計移動端界面圖表時,由于手機(jī)屏幕展示空間相對有限,涉及的部分大數(shù)據(jù)就需要適當(dāng)簡化瘦身之后,再進(jìn)行展示。當(dāng)然,為實現(xiàn)數(shù)據(jù)的簡化瘦身,也可結(jié)合圖表圖例進(jìn)行設(shè)計。
7. 假設(shè)需要同時展示最大和最小值,如何設(shè)計圖表,才能做到美觀而不突兀?
假設(shè),我們需要設(shè)計一個分別展示99%、 0.75%、 0.25%三種軟件數(shù)據(jù)的餅圖,如何設(shè)計才能使整個圖表美觀而協(xié)調(diào)? 這是需要設(shè)計師提前就考慮到的問題。
8. 假如圖表中部分?jǐn)?shù)據(jù)因為某些原因缺失時,圖表應(yīng)該如何呈現(xiàn)?
比如,設(shè)計師可以直接隱藏圖表相關(guān)部分,或者直接將其顯示為灰色,并標(biāo)記為“0”或直接添加問號進(jìn)行展示。
9. 如若用戶并未提供相關(guān)圖表數(shù)據(jù)時,又該如何設(shè)計?
此時,一般而言,設(shè)計師可事先為圖表添加一個空白狀態(tài)的設(shè)計。而它可以是一個沒有任何數(shù)據(jù)的空白圖表設(shè)計,也可以是帶有特殊占位符的圖表設(shè)計??傊?,設(shè)計師可以根據(jù)需要進(jìn)行選擇。
10. 圖表X軸和Y軸應(yīng)該如何設(shè)計和搭建?
眾所周知,這類圖表元素的設(shè)計,應(yīng)該由用戶的具體數(shù)據(jù)而定。為確保最后的設(shè)計真正準(zhǔn)確實用,設(shè)計師需要向開發(fā)人員講明如何計算X軸和Y軸相關(guān)數(shù)據(jù)以及圖表軸上必須有多少刻度等重要信息。
11. 是否選用漸變色視覺化圖表中數(shù)據(jù)的梯度變化?
比如,當(dāng)圖表中數(shù)字大于 2000時, 圖標(biāo)選用紅色漸變色進(jìn)行展示。當(dāng)數(shù)據(jù)數(shù)字小于 2000時, 則可使用橙色進(jìn)行展示。
12. 假若用戶無權(quán)限查看相關(guān)圖表數(shù)據(jù)時, 又該如何設(shè)計?
此時,設(shè)計師則需要為該圖表添加一個禁止查看的狀態(tài)設(shè)計。
13. 圖表在加載狀態(tài)下,又該如何呈現(xiàn)?
對于部分圖表而言,數(shù)據(jù)展示,需要一定時間從后臺檢索或計算相關(guān)數(shù)據(jù)。這時,為避免給用戶帶來不佳的用戶體驗,就需要設(shè)計師添加一個圖表加載狀態(tài)的設(shè)計,以明確告知用戶:正在為你加載相關(guān)數(shù)據(jù)。
14. 圖表是靜態(tài),動態(tài),還是響應(yīng)式的設(shè)計?
關(guān)于這類問題, 不同的設(shè)計項目,會有不同的情況, 需要設(shè)計師因情況而定。例如響應(yīng)式圖表設(shè)計,需要設(shè)計師向開發(fā)人員提供多套不同設(shè)備或系統(tǒng)的相關(guān)設(shè)計數(shù)據(jù),以方便開發(fā)人員進(jìn)一步設(shè)計和落實。
15. 當(dāng)用戶單擊、雙擊或長按圖表時,又應(yīng)該給用戶怎樣的反饋?
一般而言,單擊圖表區(qū)域,能夠切換全屏,查看圖表細(xì)節(jié)。雙擊,則可擴(kuò)展圖表。長按,則可聚焦并突出展示圖表特定區(qū)域。
16. 是否可查看圖表歷史數(shù)據(jù)?
一般而言,簡單滑動圖表頁面或輕按相關(guān)按鈕,即可查看相應(yīng)圖表的歷史數(shù)據(jù)。值得注意的是:設(shè)計師需要給圖表數(shù)據(jù)添加一個時限,并非所有的歷史信息都可查看。
17. 是否需要突出展示對用戶重要的數(shù)據(jù)?
比如,以當(dāng)今流行的減肥類卡路里跟蹤軟件為例,如果用戶達(dá)到了每日熱量(即卡路里)限制的90%,設(shè)計師則可在每日熱量跟蹤圖表中,將相關(guān)展示項目和超出部分的數(shù)據(jù)增長,使用橙色進(jìn)行突出展示。然后,在超過100%之后,選用紅色進(jìn)行標(biāo)記,以顯示用戶已經(jīng)遠(yuǎn)遠(yuǎn)偏離規(guī)定飲食(即每日卡路里的限制)。
18. 是否需要為圖表添加動效?
圖表數(shù)據(jù)也可動態(tài)展示。比如,柱形圖,一次展示一條。餅形圖,一次展示一部分,以增加界面趣味性和靈動性。
19. 圖表數(shù)據(jù)展示是否遵循特定的順序?
如若設(shè)計師希望按升序展示用戶數(shù)據(jù)時,則需要在交付的過程中,向開發(fā)工程師明確提出這一設(shè)計需求。
總之,希望以上介紹的圖表設(shè)計技巧和套路,能夠幫助廣大設(shè)計師和開發(fā)人員解決一定設(shè)計問題和痛點的同時,成功打造最佳的Web/App設(shè)計。
以上就是
奇酷為大家分享的“奇酷UI圖表設(shè)計技巧打造最優(yōu)設(shè)計師”謝謝大家觀看,如果對UI設(shè)計感興趣的話,想學(xué)
UI設(shè)計培訓(xùn)的,也可以在線咨詢,我們將竭誠為你解答。