设计方法论

方法论文章——网页交付标准、视觉品质原则、Design Token、去 AI 味。一篇解决一类"网页怎么做才对"的问题。

工具网站

做界面时拿来即用的外部工具,按用途分组——字体、配色、图像素材。

灵感网站

对照标杆——精选网页设计与产品设计参照。策展式收藏比随机刷效率高。

书籍推荐

网页界面设计值得读的书,按"解决什么问题"分组——字体排印、界面与布局。每本解决一类问题。

设计方法论

不是宣言,是判断“好网页长什么样”的清单。一篇解决一类问题。

字体

选字、配对、识别字体。中文免费商用字体优先。

配色

生成、调和、验证配色。AI 配色优先看对比度。

图像素材

配图、图标、矢量素材。免费商用可查授权。

组件与动效

从具体交互寻找参考,再按项目内容与视觉风格调整。

灵感平台

每日精选、评审、归档。找标杆先来这里。

标杆产品

SaaS / 开发工具的官网本身就是设计课。产品 UI 即营销页。

消费品牌

摄影、留白、场景化陈列。大品牌的视觉表达范式。

AI 产品

AI 产品的界面范式,对话与生成的交互呈现。

字体排印

看字——字母结构、排版韵律、字体组合。设计的第一层是“字”。

字体的技艺封面
《字体的技艺》
The Elements of Typographic Style
Robert Bringhurst

排版领域公认的“圣经”。从字母结构、字距、行高、页边距到页面比例,把字体排印讲成一套有历史渊源、有审美判断的技艺。网页排版的每一个视觉决策——衬线还是无衬线、行高多少、留白怎么留——都能追溯到这本书里的排版传统。

实用字体排印封面
《实用字体排印》
Butterick's Practical Typography
Matthew Butterick

在线免费,网页排版实操指南。字体选择、行距、对比度的具体建议,直接对应 CSS 里的 font-size、line-height、color 设置。面向写作和网页场景,给的是一照做就见效的参数,不是理论。

用字设计封面
《用字设计》
Designing with Type: The Essential Guide to Typography
James Craig

字体选择与组合的系统方法论。从字体的历史、分类(古体/过渡体/现代体/粗衬线/无衬线)到搭配规则,讲清“为什么这两个字体放在一起好看”——靠的是对比与同族的搭配逻辑,不是凭感觉。

图解字型思考封面
《图解字型思考》
Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students
Ellen Lupton

从字母结构一路讲到网格系统,适合设计师与前端工程师共读。把“字体怎么选、怎么排、怎么搭网格”讲成一套可操作的方法:字体分类(人文体/过渡体/现代体)、字距、行距、层次、栅格。

界面与布局

排布——界面元素怎么摆、栅格怎么分。设计的第一层之上是“结构”。

重构界面封面
《重构界面》
Refactoring UI
Adam Wathan, Steve Schoger

从程序员视角讲界面设计,实用至上。间距、配色、层级、组件状态——不教设计理论,直接给“照着改就能好看”的具体手法。作者是 Tailwind CSS 作者,全书思路与原子化 CSS 一脉相承。

平面设计中的网格系统封面
《平面设计中的网格系统》
Grid Systems in Graphic Design
Josef Müller-Brockmann

网格系统的开山之作,理解 layout 底层逻辑的必读。用数学思维构建视觉秩序:栅格如何切分页面、留白如何参与节奏、多页之间如何保持一致。网页的栅格系统、响应式布局、留白节奏都能追溯到这本书。