鸟类资源库网站设计：从信息架构到交互系统的完整落地

做青海鸟类资源库这个项目之前，我一度以为鸟类图鉴网站是最好设计的网页类型——UI无非是图文列表，交互不过是搜索加筛选。真正接手兰亭妙微的这个作品项目之后才发现，这个判断错得离谱。查鸟和刷视频是完全不同的交互节奏：普通用户带着“刚刚在湖边看到的那只是什么鸟”的即时疑问进来，必须在十几秒内找到答案；而科研用户又会在这里待上一两个小时，核对数据、整理清单。两类用户放在同一个网站上，任何一个环节做得糙，都会被人直接放弃。

这篇文章把我们从信息架构、视觉语言、核心交互到设计系统落地的完整过程整理了一遍。它不只是在讲怎么给鸟类做资源库网站，而是想分享一个“科学内容类产品”在做UI与交互设计时，真正值得思考的那些问题。

1. 项目缘起：青海的鸟种很多，但“图谱”和“数据库”是两回事

1.1 网站要服务的两类人，和一个隐藏角色

青海的鸟类多样性远超多数人的想象。不算迷鸟和极不稳定的偶记录，光是能稳定观测到的野生鸟种就超过四百种，其中黑颈鹤、斑头雁、藏鹀、褐头朱雀这些物种，在全国的观鸟地图上都有着特殊分量。但这些数据大多躺在科研报告和观测记录表里，公众想看，缺少一个足够直观的入口。

发起方是青海本地的一家自然保护科普机构，他们最初的需求很朴素：把鸟种名录搬到网上，配图配文，做成一个“宣传窗口”。我们接项目时建议把这个定位再往上提一层——不是做一个漂亮的名录陈列馆，而是做一个能真正被科研用户和普通游客同时使用的“鸟类资源库”。这个建议直接决定了后面所有的设计走向。

围绕这个定位，我们花了两周做用户画像梳理。核心受众有两类：第一类是科研与保护工作者，需要按科属、保护级别、居留型做精确检索，拿到鸟种基础数据用于监测和报告；第二类是普通观鸟者、游客和自然教育用户，他们的典型诉求是“我在青海湖边看见一只水鸟，体形像鸭但嘴是黑的，这到底是谁”。

还有第三类容易被忽略的角色——生态科普的内容传播者。他们会把网站里的图片和信息转发到社交平台，当作科普素材。这个角色决定了我们必须在“分享卡片”这类细节上做投入，不能只把页面做好看就收工。

三类人不是三套网站，而是一个网站里的三条路径。最忌讳的做法，是把所有功能平铺在首页上，让每个人自己找入口。后面整个信息架构的设计，都在解决这个问题。

1.2 我们参考了ebird，但没有照搬它的逻辑

动手之前，团队做了一轮竞品调研。国际上的ebird、中国观鸟记录中心、还有几个英文鸟类图鉴App都看了个遍。ebird最让我佩服的是搜索与分布地图的配合，数据密度极高，专业用户可以在上面做很多科学分析；中国观鸟记录中心的优势是信息权威，背后有大量专家和志愿者积累。

但青海这个项目有一个关键差异：数据量级远没有ebird那么大，而且它拥有相比之下非常突出的“地域情感资产”——高原、湖泊、迁徙、候鸟。这些词本身就带着画面感和故事性。如果照搬ebird那种偏数据仓库的冷调子，页面会显得空旷，普通用户点进来很容易被吓退。

所以我们定的路线是：信息架构从“青海的地理观鸟动线”出发，而不是从“数据库字段”出发。也就是说，页面结构不是“界门纲目科属种”的学术展开，而是沿着“在什么场景下遇到什么鸟”这条线索来组织。分类学只作为底层支持，不当作唯一的访问路径。

这个决策在后来所有交互里被反复验证是对的。

2. 信息架构：四百多种鸟，怎么让任何人都找得到

2.1 找鸟的两种方式，以及如何让它们合并

鸟类图鉴里最常见的分类方式是按生态类群划分：游禽、涉禽、陆禽、猛禽、攀禽、鸣禽，再往下分到科。对专业用户来说，这个逻辑很自然，他们能分清鸻和鹬，也清楚雁形目和鸡形目的区别。但对普通游客，这套体系完全是天书。

我们的解法是做两层入口。第一层是标准的科学分类树，藏得稍微深一点，供专业用户使用；第二层是“外形与场景标签”，直接放在最显眼的位置——按体型大小、主要颜色、出现环境、常见季节来选。你不需要知道黑颈鹤属于鹤形目，只要记得它是“大个子、黑脖子、在湿地出现”，就能把它筛出来。

