feat: 添加ReadMD图标设计和设计哲学文档
- 设计Precision Elegance视觉哲学 - 创建16/48/128尺寸SVG图标 - 图标融合文档、MD标识和阅读隐喻 - 添加docs/design-philosophy.md设计文档 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
51272b3035
commit
f83795eeb2
13
docs/design-philosophy.md
Normal file
13
docs/design-philosophy.md
Normal file
@ -0,0 +1,13 @@
|
||||
# Design Philosophy: Precision Elegance
|
||||
|
||||
## 视觉哲学宣言
|
||||
|
||||
**形式与功能的纯粹统一**。在这个数字时代,图标不应只是装饰,而应成为功能本身的视觉化身。每一个像素都承载意义,每一条线条都讲述故事。设计追求的不是复杂,而是精准——在最简单的形态中蕴含最丰富的表达。
|
||||
|
||||
**留白的诗意**。空间不是空洞,而是呼吸的间隙。元素之间的距离比元素本身更重要。负空间是沉默的守望者,它让主体得以彰显,让视线得以休憩。优秀的图标设计如同精密仪器,每一个间隙都经过计算,每一处留白都恰如其分。
|
||||
|
||||
**克制的色彩语言**。色彩应当克制而非张扬。采用有限的色板,通过精妙的明度变化创造层次。主体色与辅助色之间建立清晰的视觉层级,让信息流动自然顺畅。颜色服务于识别,而非装饰;支持功能,而非喧哗。
|
||||
|
||||
**细节即上帝**。在肉眼不可见的层面依然保持严谨。边缘的锐利度、圆角的曲率、元素的居中程度——这些看不见的细节决定了作品的整体气质。博物馆级的工艺标准意味着:即使缩小到16像素,每一个细节依然经得起审视。这是一位顶级工匠的作品,而非流水线上的复制品。
|
||||
|
||||
**形式的美学传承**。从瑞士极简主义到包豪斯的功能美学,从日本平面设计的留白智慧到当代数字界面的精确网格,优秀的图标设计站在历史的美学肩膀上。借鉴经典设计语言不是为了复制,而是为了在传承中寻找永恒的视觉真理。
|
||||
@ -1,8 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" fill="none">
|
||||
<rect width="128" height="128" rx="24" fill="#22C55E"/>
|
||||
<path d="M90 28H38a10 10 0 0 0-10 10v52a10 10 0 0 0 10 10h52a10 10 0 0 0 10-10V38l-26-26z" fill="white"/>
|
||||
<path d="M58 38l18 18-18 18" stroke="#22C55E" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M68 56h28" stroke="#22C55E" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M68 70h28" stroke="#22C55E" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M68 84h16" stroke="#22C55E" stroke-width="4" stroke-linecap="round"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||
<defs>
|
||||
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1a2e"/>
|
||||
<stop offset="100%" stop-color="#16213e"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="128" height="128" rx="20" fill="url(#bgGrad)"/>
|
||||
<path d="M24 16h64l16 16v72a4 4 0 0 1-4 4H24a4 4 0 0 1-4-4V20a4 4 0 0 1 4-4" fill="#f8f9fa"/>
|
||||
<path d="M104 16v12h12" fill="#dee2e6"/>
|
||||
<g stroke="#4f46e5" stroke-width="4" stroke-linecap="round">
|
||||
<path d="M36 52l20 20-20 20"/>
|
||||
<path d="M64 72h36"/>
|
||||
<path d="M36 100h24"/>
|
||||
</g>
|
||||
<text x="36" y="40" font-family="system-ui, sans-serif" font-size="18" font-weight="bold" fill="#4f46e5">MD</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 605 B After Width: | Height: | Size: 752 B |
@ -1,5 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
|
||||
<rect width="16" height="16" rx="2" fill="#22C55E"/>
|
||||
<path d="M12 4H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6l-4-4z" fill="white"/>
|
||||
<path d="M8 5.5L10.5 8 8 10.5" stroke="#22C55E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<rect width="16" height="16" rx="2" fill="#1a1a2e"/>
|
||||
<path d="M3 2h8l2 2v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1" fill="#f8f9fa"/>
|
||||
<path d="M11 2v2h2" fill="#dee2e6"/>
|
||||
<path d="M4 7h5M4 9h4" fill="#4f46e5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 342 B After Width: | Height: | Size: 291 B |
@ -1,8 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<rect width="48" height="48" rx="8" fill="#22C55E"/>
|
||||
<path d="M34 10H14a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h20a4 4 0 0 0 4-4V14l-10-10z" fill="white"/>
|
||||
<path d="M22 14l7 7-7 7" stroke="#22C55E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M26 21h10" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M26 26h10" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M26 31h6" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
||||
<defs>
|
||||
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1a2e"/>
|
||||
<stop offset="100%" stop-color="#16213e"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="48" height="48" rx="8" fill="url(#bgGrad)"/>
|
||||
<path d="M10 6h22l6 6v28a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2" fill="#f8f9fa"/>
|
||||
<path d="M38 6v4h4" fill="#dee2e6"/>
|
||||
<path d="M14 18l8 8-8 8M26 26h12M14 34h8" stroke="#4f46e5" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 583 B After Width: | Height: | Size: 567 B |
Loading…
x
Reference in New Issue
Block a user