2023-10-9 ui設(shè)計(jì)分享達(dá)人
前言在B端的業(yè)務(wù)之中,數(shù)據(jù)概覽頁(yè)面屬于常見的頁(yè)面,對(duì)主管有快速查看/查詢/決策的左右,對(duì)于執(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ā)難度大的問(wèn)題。涉及到的元素
業(yè)務(wù):涉及8個(gè)應(yīng)用,40個(gè)頁(yè)面。
角色分解:QA,IPM,SPM,TMDE,TES,模塊owner。
使用場(chǎng)景:管理者匯總團(tuán)隊(duì)信息、向上匯報(bào)以及分析數(shù)據(jù)。
現(xiàn)有問(wèn)題體驗(yàn)不一致,提高管理成本:
架構(gòu)組件以及樣式不同的模塊完全不相同,缺少規(guī)范性
開發(fā)低效,溝通成本高:
組件重復(fù)開發(fā),開發(fā)成本高
設(shè)計(jì)師與開發(fā)溝通成本高
解決問(wèn)題解決流程分為:找高頻框架通過(guò)收集40個(gè)頁(yè)面的布局,結(jié)合對(duì)執(zhí)行者與決策者的角色行為進(jìn)行分析,將所有的頁(yè)面分為:
數(shù)據(jù)概覽
數(shù)據(jù)分析
詳情查看
重復(fù)組件將可視化按照空間分成;
底層:背景
內(nèi)容層:頁(yè)頭+篩選+圖表+表格
頂層:動(dòng)作按鈕
高頻樣式現(xiàn)有的樣式雜亂無(wú)章,因此針對(duì)現(xiàn)有的樣式進(jìn)行收集和整理分類為布局,色板,字體,將所有的頁(yè)面所有的元素進(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ū)分度不夠
組架構(gòu)組合3個(gè)場(chǎng)景并且對(duì)頁(yè)面進(jìn)行分類,提取其中高頻的進(jìn)行整理繼續(xù)布局:
數(shù)據(jù)概覽:圖表+頁(yè)頭
數(shù)據(jù)分析:頁(yè)頭+篩選+指標(biāo)+圖表
詳情查看:頁(yè)頭+篩選+圖表+詳細(xì)表格
組件組合模塊根據(jù)業(yè)務(wù)進(jìn)行“總-分”形式的:
功能模塊
子模塊
子功能
上面是針對(duì)于常規(guī)的功能模塊,針對(duì)非常規(guī)的模塊「例如:結(jié)果頁(yè)面」進(jìn)行更加細(xì)化的區(qū)分“圖表”“表格”“篩選”,再度細(xì)分成為主體和變體進(jìn)行區(qū)分。樣式組合
布局:將7個(gè)常規(guī)的布局手鏈成為2個(gè):“字-左上,圖表右下”,“圖表左右,注釋右邊”
高度:以win為例,導(dǎo)航欄分為3欄,再去保證頁(yè)面的報(bào)告率格急性型分組:1920對(duì)應(yīng)的是440,1600對(duì)應(yīng)的是360px,1366對(duì)應(yīng)的是280px
走向:根據(jù)統(tǒng)計(jì)的數(shù)據(jù)來(lái),3個(gè)模塊會(huì)出現(xiàn)超過(guò)20字的注釋或者是標(biāo)簽名,因此延伸出2套解決方案:“自上而下”,和“自下而上”,經(jīng)過(guò)驗(yàn)證邀請(qǐng)幾個(gè)同學(xué)發(fā)現(xiàn)自上而下閱讀成本低,理解成本更低
字體:現(xiàn)有字體中,常規(guī)的默認(rèn)字體區(qū)區(qū)分度不高,所以引入了Din作為支持?jǐn)?shù)字呈現(xiàn)的
作者:一只雞腿啊啊啊
鏈接:https://www.zcool.com.cn/article/ZMTU4NDQyOA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://ssll180.com