亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

首頁

B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)

前端達(dá)人

歡迎小伙伴們收看《B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)》,本節(jié)內(nèi)容將帶領(lǐng)小伙伴們從零開始認(rèn)識(shí)圖表,了解圖表在數(shù)據(jù)可視化中的作用,圖表的構(gòu)成,不同圖形可以可視化哪些類型的數(shù)據(jù)等等。希望大家看完后能對(duì)圖表有個(gè)相對(duì)完整的認(rèn)知,在以后的工作中可以得心應(yīng)手。
一、什么是圖表?
大家對(duì)圖表一定不陌生,圖表(chart)就是一種通過圖形化的方式呈現(xiàn)和分析數(shù)據(jù)的工具,就是
將表格中的數(shù)據(jù)進(jìn)行二次加工,將復(fù)雜的業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)化為更加直觀的、有趨勢性、有時(shí)間線、空間性的圖形數(shù)據(jù)
,協(xié)助用戶根據(jù)數(shù)據(jù)變動(dòng)而變更相關(guān)決策,最終以實(shí)現(xiàn)降本提效的目的。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
不同部門或者角色在公司中會(huì)需要各種類型的數(shù)據(jù)信息,以支持其業(yè)務(wù)運(yùn)營和領(lǐng)導(dǎo)層決策需求。這些數(shù)據(jù)信息的準(zhǔn)確性和及時(shí)性對(duì)于公司的發(fā)展和競爭優(yōu)勢至關(guān)重要。
產(chǎn)品部門關(guān)注的主要是用戶行為數(shù)據(jù)、收入數(shù)據(jù)、用戶量數(shù)據(jù);運(yùn)營部門關(guān)注用戶活躍度數(shù)據(jù)、營銷效果數(shù)據(jù)和用戶反饋數(shù)據(jù);技術(shù)部門關(guān)注系統(tǒng)運(yùn)行數(shù)據(jù)、技術(shù)指標(biāo)數(shù)據(jù);用戶增長部門關(guān)注用戶生命周期數(shù)據(jù)等。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
二、一個(gè)優(yōu)秀圖表設(shè)計(jì)的標(biāo)準(zhǔn)是什么?
要看一個(gè)圖表是否優(yōu)秀,主要看它是否符合GLAD原則。GLAD原則是一個(gè)在數(shù)據(jù)可視化設(shè)計(jì)中常用來確保圖表質(zhì)量和有效性的方法論,它主要包括以下四個(gè)要素:
GLAD原則
GLAD原則
 
 
G原則:優(yōu)質(zhì)數(shù)據(jù)和洞察
G原則是指Good Data and Insight。G原則在探索性數(shù)據(jù)分析過程中著重提升圖表的商業(yè)價(jià)值,G原則的關(guān)鍵是“有價(jià)值的商業(yè)信息”,這一點(diǎn)就要求在準(zhǔn)備數(shù)據(jù)的時(shí)候,應(yīng)該剔除那些商業(yè)分析價(jià)值不大的部分,而主要留下的是有高價(jià)值密度的信息。除了要求有高價(jià)值的信息之外,還需要有比較好的Insight,也就是能洞察數(shù)據(jù)中的高價(jià)值信息,并以較為通俗易懂的形式在圖表中表達(dá)出來。
優(yōu)化前
優(yōu)化前
 
例圖點(diǎn)評(píng):雖然圖表本身看上去好像并沒什么問題,圖形選擇的也對(duì)、顏色搭配也得體,讀者也能理解圖本身要表達(dá)的意思。但是,
沒有商業(yè)價(jià)值,即我能看出茅臺(tái)拿鐵賣的最好,然后呢?這是哪個(gè)階段的數(shù)據(jù)?不知道。有沒有持續(xù)的表現(xiàn)數(shù)據(jù)?也不知道。
優(yōu)化后
優(yōu)化后
 
例圖點(diǎn)評(píng):修改后,從數(shù)據(jù)中提煉出更有價(jià)值的商業(yè)數(shù)據(jù),在時(shí)間維度和空間維度都有體現(xiàn),簡潔明了的同時(shí),也具有商業(yè)參考價(jià)值。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
L原則:更少的視覺噪音
L原則是指Less Noise。簡單說就是視覺降噪。
B端產(chǎn)品是高度商業(yè)化的產(chǎn)品,有用有效遠(yuǎn)大于好看,
這要求B端設(shè)計(jì)師對(duì)藝術(shù)的追求要適可而止,商業(yè)數(shù)據(jù)分析不是追求藝術(shù)造詣,不是做一張海報(bào)去吸引人的眼球,而是提供商業(yè)價(jià)值并能快速讓人理解。過于酷炫、花哨、浮夸的修飾并不會(huì)給圖表帶來任何附加值,反而會(huì)增加讀者的閱讀負(fù)擔(dān)。
例圖1
例圖1
 
例圖點(diǎn)評(píng):修改前,有些國家由于人口稀少,導(dǎo)致相關(guān)數(shù)據(jù)也非常小,難以在圖表中展示,造成整個(gè)圖表花里胡哨且復(fù)雜。修改后,把過小數(shù)據(jù)的選項(xiàng)折疊為“其他”,默認(rèn)顯示主要幾個(gè)較大國家的數(shù)據(jù),當(dāng)點(diǎn)擊“其他”圖例的時(shí)候,再顯示詳細(xì)的數(shù)據(jù)信息,使數(shù)據(jù)展示更具有側(cè)重點(diǎn)。
例圖2
例圖2
 
例圖點(diǎn)評(píng):圖例2是dribbble上的圖表作品,左側(cè)是K線圖,右側(cè)是柱狀圖,它們的問題在于花里胡哨,卻缺少必要的刻度,形式大于內(nèi)容,過于追求好看的反面案例。
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
A原則:準(zhǔn)確的表達(dá)
A原則是指Accurate Expression。通俗講,就是要根據(jù)不同的數(shù)據(jù)類型和不同的商業(yè)目的,采用正確的、適合的圖表類型,如表現(xiàn)占比就要用餅圖、百分比柱形圖,表現(xiàn)趨勢就要用折線圖、面積圖等,且要保證圖例的清晰性、刻度的準(zhǔn)確性,避免模棱兩可的圖例和不準(zhǔn)確的刻度。
錯(cuò)誤例圖
錯(cuò)誤例圖
 
正確例圖
正確例圖
 
例圖點(diǎn)評(píng):圖例的本意是對(duì)比2023和2024年不同品牌手機(jī)的銷售額占比,是基于時(shí)間維度的對(duì)比圖,但錯(cuò)誤圖例卻用了兩個(gè)餅圖,無法直觀的表現(xiàn)特定品牌在不同年度的銷售額占比的對(duì)比情況。正確的圖例則直接用了柱狀對(duì)比圖,一目了然。
 
