在我不一致的网站之间实现一致的导航
原文英文，约900词，阅读约需4分钟。
📝
内容提要
作者讨论了个人网站的设计选择，决定将主页、博客和笔记分开，导致用户难以找到相关链接。为改善导航体验，他创建了一个浮动头像的JavaScript组件，用户点击后可以轻松切换不同网站。尽管动画效果仍在改进中，但这一措施已初步解决了导航问题。
🔎
延伸解读
独立站点的代价：导航缺失
作者将主页、博客和笔记作为独立站点，各自拥有独特设计和代码库，便于单独修改。但这也导致访问者难以发现其他站点的存在，因为缺乏跨站点的顶层导航。这种设计虽然为作者提供了灵活性，却牺牲了用户体验，直到被朋友指出才意识到问题的严重性。
浮动头像：轻量级导航方案
为解决导航问题，作者创建了一个JavaScript Web组件，在每个页面固定显示一个浮动头像。点击头像会弹出菜单，让用户轻松在三个站点间切换。这个方案作为临时措施，旨在以最小成本改善跨站导航，同时保持各站点的独立性。
动画迭代：从v1到v3的改进
作者尝试了三个版本的动画效果。v1使用CSS变换实现头像旋转和菜单缩放；v2尝试让菜单变形为头像的圆形，类似iOS动态岛；v3是当前版本，仍在改进中。作者承认动画仍不完美，但通过迭代和反馈逐步优化，体现了对细节的追求。
❓
Q&A
作者为什么决定将个人主页和博客分开？
作者希望每个网站可以独立发展，避免在设计上互相影响。
作者如何改善网站之间的导航体验？
作者创建了一个浮动头像的JavaScript组件，用户可以通过点击头像在不同网站之间切换。
浮动头像组件的主要功能是什么？
该组件允许用户在主页、博客和笔记之间轻松切换，提供统一的导航体验。
作者在动画效果上做了哪些尝试？
作者尝试了多个版本的动画效果，包括头像旋转和菜单弹出，逐步改进设计。
作者在创建导航组件时遇到了什么问题？
作者发现缺乏统一导航使得用户难以发现所有网站，导致访问者体验不佳。
作者对未来的导航组件有什么计划？
作者有更好的想法，但不确定是否能实现，目前的解决方案已经能满足基本需求。
🏷️
