Banner 横幅
首页、版块和独立页面的宽幅横幅,按使用场景分别排列。
01桌面横幅 2400 × 478;手机版使用同系列独立构图。角色居中,左侧预留 Logo,底部避让导航。
版块插画
方形版块插画单独成组,不与宽幅 Banner、侧栏宣传图混排。
04图标与徽章
按实际用途分组:排序、帖子类型、版块分类、交易状态、反馈状态与身份。
05首页排序徽章
帖子类型徽章
版块分类徽章
交易状态徽章
帖子状态徽章
身份标记
页脚工具标记
帖子印章
精华、原创、推荐等盖在帖子内容上的印章,独立于标题旁的小徽章。
06Logo 与小标识
网鱼品牌标识与小尺寸应用图标,统一比例与安全留白。
07浅色表面保留原渐变,复杂背景可使用单色反白;不拉伸、不旋转。安全留白至少为可见标识高度的 1/4。
图片加载与进度
鱼始终位于占位框正中心,以淡蓝色从左向右填满,保留图片本来的比例与位置。
08
等待图片信息
未知总大小时,灰鱼轻轻拉长、回弹。去掉圆圈,动效不推动鱼的位置;减少动态效果时保持静止。
手动查看填色
这里仅演示填色外观,不进行真实下载。帖子中按已收到的字节与文件总大小计算进度,不用时间模拟百分比。
进度状态
25%
50%
75%
100% · 正在显示
有真实进度时,鱼停止拉伸,只有淡蓝色的填充边界移动。文件下载完后还需准备显示,整张图就绪才替换占位。
失败与完成
加载失败加载完成
失败时保留占位和明确提示;完成后隐藏灰底与鱼。进度读取失败会尝试原生图片加载,不改变原图地址与放大查看。
本区直接同步帖子图片的现行样式和鱼形遮罩。上述比例是外观示例;真实占位使用图片登记的宽高,下载进度以实际字节为准。
基础规范
以阅读为中心。蓝色表达操作,留白区分内容,装饰保持克制。
09
颜色与语义
主色 / 回复#0052D9
发表#17A34A
热门#ED8500
精华#7856C8
正文 #111827辅助 #6B7280边线 #E5E7EB
蓝、绿、橙、紫分别沿用首页的回复、发表、热门、精华配色。深色模式使用独立表面与文字色,水光按钮保留原主色。
字体与层级
网鱼 · 页面主标题24 / 600
清晰的章节标题20 / 600
内容分组与小标题16 / 600
分享技术,也分享数字生活。14 / 400
辅助说明、时间与标签12 / 400
界面采用系统无衬线字体;代码与既有等宽号码使用自托管 Space Mono 400 / 700。正文常规行高 1.75,说明长文 1.85–1.95,标题 1.4。正文字重以 400、500、600 为主,不额外拉开字距。
间距有统一的节奏
- 图标与文字 8px;行内操作、列表卡片间距 12px。
- 内容卡内边距 16–24px;手机优先 16px。
- 区块间距 24–32px;长文分组可用 44px。
基于 4px 网格;优先复用 --pd-space-1…5,不要随意新增接近的数值。
超椭圆作为共同轮廓
采用原生 corner-shape: squircle。按钮半径为高度 × 0.46;列表卡 18px、侧栏卡 20px、内容卡 22px。圆形工具按钮保持正圆。
普通圆角回退为目标半径 × 0.54。内外框嵌套时,内层半径减去内边距,避免轮廓互相挤压。
卡片与布局
白色内容面、细边线、明确的分组。让内容本身成为重点。
10
列表与侧栏的实际组合
12遇见同好,留下经验
在网鱼,聊技术,也聊数字生活。
列表卡 18px;侧栏卡 20px;卡内元素间距 8 / 12 / 16px。数字与辅助信息退后一级。
布局规则
| 页面宽度 | 最大 1200px,桌面居中 |
| 左右留白 | 桌面 24px;手机 16px |
| 主栏与侧栏 | 主栏自适应;论坛侧栏 300px |
| 卡片网格 | 等宽列;内容过长自然换行 |
| 窄屏 | 按阅读顺序堆叠;宽表格仅容器内滚动 |
| 层级 | 优先边线与间距;投影留给浮层 |
标题与说明对齐,卡片的操作区保持相同位置。常规内容不层层套框,也不为每段文字增加底色。
复用这套风格
字体、间距、按钮与素材一起带到下一个页面。
11把这套风格用到下一个页面
从字体、间距和组件开始,再选择合适的插画。复用同一套令牌,让不同页面保持网鱼的辨识度。
沿用网鱼论坛风格:蓝色主操作、W06 下沿水光按钮、原生超椭圆卡片;
正文 14px / 1.75,辅助 12px,标题 20–24px;
间距采用 8 / 12 / 16 / 24 / 32px,卡片内边距 16–24px;
工具使用统一线性图标,Banner 延续网鱼小鱼角色与温暖场景。
使用现有 Logo 与素材,不使用表情符号装饰界面。