D原則:明確的標(biāo)記
D原則是指Dinstinct Mark。D原則的作用是幫助讀者加快理解信息的速度,它強(qiáng)調(diào)
突出重點(diǎn)
,需要把通過數(shù)據(jù)比較得到的差異部分、體現(xiàn)洞察信息的內(nèi)容利用明顯不同的顏色、形狀、文字標(biāo)注等手段進(jìn)行區(qū)別,讓讀者的視線聚焦到那里去。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
三、圖表的構(gòu)成要素
圖表是由:標(biāo)題、圖例、縱軸、橫軸、圖形、圖表范圍及其他輔助元素(如水位線、網(wǎng)格線、刻度值、提示信息等)構(gòu)成,每一個(gè)元素都有它存在的意義。不過在實(shí)際使用中不一定非得把元素全部展示出來,精簡化顯示想要展示的內(nèi)容即可。
圖表的構(gòu)成
圖表的構(gòu)成
 
 
3.1標(biāo)題
標(biāo)題即圖表的名字,是圖表必不可少的元素。標(biāo)題要求簡短明確通俗易懂,視覺上通常需要字體加粗。標(biāo)題下面也可以跟一行副標(biāo)題,用作對(duì)標(biāo)題的補(bǔ)充說明。
  •  
    信息類標(biāo)題:提供理解數(shù)據(jù)所需的所有信息,回答「何事」、「何地」、「何時(shí)」這三個(gè)問題
  •  
    描述類標(biāo)題:突出圖表中顯示的主要數(shù)據(jù)模式或趨勢,描繪出圖表所要講述的故事
標(biāo)題常用的位置有3種,左上、頂居中、底居中。
標(biāo)題常用位置
標(biāo)題常用位置
 
 
3.2圖例
3.2.1圖例的作用:
  •  
    區(qū)分不同類別數(shù)據(jù)的標(biāo)志
  •  
    開啟/隱藏類別顯示
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
如果圖表中只有一個(gè)數(shù)據(jù)系列,則可以不用顯示圖例。
常見圖例展現(xiàn)形式
常見圖例展現(xiàn)形式
 
3.2.2圖例的位置
圖例的位置并沒有嚴(yán)格限制與要求,常見位置是上、下、右。
圖例的位置
圖例的位置
 
3.2.3圖例的顏色
在選擇圖例顏色時(shí),不要用色相過于接近的顏色,否則會(huì)容易看混或看錯(cuò)。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
要規(guī)范圖例顏色使用,一般分為兩種情況:
  •  
    常用的圖例顏色(顏色本身代表著行業(yè)中的某種含義),此類顏色需要是固定色值,無論哪個(gè) chart 中,都是這個(gè)顏色;
  •  
    無特殊含義的圖例,可以規(guī)范出一個(gè)圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色,圖例整齊劃一。
值得一提的是,為了照顧色弱、色盲群體,有些產(chǎn)品會(huì)增加無障礙花紋來進(jìn)行輔助識(shí)別,提高辨識(shí)度。這種設(shè)計(jì)很有溫度,畢竟設(shè)計(jì)以人為本。
Echarts的無障礙花紋樣式
Echarts的無障礙花紋樣式
 
 
3.2.4圖例的數(shù)量
一般來說圖例不要過多,基本要遵循米勒定律,即7±2法則。
米勒定律
米勒定律
 
所以,5個(gè)以內(nèi)是最佳圖例數(shù)量。如果遇到比較復(fù)雜的圖表,則可以進(jìn)行嘗試進(jìn)行圖例合并,如上面講GLAD原則的時(shí)候的L原則案例,除了多個(gè)圖表可以共用一組圖例(前提是圖例代表的意思一致),還可以把過于零碎的比重要的數(shù)據(jù)圖例合并為一個(gè)“其他”。
如果圖表中只有一個(gè)圖例的話,則可以不顯示。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
3.2.5圖例名稱的長度
根據(jù)不同使用場景,為了更好的展示效果,要給圖例名稱設(shè)置一個(gè)最大值,超過最大值后省略展示,鼠標(biāo)hover時(shí)再顯示完整名稱。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
3.3坐標(biāo)軸
3.3.1什么是坐標(biāo)軸
坐標(biāo)軸是定義域軸(叫什么)和值域軸(有多少)的統(tǒng)稱。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實(shí)意義,因此我們可以根據(jù)坐標(biāo)軸對(duì)應(yīng)的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù),將坐標(biāo)軸分成連續(xù)軸、時(shí)間軸、分類軸三大類。軸的類型不同在設(shè)計(jì)處理上也有差異。
坐標(biāo)軸分類
坐標(biāo)軸分類
 
 
3.3.2常見坐標(biāo)軸組合方式
常見二維圖表坐標(biāo)軸分為X軸(橫軸)和Y軸(縱軸),多用于表示趨勢、排名、比較的數(shù)據(jù)結(jié)構(gòu)。常見搭配是1 個(gè) X 軸+1 個(gè) Y 軸。不過特殊情況下也會(huì)用到 2X+Y 或 X+2Y。
軸的常見組合方式
軸的常見組合方式
 
在三維圖表里,會(huì)多一個(gè)Z軸。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
3.3.3坐標(biāo)軸容易被忽略的設(shè)計(jì)細(xì)節(jié)
  •  
    軸線一般只考慮是否顯示,例如柱狀圖、折線圖等,在有背景網(wǎng)格線的情況下,會(huì)隱藏 y 軸線,條形圖則是隱藏 x 軸線,以達(dá)到信息降噪,突出視覺重點(diǎn)的目的。
 
  •  
    軸刻度通常不顯示,只有在肉眼無法定位到某個(gè)標(biāo)簽對(duì)應(yīng)的數(shù)據(jù)點(diǎn)時(shí),會(huì)顯示刻度線,輔助用戶定位,比如折線圖,或抽樣顯示的柱狀圖。
 
  •  
    網(wǎng)格線用于定位數(shù)據(jù)點(diǎn)的值域范圍,跟隨值域軸的位置單向顯示,柱狀圖采用水平網(wǎng)格,條形圖采用垂直網(wǎng)格。樣式為虛實(shí)線的最多,斑馬線由于感知過強(qiáng),一般不用。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
  •  
    軸標(biāo)題/單位主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽已經(jīng)能充分表達(dá)數(shù)據(jù)含義,無需單獨(dú)顯示標(biāo)題/單位,「如無必要,勿增實(shí)體」。
