品味

, ,

记录一些关于设计品味和设计资源的思考与收集。

品味

Linus Torvalds 说过：”有时候你可以从不同角度看问题，重写它让特殊情况消失，变成正常情况。”这就是品味——不是做更多，而是让对的变得显而易见。

品味无法速成，但可以通过大量看、反复用、持续打磨来积累。以下是一些在代码和设计中反复被印证的原则：

原则 说明
消除，而非添加 好设计是减法。删除直到无法再删，剩下的才是精华。
一致性 > 花样 一个地方的圆角 4px，另一个地方 8px——这不是创意，是 bug。
空白是奢侈品 留白不是浪费，是给内容呼吸的空间。
层级决定一切 用户扫读，不是阅读。字号、字重、颜色三条线撑起信息层级。

设计资源

以下资源按分类整理，持续更新。

AI 时代网页设计风格

灵感搜集

灵感是品味的养料。多看最好的作品，审美线自然会抬升。

  • Dribbble — 设计师社区，UI/插画/动效的首选灵感来源
  • Behance — Adobe 旗下，完整作品案例展示
  • Awwwards — 全球最佳网站评选，前沿 Web 设计趋势
  • Mobbin — 真实 App 截图库，竞品分析与交互参考
  • Screenlane — 移动端 UI 截图收集，按页面类型分类
  • Collect UI — 按组件分类的 UI 灵感库（404页/登录页/表单等）
  • Land-book — 精选 Landing Page 设计集
  • Muzli — Chrome 插件，每次新标签页推送设计灵感
  • Pinterest — 图片灵感搜索，适合 Mood Board
  • Siteinspire — 极简风格网站收藏

设计工具

  • Figma — 协作文档级设计工具，Web 端即开即用
  • Framer — 设计即代码，可直接发布成网站
  • Excalidraw — 手绘风格白板，适合架构图/流程图
  • Canva — 快速出图，海报/封面/社媒图
  • Sketch — Mac 端经典 UI 设计工具
  • Penpot — 开源 Figma 替代，支持 SVG 原生编辑
  • tldraw — 极简白板，画完即分享

图标

  • Phosphor Icons — 6 种风格切换，一致性极好
  • Heroicons — Tailwind 团队出品，SVG + React 开箱即用
  • Lucide — Feather Icons 的活跃维护分支，图标更全
  • Remix Icon — 一套中性风格的系统级图标
  • Font Awesome — 老牌图标库，生态最广
  • Tabler Icons — 2600+ 线性图标，适合后台系统
  • IconPark — 字节跳动出品，支持 4 种风格切换

配色

  • Coolors — 按空格键生成配色，快且直观
  • Color Hunt — 四色配色方案社区，每日更新
  • 中国色 — 中国传统色色谱，每个颜色有名字有故事
  • Adobe Color — 色轮工具 + 社区配色方案
  • Realtime Colors — 实时预览品牌色在产品界面的效果
  • UI Colors — 输入主色自动生成 Tailwind 色阶
  • Happy Hues — 配色灵感 + 实际应用场景展示

字体

  • Google Fonts — 开源字体库，中英文都有
  • FontShare — 高质量免费商用字体
  • 字体天下 — 中文字体下载，商用需确认授权
  • 中文 WebFont — 中文在线字体服务，按需加载
  • Fontsource — 将开源字体打包为 npm 包，方便前端引入
  • Nerd Fonts — 程序员专用，图标 + 等宽字体组合

组件库

  • shadcn/ui — 复制即拥有的组件集合，基于 Radix + Tailwind
  • Radix UI — 无样式 React 组件原语，可访问性一流
  • Ant Design — 企业级中后台组件体系
  • Tailwind UI — Tailwind 官方付费组件，质量极高
  • NextUI — 基于 Tailwind 的现代 React 组件库
  • Element Plus — Vue 3 组件库，中文生态好
  • Mantine — React 组件 + Hooks 大合集，功能最丰富

插画与图片

  • unDraw — 开源 SVG 插画，可一键改主色
  • Humaaans — 人物插画组件，可自由搭配场景
  • Unsplash — 免费高质量摄影图片
  • Pexels — 免费图片 + 视频素材
  • Blush — 可自定义插画风格与配色
  • Storyset — Freepik 旗下，动态场景插画

学习与进阶

  • Refactoring UI — 程序员学 UI 设计的最佳入门，作者也是 Tailwind 创始人
  • Practical UI — 阿迪·达斯写的 UI 设计实战指南
  • 优设网 — 中文设计社区，教程/趋势/资源聚合
  • Daily UI — 每天一个 UI 挑战，100 天练出手感
  • Laws of UX — 用户体验定律集合，每一条都值得牢记
  • Checklist Design — UI 设计自查清单，交付前逐条核对

完~