Day 8：【高階商務計算機】智慧空白格吸收與庫存區轉換、定向收縮填補

18th鐵人賽

shaoan_1211

2026-09-11 23:00:45

74 瀏覽

分享至

在昨天的文章中，我們深入剖析了觸控物理防抖的三層防線機制——從 Hysteresis 15% 遲滯判定徹底消滅按鍵邊界的閃爍誤觸，到 Touch Lift 22px 視線微抬升讓落點永遠顯示在拇指正上方，以及 Spring Drop 彈簧吸附落位帶來的精準物理回饋，並在 Samsung Galaxy S25 與 iPhone 15 裝置上完成了高強度動態壓力測試。

今天，我們要將陣地轉移到自訂鍵盤佈局的動態彈性空間機制。當使用者將新按鍵從庫存區拖入網格，或是將網格中的按鍵拖回庫存區時，版面空間該如何智慧調配？我們將解剖智慧空白格吸收（Smart Blank Absorption）與庫存區轉換兩大核心技術，確保每次拖放調整既能保護既有按鍵不被擠出版面，又能呈現極具現代感的微光虛線動效。

專案正式上線體驗與開源倉庫

線上體驗 Live Demo：https://410355-collab.github.io/Premium-Business-Calculator/
(強烈建議使用 iPhone Safari 或 Android 手機開啟體驗！)
GitHub 開源倉庫：https://github.com/410355-collab/Premium-Business-Calculator
開發環境：Google Antigravity IDE + Google Gemini 協同開發

為什麼需要智慧空白格吸收？

在傳統的網格介面拖放設計中，處理新元素加入常見有兩種做法：

直接覆蓋：

直接取代目標槽位上的舊按鍵。這極易導致使用者好不容易配置好的功能按鍵遭到意外抹除。

無腦順延推擠：

將目標槽位及其後續所有按鍵一律向後推移一格。這種做法會強制破壞全版的佈局記憶，甚至導致排在最後的按鍵被擠出版面外而消失。

為了提供無痛且精準的自訂體驗，我們採用了「智慧空白格吸收」理念：將版面中的空白格（⬚）視為天然的物理吸收緩衝區。當拖入新按鍵時，系統會自動尋找距離最近的空白格進行定向收縮填補，讓新按鍵順利融入，同時保護所有現存功能按鍵不被擠出版面。

曼哈頓距離與定向收縮填補演算法

智慧空白格吸收演算法核心分為三個步驟：

空白格搜尋：

當按鍵拖至目標槽位時，計算目標槽位與全版面所有 BLANK_KEY 之間的曼哈頓距離（Manhattan Distance）：
D = |x_target - x_blank| + |y_target - y_blank|

最小距離定位：

鎖定曼哈頓距離最短的空白格。若有多個相同距離的空白格，優先選擇同列（Row）或同欄（Column）的槽位以減少擠壓感。

定向收縮路徑推移：

沿著目標槽位到該空白格的路徑，將中間的按鍵依序向空白格方向平移一格，騰出目標槽位供新按鍵落位。

核心演算法邏輯實現

// 智慧空白格吸收與定向填補
function smartAbsorbAndInsert(targetIndex, newKey, gridState) {
    const cols = 4;
    const targetX = targetIndex % cols;
    const targetY = Math.floor(targetIndex / cols);

    let closestBlankIndex = -1;
    let minDistance = Infinity;

    // 1. 搜尋全版面最近的空白格
    gridState.forEach((cell, idx) => {
        if (cell.type === 'blank') {
            const x = idx % cols;
            const y = Math.floor(idx / cols);
            const distance = Math.abs(targetX - x) + Math.abs(targetY - y);
            
            if (distance < minDistance) {
                minDistance = distance;
                closestBlankIndex = idx;
            }
        }
    });

    // 若完全沒有空白格，退回安全保護機制
    if (closestBlankIndex === -1) {
        return false;
    }

    // 2. 沿路徑定向平移收縮，將空白格向 targetIndex 方向吸收
    shiftPathTowardsBlank(targetIndex, closestBlankIndex, gridState);

    // 3. 落位新按鍵
    gridState[targetIndex] = { ...newKey };
    return true;
}

庫存區轉換：微光虛線空白格

當使用者將鍵盤上的按鍵拖回庫存區時，原槽位不會直接留下難看空洞，而是自動轉化為微光虛線空白格（Glowing Dashed Blank Slot）。

這種轉化帶來了顯著的 UX 優勢：

明確的可互動提示：

虛線框提示使用者此處為可隨時填入新按鍵的彈性空間。

維持網格視覺骨架：

確保整個鍵盤佈局邊界分明，不會因為按鍵減少而發生結構崩塌。

CSS 微光虛線呼吸效果

.key-slot.is-blank {
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px dashed rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: dashedPulse 3s infinite ease-in-out;
}

@keyframes dashedPulse {
    0%, 100% {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.02);
    }
    50% {
        border-color: rgba(0, 240, 255, 0.5);
        box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.15);
    }
}