沒有必要就不要多此一舉
沒有必要就不要多此一舉
 
 
  •  
    連續(xù)軸/時(shí)間軸進(jìn)行適當(dāng)抽樣。連續(xù)軸/時(shí)間軸,是由一組前后包含同等差值的等差數(shù)列組成,缺少幾個(gè)數(shù)值也能明顯看出中間的對(duì)應(yīng)關(guān)系。當(dāng)多個(gè)標(biāo)簽在容器內(nèi)全顯示發(fā)生重疊,我們可以利用抽樣顯示的手段來避免這種情況。常見的抽樣方式是等分抽樣:當(dāng)多個(gè)標(biāo)簽在 x 軸無法完全顯示,優(yōu)先保留首尾標(biāo)簽,其余標(biāo)簽按同等步長間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù),能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù),就需要「-1」轉(zhuǎn)成合數(shù)。
   舉個(gè)例子:9個(gè)標(biāo)簽,間隔數(shù)是 8,能被 2 或4整除,即分成 2 等分和4等分。8個(gè)標(biāo)簽,間隔數(shù)是        7,無法等分,需要在間隔數(shù)基礎(chǔ)上再「-1」,轉(zhuǎn)成合數(shù) 6 后再等分,此時(shí)最后一個(gè)標(biāo)簽顯示在倒      數(shù)第二個(gè)數(shù)據(jù)點(diǎn)上。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
  •  
    分類軸是由幾組離散數(shù)據(jù)組成,獨(dú)立存在無緊密邏輯關(guān)聯(lián)。若采用抽樣規(guī)則,隱藏一些標(biāo)簽,用戶對(duì)圖表認(rèn)知就會(huì)有困難,違背了數(shù)據(jù)可視化清晰、有效的設(shè)計(jì)原則。分類軸最佳處理方式是標(biāo)簽旋轉(zhuǎn) 45 度,若 45 度仍顯示不下,繼續(xù)旋轉(zhuǎn) 90 度。如果 90 度還是放不下就要考慮結(jié)合圖表交互或反轉(zhuǎn)圖表。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
  •  
    分類軸標(biāo)簽字段有長有短,長文本標(biāo)簽直接旋轉(zhuǎn)不僅影響美觀,而且也不利于用戶閱讀。如果數(shù)據(jù)量比較少只有 2~4 個(gè),長文本標(biāo)簽更適合水平展示,顯示不下省略即可;如果數(shù)據(jù)量比較多,就限定字符數(shù)后旋轉(zhuǎn)。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
3.4圖形數(shù)據(jù)
圖形數(shù)據(jù)是圖表中最為明顯的地方,即圖表的核心元素,如折線圖中的折線,柱狀圖中的柱,餅狀圖中的圓。
圖形數(shù)據(jù)的使用規(guī)則:
  •  
    邊界要清晰,不可虛化;
  •  
    多個(gè)數(shù)據(jù)同時(shí)顯示的時(shí)候,要保證每個(gè)數(shù)據(jù)都能清晰的看到,可以采用透明度來保證所有數(shù)據(jù)的顯示。
關(guān)于圖形的選擇,第四章會(huì)著重介紹。
 
3.5提示信息
提示信息用來標(biāo)識(shí)出圖表中重要點(diǎn)的數(shù)據(jù)信息,相當(dāng)于一個(gè)popover浮窗,鼠標(biāo)指針在圖形中hover的地方通常就是該點(diǎn)的數(shù)據(jù)信息。需要注意的是:重要信息盡量簡化,只需要展示重要字段。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
3.6水位線
根據(jù)不同產(chǎn)品的使用場景,有的時(shí)候會(huì)用到閾值,當(dāng)達(dá)到某個(gè)閾值后,就會(huì)觸發(fā)某種聯(lián)動(dòng)效果。這個(gè)時(shí)候就需要有個(gè)水位線了,它起到警示的作用。
水位線的表現(xiàn)形式有兩種,實(shí)線和虛線,顏色的選取則取決于產(chǎn)品的警告級(jí)別。
水位線可以是一個(gè),也可以是多個(gè),視情況而定。
 
3.7圖表范圍
圖表范圍就是時(shí)間宏變量,用來切換數(shù)據(jù)的時(shí)間區(qū)間,如今天、本周(最近7天)、本月(最近30天)、本年等。
 
四、常見圖形分類及使用場景
圖形種類多種多樣,個(gè)個(gè)身懷絕技,而設(shè)計(jì)師則是作為挑選者。想要做好圖表設(shè)計(jì),就需要對(duì)不同圖形有較為深入的了解,并對(duì)數(shù)據(jù)進(jìn)行正確理解后,與之匹配正確的圖形,用可視化的方式將數(shù)據(jù)表現(xiàn)出來。
大多數(shù)人可能熟悉折線圖、餅狀圖、柱狀圖,但是對(duì)其他的圖形可能就不太了解了。本章節(jié)將帶大家了解更多的圖形和對(duì)應(yīng)的特性,以便更好的運(yùn)用和設(shè)計(jì)。
常見的圖形可以分為七大類:
趨勢類、比較類、排名類、占比類、流程類、分布類、關(guān)系類。
 
4.1趨勢類圖形
趨勢類圖形指的是對(duì)一段時(shí)間內(nèi)數(shù)據(jù)的展示,如單個(gè)或多個(gè)分類數(shù)據(jù)之間的趨勢變化和比較。常見的趨勢圖形有折線圖、柱狀圖、堆積柱狀圖、面積圖、蠟燭圖、瀑布圖等。
4.1.1折線圖
折線圖(Line Chart)常用于顯示數(shù)據(jù)在連續(xù)時(shí)間上的趨勢變化。通過折線連接各數(shù)據(jù)點(diǎn),突出數(shù)據(jù)的上升或下降趨勢,適合用于時(shí)間序列數(shù)據(jù)的展示。
折線圖構(gòu)成
折線圖構(gòu)成
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.1.2柱狀圖
柱狀圖(Basic Column Chart)用于展示多個(gè)分類的數(shù)據(jù)變化和同類別各變量之間的比較。
柱狀圖構(gòu)成
柱狀圖構(gòu)成
 
如例圖,既能展示店鋪每天銷售額所對(duì)應(yīng)的數(shù)據(jù),也能反映出每天份銷售額的對(duì)比情況,并能通過圖形能夠快速了解銷售額最多和最少的日期。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
柱狀圖還有個(gè)進(jìn)階用法,就是折柱混合圖。顧名思義,就是折線+柱狀圖的組合。折柱混合圖通常使用在多組數(shù)據(jù)進(jìn)行對(duì)比的情景下,如商場物品銷售數(shù)據(jù)增長或減少,商品價(jià)格走勢比較等,它可以非常直觀的展示數(shù)據(jù)與數(shù)據(jù)的比擬,這樣就能一眼查看到不同時(shí)間段的數(shù)據(jù)值,通過折線和柱狀的形式展現(xiàn)出來。
如例圖,通過柱狀圖能看出每個(gè)月的銷售數(shù)據(jù),而折線圖能體現(xiàn)出利潤率。當(dāng)鼠標(biāo)移入對(duì)應(yīng)位置就可以看到詳細(xì)數(shù)據(jù)。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
4.1.3堆積柱狀圖
堆積柱狀圖(Stacked Bar Chart)是柱狀圖的變種,可以展示兩個(gè)或多個(gè)數(shù)據(jù)的變化,以及數(shù)據(jù)之間的綜合比較情況。
堆積柱狀圖構(gòu)成
堆積柱狀圖構(gòu)成
 
