# 建筑工作室网站设计：ROOF把项目排成目录 原网页：https://www.jvds.cn/share/ui-design/roof-project-index-u008 语言：zh-CN 发布：2026-10-10 作者：界达设计工作室（JVDS） ROOF这套建筑工作室网站设计最醒目的地方，是Projects页里几乎没有装饰的项目表。浅灰背景、细线和对齐的字段让作品首先变成可查阅的记录；到了手机上，目录又缩为紧凑的单列。对于需要比较项目经验的读者，这种安静的结构很有用。 ## 核心结论 - 浅灰项目表把作品经验变成可以横向比较的资料。 - 移动目录保留名称与补充信息的关系，联系页把填写区域明确放大。 ## 项目名称旁边，还有比较的依据 桌面目录把项目名放在最左，类别、地点和年份横向排列。列标题比项目内容更轻，行间用细线分隔，所有记录沿同一条基线读取。页面顶部只留下少量导航，中部Projects标题也没有抢占表格的空间。 大照片能表现建筑的空间与气氛，目录则更适合回答范围问题：有哪些类别，项目在哪里，时间分布怎样。这里把它们放在同一行，读者不用进入每个详情页才能做初步比较。这是建筑作品集网站很值得保留的一条阅读路线。 界达设计认为，表格的清晰来自资料口径一致。若有的年份写设计开始、有的写竣工，有的地点只写国家、有的写到街道，齐整的线条也无法消除疑惑。借鉴版式时，先整理[字段定义](https://www.jvds.cn/share/ui-design/saas-data-table-design)，再决定字号和行高，会更稳妥。 ![ROOF浅灰项目索引，名称、类别、地点和年份横向排列](https://www.jvds.cn/upload/2026/1008/d187-tp/u008-i1.webp) 桌面Projects页｜三列共用字段与左侧名称对齐，细线分隔各个项目。 ## 小屏保留的是一条完整记录 移动项目列表没有继续横放四列，而是把项目名称与补充信息压进一条条纵向记录。名称在上，地点年份在下面，右侧保留方向箭头。项目身份没有被拆散，触摸入口也有明确位置。 旁边的档案页用大号年份分组，字号差异一下把时间层次拉开。同样是资料型内容，项目列表重在连续扫读，档案则让人先找年份。这两张图提醒人，极简界面并不等于所有信息都用同一种大小。 这类密集目录适合项目名称相对稳定、字段较少的情况。如果后来增加很长的地名或多个项目标签，应重新检查换行后是否仍能认出每一条记录。截图呈现了移动布局，横向操作和实际响应式切换仍需另行验证。 ![ROOF移动项目列表与旁边按26、25、24分组的奖项档案](https://www.jvds.cn/upload/2026/1008/d187-tp/u008-i2.webp) 移动项目页与档案页｜名称下方保留地点和年份，档案用大号年份另起阅读层级。 ## 联系页把填写动作放大了 黑底联系页与浅灰目录形成鲜明转换，Your Name和Your Email分列，项目描述位于下面，SEND靠右下。标签比输入提示更大，空白区域也更宽，读者能快速认出这是填写页面。 值得喜欢的是，这里没有把联系入口埋在一大段工作室宣言后面。姓名、邮箱与描述已经构成一次咨询的基本开头，视觉上也与项目目录一样克制。需要补充的内容可以先作为简短提示，而不是立即增加更多字段。 例如，项目描述框旁可提示地点、类型和当前阶段，让第一次联系的人有个组织思路。界达设计会把这种提示与长文本的可读性一起检查：输入后文字能否持续看到，[错误提示](https://www.jvds.cn/share/ui-design/form-error-message-validation-ux)是否靠近字段，发送后是否有清楚反馈。图里的大字号很好辨认，却不能代替这些状态。 ![ROOF黑底联系页的姓名、邮箱、项目描述与右下角SEND](https://www.jvds.cn/upload/2026/1008/d187-tp/u008-i3.webp) 联系页中部与右下角｜三个大标签界定填写区，描述框的提示仍可更具体。 ## 常见问题 ### 建筑作品集需要项目表吗？ 当访客需要比较类别、地点和年份时，项目表很有帮助。它可以与照片详情并存，不必要求所有项目都先以大图展示。 ## 设计检查清单 - 统一项目年份与地点的记录口径。 - 用最长的项目名称检查手机列表换行。 - 给项目描述增加一句有用的填写提示。 ## 让作品集同时好看、好查阅 如果你在整理建筑或空间设计作品集，希望项目资料与咨询入口更容易使用，可以从现有项目清单开始讨论。 界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。 [联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)