做青海鸟类资源库这个项目之前我一度以为鸟类图鉴网站是最好设计的网页类型——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变量落地颜色角色色值使用场景主色 · 青海湖青玉#15757B品牌、主按钮、选中态深色 · 高原夜空#17323F顶部导航、页脚辅助 · 湿地苇草黄#C59B4D图标点缀、重点提示辅助 · 裸岩赭石#8E6E5E次级文字、边框功能 · 一级保护#C24536保护等级徽章功能 · 二级保护#D9822B保护等级徽章功能 · 无危常规#4E7E5A保护等级徽章、成功状态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 仍然值得继续扩展的方向做资源库类网站最忌讳把项目当成一次性的页面改版因为后面一定会有更多内容形态和功能需求。我们这个项目给未来预留了几个扩展点社区观鸟记录的上传与审核、鸟类鸣声库、面向自然教育机构的课件模块、英文界面多语言版本。这些没有全部塞进第一版但数据模型上已经留好了关联字段后面要做就不需要推倒重来。如果只让我给后来者留一条建议我会说做科学内容产品先把数据口径搞清楚再做视觉先把移动端和弱网场景打通再谈桌面端的花活。顺序一旦对了后面所有设计决策都会顺起来。最后再分享一个小体会。验收那天我们站在青海湖边的一片湿地旁手机信号很弱但鸟种列表、分布地图、搜索全部可以正常使用。页面上首先跳出来的是一张斑头雁的照片头顶两道黑色纵纹像梳了个背头。那一刻我突然意识到之前较真的那些筛选逻辑、色板色值、组件状态最终都化成了用户在野外举起手机时的那十几秒从容。这种踏实感比看到后台访问数据上涨更让人满足。