如例圖所示,兩個(gè)店鋪每月總銷售額用堆積圖展示,在坐標(biāo)軸上的每個(gè)品類都有兩個(gè)數(shù)據(jù),可以直觀的展示每個(gè)品類的數(shù)據(jù)總量。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.1.4面積圖
面積圖(Area Chart)是折線圖的變種。與折線圖不同的是,其變量數(shù)據(jù)和坐標(biāo)軸之間有顏色田中,這樣可以更加突出數(shù)據(jù)的變化趨勢,更加直觀的體現(xiàn)量的變化。
面積圖構(gòu)成
面積圖構(gòu)成
 
需要注意的是,填充的顏色要有30%左右的透明度,這樣在展示多組數(shù)據(jù)的時(shí)候不會(huì)互相遮蓋彼此信息。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.1.5蠟燭圖
蠟燭圖也叫K線圖(K Chart),常用于股市或期貨市場(近期炒股的同學(xué)可能看到K線圖心里會(huì)一咯噔)。K線是圍繞開盤價(jià)、最高價(jià)、最低價(jià)、收盤價(jià)等反映市場趨勢和價(jià)格信息的。
蠟燭圖構(gòu)成
蠟燭圖構(gòu)成
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.1.6瀑布圖
瀑布圖也叫階梯圖,顧名思義,瀑布圖的形狀像掛在高山上的瀑布流水。瀑布圖也可以呈現(xiàn)隨時(shí)間變化的數(shù)據(jù),但不同于堆積柱狀圖的是,瀑布圖能夠重點(diǎn)突出數(shù)據(jù)變化的結(jié)果,以強(qiáng)調(diào)多個(gè)特定數(shù)據(jù)之間的變化關(guān)系。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
4.2比較類圖形
比較類圖形主要用于兩個(gè)或兩個(gè)以上的類別數(shù)據(jù)進(jìn)行比較。常見的類別比較圖形有柱狀圖、分組柱狀圖、氣泡圖、多條折線圖、子彈圖等。
4.2.1柱狀圖
這里的柱狀圖與前面講的柱狀圖的區(qū)別在于X軸是表現(xiàn)類別的,前面例圖的X軸是表現(xiàn)時(shí)間的。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.2.2分組柱狀圖
分組柱狀圖(Grouped Bar Chart)是柱狀圖的延伸,它可以在同一數(shù)軸上展示各個(gè)分類下不同分組的數(shù)據(jù)情況。如例圖為三家企業(yè)在產(chǎn)研部、設(shè)計(jì)部、商務(wù)部的人數(shù)對(duì)比情況,由此可以清晰的看出企業(yè)丙設(shè)計(jì)部人數(shù)最少,商務(wù)部人數(shù)最多的結(jié)論。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.2.3氣泡圖
氣泡圖(Bubble Chart)是是散點(diǎn)圖的變體,由卡迪爾坐標(biāo)系(直角坐標(biāo)系)和大小不一的圓組成,通常每一個(gè)氣泡都代表著一組三個(gè)維度的數(shù)據(jù)。其中兩個(gè)決定了氣泡在笛卡爾坐標(biāo)系中的位置(即x,y軸上的值),另外一個(gè)則通過氣泡的大小來表示。
氣泡圖構(gòu)成
氣泡圖構(gòu)成
 
如例圖,x軸表示季度,y軸表示銷售額,氣泡大小代表產(chǎn)品所占全年銷售額百分比。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.2.4多條折線圖
多條折線圖除了可以表示數(shù)據(jù)隨時(shí)間的變化趨勢,還可以展示多組數(shù)據(jù)的對(duì)比情況。如例圖所示,圖為某app經(jīng)營情況的分析,在時(shí)間維度上對(duì)比下載量、注冊量、成交量三組數(shù)據(jù)及變化趨勢。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.2.5子彈圖
子彈圖(Bullet Graph)顧名思義,就是像子彈發(fā)射軌道的圖表。它的數(shù)據(jù)展示類似儀表盤,優(yōu)勢在于可以表達(dá)豐富的數(shù)據(jù)信息,且占用的空間相對(duì)較小。子彈圖的數(shù)據(jù)值是需要提前設(shè)計(jì)好的。
子彈圖構(gòu)成
子彈圖構(gòu)成
 