关键设计在于，这两套筛选条件不是隔离的，而是可以自由组合、互相叠加。举个例子，用户选“体型大 + 白色 + 湿地 + 夏季”，候选结果会精确落在大白鹭、白琵鹭、黑颈鹤等少数几个物种上，完全不依赖任何分类学知识。这个组合筛选在移动端尤其好用，因为它把“识别”这个专业动作变成了几个直觉选项。

为了让不知道从何下手的用户更快进入状态，首页专门做了四张入口卡片：按分类浏览、按颜色查找、按环境查找、按季节查找。每张卡片配一句场景化说明，比如“你是在草甸、湖边还是林子里碰到它的？”。这不是文案技巧，而是把用户记忆中的碎片信息翻译成可操作的查询条件。

2.2 列表页的密度与节奏

鸟种列表页是整个网站访问量最大的页面，它的排版密度直接影响用户是否愿意留下来继续翻。我们没有采用普通电商那种大卡片瀑布流，而是做了“中等密度卡片网格 + 侧边筛选栏”的布局。

每张鸟种卡片只放五个核心信息：中文名、学名、体长范围、保护等级徽章、缩略图。保护等级被设计成视觉徽章——国家一级保护用丹红标识，国家二级保护用暖橙，列入三有名录的用灰绿，无危物种不显示徽章。这样用户扫一眼列表，就能快速判断哪些是重点珍稀物种，视觉上又不会过于喧宾夺主。

列表项之间的间距用了12px，卡片内边距16px，这个数值是在反复对比后定下来的。太密，普通用户会产生“信息焦虑”；太疏，一屏只能显示三四只鸟，专业用户翻查效率骤降。最终的密度接近自然史博物馆图鉴的排版方式——图片居中偏上，文字信息集中在下部，视线可以横向快速扫过整行。

首屏懒加载也是从列表页开始做的。鸟类照片普遍比较大，四百多种鸟如果一次性全部加载，在高原上的弱网环境里基本就是灾难。我们按浏览位置渐进加载，滚到哪一屏才加载哪一屏，缩略图统一用WebP格式，单张控制在几十KB以内。

2.3 详情页：信息组织像“人物小传”

一只鸟的详情页，核心任务是回答三类问题：这是什么鸟、它有什么特征、我在哪里能看到它。所以详情页没有做成从上到下滚不到底的长文，而是用标签页组织信息，共五个标签：概览、形态、习性、分布、保护。

概览页放在第一位，是信息密度最高的页面。顶端是宽幅大图，紧跟着一句“识别要点”和一排关键参数表，包括体长、翼展、体重、居留型、保护级别。识别要点必须写在参数表上方，这是给“刚刚在野外碰到它”的用户看的，他们不需要立刻知道翼展数据，但需要一句话确认自己没认错鸟。

栖性和居留型的信息放在了“分布”页面，和分布地图联动。用户能看到这只鸟在青海是留鸟、夏候鸟还是旅鸟，哪个季节最容易观察到。每一条分布记录都注明来源和数据可信度，记录不足的区域明确标注“历史记录较少”，不做过度的猜测性绘制。

每个鸟种我们还写了一句口语化的“一句话认鸟”。比如斑头雁：头顶两条黑色纵纹，像梳了背头。这种表达比“头顶具黑色横斑”更容易被普通用户记住，但每一句都经过了专家确认，不会为了好记而牺牲准确性。这个细节成了后来很多用户留存的关键。

3. 视觉设计：把青海的湖、山和草甸提炼成一套色板

3.1 颜色不是从配色网站里挑的，是从地里长出来的

青海给人的第一视觉印象，是湖水的青玉色、高原夜空的墨蓝、湿地的苇草黄、裸岩的赭石色。我们把这四种颜色直接作为网站色彩系统的源头。

主色没有用饱和度很高的数码蓝，而是取了一种带绿调的青玉色，色值定在#15757B，用于品牌标识、主按钮和选中状态。深色用高原夜空感很强的墨蓝#17323F，承担导航底色和页脚。第一辅助色是湿地的苇草黄#C59B4D，用来做图标点缀和重点提示；第二辅助色是裸岩赭石#8E6E5E，用在次级信息和边框上。

这套颜色的饱和度被刻意压低，原因是鸟类摄影作品本身就色彩丰富，背景如果太鲜艳，图片会彻底被淹没。青玉色放在黑颈鹤修长的剪影后面，对比度非常舒服；苇草黄并不会和鸟类羽毛的黄色混淆，因为它更多出现在信息元素而非装饰元素上。

