旁门左道的个人设计准则

我不是设计专业出身，界面能看多半靠这几条土办法。不讲色彩理论，只讲我自己真用过、且立刻见效的。

1. 能用组件的千万不要自己撸

Element、Ant Design、Vuetify 这类库，间距、对齐、交互状态都帮你磨过了。自己从零写按钮、表格、弹窗，很容易在边距、hover、禁用态上漏细节。

我现在的默认策略：先找现成组件拼页面，只有组件库真没有、或者强定制时再写 CSS。省下的时间拿去抠业务逻辑，比抠 2px 边距值。

2. 选择图标一定要越轻越好

图标库越大，越容易挑花眼。项目里固定一套（Remix Icon、Lucide、Element Icons），线条粗细统一，别一页混三套风格。

实心大图标适合强调入口；列表、表格里用小线框图标，别抢文字。图标是辅助，正文认不出来算失败。

3. 文字倘若不好看，那便无脑调小

新手常把标题、正文、说明字号都偏大，页面像喊话。

我的粗暴流程：

• 正文 14px～16px 先站稳
• 标题比正文大一级就够，别大三级
• 次要说明再小一号、颜色浅一点

调完往往不用换字体，版面已经顺眼一截。

4. 还是不好看就换个字体

系统默认字体在 Windows 上有时发虚。中文站可试「思源黑体 / 苹方 / 微软雅黑」里选一款做主字体，英文配 Inter、Segoe UI。

注意授权和体积：网页用 font-face 引大文件会拖慢首屏，能系统字体栈解决就别硬上 5MB 的 woff2。

5. 多抄一下别人的设计

「抄」指的是拆结构：看别人首页信息怎么分区、卡片圆角阴影多重、留白多少。不是像素级照搬 logo 和配色。

我会把喜欢的 landing page 截图，叠在自家页面上比网格，看标题宽度和卡片间距差在哪。Dribbble、成熟 SaaS 后台都是现成教材。

这几条都很土，但对我这种写代码多于画图的人够用了。设计是慢慢积累的，先让页面不扎眼，再谈风格化。

版权声明: 本文首发于 指尖魔法屋-旁门左道的个人设计准则（https://blog.thinkmoon.cn/post/214_%E6%97%81%E9%97%A8%E5%B7%A6%E9%81%93%E7%9A%84%E4%B8%AA%E4%BA%BA%E8%AE%BE%E8%AE%A1%E5%87%86%E5%88%99/） 转载或引用必须申明原指尖魔法屋来源及源地址！