设计工作室的网站，大多是一面作品墙：几十张漂亮的效果图或摄影，配上项目名称和年份。这样的网站能展示审美，却很难让潜在委托人回答两个问题：这家工作室怎么思考空间？我的项目找他们合不合适？
这篇拆解 Foundax 案例库里的间序 INTERVAL。它是一个虚构的建筑与室内设计工作室，作品集包含住宅、咖啡馆和展厅三个概念项目。它的做法是：少放作品，多讲空间关系，再把「合不合适」交给一张清楚的项目咨询表单。
设计工作室网站难在哪
- 作品墙说不清方法。 一张张效果图展示了结果，却看不出设计判断从哪里来。
- 照片看不懂空间。 单张照片很难让人理解房间之间的关系和动线。
- 合作方式不透明。 委托人不知道从哪一步开始、要准备什么。
- 咨询门槛高。 「联系我们」背后没有任何引导，很多人不知道该写什么。
所以间序的设计目标是：让潜在委托人先认同工作室的审美，再理解它怎么思考空间、怎么合作，最后带着具体的项目信息来咨询。
设计概念：一场关于空间的对话
工作室关心的是「空间如何被使用，以及那些慢慢发生的日常」。首页的记忆点是一棵树：同一座庭院住宅的多个视角都围绕这棵枫树展开；平面图上的一个点位，对应照片里的一种空间感受。
视觉语言：纸白、炭墨与一抹陶红
页面以纸白为底，炭墨色的大字品牌名占据首屏，摄影保持人的视线高度、端正的垂直线和自然侧光。陶红只在咨询章节大面积出现，让最后的行动有明确落点。
- 纸白
#F3F1EA页面底色 - 炭墨
#242824品牌大字与正文 - 石灰
#716C61次要文字与说明 - 陶红
#A24F37咨询章节底色与关键强调 - 叶灰
#D4D8CA平面图与辅助色块
| 用途 | 字体 | 为什么 |
|---|---|---|
| 品牌字与界面 | Manrope | 宽阔、平实的无衬线字，大字号下有建筑感 |
| 手记式短句 | Baskerville 斜体 | 少量使用，像设计师在图纸边写下的一句话 |
| 中文 | 宋体 | 与摄影的安静气质一致 |
四个招牌时刻
入口
从一道光，走进一个空间
大幅 INTERVAL 字标压在庭院摄影上方，首屏就有「走进这座住宅」的入口。
作品
不同的空间，共同的日常
住宅、咖啡馆、展厅以错落的画幅展开，每个项目配一句设计命题，点「探索项目」进入详情页，详情页里有「咨询类似项目」入口。
导览
空间之间，自有联系
点选平面图上的三个点位，照片、视角编号和说明同步切换，让访客理解房间之间的关系。
合作
好的空间，让日常有处安放
四步工作方式可以逐项展开，说明从了解日常到落地细节的顺序，以及哪些范围要在委托中约定。
六幕页面分镜
01
首屏：从一道光，走进一个空间
大幅品牌字与庭院摄影建立第一印象。标题一次显露，影像缓慢归位，主入口直接进入这座住宅。
02
作品：不同的空间，共同的日常
庭院住宅以最大画幅领头，作品名称、类型和一句设计命题同时可见。
03
作品：街区与旧建筑
巷口咖啡和白间展厅错落排列，用陶红吧台、旧砖墙和木梁说明每个项目的材料判断。
04
导览：空间之间，自有联系
照片占约三分之二宽度，平面图在右。点选庭院、回廊、起居室三个点位，照片和视线方向一起切换。
05
方法：好的空间，让日常有处安放
工作室用光线、停留和材料讲自己的关注点，四步合作方式逐项展开，不承诺统一工期。
06
咨询：你想在怎样的空间里生活
陶红色收尾，表单只问项目类型、地点、面积、称呼、邮箱和一段描述，从项目页进入时会带入项目类型。
平面图导览：从看照片，到理解空间
导览章节是间序最有辨识度的设计。照片解决「好不好看」，平面图解决「在哪里、怎么走」。三个摄影点位与平面位置一一对应，访客点哪里，就从哪里看过去。手机上先看照片再点平面，功能完整保留。
这个导览也照顾了无障碍：平面上的点位是真正的按钮，带有「01 庭院」这样的读屏标签和选中状态，用键盘也能切换。这与 W3C WCAG 2.2 对可操作控件的要求一致。页面同时注明「概念影像与空间关系示意，不作为施工依据」。
从作品到咨询
每个项目页都有「咨询类似项目」入口，进入咨询页时会自动带入项目类型；表单使用 Foundax 原生的表单能力，提交记录进入后台，方便工作室跟进。作品、工作室介绍和合作方式也都是可以在编辑器里直接修改的页面。想了解这部分功能，可以看 Foundax 功能介绍。
可以直接借鉴的清单
- 少放作品，每个作品都配一句设计命题，而不只是名称和年份。
- 用平面图和照片联动解释空间关系，让访客「走进去」。
- 把合作方式拆成几个步骤，写清楚哪些要在委托中约定。
- 咨询表单只问判断项目所需的信息，并从项目页带入项目类型。
- 用一个强烈但克制的颜色标记最后的行动。
- 概念影像要写明用途边界，不当作施工依据或真实作品。
常见问题
作品数量少，会不会显得不够专业？
精选几个讲得清楚的项目，比堆满作品墙更能说明设计能力。每个项目讲清命题、材料和空间关系，委托人更容易判断是否适合。
平面导览需要准备什么素材？
一张简化的平面图，加上从几个点位拍摄的照片，以及每个点位的一句说明。换成自己的项目时，同步替换平面、照片、点位和说明即可。
间序是真实工作室吗？
不是。间序 INTERVAL 是 Foundax 团队制作的虚构品牌案例，所有项目都是概念项目，表单在案例中仅作演示。
可以用这个设计开始做自己的网站吗？
可以。在 间序案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的作品和工作室资料。更多行业的设计方法，可以看 品牌独立站设计指南。