阅读说明 描边实验
书签图标从线框骨架、描边选择到填充保存状态的三步设计示意
ICON NOTEBOOK · 原创图例

图标设计,让含义先被看见

从一枚书签开始,建立一组有理由的图形。
语义先行 网格留白 描边一致 光学校正 状态清晰
本次练习:用虚构阅读应用的图标,解释每一个设计选择。没有万能数值,只有可比较、可记录的取舍。

把一枚小图形做成清楚的入口

适合刚开始画图标的创作者,也适合需要说明设计理由的产品协作者。

先问动作。收藏是在表达喜欢,还是为了稍后阅读?不同目的会改变候选轮廓。再定规则。同组图标使用共同画布、描边和端点,再为特殊形状记录例外。回到界面。把图形缩到实际尺寸,与按钮文字并排检查。

本站全部图例是原创教学示例。“纸页”是虚构阅读应用,仅用于讲解。24格、2单位描边等数值均为练习设定,不是通用强制规范。

怎么阅读:新手按语义、网格、描边顺序开始;已有设计稿可按排错路径定位问题。

怎么练习:每次只改变一个参数,保留修改前后两版,并用一句话写下选择理由。

怎么判断:以当前任务的含义与可辨认程度为依据,不把个人偏好说成所有人的习惯。

原创图例 具体取舍 六篇详解 本地实验 状态示意 交付清单
6
篇主题详解
12
个阅读入口
6
组主题图例
1
个描边实验
8
条首页问答

12个阅读入口

6篇详解 + 6个重点 查看全部 →

六个关键动作

可执行步骤
01

写清动作

先把“保存文章到稍后读”写在画布旁,避免喜欢、下载和收藏共用一个符号。

02

搭起骨架

用共同画布与中心线组织图形,先确定轮廓,再决定需要保留哪些细节。

03

固定描边

将线宽、端点与连接方式一起记录,新增图标时先沿用,再说明例外。

04

对照校正

把圆、方、三角并排,记录微调前后的差异,避免只看坐标。

05

列出状态

写清默认、成功、处理中与不可用状态分别意味着什么。

06

完成交接

资源名称、画布参数和使用说明一起交付,接手者才能复现。

一组图标的六条约定

本练习的选择
24

共同画布

使用24格逻辑画布做练习,尺寸变化后仍需重新检查细节。

2

起始线宽

以2单位描边为起点,在线宽实验中观察留白如何改变。

3

对照尺寸

交付时看16、24、32像素版本,识别需要简化的结构。

1

单次变量

每次只调整线宽、位置或尺寸中的一项,保留明确参照。

0

虚构热度

学习顺序依据设计依赖,不使用点赞量或浏览量作为理由。

6

记录主题

把语义、网格、描边、校正、状态和交付串成完整过程。

把图标放回真实场景

语境决定取舍

阅读应用

收藏入口需要区分保存和喜欢。文字标签能帮助新用户理解图形的含义。

含义

创作工具

密集工具栏先检查轮廓差异,复杂细节留给大尺寸预览。

密度

警示教育

感叹号搭配具体原因和下一步说明,帮助识别问题并采取行动。

说明

文化导览

不要假设所有访客都熟悉同一符号。为陌生含义保留简明文字。

语境

从一句需求到交付包

流程顺序,非历史记录
01
写清动作
先把“保存文章到稍后读”写在画布旁,避免喜欢、下载和收藏共用一个符号。
02
搭起骨架
用共同画布与中心线组织图形,先确定轮廓,再决定需要保留哪些细节。
03
固定描边
将线宽、端点与连接方式一起记录,新增图标时先沿用,再说明例外。
04
对照校正
把圆、方、三角并排,记录微调前后的差异,避免只看坐标。
05
列出状态
写清默认、成功、处理中与不可用状态分别意味着什么。
06
完成交接
资源名称、画布参数和使用说明一起交付,接手者才能复现。

常见问题 · 设计问答

编辑整理,非用户评价
先画还是先找含义? 问答
先写动作、对象和结果,再列候选图形。外观选择应能回到这句话。
本站的数字是行业标准吗? 问答
不是。24格画布、2单位描边及检查尺寸都是本次原创练习设定。
细节多是不是更精致? 问答
细节需要服务辨认。缩小时挤在一起的横线,应删减或重新安排间距。
同组必须完全同尺寸吗? 问答
共享画布便于布局,实际轮廓可以通过有记录的小幅调整获得协调观感。
为什么使用虚构应用? 问答
为了让例子有明确语境,同时不把教学示意误当成真实产品案例或成果。
图标能完全替代文字吗? 问答
熟悉且稳定的动作可以评估简化标签;陌生功能和重要结果应保留清楚说明。
如何使用描边实验? 问答
进入描边详解,拖动线宽滑杆,再切换端点形状,对照大图和24像素图。
可以搜索哪些内容? 问答
首页搜索匹配卡片标题、摘要、栏目与来源;选择栏目可进一步缩小范围,点击“全部”重置。