中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：在數(shù)據(jù)展示業(yè)務(wù)場(chǎng)景中，水平條形圖是常用的數(shù)據(jù)展示方法。然而水平條形圖若設(shè)計(jì)得不合理，則不能讓用戶清晰地獲取數(shù)據(jù)，降低了用戶的識(shí)別效率。本篇文章里，作者結(jié)合實(shí)際案例總結(jié)了水平條形圖的七個(gè)設(shè)計(jì)原則，一起來看一下。

一、背景

1. 問題

線上水平條形圖應(yīng)用如下圖所示，效果比較差：

運(yùn)營方面，只有兩個(gè)業(yè)務(wù)場(chǎng)景。主要原因有：

• 組件能力無法滿足運(yùn)營場(chǎng)景需求，配置不出競(jìng)品或預(yù)期效果，最終選擇其他折中展示；
• 運(yùn)營無法通過一個(gè)水平條形圖去聯(lián)想可能的應(yīng)用場(chǎng)景有哪些，需要被啟發(fā)。

設(shè)計(jì)方面，有很多設(shè)計(jì)缺陷：

• 軸標(biāo)簽過多情況，內(nèi)容無法展示；
• 軸標(biāo)簽右對(duì)齊，與人從左至右閱讀習(xí)慣相沖突，閱讀不連貫問題；
• 柱間距大于柱子寬度，產(chǎn)生的留白會(huì)影響柱子識(shí)別；
• 重點(diǎn)信息數(shù)據(jù)標(biāo)簽淹沒在整個(gè)圖里，影響識(shí)別效率。

2. 設(shè)計(jì)目標(biāo)

基于以上問題，對(duì)水平條形圖進(jìn)行升級(jí)，能夠支持更多業(yè)務(wù)場(chǎng)景，提升圖表細(xì)節(jié)體驗(yàn)：

• 場(chǎng)景方面，以當(dāng)前正在進(jìn)行的新業(yè)務(wù)為組件的改版契機(jī)，參考東財(cái)、雪球等競(jìng)品的F10模塊，尋找更多的派生場(chǎng)景；
• 組件設(shè)計(jì)方面，主要參考《簡單的圖形復(fù)雜的信息》里很多關(guān)于圖表設(shè)計(jì)的人因?qū)W原則。

我們的重點(diǎn)把這些原則落地到開發(fā)層面，轉(zhuǎn)化成具體的規(guī)則。

二、水平條形圖設(shè)計(jì)的7個(gè)原則

1. 原則1：避免直條太窄，柱間距留白過多

原因：直條測(cè)量的是零散數(shù)據(jù)，如果直條太窄，柱子間距留白過多，視線就會(huì)集中在直條之間不附帶數(shù)據(jù)信息的留白空間。

規(guī)則：柱寬與柱子間距的比值設(shè)定控制在1~1.6（嘗試了比值為2，整體看起來比較密，行識(shí)別不佳）。

2. 原則2：控制高度，盡量在合理的高度能展示更多的內(nèi)容

原因：提升縱向屏效，一屏內(nèi)展示更多有效信息。

規(guī)則：令柱子數(shù)量為n，柱子寬度為a，柱間距為b，可視化縱向高度為H，情況如下：

1）0<n≤9，a=16，b=10，當(dāng)n=9時(shí)，此時(shí)H為正常可視化區(qū)域高度224（標(biāo)準(zhǔn)屏375）。

2）9<n≤11，保證H固定為246，但柱子寬度不低于13（375標(biāo)準(zhǔn)屏），保證較好的識(shí)別效果。

根據(jù)已知高度H以及a與b的關(guān)系求出柱寬a與柱間距b：2.1、(2.6n-1)a/1.6=H；已知H=246,n，求出a；2.2、na+（n-1）b=H，根據(jù)a求出b。

3）11<n，a=13，b=8，根據(jù)n高度自適應(yīng)（極限情況）：

3. 原則3：通過強(qiáng)調(diào)色突出重點(diǎn)數(shù)據(jù)

原因：通過強(qiáng)調(diào)色幫助用戶快速提煉重點(diǎn)信息，形成圖形結(jié)論。

規(guī)則：可以對(duì)某些柱子設(shè)置強(qiáng)調(diào)色：運(yùn)營選擇強(qiáng)調(diào)色。

被強(qiáng)調(diào)柱子除了在色彩上與普通柱子有區(qū)分外，在色彩明度上也需要有區(qū)分。

4. 原則4：大部分場(chǎng)景下遵循左邊為負(fù)數(shù)，右邊為正數(shù)原則

原因：避免只是因?yàn)橐曈X上舒適，導(dǎo)致數(shù)據(jù)的失真，給圖表識(shí)別帶來困惑。

規(guī)則：正數(shù)在右，負(fù)值在左邊。

讓負(fù)值直條更暗一些，以便他們進(jìn)一步區(qū)別于正值直條：

即使數(shù)據(jù)組中沒有正數(shù)，也一定不能在零基線右邊繪制有負(fù)值的水平直條：

