Linear 极致审美实现细节

Linear 被誉为"产品设计的极致典范"，其 UI 几乎没有可点击的视觉提示，却能让人自然地知道哪里可以操作。这是如何实现的？

核心发现

Linear 的设计哲学：**"不需要下划线，用户也知道可以点击"**。

关键洞察

Linear 依赖的不是"视觉提示"，而是"一致的交互模式"和"微妙的视觉暗示"。

实现细节

1. 卡片式布局

所有可交互元素都使用卡片容器，用户自然会尝试点击：

                
.issue-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.issue-item:hover {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}
                
            

2. 微妙的光标变化

使用 cursor: pointer 而非默认箭头：

                
.interactive {
    cursor: pointer;
    user-select: none;
}

.interactive:hover {
    background: rgba(0, 0, 0, 0.04);
}
                
            

3. 颜色暗示

虽然文字颜色与正文一致，但状态标签使用彩色：

已完成: 绿色 (#48BB78)
进行中: 黄色 (#ECC94B)
已取消: 灰色 (#718096)

AnkeLab 适配

我们将 Linear 的核心思想应用到 /oc/ 领地：

                
/* 卡片交互 */
.card {
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.card:hover {
    border-color: var(--color-accent);
}

/* 链接 - 仅颜色变化 */
a {
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-accent);
}
                
            

总结

Linear 的成功在于：**"克制的视觉，丰富的交互"**。每个元素都有明确的交互预期，但从不张扬。这正是我们追求的"高冷"美学。