设计 - 教程分享 - 第18页

交付不靠嘴：用标注和组件规则让还原更稳定

交付靠口头解释会带来大量偏差与返工。本文从标注内容选择、组件规则、状态说明到验收方式，讲清如何把设计意图写进可被实现的规则里，让还原更稳定。

设计经验 7天前 0

组件库越做越乱多半是命名问题：一套可执行的规则

组件库变乱往往不是组件太多，而是命名缺少规则，导致检索困难、误用频繁。本文从语义分层、属性命名、变体组织到代码映射，给出一套可执行的命名方法。

设计经验 7天前 0

线性图标不统一会显得廉价：从线宽到语义的规范思路

图标不统一会让界面显得杂乱、降低可信度。本文从线宽与端点样式、网格与留白、语义映射与命名方法出发，讲清如何把一套图标做成可维护的体系。

设计经验 7天前 0

信息层级怎么做才不乱：从阅读路线到组件权重的拆解

很多页面看起来拥挤、用户找不到重点，根因往往不是元素太多，而是信息层级没被明确标出来。本文用阅读路线、权重分配、留白与对齐等方法，把“重点该更像重点”的做法讲清。

设计经验 7天前 0

Figma 组件变体（Variants）实战：用一套属性管理按钮的状态与尺寸

用按钮组件举例，教你建立 Variants 属性（状态尺寸图标），并用命名规则让切换更直观、更不出错。

教程分享 7天前 0

组件库越做越乱多半是命名问题：一套可执行的命名规则

组件库失控通常不是因为组件太多，而是命名和变体表达不清晰。本文给出一套可执行的命名规则：以语义为中心、统一词汇表、让变体关系一眼可见，并把命名落地到设计与开发。

设计经验 7天前 0

交付不靠嘴：用标注和组件规则让还原更稳定

设计稿还原度低往往不是开发不认真，而是规则没被写清。本文从Token、组件默认值、状态与边界条件出发，讲清楚交付时如何把不确定性降到最低，让实现更稳定。

设计经验 7天前 0

字体系统怎么定才不乱：从层级到Token的一次性搭建

字体看似是细节，其实决定信息层级和阅读节奏。本文从层级规划、字号行高选择到Token化落地，讲清楚如何搭一套稳定的字体系统，让页面越做越一致。

设计经验 7天前 0

栅格不是束缚：用网格把页面做得更干净更稳定

网格的价值不在于把设计做成方块，而在于把间距和对齐变成可复现的规则。本文从8px体系到列网格，讲清楚网格怎么选、怎么用，以及如何在复杂页面里保持稳定。

设计经验 7天前 0

什么是“非破坏性编辑”？用这5个习惯让PS文件更耐改

非破坏性编辑指尽量不直接改坏原始像素，而是用蒙版、调整图层、智能对象等方式可回退地修改。这样文件更耐改、协作更顺，返工也更少。

值得一看 7天前 0

为什么你做的按钮“不够清晰”？对比度与WCAG的入门科普

界面看不清往往不是“字体太小”，而是前景与背景对比度不足。WCAG给出对比度建议：正文常用4 5:1，大号文字3:1，有助于提升可读性与无障碍体验。

值得一看 7天前 0

矢量图和位图有什么区别？从放大锯齿到文件体积的底层逻辑

矢量图用路径描述形状，缩放不失真；位图由像素组成，放大容易锯齿。选择取决于内容类型：Logo与图标适合矢量，照片与复杂纹理适合位图。

值得一看 7天前 0

颜色值#FFFFFF是什么意思？HEX与RGB的换算与常见坑

HEX是用十六进制表示RGB通道的写法，例如 FFFFFF=RGB(255,255,255)。理解通道范围、缩写 FFF、透明度 RRGGBBAA等规则，能避免改色与对齐出错。

值得一看 7天前 0

PNG和JPG到底怎么选？透明背景、清晰度与体积一次说清

PNG是无损压缩，支持透明通道，适合图标与UI；JPG是有损压缩，适合照片，体积更小但会产生压缩痕迹。选格式要看内容类型与使用场景。

值得一看 7天前 0

DPI和PPI有什么区别？分辨率、清晰度别再混了

PPI是屏幕图像的像素密度概念，DPI常用于印刷输出的点密度。实际清晰度取决于像素尺寸、观看距离与输出设备能力，单看“300DPI”并不够。

值得一看 7天前 0

RGB和CMYK的区别是什么？为什么颜色会“印出来变了”

RGB是屏幕发光的加色模式，CMYK是印刷油墨的减色模式。两者色域不同，转换时会发生颜色压缩，所以常见“屏幕鲜艳、印刷发灰”的情况。

值得一看 7天前 0

TTF和OTF有什么区别？字体格式选择指南

TTF是TrueType字体格式，OTF是OpenType格式。OTF通常在字符集、排版特性与跨平台表现上更灵活，但具体还要看字体是否包含相关特性。

值得一看 7天前 0

Figma：做表单对齐更快（用栅格+组件约束）

用栅格与组件约束快速建立表单对齐体系，减少手调像素的时间。

教程分享 1个星期前 0

Figma：做表单对齐更快（用栅格+组件约束）

用栅格与组件约束快速建立表单对齐体系，减少手调像素的时间。

教程分享 1个星期前 0

Figma：组件变体（Variants）怎么设计才不乱

从命名规则、属性拆分、交互状态三方面讲清 Figma Variants 的可维护做法。

教程分享 1个星期前 0

#设计

交付不靠嘴：用标注和组件规则让还原更稳定

组件库越做越乱多半是命名问题：一套可执行的规则

线性图标不统一会显得廉价：从线宽到语义的规范思路

信息层级怎么做才不乱：从阅读路线到组件权重的拆解

Figma 组件变体（Variants）实战：用一套属性管理按钮的状态与尺寸

组件库越做越乱多半是命名问题：一套可执行的命名规则

交付不靠嘴：用标注和组件规则让还原更稳定

字体系统怎么定才不乱：从层级到Token的一次性搭建

栅格不是束缚：用网格把页面做得更干净更稳定

什么是“非破坏性编辑”？用这5个习惯让PS文件更耐改

为什么你做的按钮“不够清晰”？对比度与WCAG的入门科普

矢量图和位图有什么区别？从放大锯齿到文件体积的底层逻辑

颜色值#FFFFFF是什么意思？HEX与RGB的换算与常见坑

PNG和JPG到底怎么选？透明背景、清晰度与体积一次说清

DPI和PPI有什么区别？分辨率、清晰度别再混了

RGB和CMYK的区别是什么？为什么颜色会“印出来变了”

TTF和OTF有什么区别？字体格式选择指南

Figma：做表单对齐更快（用栅格+组件约束）

Figma：做表单对齐更快（用栅格+组件约束）

Figma：组件变体（Variants）怎么设计才不乱

大家都在看

设计笔记