如例圖所示,差、良、優(yōu)和目標(biāo)值、實(shí)際值都是作為動(dòng)態(tài)數(shù)據(jù)呈現(xiàn)的。相較于餅圖,子彈圖可以更高效的傳遞信息。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
4.3排名類圖形
排名圖形可以為分類數(shù)據(jù)進(jìn)行排排坐,它可以直觀的展示最大值和最小值。它的特點(diǎn)是“有序”,數(shù)值往往是從高到底依次排列,類似榜單。
4.3.1有序條形圖
有序條形圖主要用于展示各個(gè)分類的數(shù)據(jù)排名,它是最常用的排名圖形,因?yàn)槭蔷€性結(jié)構(gòu),對(duì)于微小數(shù)據(jù)間的對(duì)比會(huì)有很好的易讀性。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.3.2有序柱狀圖
有序柱狀圖和有序條形圖一樣,都可以表現(xiàn)數(shù)據(jù)的排名情況。區(qū)別在于一個(gè)是橫向?qū)Ρ葓D,一個(gè)是縱向?qū)Ρ葓D。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.4占比類圖形
占比圖形是大家最常見的圖形了,主要用于表現(xiàn)分類數(shù)據(jù)占整體的
百分比情況
。常見的圖形有餅圖、環(huán)形圖、堆積面積圖、矩形樹圖、旭日?qǐng)D等。
4.4.1餅圖
餅圖(Pie Chart)是展示占比數(shù)據(jù)最最直觀的圖形了,它是通過餅塊的大小來直觀的表示分類的占比。但是餅圖也有一定局限性,即當(dāng)占比數(shù)值比較接近或者占比分類比較多時(shí),在視覺上就不太容易分辨各個(gè)類別的占比情況。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.4.2環(huán)形圖
環(huán)形圖(Donut Chart)的作用和餅圖一樣,但是環(huán)形圖的特點(diǎn)是中間區(qū)域是空的,所以視覺表現(xiàn)上比餅圖要弱一些,中間空心區(qū)域還可以用來放標(biāo)題、圖標(biāo)、數(shù)據(jù)等。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.4.3堆積面積圖
堆積面積圖(Stacked Area Chart)就是疊加數(shù)據(jù),不同顏色之間的數(shù)據(jù)并沒有疊加關(guān)系,它的整體色塊面積是數(shù)據(jù)總量,不同的分類數(shù)據(jù)可展示不同的占比情況。如例圖,不僅可以展示全球能源消耗總量,切換百分比模式還能展示不同國家消耗能源的占比情況。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.4.4矩形樹圖
矩形樹圖(Treemap)由馬里蘭大學(xué)教授Ben Shneiderman于上個(gè)世紀(jì)90年代提出,起初是為了找到一種有效了解磁盤空間使用情況的方法。 矩形樹圖適合展現(xiàn)具有層級(jí)關(guān)系的數(shù)據(jù),能夠直觀體現(xiàn)同級(jí)之間的比較。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
矩形樹圖的好處在于,相比起傳統(tǒng)的樹形結(jié)構(gòu)圖,矩形樹圖能更有效得利用空間,并且擁有展示占比的功能。矩形樹圖的缺點(diǎn)在于,當(dāng)分類占比太小的時(shí)候文本會(huì)變得很難排布。相比起分叉樹圖,矩形樹圖的樹形數(shù)據(jù)結(jié)構(gòu)表達(dá)的不夠直觀、明確。
4.4.5旭日?qǐng)D
旭日?qǐng)D(Sunburst Chart)是一種現(xiàn)代餅圖,它超越傳統(tǒng)的餅圖和環(huán)圖,能表達(dá)清晰的層級(jí)和歸屬關(guān)系,以父子層次結(jié)構(gòu)來顯示數(shù)據(jù)構(gòu)成情況。旭日?qǐng)D中,離遠(yuǎn)點(diǎn)越近表示級(jí)別越高,相鄰兩層中,是內(nèi)層包含外層的關(guān)系。
如例圖,對(duì)醫(yī)院進(jìn)行看病、掛號(hào)、取藥的流程,用旭日?qǐng)D呈現(xiàn)。比如取藥是等號(hào)、排隊(duì)、拿藥的父級(jí),其中等號(hào)占取藥的比重最大。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.5流程類圖形
流程類圖形用來顯示流程流轉(zhuǎn)和流程流量。一般流程都會(huì)呈現(xiàn)出多個(gè)環(huán)節(jié),每個(gè)環(huán)節(jié)之間會(huì)有相應(yīng)的流量關(guān)系,這類圖形可以很好的表示這些關(guān)系。常見的流程類圖形有漏斗圖和?;鶊D。
4.5.1漏斗圖
漏斗圖(Funnel Chart)適用于業(yè)務(wù)流程
比較規(guī)范
、
周期長
環(huán)節(jié)多
流程單向分析,通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較能夠直觀地發(fā)現(xiàn)和說明問題所在的環(huán)節(jié),進(jìn)而做出決策。漏斗圖用梯形面積表示某個(gè)環(huán)節(jié)業(yè)務(wù)量與上一個(gè)環(huán)節(jié)之間的差異。漏斗圖
從上到下
,有邏輯上的順序關(guān)系,表現(xiàn)了隨著業(yè)務(wù)流程的推進(jìn)業(yè)務(wù)目標(biāo)完成的情況。
漏斗圖總是開始于一個(gè)100%的數(shù)量,結(jié)束于一個(gè)較小的數(shù)量。在開始和結(jié)束之間由N個(gè)流程環(huán)節(jié)組成。每個(gè)環(huán)節(jié)用一個(gè)梯形來表示,梯形的上底寬度表示當(dāng)前環(huán)節(jié)的輸入情況,梯形的下底寬度表示當(dāng)前環(huán)節(jié)的輸出情況,上底與下底之間的差值形象的表現(xiàn)了在當(dāng)前環(huán)節(jié)業(yè)務(wù)量的減小量,當(dāng)前梯形邊的斜率表現(xiàn)了當(dāng)前環(huán)節(jié)的減小率。 通過給不同的環(huán)節(jié)標(biāo)以不同的顏色,可以幫助用戶更好的區(qū)分各個(gè)環(huán)節(jié)之間的差異。漏斗圖的所有環(huán)節(jié)的流量都應(yīng)該使用同一個(gè)度量。
漏斗圖構(gòu)成
漏斗圖構(gòu)成
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.5.2?;鶊D
?;鶊D (Sankey Diagram),是一種特定類型的流圖,用于描述一組值到另一組值的流向。因?yàn)槭状问褂盟娜耸且幻蠸ankey的愛爾蘭土木工程師,所以就叫桑基圖。
?;鶊D通常應(yīng)用于能源、材料成分、金融等數(shù)據(jù)的可視化分析。
?;鶊D的構(gòu)成
桑基圖的構(gòu)成
 
如例圖所示,可以清晰的看到,從搜索框直接搜索進(jìn)入酒店詳情頁的流量是最大的。充分說明了搜索是剛需。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
4.6分布類圖形
分布圖形主要用于展示每個(gè)數(shù)值在數(shù)據(jù)集中出現(xiàn)的頻次和數(shù)量,常見類型有散點(diǎn)圖、氣泡圖、熱力圖、直方圖、箱型圖、等高線圖等
4.6.1散點(diǎn)圖
散點(diǎn)圖Scatter Chart,也叫 X-Y 圖,它將所有的數(shù)據(jù)以點(diǎn)的形式展現(xiàn)在笛卡爾坐標(biāo)系上,以顯示變量之間的相互影響程度,點(diǎn)的位置由變量的數(shù)值決定。
例圖展示的是AB兩國男性的身高和體重?cái)?shù)據(jù),通過散點(diǎn)圖中的數(shù)據(jù)點(diǎn)分布情況可看出,B國男性的身高遠(yuǎn)大于A國。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.6.2氣泡圖
前面4.2.3里講過單維度數(shù)據(jù)的氣泡圖,這里是多維度的氣泡圖案例。如例圖所示,圖中展示了5個(gè)維度的數(shù)據(jù),氣泡的代表地區(qū)類別,氣泡的大小代表人口總數(shù),氣泡顏色代表國家類別,X軸代表人均國內(nèi)生產(chǎn)總值,Y軸代表人均壽命。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
需要注意的是,氣泡圖的數(shù)據(jù)大小容量有限,氣泡太多會(huì)使圖表難以閱讀。但是可以通過增加一些交互行為彌補(bǔ):隱藏一些信息,當(dāng)鼠標(biāo)點(diǎn)擊或者懸浮時(shí)顯示,或者添加一個(gè)選項(xiàng)用于重組或者過濾分組類別。另外,氣泡的大小是映射到面積而不是半徑或者直徑繪制的。因?yàn)槿绻腔诎霃交蛘咧睆降脑?,圓的大小不僅會(huì)呈指數(shù)級(jí)變化,而且還會(huì)導(dǎo)致視覺誤差。
 
