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

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

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

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

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

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

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

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

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

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

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

12个阅读入口

7篇详解 + 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像素图。
可以搜索哪些内容? 问答
首页搜索匹配卡片标题、摘要、栏目与来源;选择栏目可进一步缩小范围,点击“全部”重置。