一款用于跑步和健身应用的高级 iOS 应用图标，采用 风格化的抽象奔跑人物动态造型，由流动的 渐变丝带构成，从充满活力的珊瑚色过渡到鲜艳的 洋红色。人物通过 拖尾的运动元素暗示速度与向前的动量。背景为深海军蓝， 人物后方有微妙的径向渐变提亮。动态、 充满活力、令人向往。柔和光照，人物周围有微妙光晕。 圆角方形格式，1024x1024px。 遵循以下规格以及所附的示例图标设计： 这些规格定义了顶级 iOS/macOS 应用中见到的优质、现代应用图标的视觉语言。目标是制作出感觉精致、令人难忘、配得上旗舰产品的图标。 --- ## 1. 画布与形状 ### 基础形状 - **格式：** 方形，带连续圆角（iOS“超椭圆”squircle） - **圆角半径：** 约为图标宽度的 22-24%（模仿 Apple 的超椭圆） - **宽高比：** 1:1 - **推荐分辨率：** 1024×1024px（缩小后依然清晰） ### 安全区域 - 将主要元素保持在画布中心 80% 范围内 - 允许微妙效果（光晕、阴影）接近边缘但不要被裁切 --- ## 2. 背景处理 ### 纯色背景 - **深色/黑色：** 纯黑（#000000）到深炭灰（#1C1C1E）——营造戏剧感，让元素突出 - **鲜艳纯色：** 高饱和度单色填充（电光蓝 #007AFF、暖橙 #FF9500） - **渐变背景：** 微妙的从上到下或径向渐变，增加深度 ### 渐变类型（使用时） | 类型 | 描述 | 示例 | |------|-------------|---------| | 线性 | 柔和过渡，通常顶部较亮 | 蓝天渐变 | | 径向 | 中心发光效果，边缘较暗 | 聚光灯效果 | | 角度 | 扫掠式颜色过渡 | 虹彩表面 | ### 纹理（微妙） - 细密的垂直/水平线条，营造金属或织物感 - 1-3% 不透明度的噪点颗粒，增加自然温暖感 - 避免与主符号竞争的重纹理 --- ## 3. 色彩调色板 ### 主调色板特征 - **高饱和度：** 颜色鲜艳但不霓虹 - **浓郁深色：** 黑色和海军蓝占据显著位置 - **选择性亮色：** 强调色少量使用以增强冲击力 ### 推荐色系 #### 冷色光谱 ``` 海军蓝/深蓝： #0A1628, #1A2744, #2D4A7C 电光蓝： #007AFF, #5AC8FA, #64D2FF 紫色/紫罗兰： #5E5CE6, #BF5AF2, #AF52DE 青绿/青色： #30D5C8, #5AC8FA, #32ADE6 ``` #### 暖色光谱 ``` 橙色： #FF9500, #FF6B35, #FF3B30 粉色/珊瑚色： #FF6B8A, #FF2D55, #FF375F 桃色/鲑鱼色： #FFACA8, #FF8A80, #FFB199 ``` #### 中性色 ``` 纯黑： #000000 柔和黑： #1C1C1E, #2C2C2E 白色： #FFFFFF 米白： #F5F5F7, #E5E5EA ``` ### 色彩和谐规则 - 每个图标限制为 2-3 种主导颜色 - 使用互补或类似关系 - 一种颜色应占主导（60%），次要色（30%），强调色（10%） --- ## 4. 光照与深度 ### 光源 - **位置：** 左上或正上方（一致的 45° 角） - **质量：** 柔和、漫射——没有生硬阴影 - **产生：** 上表面的微妙高光，下方的阴影 ### 深度技巧 #### 高光 - 3D 形体顶部边缘的柔和白色/浅色渐变 - 镜面反射作为小而亮的点（不要过强） - 朝向光源的边缘有轮廓光 #### 阴影 - **投影：** 柔和、漫射，10-20% 不透明度，轻微 Y 偏移 - **内阴影：** 非常微妙，增加凹陷效果 - **接触阴影：** 物体正下方更深、更紧的阴影 #### 分层 - 元素应看起来漂浮在背景之上 - 使用大气透视（远处元素略微朦胧） - 重叠形状创造自然层次 --- ## 5. 符号与图标设计 ### 风格方法 #### A. 立体/3D 物体 - 柔和、圆润的形态，具有清晰的体积感 - 微妙的渐变暗示曲率 - 示例：纸飞机、打开的书、球体 #### B. 带深度线索的扁平风格 - 简化形状，配合策略性阴影/高光 - 干净的几何形状，带有轻微渐变 - 示例：火焰图标、指南针表盘 #### C. 抽象/几何 - 重叠的半透明形状 - 互锁形态创造视觉趣味 - 示例：重叠的菱形、三角形构图 #### D. 玻璃拟态/半透明 - 磨砂玻璃效果，带模糊 - 看起来具有透明度的形状 - 微妙的折射和颜色渗透 ### 符号特征 - **简洁性：** 在 16×16px 下可识别 - **平衡：** 视觉重量居中或有意动态 - **原创性：** 避免通用剪贴画感 - **隐喻：** 符号与应用程序功能明确相关 ### 推荐符号比例 - 主符号：图标画布的 50-70% - 边缘周围留出呼吸空间 - 光学居中（可能与数学中心不同） --- ## 6. 材质与表面质感 ### 哑光表面 - 柔和渐变，没有锐利高光 - 可能有微妙纹理 - 颜色看起来坚实、沉稳 ### 光泽/反光表面 - 明显的高光和反射 - 明暗区域之间对比度增加 - 暗示玻璃、塑料或抛光金属 ### 金属表面 - 线性或径向渐变模仿金属光泽 - 银色/铬色用冷色调，金色/青铜色用暖色调 - 可选细纹理线条 ### 玻璃/半透明 - 降低不透明度（60-85%） - 对后方元素产生模糊效果 - 带浅色边缘的着色 - 微妙的内发光 ### 纸张/织物 - 柔和、柔和的颜色 - 非常微妙的纹理 - 柔和阴影暗示柔韧性 --- ## 7. 效果与润色 ### 发光效果 - **外发光：** 明亮元素周围的柔和光晕，5-15% 不透明度 - **内发光：** 微妙的边缘光照，创造体积感 - **颜色发光：** 与元素颜色匹配的着色光晕（营造氛围） ### 反射 - 漂浮物体下方微妙的地面反射（非常微弱） - 光泽表面上的环境反射 - 暗示光源的镜面高光 ### 形状内渐变 - 多停止渐变，实现复杂颜色过渡 - 径向渐变，呈现球体外观 - 网格渐变，实现有机、流动的着色 ### 模糊与景深 - 分层构图的背景模糊 - 5-20px 的高斯模糊，营造大气效果 - 仅在暗示运动时使用运动模糊 --- ## 8. 构图原则 ### 视觉平衡 - **居中：** 符号位于光学中心（经典、稳定） - **动态：** 轻微偏移创造能量和动感 - **不对称：** 有意的不平衡，配合视觉配重 ### 负空间 - 充裕的留白/呼吸空间 - 背景是设计的一部分，而不仅仅是空白 - 负空间可以形成次要形状 ### 焦点 - 一个清晰的高对比度/细节区域 - 视线应首先落在最重要的元素上 - 辅助元素在视觉上后退 ### 比例对比 - 大小元素的混合创造趣味 - 主要主符号占主导地位，细节含蓄微妙 - 避免用等大的元素造成杂乱 --- ## 9. 风格变体 ### 极简暗色 - 黑色或极深背景 - 单一明亮元素或单色符号 - 高对比度，戏剧感强 - 示例：火焰图标、股票图表 ### 鲜艳渐变 - 多色渐变背景 - 上方为白色或浅色符号 - 充满活力，现代感强 - 示例：Telegram、图书应用 ### 柔和轻盈 - 明亮通透的背景（白色、粉彩色） - 带柔和阴影的彩色符号 - 友好、平易近人的感觉 - 示例：Altitude 应用、手势图标 ### 玻璃拟态 - 半透明、磨砂质感元素 - 不同透明度的层叠形状 - 当代、精致的感觉 - 示例：快捷指令图标、重叠形状 ### 3D 渲染 - 逼真的 3D 物体 - 复杂的光照与材质 - 高级、可触摸的质感 - 示例：球体、飞机、书本