4.6.3熱力圖
熱力圖就是使用冷色到暖色的不同顏色表示數(shù)據(jù)從大到小的權(quán)重,或用同色系顏色的深淺來表示數(shù)據(jù)的多少。熱力圖可以在坐標(biāo)軸上呈現(xiàn)數(shù)據(jù)的大小分布,也可以在地圖或圖片上使用。
如例圖,杭州實(shí)時(shí)旅游熱點(diǎn)區(qū)域的熱力圖,顏色越偏紅的區(qū)域人流量越大,顏色越偏藍(lán)人流量越小。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.6.4直方圖
直方圖(Histogram)形狀上看上去好像就是柱狀圖,但是含義卻完全不同。直方圖能夠顯示各組頻數(shù)或數(shù)量分布的情況,易于顯示各組之間頻數(shù)或數(shù)量的差別。通過直方圖還可以觀察和估計(jì)哪些數(shù)據(jù)比較集中,異?;蛘吖铝⒌臄?shù)據(jù)分布在何處。
直方圖構(gòu)成
直方圖構(gòu)成
 
如例圖所示,繪制了鉆石的全深比數(shù)據(jù)的統(tǒng)計(jì)直方圖,從圖中可以看出在 66 附近有兩個(gè)孤立值
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.6.5箱型圖
箱形圖(Box Chart)又稱盒須圖、盒式圖或箱線圖,是一種用作顯示一組數(shù)據(jù)分布情況的統(tǒng)計(jì)圖。
箱形圖多用于數(shù)值統(tǒng)計(jì),雖然相比于直方圖和密度曲線較原始簡單,但是它不需要占據(jù)過多的畫布空間,空間利用率高,非常適用于比較多組數(shù)據(jù)的分布情況。
 


作者:MoeDesigner
鏈接:https://www.zcool.com.cn/article/ZMTYxOTU3Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

UI/UX 設(shè)計(jì)選擇題 | 02 期

資深UI設(shè)計(jì)者

如何做到交互操作更便捷的同時(shí)兼?zhèn)涔δ艿难诱剐裕?/p>

設(shè)計(jì)方法論-高階UI設(shè)計(jì)師如何運(yùn)用5WH分析設(shè)計(jì)需求

資深UI設(shè)計(jì)者

用科學(xué)的方法武裝自己 讓自己的設(shè)計(jì)更有發(fā)言權(quán)

 

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)

前端達(dá)人

緣起
最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見你,緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設(shè)計(jì)文章的初衷。
 
慢慢發(fā)現(xiàn)其實(shí)分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對(duì)設(shè)計(jì)的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個(gè)還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無邊。哈哈哈
 
上面扯多了。我們開始今天的內(nèi)容。今天內(nèi)容分三部分、第一部分內(nèi)容總結(jié)是對(duì)我寫的這個(gè)系列文章每一篇文章內(nèi)容和核心的小總結(jié)。第二部分這個(gè)系列的文章頁算是告一段落了、下一階段我會(huì)做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。
 
1、
內(nèi)容總結(jié)
因?yàn)樵趯戇@個(gè)系列的文章時(shí)我加入了很多擴(kuò)展知識(shí)。希望告訴你更多。這里我會(huì)把主要的這個(gè)系列的知識(shí)總結(jié)一下讓你盡量一次看完。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
1.1、登陸頁面
 
最近就在做我們系統(tǒng)的登陸頁面優(yōu)化?;仡^我會(huì)寫一個(gè)項(xiàng)目總結(jié)給你們看。這里介紹一下B端登陸頁面該怎么去做。其實(shí)還挺簡單了。因?yàn)楝F(xiàn)在主流的布局就那幾個(gè)。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
登陸頁面:布局分為三種;居左、居右、居中
頁面元素:導(dǎo)航、登錄框、背景(裝飾元素)、互聯(lián)網(wǎng)信息。
導(dǎo)航
高度:68px或48px、文字大?。?4(大部分)16(也可以)
登錄框
大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸。可以根據(jù)自己和領(lǐng)導(dǎo)的喜好決定。對(duì)還有要承載的內(nèi)容多少。
登錄方式:掃碼、手機(jī)號(hào)、賬號(hào)、第三方
標(biāo)題切換字號(hào):我喜歡用26px(也要其他的16、/18、/20)
輸入框高度:48px
按鈕文字和高度:16px、和輸入框高度一直就行。
背景
可以是配的插畫(這種最簡單)、一般都是科技風(fēng)
底部
要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個(gè)就不多說了正常排版就行。
 
1.2、篩選
 
篩選相對(duì)是很簡單的部分把、因?yàn)槟阒苯佑靡?guī)范里的組件。雖然不會(huì)很優(yōu)秀、但是剛重要的是不會(huì)出什么錯(cuò)誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
篩選的意義:定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類
 
篩選類型:基礎(chǔ)篩選組件(就是我們常見的頁面頂部的篩選)、高級(jí)篩選(就是那些需要你定義想一想的篩選部分)
 
篩選布局:頂部和左側(cè)
 
篩選樣式:平鋪;折疊;Tab篩選;單側(cè)選擇;表頭;綜合
 
1.3、柵格
 
這里其實(shí)還簡單的、首先你要明白柵格在我們的設(shè)計(jì)里面很重要。你不用當(dāng)然也可以呀。但是你想要做的更好那就用起來你會(huì)有意外的收獲。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
怎么用:直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。
 
注意點(diǎn):不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對(duì)來說是我自己的弱項(xiàng)、在寫當(dāng)時(shí)的文章的時(shí)候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設(shè)計(jì)規(guī)范的。也清楚了自己應(yīng)該怎么去規(guī)定自己的設(shè)計(jì)規(guī)范。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
主色確定:常見的方法、1、用自己品牌logo的顏色;2、用行業(yè)色
 
配色確定:我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定。可以去看看。我在自己的工作中色彩的應(yīng)用就參考了ant Design的色彩應(yīng)用方式定制的。
 
1.5、字體
 
字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設(shè)計(jì)一款自己的字體。還有后臺(tái)字體規(guī)范的制定
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
中國文字:這里中國文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當(dāng)做你喝酒吹水的談資。
 
