设计笔记 / 描边

描边规则:线宽、端点与圆角如何配合

改变描边会同时改变边界和空隙。本页用24格文件图标比较1、2、3单位的线宽:细线留下更多空气,粗线更有分量,却会压缩内部横线和外框之间的空间。选择时应把图标放在实际按钮和文字旁边。

同一文件图标分别使用1、2、3单位描边,内部横线间隙逐渐变小
本站原创图例 · 同一文件图标分别使用1、2、3单位描边,内部横线间隙逐渐变小

先定线的语言

圆端点让开放线段两端更柔和;平端点更直接,但短线可能显得更短。圆角连接会柔化折线转弯,尖角则强调方向。本练习选择2单位描边、圆端点与圆连接,服务于阅读应用的轻柔界面;这是一组配套取舍,不是对其他风格的否定。

原创例子:三条横线为什么糊成一块

假设文件外框内部有三条横线,中心间距都是3单位。线宽从1增加到3时,相邻横线之间的空隙会被挤掉。只把整组描边加粗无法解决这个问题。本练习保留2条内容线,将它们拉开,再和外框检查间距,让小尺寸依然能看出“文件”。

建立描边规则的步骤

先挑文件、搜索、书签三种结构,确保同时覆盖闭合、曲线和斜线。用同一线宽画一版,再只改变线宽做对照。固定端点后调整圆角,避免一轮同时改所有参数。最后在浅底和深底并排看,记录需要删减的细节,而不单靠放大稿做判断。

适用场景与限制

工具栏图标适合把线条规则集中管理。极小的提示符号可能需要更简单的实心轮廓;大幅装饰图则可使用更细的线。不能把一套24格线稿无限缩小后认定仍可读,最终判断应来自使用尺寸。

用下方实验对比

拖动线宽滑杆,比较大图与24像素预览。大图便于观察端点,小图用于观察横线间隙。这个实验仅改变一个固定图形的参数,不会自动生成完整图标系统;尝试记录你开始觉得内部拥挤的位置,再决定删线或改间距。

描边实验 · 一次只改一个参数

拖动线宽,比较放大图和24像素实际预览。结果只在当前页面显示。

144像素
24像素

当前:2单位描边,圆端点。

本页问答

线宽一定要是整数吗?

不必。可以按具体显示效果选择,但交付时应记录数值和显示尺寸,避免同组图标无意中出现多个近似线宽。

圆角越大越友好吗?

圆角只是形态语言的一部分。过大的圆角可能让折角文件或方向箭头失去辨识特征,应先确保轮廓清楚。