栖境空间设计官网重构
空间设计领域 · 项目纪录片式作品矩阵重构
栖境空间设计官网重构
一家专注商业与办公空间的设计工作室,把散落的项目照片重组成有叙事、有尺度、有材料温度的线上作品档案。
一家"做空间"的公司,官网却讲不清空间
栖境空间设计是一家成立于2016年的中型设计工作室,主创团队来自一线地产与商业零售设计公司,主营业务覆盖品牌旗舰店、联合办公、总部办公三类商业空间,年均落地项目约18个。客户主要是连锁品牌拓展部、地产商招商团队与新设企业行政采购方——这三类决策人在约见设计师之前,几乎都会先通过官网"摸底"。
他们原有的官网建于2019年,是一套行业通用模板:首页轮播几张大渲染图,作品列表按上传时间倒序排列,点进项目详情只有七八张压缩过的实景照片,没有平面图、没有材料说明、没有项目体量数据。主创团队当时的抱怨很直接:"客户在展会上坐下来聊,开口第一句常常是'你们是不是只做过小店面'——可我们明明做过三千平米的总部办公。"问题不出在作品,而出在官网没有把作品讲清楚。
2024年下半年,栖境找到迪森泰,目标非常明确:不要一个"好看的花瓶站",要一个能在商务谈判前就替团队完成初步信任建立、让对方在见面之前就大致认可"这家公司的空间尺度与完成度"的官网。主创团队还特别提出一个要求——新站必须能在手机上顺畅阅读,因为他们发现至少六成初步接触是客户在通勤、工地现场用手机完成的。
栖境的客户大多是地产与商业地产方,一个项目动辄管上几年、投入数千万,决策链极长,设计公司能不能长期陪跑、会不会做了两年就消失,是甲方很在意的隐形顾虑。老官网只放作品,从不讲团队怎么长期负责一个项目,导致很多甲方觉得这是个"漂亮但不够稳"的小工作室。
因此新站除了作品,也专门留出篇幅讲团队的项目跟进方式——从方案、扩初到现场落地如何分阶段负责、如何响应现场问题。对栖境来说,这次重构不只是换个门面,而是把"长期可托付"这件事,第一次完整地摆到了甲方面前。
还有一个容易被忽略的点:栖境的项目照片往往是在施工刚结束、灯光与绿植都处于最佳状态时拍的,但真正入住、使用一两年后,空间会呈现完全不同的面貌。甲方担心的,正是"刚交付好看、时间一长就旧"。新站因此特别收录了几个交付一年以上的回访实景,让客户看到空间经得住时间。
从结果看,这次重构让栖境的咨询结构发生了变化——以前多是零散小项目询价,现在主动找上门的多是要求长期跟进的整盘项目,客单与合作周期都明显上了一个台阶。
作品按时间堆叠
项目没有分类逻辑,商业零售、办公、餐饮混在同一列表里,客户找不到与自己同类的参考案例。
详情页缺叙事骨架
点进项目只有照片流,没有平面图对照、没有材料与工艺说明,空间的"设计决策"完全看不见。
移动端图片变形
实景摄影在手机端被强制裁切与拉伸,横构图的大空间变成两条窄缝,质感损失严重。
询盘路径过长
潜在客户要通过底部邮箱留言,没有按业务类型区分的咨询入口,销售线索回收慢且分类混乱。
把每个项目当成一部短纪录片来剪
我们没有从"配色好不好看"入手,而是先做了一件笨功夫:把栖境过去六年的62个落地项目全部重排一遍。按"空间类型—面积段—完成年份"三个维度建档,剔掉未完工与涉密项目,最终确定首批上线24个完整案例。
视觉上延续迪森泰农业潮流风的浅绿、亮黄与土黄体系,但在空间设计这个行业里,我们把饱和度压得更低——因为真正的空间摄影本身已经色彩丰富,网站要做的是"留白托住作品",而不是和照片抢戏。整站采用大呼吸留白与竖向长卷节奏,让用户像翻一本设计年鉴,而不是刷一个信息列表。
四个关键设计决策,重构观看体验
项目详情页的"五层叙事"
每一个空间项目的详情页不再是照片墙,而是固定五层结构:项目概览(区位、面积、工期、设计范围)→ 平面与动线图 → 实景空间组图 → 材料与工艺清单 → 设计师手记。客户在任何一个项目页停留,都能从"这地方长什么样"自然过渡到"他们是怎么想的、用了什么材料"。
平面图与实景图在同一屏左右对照,是我们坚持保留的一组关系——空间设计的价值恰恰在于二维图纸如何变成三维体验,这一组对照比任何形容词都有说服力。
按"空间类型"重建作品矩阵
作品库首页不再是无尽滚动,而是先分三个入口:商业零售、办公空间、餐饮休闲。每个入口下再按面积段(500㎡以下 / 500–2000㎡ / 2000㎡以上)筛选。连锁品牌拓展经理打开网站,三步之内就能看到"和我要开的店差不多大"的案例。
这一改动直接回应了客户最痛的那点——让对方在30秒内意识到"这家公司做过我这种尺度的项目"。
不裁切的移动端横滑图集
空间摄影多为超宽横构图,常规卡片会把最能体现尺度的画面裁掉一半。我们在移动端改用横向滑动图集:用户手指左右滑动浏览整幅照片,照片保持原始比例,不强制填满屏幕。
这一选择让手机端跳出率在上线两个月后下降了三成以上——很多客户原本就是在工地、在出差路上用手机看方案。
分业务线的咨询入口
全站咨询按钮不再通向同一个表单,而是按"品牌零售空间 / 企业总部办公 / 餐饮连锁"三条业务线分流。每条线落地不同的表单字段:零售客户填门店数量与城市,办公客户填员工规模与预算区间。
销售团队拿到线索的当天就能判断项目归属与量级,跟进效率明显提升。
十一周,从档案整理到正式上线
项目档案梳理
双方共同盘点62个历史项目,清洗涉密与未完工案例,确定首批上线24个项目的优先级与素材清单。
信息架构与原型
确定作品矩阵、项目详情五层结构、分业务线咨询路径,输出全站低保真原型并与客户主创逐页走查。
视觉设计
完成首页、作品库、项目详情、关于团队等核心页面高保真设计,反复推敲留白节奏与图片呼吸感。
开发与内容录入
原生前端开发,同步协助客户将24个项目的平面图、实景图、材料清单逐一录入后台,移动端逐机型调优。
上线与复盘
站点正式发布,接入统计工具,两周后完成首次数据复盘并微调作品排序与咨询入口位置。
"以前去提案,对方看完现场总觉得我们只做过小店面。新官网上线后,有两个三千平米以上的总部办公项目,客户在约我们见面之前就已经在官网上翻完了同类型案例,坐下来直接聊排期——官网第一次替我们把'尺度信任'提前完成了。更意外的是,手机端来访占比从原来的三成涨到近六成,和我们在工地上见客户的场景完全吻合。"
陈屿 栖境空间设计 创始人 / 主创设计师
我们如何与栖境这样的空间工作室协作
素材联合盘点
设计师与客户主创一起过项目档案,按"可公开/暂保密/未完工"三档分拣,避免把不能对外的项目误上线。
原型逐页走查
低保真原型阶段就邀请主创参与,先确认信息架构与观看节奏,再进入高保真视觉,避免后期大改。
后台陪跑录入
上线前两周,我们陪客户同事一起录入首批24个项目,边录边培训,确保客户自己能独立维护。
三个月数据回访
上线后第三个月,我们带着访问数据回来复盘,调整作品排序与咨询入口,而不是交付即结束。
关于这次重构,客户问得最多的三件事
不会。项目详情页的五层结构(概览—平面—实景—材料—手记)在后台都是模块化字段,栖境的市场同事新增一个项目只需上传图片、填写几个字段,半小时内即可上线一个完整案例,无需再动前端代码。
我们在每个分业务线咨询页都预留了企业微信二维码与一键拨号按钮。空间设计类客户习惯在线下见面,官网承担的是"见面之前的信任铺垫",微信与电话承担"见面之后的快速对接",两者并不冲突。
可以。我们为"在建项目"预留了半公开状态:效果图与平面图可以先对外展示,实景组图位置留空,待摄影完成后由客户自行补传。这让栖境在项目进行中就能开始积累线上声量,而不必等全部完工。
不需要重做。作品矩阵在架构上预留了"新增空间类型"的入口位,新业务线只需在后台加一个分类、上传首批案例即可上线,整体视觉骨架保持一致,这也是我们坚持原创骨架、拒绝模板的原因之一。