字體規(guī)范:我們大部分的字體會(huì)采用黑體、可讀性強(qiáng)、親和、現(xiàn)代、清晰。
 
字號(hào):最新的字體12px、正文、14px、通過+2, +4,+8,+12,+16 的步數(shù)增長規(guī)律
 
行高:通過邏輯得到這樣一個(gè)公式:「 行高 = 字號(hào) + n 」,8 作為變量正好同時(shí)滿足與 1.5 倍的「 14px & 16px 」常用字號(hào)行高保持一致,總體文字間隙穩(wěn)定呼吸,行高空間較一致得出計(jì)算公式:「line-height = font size+8」
 
字重(就是字粗):建議使用兩種常規(guī)和加粗(在前端里一般就是400和500)
 
顏色:我是主張帶有色彩傾向的顏色應(yīng)用的。根據(jù)字體樣式的設(shè)計(jì)原則,制定了簡易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結(jié)合,文字顯示色彩對(duì)比滿足至少1:4.5( AA級(jí)別)。且驗(yàn)證了其中的實(shí)用性,共分為亮暗兩種模式,4 個(gè)色階。
 
1.6、ICON(圖標(biāo))
 
你要統(tǒng)一風(fēng)格成套的去找參考和應(yīng)用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個(gè)是自己累點(diǎn)、但是可以保障實(shí)現(xiàn)效果。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
設(shè)計(jì)原則:準(zhǔn)確、簡單、節(jié)奏、愉悅。
 
設(shè)計(jì)實(shí)戰(zhàn):采用柵格
我是用的阿里巴巴矢量圖庫的設(shè)計(jì)規(guī)范、因?yàn)槲乙獋鞯竭@個(gè)平臺(tái)應(yīng)用
 
ICON分類:交互性圖標(biāo)、裝飾性圖標(biāo)、說明性圖標(biāo)
 
1.7、按鈕
 
按鈕我覺得這部分是相對(duì)簡單的、也是要做到風(fēng)格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺(tái)的風(fēng)格、不如圓角的大小其他的倒是沒什么了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
常規(guī)按鈕:次要按鈕、主要按鈕、文字按鈕、圖標(biāo)按鈕
 
按鈕狀態(tài):可用、禁用、加載、懸浮
 
尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。
 
樣式:各個(gè)規(guī)范對(duì)按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
 
 
布局:這里分享了兩個(gè)概念、古登堡法則、費(fèi)茨定律、告訴你我們?yōu)槭裁催@么排版。對(duì)產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺(tái)彈窗是一個(gè)很復(fù)雜的內(nèi)容、但是也是一個(gè)相對(duì)很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點(diǎn)開胃小菜。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
彈窗是一個(gè)我頭痛的問題因?yàn)椴惶靡?guī)范。但是我還是把這個(gè)彈窗系統(tǒng)、在我們的體系中形成了一個(gè)小的規(guī)范。感謝領(lǐng)導(dǎo)、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務(wù)里我們會(huì)采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單:我理解表單就是系統(tǒng)為和用戶進(jìn)行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺(tái)產(chǎn)品中對(duì)我們數(shù)據(jù)做的增、刪、改、查、驗(yàn)都可以通過表單完成。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
我們在后臺(tái)系統(tǒng)中、大部分的場景都會(huì)使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設(shè)計(jì)時(shí)要遵循的原則、簡潔明了、清晰高效、適應(yīng)業(yè)務(wù)、即時(shí)反饋。
 
表單的構(gòu)成結(jié)構(gòu)、基本都是由、標(biāo)簽、域、提示、操作按鈕這四個(gè)部分構(gòu)成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標(biāo)簽頁、分步驟。
 
1.10、表格
 
B端設(shè)計(jì)中,對(duì)數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質(zhì)疑了。因?yàn)榻Y(jié)構(gòu)簡單、精準(zhǔn)高效、數(shù)據(jù)形式豐富。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中,內(nèi)部包含表頭、表體、底欄等。外部包含標(biāo)題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類型:基礎(chǔ)表格、樹形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式:網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進(jìn)階的一些知識(shí)就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識(shí)了。想了解去看更詳細(xì)的我的文章11表格設(shè)計(jì)和12表格優(yōu)化項(xiàng)目實(shí)戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個(gè)小廠B端設(shè)計(jì)師、剛好沒有自己平臺(tái)的設(shè)計(jì)規(guī)范。那就去直接用的場的設(shè)計(jì)規(guī)范。去用沒問題的。大廠那么多的牛逼設(shè)計(jì)給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
在使用大廠的設(shè)計(jì)規(guī)范時(shí)然后慢慢的積累自己平臺(tái)的設(shè)計(jì)規(guī)范。逐漸的你就會(huì)形成一個(gè)屬于你們自己平臺(tái)業(yè)務(wù)的高質(zhì)量設(shè)計(jì)規(guī)范了。
 
2、計(jì)劃
 
這個(gè)基礎(chǔ)系列的文章就這樣寫結(jié)束掉吧、希望可以對(duì)你的B端設(shè)計(jì)有所幫助。之后我會(huì)寫二個(gè)系列的文章、去分享我理解的B端設(shè)計(jì)。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
第一個(gè)系列是B端基礎(chǔ)設(shè)計(jì)的加強(qiáng)版、B端高手。B端高手是會(huì)寫我的實(shí)戰(zhàn)里是怎么去做的。其實(shí)就是我的設(shè)計(jì)項(xiàng)目復(fù)盤。
 
第二個(gè)系列就隨便的去分享一些設(shè)計(jì)知識(shí)。比如哪些什么什么原理呀、什么什么法則呀、在設(shè)計(jì)里的應(yīng)用。而且會(huì)提出和討論一些設(shè)計(jì)問題。
 
3、寫在最后
 
分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長、總是要一步一步的來。很快我們會(huì)再次相見。我是KING(國王)
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
新的開始見.......
 
注解:標(biāo)題的40000余字也好、50000字也好都是說的我這個(gè)系列總計(jì)的字?jǐn)?shù)、因?yàn)橄胱屇銈兛吹健?/div>
 
 
 
 
 


作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

潮流風(fēng)格平面設(shè)計(jì)案例

前端達(dá)人

今天給大家分享一張潮流風(fēng)格平面設(shè)計(jì)案列的,我們先來看下效果:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。。? data-src=
 
 
潮流風(fēng)格的定義,一個(gè)是顏色用黑色綠綠兩種顏色形成強(qiáng)烈的單色對(duì)比形成潮流感。
 
