2023-10-9 ui設計分享達人
前言在B端的業(yè)務之中，數(shù)據(jù)概覽頁面屬于常見的頁面，對主管有快速查看/查詢/決策的左右，對于執(zhí)行也能查詢到KPI是否完成的，防止遺漏的作用。今天就結合業(yè)務之中的一個案例，跟大家做一個分享，有不同的意見可以留言或者是私聊溝通（謝謝大家）。業(yè)務需求我們團隊主要做的OA類型的項目，主要是服務于公司內部的開發(fā)團隊。隨著業(yè)務的逐步拓展、用戶的角色需求的多樣化、角色數(shù)量的多樣化、團隊內部開發(fā)團隊難度、設計師人手有限等矛盾不斷遞增，8個數(shù)據(jù)概覽模塊面臨著體驗復雜以及設計開發(fā)難度大的問題。涉及到的元素
業(yè)務：涉及8個應用，40個頁面。
角色分解：QA,IPM,SPM，TMDE,TES，模塊owner。
使用場景：管理者匯總團隊信息、向上匯報以及分析數(shù)據(jù)。
現(xiàn)有問題體驗不一致，提高管理成本：
架構組件以及樣式不同的模塊完全不相同，缺少規(guī)范性
開發(fā)低效，溝通成本高:
組件重復開發(fā)，開發(fā)成本高
設計師與開發(fā)溝通成本高
解決問題解決流程分為：找高頻框架通過收集40個頁面的布局，結合對執(zhí)行者與決策者的角色行為進行分析，將所有的頁面分為：
數(shù)據(jù)概覽
數(shù)據(jù)分析
詳情查看
重復組件將可視化按照空間分成；
底層：背景
內容層：頁頭+篩選+圖表+表格
頂層：動作按鈕
高頻樣式現(xiàn)有的樣式雜亂無章，因此針對現(xiàn)有的樣式進行收集和整理分類為布局，色板，字體，將所有的頁面所有的元素進行拆解，統(tǒng)計高頻樣式。分成：
布局：按照業(yè)務流程順序區(qū)分
高度：統(tǒng)計導航欄的高度重新計算高度
走向：統(tǒng)計現(xiàn)有瀏覽器導航高度重新定高度
字體：現(xiàn)有字體尤其是在數(shù)字的展現(xiàn)方式區(qū)分度不夠
組架構組合3個場景并且對頁面進行分類，提取其中高頻的進行整理繼續(xù)布局：
數(shù)據(jù)概覽：圖表+頁頭
數(shù)據(jù)分析：頁頭+篩選+指標+圖表
詳情查看：頁頭+篩選+圖表+詳細表格
組件組合模塊根據(jù)業(yè)務進行“總-分”形式的：
功能模塊
子模塊
子功能
上面是針對于常規(guī)的功能模塊，針對非常規(guī)的模塊「例如：結果頁面」進行更加細化的區(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è)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢～希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司