保护等级的功能色单独做了定义：一级保护#C24536，二级保护#D9822B，三有及无危倾向#4E7E5A。这些颜色只在徽章、图例和筛选状态中出现，不会蔓延到界面主视觉里。颜色一旦承担信息语义，就必须被严格控制在使用范围内。

我们还整理了一份色彩规范表，交付给前端开发时直接以CSS变量落地：

3.2 字体的“图鉴气质”是怎么来的

字体选择上，我们做了和一般科技网站不一样的决定。正文用思源黑体保证屏幕可读性，但鸟类名称和标题层级用了思源宋体，而且是把字重加到Semibold以上来用。

宋体图鉴网站的这类产品里往往被避讳，觉得“土”或者“旧”。但仔细想想，从《尔雅》到地方动物志，中国人认识动植物的方式一直带着印刷志书的人文感。宋体标题配上一张好的鸟类摄影图，天然就有《中国鸟类野外手册》的气质。这不是复古，是图鉴类产品该有的文化匹配。

数字和拉丁学名单独做了处理。学名采用衬线风格的西文字体，数字用等宽数字（tabular-nums），这样在参数表里排列时位数能严格对齐，不会出现小数点跳来跳去的情况。字号阶梯定为12/13/14/15/16/18/24/32/42。正文默认字号用了比较少见但实测更舒服的15px，行高1.65，因为鸟类参数表里数字和单位混杂，14px在低分辨率手机上容易串行，15px的留白余量正好够。

3.3 图片规范与弱网策略

鸟类图片是这个网站的命根子，但项目过程中图片问题最多。外部贡献的图片尺寸参差、带水印、清晰度不一，我们必须定一套统一的图片规则：封面统一裁4:3，详情页头图统一16:7，影像集保留原始比例但压缩到宽边不超过1600px。

更深一层的考虑是弱网环境。观鸟发生在野外，用户拿着手机站在湖边、草甸、山坡上，那里经常只有两格信号甚至完全离线。我们把图片分成几档加载：列表缩略图320px宽，详情页预览图720px宽，只有点击放大时才请求原图。所有图片都走懒加载，占位用轻量的骨架屏，而不是一张灰色占位图。

同时，对外部摄影师的贡献在图片角落加了一个小标签，不显眼但谁都能看到。这个设计后来帮我们收到了更多高质量的投稿，因为摄影师觉得自己的署名得到了尊重。

4. 核心交互：搜索、分布地图和“它到底是谁”

4.1 检索交互：让用户输得进去、查得到

搜索是这个网站最核心的交互，因为它承担的是“我就想知道这是啥”这种急躁需求。我们没有只做中文名字段匹配，而是建了四套索引：中文名、拼音全拼、拼音首字母、常见俗名。

比如搜“长耳鸮”，用户很少能立刻打出这个“鸮”字，但拼音chaoerxiao或首字母cex都能直接命中；更普遍的情况是用户只知道俗名“猫头鹰”，我们也把常见俗名收入了别名库。只要用户在青海听到过的叫法，基本都能搜到对应的鸟种。

这个搜索没有走远程接口。四百多种鸟的索引字段预编译成一个JSON文件，gzip压缩后不到300KB，随网页初始化时在本地加载。搜索过程完全在浏览器内存中执行，毫秒级响应，不依赖服务端。这个决策在弱网环境下尤其正确——哪怕页面其他部分还在加载，用户也能先输关键词。

搜索结果不只是列出鸟名，而是直接展开卡片，展示照片、保护级别和一段识别要点。搜索这个动作本身，就成了用户认识鸟的起点，而不是再跳转一次。

4.2 分布地图：除了看，还能干什么

分布地图最初的想法很朴素：用青海的行政区划做底图，叠加湖泊和水系，把鸟种分布数据以记录点气泡的形式呈现。覆盖青海湖周边、祁连山区域和三江源区这几个重点观察区域。

交互上我们只做了三步：鼠标悬停显示种名，点击气泡展开该点的鸟类清单和观测季节，缩放地图时气泡自动聚合，点开聚合标记能看这里录到过几次、在什么时间。刻意没有加花哨的动效，因为分布数据本身的信息量就足够大，过多的视觉反馈会干扰判断。

项目中后期我们给分布地图加了一个季节图层切换。夏候鸟、冬候鸟、旅鸟、留鸟四个图层切换后，地图上呈现出来的图案完全不一样。春秋迁徙季，旅鸟的记录点会在地图上连成方向性的带，普通用户看到这种“万鸟过境”的视觉效果，比任何文字解释都直观。这个功能本来只是辅助科研查询的，结果成了社交平台转发量最高的页面。

