關于一個數(shù)據(jù)概覽的復盤|北京藍藍UI設計公司

2023-10-9    ui設計分享達人

前言在B端的業(yè)務之中,數(shù)據(jù)概覽頁面屬于常見的頁面,對主管有快速查看/查詢/決策的左右,對于執(zhí)行也能查詢到KPI是否完成的,防止遺漏的作用。今天就結(jié)合業(yè)務之中的一個案例,跟大家做一個分享,有不同的意見可以留言或者是私聊溝通(謝謝大家)。業(yè)務需求我們團隊主要做的OA類型的項目,主要是服務于公司內(nèi)部的開發(fā)團隊。隨著業(yè)務的逐步拓展、用戶的角色需求的多樣化、角色數(shù)量的多樣化、團隊內(nèi)部開發(fā)團隊難度、設計師人手有限等矛盾不斷遞增,8個數(shù)據(jù)概覽模塊面臨著體驗復雜以及設計開發(fā)難度大的問題。涉及到的元素

業(yè)務:涉及8個應用,40個頁面。
角色分解:QA,IPM,SPM,TMDE,TES,模塊owner。
使用場景:管理者匯總團隊信息、向上匯報以及分析數(shù)據(jù)。

現(xiàn)有問題體驗不一致,提高管理成本:

架構(gòu)組件以及樣式不同的模塊完全不相同,缺少規(guī)范性

開發(fā)低效,溝通成本高:

組件重復開發(fā),開發(fā)成本高
設計師與開發(fā)溝通成本高

解決問題解決流程分為:找高頻框架通過收集40個頁面的布局,結(jié)合對執(zhí)行者與決策者的角色行為進行分析,將所有的頁面分為:

數(shù)據(jù)概覽
數(shù)據(jù)分析
詳情查看

重復組件將可視化按照空間分成;

底層:背景
內(nèi)容層:頁頭+篩選+圖表+表格
頂層:動作按鈕

高頻樣式現(xiàn)有的樣式雜亂無章,因此針對現(xiàn)有的樣式進行收集和整理分類為布局,色板,字體,將所有的頁面所有的元素進行拆解,統(tǒng)計高頻樣式。分成:

布局:按照業(yè)務流程順序區(qū)分
高度:統(tǒng)計導航欄的高度重新計算高度
走向:統(tǒng)計現(xiàn)有瀏覽器導航高度重新定高度
字體:現(xiàn)有字體尤其是在數(shù)字的展現(xiàn)方式區(qū)分度不夠

組架構(gòu)組合3個場景并且對頁面進行分類,提取其中高頻的進行整理繼續(xù)布局:

數(shù)據(jù)概覽:圖表+頁頭
數(shù)據(jù)分析:頁頭+篩選+指標+圖表
詳情查看:頁頭+篩選+圖表+詳細表格

組件組合模塊根據(jù)業(yè)務進行“總-分”形式的:

功能模塊
子模塊
子功能

上面是針對于常規(guī)的功能模塊,針對非常規(guī)的模塊「例如:結(jié)果頁面」進行更加細化的區(qū)分“圖表”“表格”“篩選”,再度細分成為主體和變體進行區(qū)分。樣式組合

布局:將7個常規(guī)的布局手鏈成為2個:“字-左上,圖表右下”,“圖表左右,注釋右邊”
高度:以win為例,導航欄分為3欄,再去保證頁面的報告率格急性型分組:1920對應的是440,1600對應的是360px,1366對應的是280px
走向:根據(jù)統(tǒng)計的數(shù)據(jù)來,3個模塊會出現(xiàn)超過20字的注釋或者是標簽名,因此延伸出2套解決方案:“自上而下”,和“自下而上”,經(jīng)過驗證邀請幾個同學發(fā)現(xiàn)自上而下閱讀成本低,理解成本更低
字體:現(xiàn)有字體中,常規(guī)的默認字體區(qū)區(qū)分度不高,所以引入了Din作為支持數(shù)字呈現(xiàn)的

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

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司UI交互設計公司、高端網(wǎng)站設計公司UI咨詢、用戶體驗公司軟件界面設計公司

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