ICON NOTEBOOK · 原创图例
图标设计,让含义先被看见
从一枚书签开始,建立一组有理由的图形。
语义先行
网格留白
描边一致
光学校正
状态清晰
本次练习:用虚构阅读应用的图标,解释每一个设计选择。没有万能数值,只有可比较、可记录的取舍。
把一枚小图形做成清楚的入口
适合刚开始画图标的创作者,也适合需要说明设计理由的产品协作者。
先问动作。收藏是在表达喜欢,还是为了稍后阅读?不同目的会改变候选轮廓。再定规则。同组图标使用共同画布、描边和端点,再为特殊形状记录例外。回到界面。把图形缩到实际尺寸,与按钮文字并排检查。
本站全部图例是原创教学示例。“纸页”是虚构阅读应用,仅用于讲解。24格、2单位描边等数值均为练习设定,不是通用强制规范。
怎么阅读:新手按语义、网格、描边顺序开始;已有设计稿可按排错路径定位问题。
怎么练习:每次只改变一个参数,保留修改前后两版,并用一句话写下选择理由。
怎么判断:以当前任务的含义与可辨认程度为依据,不把个人偏好说成所有人的习惯。
6
篇主题详解
12
个阅读入口
6
组主题图例
1
个描边实验
8
条首页问答
把操作意图写成一句话,再比较书签、星星与爱心的含义,避免图形漂亮却指向错误动作。
本站原创· 步骤与问答SVG图例
网格留白:用24格画布建立一组图标
用24格画布、中心轴和安全留白组织结构,理解画布边界与可见轮廓的差别。
本站原创· 步骤与问答SVG图例
描边规则:线宽、端点与圆角如何配合
比较同一文件图标的1、2、3单位描边,观察线宽怎样改变内部空间和整体气质。
本站原创· 步骤与问答SVG图例
光学校正:为什么对齐了仍然显得歪
把圆、方和播放三角并排观察,区分数学中心、包围盒中心和视觉重心。
本站原创· 步骤与问答SVG图例
状态表达:让选中、禁用与警示有区别
为书签设计默认、已保存和不可用状态,用文字和形状共同说明结果。
本站原创· 步骤与问答SVG图例
交付检查:从设计稿到可维护的SVG
整理命名、画布、状态和组件说明,避免只交一堆无法辨认用途的图形文件。
本站原创· 步骤与问答SVG图例
书签、星星与爱心:候选比较
比较三个候选对同一任务的不同承诺。
本站原创· 步骤与问答SVG图例
从中心线开始:网格操作步骤
跟随骨架、缩小、例外记录三个阶段。
本站原创· 步骤与问答SVG图例
动手调整:描边线宽实验
拖动滑杆,直接观察线宽与间隙变化。
本站原创· 步骤与问答SVG图例
记录一次有理由的光学校正
用具体数值、用途和参照写清偏移理由。
本站原创· 步骤与问答SVG图例
灰度与键盘:状态自查
检查颜色以外的状态线索与焦点区别。
本站原创· 步骤与问答SVG图例
资源名称与说明:交付自查
沿着资源、组件和使用说明核对交付内容。
本站原创· 步骤与问答SVG图例
学习路径 · 按设计依赖排序
- 1语义选择:收藏为什么不直接用爱心先定含义
- 2网格留白:用24格画布建立一组图标建立坐标
- 3描边规则:线宽、端点与圆角如何配合统一线条
- 4光学校正:为什么对齐了仍然显得歪修正观感
- 5状态表达:让选中、禁用与警示有区别覆盖交互
- 6交付检查:从设计稿到可维护的SVG整理资源
排错路径 · 先理解再看外观
- 1语义选择:收藏为什么不直接用爱心看不懂
- 2状态表达:让选中、禁用与警示有区别状态不明
- 3描边规则:线宽、端点与圆角如何配合内部太挤
- 4网格留白:用24格画布建立一组图标排不整齐
- 5光学校正:为什么对齐了仍然显得歪看着偏移
- 6交付检查:从设计稿到可维护的SVG交接遗漏
六个关键动作
可执行步骤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像素图。
阅读提示
可以搜索哪些内容? 问答
首页搜索匹配卡片标题、摘要、栏目与来源;选择栏目可进一步缩小范围,点击“全部”重置。
阅读提示