地图上所有分布数据都做了可信度标注。不足10条记录的点，只显示“历史记录较少”，绝不画成面积色块。这个细节在普通用户眼里可能无所谓，但科研用户会因此信任整个网站的数据严谨性。

4.3 相似鸟种对比：这个需求是被用户“骂”出来的

第一次开放测试的时候，我们收到最多的反馈不是什么板块不好看，而是“这两种鸟我实在分不清”。白骨顶和黑水鸡、大鵟和普通鵟、斑头雁和鸿雁，普通用户看照片都觉得长得差不多。早期原型里，相似物种提示只做成了文字链接，点击后跳转到另一个详情页，用户对比起来非常吃力。

后来我们把“可能混淆”模块放到了详情页信息流的第三屏，做成左右对比视图。两张照片并排展示，尺寸严格一致，差异点用虚线拉线直接标注出来。比如白骨顶的白色额甲和黑水鸡的红色额甲，两条虚线拉过去，用户一眼就明白区别在哪里。这个组件上线后成了全站点击率最高的功能之一，也验证了一件事：普通用户不会按分类学去记鸟，但他们天生会做对比。

对比组件里我们还做了一个很轻的联动：当用户在某只鸟的详情页时，可以直接点击相似物种卡片，原地切换对比对象，不用退回列表重新进入。这个交互节省了一次跳转，但对降低用户的挫败感非常有效。

4.4 收藏、笔记与分享卡片

收藏功能没有一开始就上服务端。移动端未登录用户用localStorage就能本地收藏，等用户注册登录后再合并到云端账号。这样降低了新用户的使用门槛——他不为了收藏一只鸟专门注册账号。

笔记表单只留了三个字段：时间、地点、备注。这是从真实观鸟笔记的习惯里提炼出来的，一个观察者在野外蹲守时通常手冻得僵硬，没有精力和耐心填一长串表单。字段越少，记录率越高。后来后台数据显示，备注字段的使用率远超预期，很多人真的在备注里写了当时的行为细节、天气状况、同行的鸟种。

分享卡片的细节值得一提。我们设计了一张竖版“识别卡”，包含一张高清照片、鸟种名称、一句识别要点和网站的小水印回链。用户在野外拍到稀有鸟后，可以一键生成这张卡片发到社交平台。它的私域传播效果远远超过任何付费广告，因为喜欢观鸟的人天然愿意分享自己的发现，我们要做的只是让分享动作足够体面。

5. 设计系统：把科学数据变成可靠的界面资产

5.1 从设计稿到代码的标记法

项目越往后，协作成本会越高。如果不把颜色、字重、圆角、间距这些变量统一管理，设计师出一版图和前端跑出来的效果总会有偏差。我们从第一天就引入设计令牌（Design Token）体系，所有样式都以语义化命名存在，而不是散落在设计稿里的具体数值。

比如颜色不叫“深蓝#2c3e50”，而是叫Color.Primary.Lake；字号不叫“14px”，而是叫Font.Body.Small。间距以4px为基础单位，卡片内边距16px，卡片间隙12px，块间距24px，页面留白48px。圆角分成三个梯度：小圆角4px用于标签、中圆角8px用于卡片、大圆角16px用于弹窗。

这套标记法在前端落地时对应生成CSS变量，设计改色值只需要改一个全局文件。最重要的是，当数据量从四百种增加到六百种时，新页面不需要设计师重新设计，前端拿现成的组件直接拼装，视觉依然能保持一致。资源库类网站迟早要面对数据扩容，设计系统就是给未来扩容买的保险。

5.2 高频组件的完整状态

图鉴卡片在整站出现频率最高，状态数量也比普通内容卡片多得多。我们一共定义了六个状态：默认、悬停、选中、已收藏、无图占位、加载中。最容易做砸的是无图占位状态，有的鸟种确实找不到高质量照片，放灰色色块会让人觉得网站没做完。我们让插画师画了一套手绘轮廓图，对应不同生态类群，鸟的剪影轮廓是准确的，在没有照片的情况下依然能给用户传达形态信息。

筛选器是另一个高频组件。已选中的条件在结果栏顶部以胶囊标签的形式展示，每个标签可以单独关闭，也有“清除全部”按钮。多选和互斥逻辑在交互上做了严格区隔：同一个维度内互斥（用户不会同时选“体型大”和“体型小”），跨维度允许多选。状态必须每一步都有反馈。

