Reality Design Lab
公司网站
1.项目背景
客户
Reality
Design Lab
Reality Design Lab 是一个跨学科的研究和设计实验室，致力于推动空间计算、可编程加密技术、身体设计、未来设计和社交计算的交叉领域。
目标
展示Reality Design Lab的使命和愿景
包括其跨学科研究领域（如空间计算、区块链人工生命、沉浸式交互设计等）和前沿创新理念，以树立在行业内的专业形象，提升公众认知度。
展示重要的研究成果、项目进展和技术案例
包括在SIGGRAPH、WWW、CHI等平台上展示的项目，让访客全面了解实验室的工作成就和技术实力。
吸引潜在的合作伙伴和赞助商
展示Reality Design Lab在人工智能、混合现实、区块链等领域的技术优势，促成更多跨领域合作机会。
吸引具有同样创新意识的专业人才
为实验室的未来发展注入新活力。
2. 项目目标
业务需求
- 增强网站的视觉设计和用户体验；
- 提高移动设备的访问性能；
- 使用笔记系统来对网站内容进行管理和发布。
设计与开发目标
- 设计一个符合品牌形象的网站；
- 使用最新的前后端技术实现，体现实验室的前沿性和探索性；
- 制定团队内容协作规范，使用自动化工具进行网站内容发布。
3. 设计阶段
确定网站风格
为了适应实验室项目种类多样且差异显著的特点，我们的整体界面设计采用了简洁的黑白配色方案，以最大化突出每个项目的核心内容。此设计能够提供统一的视觉框架，同时避免繁杂的风格干扰，让项目本身成为焦点。
此外，对于特定需要强调的内容，我们采用重点色进行高亮，确保用户能迅速找到重要信息，使界面既具功能性又保持简约美观。
实验室项目风格差异大，使用简洁的黑白配色以最大化突出项目核心内容
© Reality Design Lab
定义设计系统
整个网站的视觉元素较为简洁，仅需对基础设计元素进行规范定义，以确保整体风格一致性。在缺少复杂视觉元素的设计中，间距和排版的细节显得尤为关键，这些元素对最终品质有直接影响。
因此，我们对间距进行严格的定义，以便于后续开发人员在实现过程中能够保持一致性和高水准的视觉呈现。
网站整体没有太多视觉细节，定义好基础规范即可
文章内容样式定义
4.开发阶段
技术栈选择
客户对于此次项目对于技术栈的选择有较强的弹性，倾向于使用最前沿的技术来实现，以凸显实验室不断进取探求新前沿的价值观。
因此选用时下最流行的nextjs作为框架进行开发；同时不同于以往的内容管理系统，需要将数据在数据库中存储，本项目的内容全部使用Obsidian进行管理，方便实验室团队成员能够在记录笔记的同时稍加整理，即可将内容发布到网站上，省去了以往需要将内容使用在网站后台使用内容编辑器的操作，大大提升了内容写作的效率。
同时对于Obsidian的数据使用Github进行版本管理，团队成员可以像团队进行代码写作一样进行内容创作。写作效率大幅提升。
面临问题
面临两大核心问题，需要将Obsidian的Markdown数据转码为网站使用的html代码，中间涉及到一些规范性的内容，对没有markdown编写经验的团队成员不够友好；
需要能够在Obsidian笔记数据提交到Github后，让网站能够自动获取到最新的内容，处理后发布到网站，如何进行自动化需要深入研究。
5.小结
项目通过极简主义的设计风格和高效的开发流程，确保了视觉效果与用户体验的双重提升。我们采用Shopify平台实现核心功能，同时通过与设计师的紧密协作，保证设计的准确还原和流畅的用户操作体验。
最终，结合Tailwind CSS的高效布局能力，我们成功打造了一个符合品牌形象、移动设备友好的现代化网站。这一项目不仅提升了网站的视觉吸引力，更显著优化了其移动端性能，为用户带来了更为顺畅的访问体验。