选择适合图标的线条（Line）和填充（Fill）风格，核心是匹配使用场景、品牌调性与用户认知习惯，需从功能目标、视觉逻辑、技术适配三个维度综合判断。以下是具体的选择方法和决策框架，帮助你精准匹配风格：
在纠结线条或填充前，先确定 2 个基础问题，缩小选择范围：
- 使用场景是什么？
图标是用于 App 界面、网页按钮、品牌物料，还是印刷品？不同场景对 “清晰度”“识别效率”“适配性” 的要求完全不同（例如手机端小尺寸图标更依赖 “简洁线条”，而海报大尺寸图标可用 “填充” 增强视觉冲击力）。
- 品牌 / 产品调性是什么？
是科技感（如工具类 App）、亲和力（如母婴产品）、极简感（如高端品牌），还是活泼感（如儿童 App）？线条和填充风格会直接传递调性（例如线条感 = 理性 / 精致，填充感 = 温暖 / 醒目）。
线条图标（Line Icon）以 “轮廓 + 留白” 为核心，特点是轻盈、简洁、易适配，适合追求 “低视觉干扰、高识别效率” 的场景。
- 小尺寸场景：如 App 底部导航栏（24-32px）、工具栏按钮、表单内图标（如 “编辑”“删除”）。
原因：小尺寸下，填充图标易因 “色块拥挤” 模糊，而线条图标通过清晰的轮廓，能快速传递含义（例：微信底部 “微信”“通讯录” 图标，早期均为线条风格，确保小尺寸下识别清晰）。
- 科技感 / 极简风产品：如工具类 App（备忘录、待办软件）、科技品牌（如数码产品说明书图标）。
原因：线条的 “线性感” 天然匹配 “理性、简洁” 的调性，避免填充色块带来的厚重感（例：苹果系统的 “设置”“日历” 图标，长期用细线条设计，传递极简科技感）。
- 需 “弱化存在感” 的辅助图标：如网页中的 “返回顶部”“下载提示”、文章中的 “分享”“收藏” 图标。
原因：线条图标视觉重量轻，不会抢主体内容的注意力，仅起到 “功能提示” 作用（例：知乎文章底部的 “点赞”“收藏” 图标，用细线条避免干扰阅读）。
- 多图标密集排列场景：如 App 的 “功能列表页”（如手机设置里的 “Wi-Fi”“蓝牙”“显示” 等图标）、数据仪表盘的指标图标。
原因：线条图标间的 “留白” 更充足，密集排列时不会产生 “视觉拥挤”，用户能快速扫读区分（例：手机系统设置页面，所有功能图标均为线条风格，避免色块叠加导致的混乱）。
- 需适配 “深色 / 浅色模式” 的图标：线条图标只需调整 “线条颜色”，即可轻松适配两种模式，无需重新设计填充色（填充图标可能需调整 “色块透明度”“边框对比”，成本更高）。
- 线条粗细：小尺寸（24px 内）用 “1-1.5px”，中尺寸（32-48px）用 “2-3px”，避免过细（模糊）或过粗（臃肿）；且同一套图标需保持粗细一致（例：所有图标统一用 “2px” 线条）。
- 线条圆角：优先用 “圆角线条”（亲和力强，适配现代设计），除非是 “工业风 / 复古风” 产品（可用直角线条）；圆角半径需统一（例：所有线条转角统一用 “2px” 圆角）。
填充图标（Fill Icon）以 “实心色块” 为核心，特点是醒目、有视觉重量、传递强烈存在感，适合需要 “突出重点、增强视觉冲击” 的场景。
- 大尺寸场景：如 App 启动页图标、海报 / Banner 中的图标、品牌 Logo 衍生图标（如活动宣传图标）。
原因：大尺寸下，填充色块能强化视觉记忆，避免线条图标 “单薄、缺乏张力”（例：支付宝 “蚂蚁森林” 的树木图标，用填充风格凸显品牌符号，远距离也能识别）。
- 高辨识度需求的核心图标：如 App 首页的 “核心功能入口”（如外卖 App 的 “下单” 图标、电商 App 的 “购物车” 图标）。
原因：填充色块的 “视觉重量高”，能快速吸引用户注意力，引导点击（例：美团 App 底部 “外卖” 图标，用黄色填充色块，成为视觉焦点，降低用户操作成本）。
- 温暖 / 活泼 / 亲和力调性的产品：如母婴 App、儿童教育产品、社交类 App（如小红书、豆瓣）。
原因：填充色块的 “饱满感” 传递温暖、可爱的情绪，比线条更有 “温度”（例：小红书的 “收藏”“分享” 图标，用粉色、红色填充，匹配女性用户为主的活泼调性）。
- 需要 “区分状态” 的图标：如 “选中 / 未选中”“启用 / 禁用” 状态（例：App 底部导航栏，选中的 “首页” 图标用填充风格，未选中的用线条风格，清晰传递当前页面）。
原因：填充与线条的对比，能让用户瞬间感知状态差异，比 “仅换颜色” 的区分度更高（例：微信底部导航栏，当前页面图标用 “蓝色填充”，其他用 “灰色线条”，状态一目了然）。
- 扁平化 / Material Design 风格的界面：现代扁平化设计中，填充图标是主流（如 Google 的 Material Design 规范，优先推荐填充图标），能与 “卡片、色块” 为主的界面风格更统一，避免线条图标与界面脱节。
- 是否加边框：
- 若界面元素 “无边框”（如纯色块卡片），填充图标可 “不加边框”（更简洁）；
- 若图标尺寸小、颜色与背景对比度低，可加 “细边框”（1px 同色系或白色边框）增强轮廓感（例：浅色背景上的浅粉色填充图标，加 1px 深粉色边框，避免 “融于背景”）。
- 填充色与背景的对比：需满足 “WCAG accessibility（无障碍）标准”—— 正常文本的颜色对比度不低于 4.5:1，确保不同视力用户都能识别（例：白色背景上的填充图标，避免用浅灰色，优先用黑色、深蓝色等高对比色）。
若单一风格无法满足需求，可采用 “线条 + 填充” 的混合风格，兼顾 “简洁” 与 “醒目”，常见两种形式：
- 核心区域填充，边缘线条勾勒：如 “购物车” 图标，车筐部分用填充色，车架用线条，既突出主体，又保留细节（例：淘宝购物车图标，橙色填充车筐 + 黑色线条车架，兼顾识别与视觉层次）。
- 部分填充（半填充）：用于传递 “部分完成” 状态（如进度类图标：“已完成 50% 的任务”，用半填充色块 + 线条轮廓，直观传递进度）。
注意：混合风格需控制 “复杂度”，避免线条与填充混乱（同一套图标中，混合逻辑需统一，要么都 “核心填充 + 边缘线条”，要么都 “半填充”）。
后，可通过以下 3 个问题快速验证选择是否合理：
- 场景适配性：小尺寸→优先线条，大尺寸→优先填充；密集排列→线条，核心入口→填充。
- 调性匹配度：科技 / 极简→线条，温暖 / 活泼→填充。
- 识别效率：是否能在 3 秒内让用户明白图标的含义？线条是否清晰无模糊？填充是否无对比度问题？
通过以上方法，可避免 “凭感觉选风格”，让线条与填充的选择更贴合功能目标，同时保证图标在视觉上统一、在体验上高效。