空状态被我们当成一个似小实大的页面来设计。用户搜索“蓝孔雀”，青海没有分布记录，页面不会干巴巴显示“暂无数据”，而是提示“该物种目前没有青海分布记录”，同时推荐几个体型和颜色相近的本土物种。空状态是设计中不能摆烂的地方，因为那恰恰是用户最迷茫、最需要引导的时刻。

5.3 响应式布局与深色模式

响应式没有做成三套独立页面，而是基于栅格断点自适应：桌面端1024px以上展示左侧筛选栏加卡片网格，平板768px左右筛选栏压缩成顶部折叠条，手机端375px筛选变成底部抽屉，单手操作时可以拇指触达。

真正让我们措手不及的是深色模式。初版方案根本没考虑，上线前有一晚我翻用户反馈，注意到几条来自观鸟爱好者的评论：夜里在隐蔽棚里观鸟时，屏幕太亮会惊到鸟；本来习惯了晚上整理白天的照片和记录，结果网站一个白底页面把困意都赶跑了。于是我们补了一版深色模式。

深色模式不是简单反色。背景用了接近夜空墨蓝的#101B24，所有鸟类照片的白色边缘加了一层轻微的低亮度滤镜，防止纯白相框在暗色界面里刺眼。保护等级徽章在深色模式下改为描边样式，既保持信息可读，又不破坏夜间的视觉适应性。这个版本上线后，移动端夜间用户的比例远超我们预期。

6. 复盘：哪些决定做对了，哪些做得还不够

6.1 数据审核比视觉出彩更重要

这个项目教会我最深的一课，是数据准确性永远是这类科学内容产品的生命线。设计做得再漂亮，如果鸟种描述犯了低级错误，网站的整体公信力就崩塌了。

内测时我们真的犯过一个典型错误：把鸿雁的照片放进了斑头雁的详情页。两种鸟在幼鸟时期头顶斑纹不明显，图片检索系统和人工挑选都没发现，直到专家复核时一眼指出。从那以后，所有图文对应关系都要走一遍人工交叉检查，照片文件名里的物种编号必须与条目ID一致，系统里做了自动关联校验。

学名拼写也是重灾区。拉丁学名错一个字母，科研用户秒发现，而且会直接质疑整个数据库的专业性。我们专门加了一道机器校验流程，把《中国鸟类分类与分布名录》里的标准名录做成对照表，任何条目的学名不在对照表内，系统直接拦截，不允许发布。这道流程看起来笨，但省掉了后续大量人工纠错成本。

6.2 移动端优先和弱网意识

第一版原型我们做的是桌面端优先，被测试用户狠狠“教育”了。实际观鸟场景里，99%的人坐在电脑前看鸟市，而是在野外用手机现场查。最终上线版本以移动端为主战场，桌面端只是延展。这个顺序颠倒过来之后，产品的整体产出效率反而更高了，因为移动端的约束逼迫我们砍掉了很多不必要的功能。

弱网适配是持续迭代的，不只是图片压缩这一件事。首屏数据请求合并成一次，减少反复握手；JSON索引本地化，搜索不依赖服务端；详情页按需加载，不要一次性把五个标签页的数据全部拉回来。在祁连山脚下实测时，手机只有两格信号，页面依然能在两三秒内打开，这个结果让整个团队都踏实了。

6.3 仍然值得继续扩展的方向

做资源库类网站，最忌讳把项目当成一次性的页面改版，因为后面一定会有更多内容形态和功能需求。我们这个项目给未来预留了几个扩展点：社区观鸟记录的上传与审核、鸟类鸣声库、面向自然教育机构的课件模块、英文界面多语言版本。这些没有全部塞进第一版，但数据模型上已经留好了关联字段，后面要做就不需要推倒重来。

如果只让我给后来者留一条建议，我会说：做科学内容产品，先把数据口径搞清楚，再做视觉；先把移动端和弱网场景打通，再谈桌面端的花活。顺序一旦对了，后面所有设计决策都会顺起来。

最后再分享一个小体会。验收那天，我们站在青海湖边的一片湿地旁，手机信号很弱，但鸟种列表、分布地图、搜索全部可以正常使用。页面上首先跳出来的是一张斑头雁的照片，头顶两道黑色纵纹，像梳了个背头。那一刻我突然意识到，之前较真的那些筛选逻辑、色板色值、组件状态，最终都化成了用户在野外举起手机时的那十几秒从容。这种踏实感，比看到后台访问数据上涨更让人满足。