另一個(gè)就是潮流圖形的使用比如:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
接下來我們就分享一下步驟,看看一步一步是怎么做出來的。
 
 
1.制作背景?先填充一個(gè)綠色,然后加入一個(gè)紙張紋理:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
得到以下的效果:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
繪制紋理,用一個(gè)圖形圈定選區(qū),然后用波點(diǎn)筆刷刷出紋理:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
得到以下效果:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
我們的背景就制作好勒。
 
 
 
2.中間層制作
用矩形工具繪制一個(gè)矩形在畫面中心,四周留出一圈間距:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。。? data-src=
 
 
使用一張素材圖疊加到矩形區(qū)域,使用正片疊底模式加去色使其變成背白:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
給黑色的矩形區(qū)域整體加上一層波點(diǎn)紋理,讓其更富有質(zhì)感:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
 
 
 
 
3.增加圖形和信息
使用好看的英文排版在左邊空白區(qū)域,兩個(gè)相同的英文一個(gè)是實(shí)心的白色,另一個(gè)采用描邊的樣式,這樣可以看起來更有變化:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣!??!
 
 
在英文字體之間用一個(gè)線條穿插起來:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
在右邊的人物疊圖之前用矩形工具畫一些線框:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
 
 
 
 
 
4.豐富排版
在畫面四周空白的區(qū)域增加一些細(xì)節(jié)排版,把畫面鋪滿:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
 
 
 
 
5.制作點(diǎn)綴物
標(biāo)簽:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
紙質(zhì)卡片:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
星星圖形制作:
 
直接使用多邊形工具,參數(shù)如下:
 
邊數(shù):4,圓角半徑:0,星形比列:1%,勾選平滑星形縮進(jìn):
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
然后把我們做好的幾個(gè)圖形排列到畫面當(dāng)中畫好的矩形框里:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣!??!
 
 
最后在右邊空白的大框里放上一個(gè)LOGO或者圖形,我們的最終畫面就完成了!看看最終效果:
我是真沒想到,大廠設(shè)計(jì)師把潮流風(fēng)格做成這樣?。?!
 
 
這種潮流排版的設(shè)計(jì),其實(shí)比較主要的就是顏色和圖形,顏色不宜過多,黑色是萬年不變的主要顏色,黑色配任意一種單色都會(huì)有很不錯(cuò)的效果。
 
 
其次就是咱們的點(diǎn)綴和圖形的使用了,一般就是英文,星星,鐳射卡片這些東西,多找找參考也很容易做。
 
 
當(dāng)然,要想做的很好的話,還有很多細(xì)節(jié)需要注意,比如字體大小,間距,畫面的比例等等細(xì)節(jié)多注意考量,希望對(duì)大家有幫助。
 
 


作者:菜心輕量文
鏈接:https://www.zcool.com.cn/article/ZMTYyMTYwMA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)(www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)

深度解析體驗(yàn)設(shè)計(jì)_從了解到運(yùn)用

ui設(shè)計(jì)分享達(dá)人

用戶體驗(yàn)并不是指一件產(chǎn)品本身是如何工作的,用戶體驗(yàn)是指“產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用”,也就是人們?nèi)绾?ldquo;接觸”和“使用”它。當(dāng)人們詢問你的某個(gè)產(chǎn)品或服務(wù)時(shí),他們問的是使用的體驗(yàn)。它用起來難不難?是不是很容易學(xué)會(huì)? 使用起來感覺如何?
“用戶體驗(yàn)”是全鏈路的,絕不僅僅止于外觀,不是說你把頁面設(shè)計(jì)得好看、icon畫得逼真就是一個(gè)好的體驗(yàn)。它不僅包含“框架層”和“表現(xiàn)層”,還包含著戰(zhàn)略層(我們想得到什么和用戶能得到什么) 、范圍層(我們做什么和不做什么) 、結(jié)構(gòu)層 (信息怎么歸納更合理)。

數(shù)據(jù)驅(qū)動(dòng)價(jià)值-你需要掌握的數(shù)據(jù)分析技巧

ui設(shè)計(jì)分享達(dá)人

在這個(gè)信息爆炸的時(shí)代,數(shù)據(jù)已經(jīng)成為了一種新的能源。數(shù)據(jù)分析能力的高低,直接影響到我們在職場中的競爭力。數(shù)據(jù)作為一個(gè)定量的維度,可以支持設(shè)計(jì)方案的推導(dǎo)和決策,以及對(duì)方案效果的驗(yàn)證。想要證明你的設(shè)計(jì),數(shù)據(jù)是最直觀的展現(xiàn),掌握一些數(shù)據(jù)分析方法,能有效量化你出色的設(shè)計(jì)。接下來讓我們對(duì)數(shù)據(jù)分析的整體框架、數(shù)據(jù)如何處理加工做一探究竟吧。

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的6個(gè)創(chuàng)新方法

ui設(shè)計(jì)分享達(dá)人

設(shè)計(jì)是為了解決問題,然而并不是所有問題都存在現(xiàn)有的解決方案。這時(shí),創(chuàng)新的出現(xiàn)能夠打破僵局,賦予設(shè)計(jì)新的生命力,用更加獨(dú)特的思維方式來解決問題。不過,創(chuàng)新又經(jīng)常虛無縹緲,盡管苦思冥想也難等到靈光乍現(xiàn)。
 

深入探究B端產(chǎn)品設(shè)計(jì)的核心

ui設(shè)計(jì)分享達(dá)人

一、B端用戶需求的深入理解和分析
在當(dāng)今高度信息化的商業(yè)環(huán)境中,B端產(chǎn)品已成為企業(yè)高效運(yùn)營和持續(xù)發(fā)展的關(guān)鍵支撐。
這些產(chǎn)品不僅提供工具和服務(wù),更是企業(yè)優(yōu)化流程、提升工作效率和競爭力的有力武器。然而,要打造一款成功的B端產(chǎn)品,關(guān)鍵在于對(duì)
B端用戶需求的深入理解與分析。
B端用戶,
如企業(yè)決策者、團(tuán)隊(duì)管理者和專業(yè)人員以及普通員工,他們在日常工作中處理復(fù)雜的業(yè)務(wù)流程,對(duì)數(shù)據(jù)分析、系統(tǒng)整合、安全性等方面有著極高的要求。
這些用戶的獨(dú)特需求不僅體現(xiàn)在產(chǎn)品的基本功能上,更涉及到產(chǎn)品的易用性、可擴(kuò)展性以及服務(wù)支持等多個(gè)層面。

漫談UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)

資深UI設(shè)計(jì)者

在UI設(shè)計(jì)中,圖標(biāo)的使用可以說是占了大壁江山,相信大家都知道圖標(biāo)的重要性,一個(gè)優(yōu)秀的圖標(biāo)比語言更吸引眼球更可視化,甚至跨越了語言的障礙,傳遞信息也非常的高效。

日歷

鏈接

個(gè)人資料

存檔