建筑工作室网站设计：ROOF把项目排成目录

ROOF这套建筑工作室网站设计最醒目的地方，是Projects页里几乎没有装饰的项目表。浅灰背景、细线和对齐的字段让作品首先变成可查阅的记录；到了手机上，目录又缩为紧凑的单列。对于需要比较项目经验的读者，这种安静的结构很有用。

核心结论

• 浅灰项目表把作品经验变成可以横向比较的资料。
• 移动目录保留名称与补充信息的关系，联系页把填写区域明确放大。

项目名称旁边，还有比较的依据

桌面目录把项目名放在最左，类别、地点和年份横向排列。列标题比项目内容更轻，行间用细线分隔，所有记录沿同一条基线读取。页面顶部只留下少量导航，中部Projects标题也没有抢占表格的空间。

大照片能表现建筑的空间与气氛，目录则更适合回答范围问题：有哪些类别，项目在哪里，时间分布怎样。这里把它们放在同一行，读者不用进入每个详情页才能做初步比较。这是建筑作品集网站很值得保留的一条阅读路线。

界达设计认为，表格的清晰来自资料口径一致。若有的年份写设计开始、有的写竣工，有的地点只写国家、有的写到街道，齐整的线条也无法消除疑惑。借鉴版式时，先整理字段定义，再决定字号和行高，会更稳妥。

小屏保留的是一条完整记录

移动项目列表没有继续横放四列，而是把项目名称与补充信息压进一条条纵向记录。名称在上，地点年份在下面，右侧保留方向箭头。项目身份没有被拆散，触摸入口也有明确位置。

旁边的档案页用大号年份分组，字号差异一下把时间层次拉开。同样是资料型内容，项目列表重在连续扫读，档案则让人先找年份。这两张图提醒人，极简界面并不等于所有信息都用同一种大小。

这类密集目录适合项目名称相对稳定、字段较少的情况。如果后来增加很长的地名或多个项目标签，应重新检查换行后是否仍能认出每一条记录。截图呈现了移动布局，横向操作和实际响应式切换仍需另行验证。

联系页把填写动作放大了

黑底联系页与浅灰目录形成鲜明转换，Your Name和Your Email分列，项目描述位于下面，SEND靠右下。标签比输入提示更大，空白区域也更宽，读者能快速认出这是填写页面。

值得喜欢的是，这里没有把联系入口埋在一大段工作室宣言后面。姓名、邮箱与描述已经构成一次咨询的基本开头，视觉上也与项目目录一样克制。需要补充的内容可以先作为简短提示，而不是立即增加更多字段。

例如，项目描述框旁可提示地点、类型和当前阶段，让第一次联系的人有个组织思路。界达设计会把这种提示与长文本的可读性一起检查：输入后文字能否持续看到，错误提示是否靠近字段，发送后是否有清楚反馈。图里的大字号很好辨认，却不能代替这些状态。

常见问题

建筑作品集需要项目表吗？

当访客需要比较类别、地点和年份时，项目表很有帮助。它可以与照片详情并存，不必要求所有项目都先以大图展示。

设计检查清单

• 统一项目年份与地点的记录口径。
• 用最长的项目名称检查手机列表换行。
• 给项目描述增加一句有用的填写提示。