雖然是正負(fù)值，但業(yè)務(wù)上只是想強(qiáng)調(diào)絕對(duì)值的變化，此時(shí)負(fù)值應(yīng)該當(dāng)成正值處理：

5. 原則5：如果分類柱形圖x軸標(biāo)簽展示不下時(shí)，不要去旋轉(zhuǎn)或缺省，而是自動(dòng)轉(zhuǎn)成水平條形圖的方式

原因：確保軸標(biāo)簽?zāi)軌蛲瓿烧故颈阌谟脩糸喿x。

規(guī)則：

錯(cuò)誤示例：旋轉(zhuǎn)、缺省后的x軸標(biāo)簽很難閱讀。

正確示例：自動(dòng)轉(zhuǎn)成水平條形圖，保證數(shù)據(jù)標(biāo)簽?zāi)軌蛞院线m的形式完整展示。

6. 原則6：讓數(shù)據(jù)標(biāo)簽更易于閱讀

原因：數(shù)據(jù)標(biāo)簽是用戶最關(guān)注的信息，把它們適當(dāng)?shù)赝癸@，以合適的形式進(jìn)行呈現(xiàn)，便于用戶去提取這些關(guān)鍵信息。

規(guī)則：

1）可以對(duì)接口返回的數(shù)據(jù)標(biāo)簽進(jìn)行二次編輯，以便用戶更容易理解，比如圖中示例：

• 當(dāng)數(shù)據(jù)≥0時(shí)，描述：“增持{$numb}萬元”
• 當(dāng)數(shù)據(jù)<0時(shí)，描述：“減持｜{$numb}｜萬元”

2）對(duì)于很長（n>8時(shí)）的一列水平直條圖，將數(shù)據(jù)點(diǎn)右對(duì)齊標(biāo)注，便于用戶概覽：

3）當(dāng)數(shù)據(jù)標(biāo)簽過長時(shí)大于等于12個(gè)字符，右對(duì)齊，視覺效果會(huì)比直接跟在柱子后面要好：

4）如果軸標(biāo)簽采用上下布局時(shí)，無論柱子多少數(shù)據(jù)標(biāo)簽均跟在柱子后面，避免全部右對(duì)齊后，過大的間距會(huì)吸引用戶注意：

5）數(shù)據(jù)標(biāo)簽顏色與圖形顏色保持一致，避免使用默認(rèn)顏色，增強(qiáng)數(shù)據(jù)之間的對(duì)比：

錯(cuò)誤示例：

正確示例：

7. 原則7：對(duì)于很長（n>8時(shí)）的一列水平直條圖，通過輔助線讓整體更易于讀取

原因：我們記一個(gè)手機(jī)號(hào)碼、身份證號(hào)碼時(shí)，會(huì)習(xí)慣分段記憶。

比如15852089389會(huì)記憶成158-5208-9389，這是由于我們短期記憶特征決定的。短期記憶的特征同樣影響我們對(duì)于較長水平直條圖的閱讀。

規(guī)則：當(dāng)柱子數(shù)量n≥8時(shí)，并且軸標(biāo)簽長度小于等于6個(gè)字，展示輔助線，方便用戶進(jìn)行分段閱讀（輔助線位置：4跟柱子一組，每組后面一根輔助線，最后一組不展示輔助線）：

三、后續(xù)展望

圖表承載數(shù)據(jù)，圖表的體驗(yàn)影響用戶對(duì)于數(shù)據(jù)內(nèi)容有用性的感知，如何通過用戶的行為數(shù)據(jù)驗(yàn)證內(nèi)容的有用性得到提升，可以按照新舊場(chǎng)景去設(shè)計(jì)實(shí)驗(yàn)：

• 舊場(chǎng)景（線上已經(jīng)有該場(chǎng)景，只是對(duì)該場(chǎng)景進(jìn)行優(yōu)化）：優(yōu)化后的組件切5%的流量，和舊場(chǎng)景進(jìn)行比較，如果行為數(shù)據(jù)得到正向提升，以5%為步長逐步放量至100%（全量替換）；
• 新場(chǎng)景（線上沒有該場(chǎng)景，我們新增了場(chǎng)景）：我們以業(yè)務(wù)目標(biāo)為準(zhǔn)，由產(chǎn)品去評(píng)估是否達(dá)到預(yù)期，如果沒有達(dá)到是內(nèi)容的原因還是組件的問題，根據(jù)假設(shè)，再通過控制變量進(jìn)行小流量實(shí)驗(yàn)，找到提升業(yè)務(wù)的關(guān)鍵點(diǎn)。

參考資料

[1]黃慧敏. 最簡單的圖形與最復(fù)雜的信息[M]. 浙江人民出版社, 2013.

#專欄作家#

UE小牛犢，微信公共號(hào)：交互實(shí)驗(yàn)獅，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品思考、用戶體驗(yàn)分析、交互研究，致力于UX方法論的探索和實(shí)踐。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議