跳到设计规范
网鱼的三位小鱼伙伴在庭院交流
网鱼游于网络,创造于数字世界。
NETFISH DESIGN

网鱼的设计素材与样式

横幅、侧栏插画、按钮和每一类徽章,各归其位。
按用途查看正在使用的样式,沿用同一套超椭圆、字体和间距。

论坛风格 · 2026.10
—件素材—个用途分组

正在读取素材清单…

Banner 横幅

首页、版块和独立页面的宽幅横幅,按使用场景分别排列。

01

桌面横幅 2400 × 478;手机版使用同系列独立构图。角色居中,左侧预留 Logo,底部避让导航。

分类与大按钮

最新回复、最新发表、精华、发帖与抽奖入口集中展示,下面接同一套操作按钮。

03

一套按钮,四种用途

蓝色用于主要操作;灰色用于次级操作;绿色表示完成或已关注;红色只表达危险操作。此处均为外观演示。

尺寸与状态放在一起

小 / 标准 / 大:高 32 / 36 / 40px,横向内边距 12 / 16 / 20px。图标 16px,与文字间隔 8px。可悬停、按下或用 Tab 查看焦点。

用法与优先级

场景建议避免
提交 / 发布一个蓝色主按钮同组多个主操作
保存 / 返回灰色次按钮或文字链接所有入口都做实体按钮
删除 / 撤销红色,清楚说明动作把红色当作强调装饰
工具操作图标按钮配可访问名称用表情符号代替图标
处理中防止重复点击并给出文字只转圈、没有状态说明

表单也遵循相同的秩序

输入框高 36px,标签与输入框间距 8px。请填写这项内容。错误同时使用文字说明。
查看历史按钮方案

这些页面保留设计过程。新页面统一使用上面的现行样式。

版块插画

方形版块插画单独成组,不与宽幅 Banner、侧栏宣传图混排。

04

图标与徽章

按实际用途分组:排序、帖子类型、版块分类、交易状态、反馈状态与身份。

05

首页排序徽章

帖子类型徽章

版块分类徽章

交易状态徽章

帖子状态徽章

身份标记

页脚工具标记

帖子印章

精华、原创、推荐等盖在帖子内容上的印章,独立于标题旁的小徽章。

06

Logo 与小标识

网鱼品牌标识与小尺寸应用图标,统一比例与安全留白。

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
16px
24px
32px
  • 图标与文字 8px;行内操作、列表卡片间距 12px。
  • 内容卡内边距 16–24px;手机优先 16px。
  • 区块间距 24–32px;长文分组可用 44px。

基于 4px 网格;优先复用 --pd-space-1…5,不要随意新增接近的数值。

超椭圆作为共同轮廓

按钮 16.56px
卡片 22px
方形头像

采用原生 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 与素材,不使用表情符号装饰界面。
下载完整规范