關(guān)于一個(gè)數(shù)據(jù)概覽的復(fù)盤
在B端的業(yè)務(wù)之中,數(shù)據(jù)概覽頁面屬于常見的頁面,對主管有快速查看/查詢/決策的左右,對于執(zhí)行也能查詢到KPI是否完成的,防止遺漏的作用。今天就結(jié)合業(yè)務(wù)之中的一個(gè)案例,跟大家做一個(gè)分享。
一、業(yè)務(wù)需求
我們團(tuán)隊(duì)主要做的OA類型的項(xiàng)目,主要是服務(wù)于公司內(nèi)部的開發(fā)團(tuán)隊(duì)。隨著業(yè)務(wù)的逐步拓展、用戶的角色需求的多樣化、角色數(shù)量的多樣化、團(tuán)隊(duì)內(nèi)部開發(fā)團(tuán)隊(duì)難度、設(shè)計(jì)師人手有限等矛盾不斷遞增,8個(gè)數(shù)據(jù)概覽模塊面臨著體驗(yàn)復(fù)雜以及設(shè)計(jì)開發(fā)難度大的問題。
涉及到的元素:
- 業(yè)務(wù):涉及8個(gè)應(yīng)用,40個(gè)頁面。
- 角色分解:QA,IPM,SPM,TMDE,TES,模塊owner。
- 使用場景:管理者匯總團(tuán)隊(duì)信息、向上匯報(bào)以及分析數(shù)據(jù)。
二、現(xiàn)有問題
體驗(yàn)不一致,提高管理成本:架構(gòu)組件以及樣式不同的模塊完全不相同,缺少規(guī)范性
開發(fā)低效,溝通成本高:
- 組件重復(fù)開發(fā),開發(fā)成本高
- 設(shè)計(jì)師與開發(fā)溝通成本高
解決問題解決流程分為:
1. 找
高頻框架
通過收集40個(gè)頁面的布局,結(jié)合對執(zhí)行者與決策者的角色行為進(jìn)行分析,將所有的頁面分為:
- 數(shù)據(jù)概覽
- 數(shù)據(jù)分析
- 詳情查看
重復(fù)組件
將可視化按照空間分成;
- 底層:背景
- 內(nèi)容層:頁頭+篩選+圖表+表格
- 頂層:動(dòng)作按鈕
高頻樣式
現(xiàn)有的樣式雜亂無章,因此針對現(xiàn)有的樣式進(jìn)行收集和整理分類為布局,色板,字體,將所有的頁面所有的元素進(jìn)行拆解,統(tǒng)計(jì)高頻樣式。分成:
- 布局:按照業(yè)務(wù)流程順序區(qū)分
- 高度:統(tǒng)計(jì)導(dǎo)航欄的高度重新計(jì)算高度
- 走向:統(tǒng)計(jì)現(xiàn)有瀏覽器導(dǎo)航高度重新定高度
- 字體:現(xiàn)有字體尤其是在數(shù)字的展現(xiàn)方式區(qū)分度不夠
2. 組
架構(gòu)組合
3個(gè)場景并且對頁面進(jìn)行分類,提取其中高頻的進(jìn)行整理繼續(xù)布局:
- 數(shù)據(jù)概覽:圖表+頁頭
- 數(shù)據(jù)分析:頁頭+篩選+指標(biāo)+圖表
- 詳情查看:頁頭+篩選+圖表+詳細(xì)表格
組件組合
模塊根據(jù)業(yè)務(wù)進(jìn)行“總-分”形式的:
- 功能模塊
- 子模塊
- 子功能
上面是針對于常規(guī)的功能模塊,針對非常規(guī)的模塊「例如:結(jié)果頁面」進(jìn)行更加細(xì)化的區(qū)分“圖表”“表格”“篩選”,再度細(xì)分成為主體和變體進(jìn)行區(qū)分。
樣式組合
- 布局:將7個(gè)常規(guī)的布局手鏈成為2個(gè):“字-左上,圖表右下”,“圖表左右,注釋右邊”
- 高度:以win為例,導(dǎo)航欄分為3欄,再去保證頁面的報(bào)告率格急性型分組:1920對應(yīng)的是440,1600對應(yīng)的是360px,1366對應(yīng)的是280px
- 走向:根據(jù)統(tǒng)計(jì)的數(shù)據(jù)來,3個(gè)模塊會出現(xiàn)超過20字的注釋或者是標(biāo)簽名,因此延伸出2套解決方案:“自上而下”,和“自下而上”,經(jīng)過驗(yàn)證邀請幾個(gè)同學(xué)發(fā)現(xiàn)自上而下閱讀成本低,理解成本更低
- 字體:現(xiàn)有字體中,常規(guī)的默認(rèn)字體區(qū)區(qū)分度不高,所以引入了Din作為支持?jǐn)?shù)字呈現(xiàn)的
總結(jié)
本次從找和組2個(gè)流程進(jìn)行分解,希望能給到大家?guī)椭?/p>
專欄作家
一只雞腿,微信公眾號:B端設(shè)計(jì)一只雞腿,人人都是產(chǎn)品經(jīng)理專欄作家。一個(gè)吃貨的B端設(shè)計(jì)師。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
- 目前還沒評論,等你發(fā)揮!