蘭亭妙微 B 端界面設(shè)計(jì)：16 年實(shí)戰(zhàn)案例 + 落地工具清單（含公司真實(shí)項(xiàng)目）
作為深耕 B 端設(shè)計(jì) 16 年的專業(yè)機(jī)構(gòu)，蘭亭妙微（曾用簡稱：藍(lán)藍(lán)設(shè)計(jì)）始終以 “業(yè)務(wù)適配 + 效率落地” 為核心，打造了眾多行業(yè)標(biāo)桿項(xiàng)目。以下結(jié)合公司真實(shí)案例與落地工具，拆解可復(fù)用的設(shè)計(jì)邏輯：
適配場(chǎng)景：軍工資質(zhì)認(rèn)定、無人機(jī)操控等高精度管控場(chǎng)景
項(xiàng)目保密，圖片為示 意
- 設(shè)計(jì)亮點(diǎn)：
- 采用 “三級(jí)權(quán)限管控”，操作員、管理員、決策者權(quán)限清晰區(qū)分，關(guān)鍵操作需雙重確認(rèn)；
- 任務(wù)進(jìn)度用彩色進(jìn)度條直觀呈現(xiàn)，待辦事項(xiàng)以紅色角標(biāo)高亮，評(píng)審專家無需復(fù)雜查找；
- 故障告警以懸浮面板錨定右側(cè)，點(diǎn)擊直接定位問題源頭，同步關(guān)聯(lián)歷史數(shù)據(jù)。
- 核心價(jià)值：在保障數(shù)據(jù)安全的前提下，操作效率提升 70%，滿足軍工領(lǐng)域 “高精準(zhǔn)、嚴(yán)合規(guī)” 需求。
項(xiàng)目保密，圖片為示 意
適配場(chǎng)景：多角色審核、長流程數(shù)據(jù)校驗(yàn)的金融場(chǎng)景
- 設(shè)計(jì)亮點(diǎn)：
- 將 “征信報(bào)告生成” 拆分為 “數(shù)據(jù)導(dǎo)入 - 自動(dòng)校驗(yàn) - 人工復(fù)核 - 結(jié)果導(dǎo)出” 四步流程，核心操作集中在首屏；
- 數(shù)據(jù)校驗(yàn)結(jié)果用綠 / 紅 / 橙三色標(biāo)注，異常項(xiàng)自動(dòng)彈出修正建議；
- 操作日志全程留痕，支持權(quán)限追溯，符合金融行業(yè)合規(guī)要求。
- 核心價(jià)值：審核員無需頻繁跳轉(zhuǎn)頁面，90% 工作可在首屏完成，報(bào)告生成效率提升 80%。
適配場(chǎng)景：電站實(shí)時(shí)監(jiān)控、能耗統(tǒng)計(jì)、故障預(yù)警場(chǎng)景
- 設(shè)計(jì)亮點(diǎn)：
- 核心數(shù)據(jù)（實(shí)時(shí)發(fā)電量、設(shè)備狀態(tài)、收益統(tǒng)計(jì)）做成可視化大屏，綠 / 紅標(biāo)識(shí)正常 / 故障；
- 移動(dòng)端 + PC 端雙適配，運(yùn)維人員在現(xiàn)場(chǎng)可通過手機(jī)提交巡檢記錄、查看設(shè)備參數(shù)；
- 峰值負(fù)荷時(shí)段自動(dòng)標(biāo)紅提醒，支持一鍵跳轉(zhuǎn)故障處理頁面。
- 核心價(jià)值：中控室實(shí)時(shí)掌控全站狀態(tài)，現(xiàn)場(chǎng)運(yùn)維效率提升 60%，故障響應(yīng)時(shí)效縮短至分鐘級(jí)。
- Axure RP：軍工、金融類復(fù)雜流程原型搭建，支持條件判斷、動(dòng)態(tài)面板，精準(zhǔn)還原多角色操作邏輯；
- Figma：團(tuán)隊(duì)協(xié)作原型設(shè)計(jì)，適配能源監(jiān)控等多端適配項(xiàng)目，支持實(shí)時(shí)同步修改意見。
- ECharts：金融征信數(shù)據(jù)圖表、能源監(jiān)控大屏開發(fā)，開源免費(fèi)且適配國內(nèi)網(wǎng)絡(luò)環(huán)境，支持自定義顏色體系；
- GIS 相關(guān)工具：國土、能源類項(xiàng)目的地圖融合開發(fā)（如克拉瑪依自然資源政務(wù)平臺(tái)），實(shí)現(xiàn)地塊信息一鍵查詢。
- QT/MFC/WPF：軍工嵌入式系統(tǒng)（如無人機(jī)控制系統(tǒng)）界面開發(fā)，保障高穩(wěn)定性與設(shè)備兼容性；
- React + Ant Design：金融、能源類企業(yè)級(jí)系統(tǒng)開發(fā)，組件豐富且符合 B 端操作習(xí)慣；
- Bootstrap：移動(dòng)端適配開發(fā)，確保運(yùn)維人員現(xiàn)場(chǎng)操作的便捷性。
- 藍(lán)湖：設(shè)計(jì)稿與前端開發(fā)銜接，精準(zhǔn)傳遞顏色、間距、組件樣式，確保 1:1 還原；
- 內(nèi)部項(xiàng)目管理系統(tǒng)：每周現(xiàn)場(chǎng)溝通記錄、每日成果反饋、階段性進(jìn)度復(fù)盤，保障項(xiàng)目按節(jié)點(diǎn)交付。
以上案例均來自蘭亭妙微官網(wǎng)真實(shí)項(xiàng)目（可訪問m.wtxcl.cn查看完整案例）， 16 年服務(wù)航天、金融、能源等 20 + 行業(yè)的實(shí)戰(zhàn)沉淀。
