文章封面

本文由 AI 生成,现在一点苦都吃不了了,哎

一、升级背景

站点自上线以来,favicon 与站点标识一直使用初版图标:橙色正圆底 + 白色圆润小写 "wi"。它在"能认出来"这个层面是合格的,但随着站点内容与个人品牌(数码博主 · 分享科技生活)的推进,初版在三个层面逐渐不够用:

  1. 字形层面 —— "wi" 为一体化手绘字形,笔画粗细对比弱,缩到 16px favicon 尺寸时细节糊成一团;
  2. 符号层面 —— 字母组合 "wi" 有识别度,但缺少与"数码博主"身份直接挂钩的视觉记忆点;
  3. 容器层面 —— 正圆底在小尺寸场景(浏览器标签页、移动端主屏)与其他圆形图标缺乏差异化,且未适配 iOS 图标的圆角方形体系。

本次升级在保留 "w + 点" 识别核心的前提下,对字形、符号、容器、色彩四个层面做了系统性重构。

二、核心变化

2.1 字形:从"手写感"到"有动势的几何"

  • 保留小写 w 作为唯一主字母——"wi = waistu" 的缩写逻辑不变;
  • 笔画重构为​圆头描边路径​(stroke-width 40,round cap / round join),四段笔画粗细完全一致,三个谷位保持呼吸感;
  • 两侧笔画带轻微倾斜动势,起笔收笔弧线自然下垂,比初版更像"一次写成的笔画",减少了原字形的笨拙感;
  • 去掉 "i" 的竖笔画,只保留其上方的圆点——字母层面收敛为 "w",圆点独立为品牌符号(见 2.2)。

2.2 符号:圆点 → 相机镜头

这是本次升级的记忆点所在:

  • 原本 "i" 上方的圆点,脱离字母、悬浮于 w 右侧笔画上方,重构为一枚​相机镜头​(白底外圈 + 渐变光圈内环 + 中心对焦点 + 双卫星装饰点);
  • 镜头即"记录视角"——直指数码博主"用镜头和文字记录科技生活"的内容定位,让 logo 从"一个缩写"变成"一个身份";
  • 镜头与 w 保留悬浮间距,整体构成 "w·"(w + 光点)的阅读节奏,保留了初版 "wi" 的亲切感。

2.3 容器:正圆 → iOS 连续曲率圆角方形

  • 底板从正圆改为 ​500×500 连续曲率圆角方形​(squircle),圆角比例约 22.4%,对齐 iOS / macOS 图标体系;
  • 连续曲率(非简单圆弧)保证了从直边到圆角的曲率平滑过渡,在主屏网格、标签页等密集小尺寸场景下视觉更"安静";
  • 同时输出​无底板透明版​,适配浅色网页、文档水印等场景。

2.4 色彩:单色橙 → 双渐变系统

角色 规格 用途
品牌主渐变 #F98E1B → #F26B33 → #EF4A52(径向,光源左上 41.7% / 26.2%) 底板、大尺寸背景
字标渐变 #F98E1B → #EF4A52(线性,上→下) 透明底版的 w 与镜头
光圈环渐变 #F98E1B → #EF4A52 镜头内环
点缀渐变 #F98E1B → #F1544B 卫星装饰点
字标白 #FFFFFF 圆角方形版笔画
  • 延续了初版的​橙色基因​​(品牌资产延续,老用户一眼能认出),但把"一整块平涂橙"升级为有光源、有层次的渐变系统;
  • 渐变光源固定在左上角,与 iOS 系统图标的受光习惯一致,放在主屏上不突兀。

三、设计原则(为什么这么改)

  1. ​小尺寸优先​:所有改动以 favicon 16px 下依然可识别为底线——粗笔画、高对比、镜头外圈简化为两个同心圆,缩到最小不糊;
  2. ​一个符号讲一个身份​:w(waistu)+ 镜头(数码记录),不加第三个元素;
  3. ​延续优于颠覆​:橙色基因、圆润笔画、"w + 点"结构全部保留,这是一次升级而非换牌;
  4. ​系统化而非单张图​:色彩、容器、笔画参数全部参数化(SVG 工程),任意场景可从源文件再导出。

1793792637629.webp


四、应用规范速查

场景 使用版本
favicon / 移动端主屏 圆角方形版(500 或 512px 导出)
浅色网页、文章题图 透明底版(w 与镜头为橙渐变)
深色模式页头 圆角方形版,或透明底白色描边版本(待补充)
社媒头像 圆角方形版(居中,四周不留边)

​最小使用尺寸​:16px(此时镜头简化为白点,光圈环可读性由高对比保证)。

五、交付物清单

  • 升级版 LOGO.svg —— 500 画板圆角方形版(源工程,含全部渐变定义)
  • 透明底版 SVG(w + 镜头橙渐变,无底板)
  • PNG 导出:1024 / 512 / 256 三档,覆盖 favicon 与一般网页场景
— 感谢阅读 —

一起交流

分享你的思考,让讨论更进一步。