数据采集第5小组 旅宝开发经历分享
🚀 拒绝平庸：我们是如何把一个“作业”做成下一代旅行神器的？
做这个“旅宝 (Lübao)”项目的初衷其实特别简单：我们受够了做攻略时的手忙脚乱。
想象一下你平时做计划的样子：左手刷着小红书找网红店，右手开着地图看路线，还得切出去打开备忘录记时间。屏幕窗口切来切去，最后心态崩了，只想说一句：“算了，到了再说。”
所以，当我们在构思这个项目时，大家达成了一个共识：我们不要做一个普通的 App，我们要造一个“旅行者的工作台”。
今天就来聊聊，在这个过程中，我们是如何跟 UI/UX “死磕”的。
第一关：把“手机壳”扔掉，换上“工作台”
最开始，我们犯了个经验主义错误。我们觉得“全屏地图”很酷，于是模仿 Google Maps 做了一个悬浮在右边的小卡片。
代码写出来一看，这就很尴尬了：想看行程的时候，卡片太窄显示不全；想看地图的时候，卡片又挡住了关键位置。这种“捉迷藏”式的体验，根本没法用来做复杂的路线规划。
于是我们停下来重新思考：什么样的软件适合长时间、沉浸式地操作？我们看向了每天都在用的 VS Code 和最近很火的 Arc 浏览器。
我们决定推倒重来，搞了一个 “T 型布局”：
左边的侧边栏顶天立地，像书脊一样稳固；右边的区域则被我们做成了“左透右实”的双色面板。
- 左边是毛玻璃，用来和 AI 聊天、找灵感（代表不确定性）；
- 右边是白瓷色，用来排定行程（代表确定性）。
现在的界面，看起来不再像一个被拉伸的手机 App，而更像是一个专业的规划控制台。
第二关：跟地图标记“死磕”到底
界面架子搭好了，但我们很快发现地图太丑了。
地图 API 自带的标记（Marker）通常就是一个毫无生气的红点或者蓝框，充满了上世纪 90 年代的“复古感”。既然我们要把颜值拉满，地图上的每一个点就不能拉胯。
为了让地图上的点有“主角光环”，我们竟然迭代了三个版本：
- 平面版：简单的圆圈，结果在卫星图上根本看不清。
- 气泡版：加了白底框，结果看起来像漫画气泡，太挡视野。
- 最终版（致敬 Apple Maps）：
我们最后决定“像素级复刻”Apple Maps 的质感。我们把一个 Marker 拆成了三层：底部的扩散阴影、中间的倒三角针脚、顶部的3D 渐变气泡。
最绝的小细节是文字。为了通透感，我们去掉了文字原本丑陋的白色背景框，改用 CSS text-shadow 模拟出了一层白色的描边光晕。
现在的地图交互非常有“爽感”：当你鼠标滑过行程表，地图上的点会像气球一样弹跳放大，从一个数字变成一个精致的图标。
第三关：让打卡变成“把玩回忆”
在做“地点打卡”功能时，我们产生了一个分歧：是不是要像填表单一样，让用户输入标题、标签、分类？
后来觉得，这也太累了。旅行记录应该是感性的、碎片化的。
于是前端同学大开脑洞，设计了一个 “无限视差滚动相册”。灵感来源于我们手里的扑克牌或者胶卷。
我们利用 Framer Motion 把上传的照片横向铺开，通过负边距让它们微微重叠。你不需要点击，只需要鼠标滑过，照片就会自动浮起、置顶。
这种“把玩胶卷”的感觉，让记录本身变成了一种乐趣，而不是任务。每次滑动，都像是在检阅自己的美好回忆。
最后一点碎碎念
除了这些大改动，还有很多让我们自己偷着乐的小细节。
比如搜索框里那个小小的 “地理胶囊”。
为了解决“我在做福州攻略，但想搜厦门的酒店”这个痛点，我们在搜索框里塞进了一个小胶囊。默认它显示 [📍 福州]，点一下，它会原地展开，变成一个城市选择器。既不占地方，又解决了大问题。
[这里插入：搜索框及城市选择胶囊的截图]
总结
这次开发过程，实际上是我们对前端技术栈（Next.js + Tailwind + Framer Motion）的一次深度练兵。
我们最大的感悟是：好的设计不是堆砌功能，而是对“物理质感”和“心理模型”的模拟。 从悬浮的玻璃，到有阻尼感的滚动，再到地图上的光晕，这些细节加在一起，才构成了一个产品的“灵魂”。
浙公网安备 33010602011771号