描边规则:线宽、端点与圆角如何配合
改变描边会同时改变边界和空隙。本页用24格文件图标比较1、2、3单位的线宽:细线留下更多空气,粗线更有分量,却会压缩内部横线和外框之间的空间。选择时应把图标放在实际按钮和文字旁边。
先定线的语言
圆端点让开放线段两端更柔和;平端点更直接,但短线可能显得更短。圆角连接会柔化折线转弯,尖角则强调方向。本练习选择2单位描边、圆端点与圆连接,服务于阅读应用的轻柔界面;这是一组配套取舍,不是对其他风格的否定。
原创例子:三条横线为什么糊成一块
假设文件外框内部有三条横线,中心间距都是3单位。线宽从1增加到3时,相邻横线之间的空隙会被挤掉。只把整组描边加粗无法解决这个问题。本练习保留2条内容线,将它们拉开,再和外框检查间距,让小尺寸依然能看出“文件”。
建立描边规则的步骤
先挑文件、搜索、书签三种结构,确保同时覆盖闭合、曲线和斜线。用同一线宽画一版,再只改变线宽做对照。固定端点后调整圆角,避免一轮同时改所有参数。最后在浅底和深底并排看,记录需要删减的细节,而不单靠放大稿做判断。
适用场景与限制
工具栏图标适合把线条规则集中管理。极小的提示符号可能需要更简单的实心轮廓;大幅装饰图则可使用更细的线。不能把一套24格线稿无限缩小后认定仍可读,最终判断应来自使用尺寸。
用下方实验对比
拖动线宽滑杆,比较大图与24像素预览。大图便于观察端点,小图用于观察横线间隙。这个实验仅改变一个固定图形的参数,不会自动生成完整图标系统;尝试记录你开始觉得内部拥挤的位置,再决定删线或改间距。
描边实验 · 一次只改一个参数
拖动线宽,比较放大图和24像素实际预览。结果只在当前页面显示。
当前:2单位描边,圆端点。
本页问答
线宽一定要是整数吗?
不必。可以按具体显示效果选择,但交付时应记录数值和显示尺寸,避免同组图标无意中出现多个近似线宽。
圆角越大越友好吗?
圆角只是形态语言的一部分。过大的圆角可能让折角文件或方向箭头失去辨识特征,应先确保轮廓清楚。