文心建設：人文建築，心定義——兩種方向，重新整理四十年的作品

專案背景

文心建設成立於 1977 年，四十多年來在台北推出文心信義、文心 AIT、文心日日等作品，關係企業涵蓋亞記營造、文心藝術基金會與文心藝所。官網上有 26 個作品、3 個進行中的都市更新案、38 則消息，中英雙語共 232 個網址。

這是留白設計以文心建設為題的概念提案：一家以「人文」為核心價值的建設公司，官網應該怎麼讓作品自己說話？我們提出兩個方向，選擇一是淺色人文的完整官網，選擇二是深色沉浸的品牌網站。

原網站的設計核心

我們先拆解原本的網站，而不是直接重畫。文心的原網站有很好的底子：一句「人文建築　心定義」、一個有辨識度的金葉 logo，以及大量專業攝影的建案照片。問題不在素材，而在呈現方式：

• 整頁翻頁式捲動：一次只能看一屏，作品與消息被切成一格一格。
• 選單藏在畫面左側外：滑鼠移過去才會滑出，第一次來的人不知道網站有哪些內容。
• 標語是一張圖片：搜尋引擎讀不到，也無法放大。
• 手機固定以 1024px 寬顯示：沒有手機版，只是把桌機版縮小。
• 背景大圖存成約 15% 不透明度：照片原本很美，在網站上卻只剩淡淡的底紋。

所以這次改版保留標語、logo 與建案照片，改變的是照片被看見的方式，以及人在網站裡移動的方式。

核心挑戰

建設公司的官網要同時服務兩種人：正在看房的人，想知道作品有多好，合作夥伴與媒體，想知道這家公司是誰。兩者都需要大量照片，卻不能讓照片淹沒資訊。

同時，中英雙語的 232 個網址一個都不能失效，每個作品的規格、理念與相簿都要完整搬過來，而原網站最小的作品縮圖只有 375px 寬，必須從原站的上傳檔案裡找回最清晰的原圖。

改版前後

改版前	改版後
整頁翻頁式捲動，一次只看一屏	一般捲動，作品依章節排列，選擇一右側有固定目次
選單藏在畫面左側外	六大主題直接列在頁首，平板與手機收進漢堡選單
標語是一張圖片	「人文建築　心定義」改為真正的文字（選擇一直書排列）
手機固定以 1024px 寬顯示	兩款都為手機重新排版，底部常駐「聯絡文心」
背景照片存成約 15% 不透明度	全數換成原圖，主視覺只用 1200px 以上的照片
logo 只有 246px 寬的點陣圖	自行描出向量檔，頁首、主視覺與頁尾大字共用同一個字形
作品資訊擠在右側窄欄	大圖在上、縮圖列切換，作品理念與資訊表分區排列

解決方案

兩種方向，兩種氣質

選擇一以白與暖米色為底，延伸 logo 的灰綠與金色，是一個中英雙語、143 頁的完整官網，選擇二以墨綠炭色為底，照片在深色中更顯質感，把 79 頁內容收進同一個網站，所有內容都在站內閱讀。兩個方向共用同一份內容與照片，文心可以依品牌想給人的感受選擇。

作品是主角

每個作品頁都改為大圖在上、縮圖列切換，點一下即可全螢幕瀏覽相簿，下方依序是作品理念與作品資訊，資訊表以細線分隔。作品列表與熱銷卡片原本使用官網的小縮圖，現在自動改用同一個作品裡解析度最高的那張照片。

跟著捲動說故事

選擇一的首頁作品區，右側固定一個章節目次：捲到哪一章就點亮哪一章，金色細線顯示閱讀進度，引言依捲動方向滑入。選擇二則把「以心會友、誠信建築、世代傳承」三個理念固定在畫面上，照片與文字隨捲動切換。

手機也看得清楚

兩款都為手機重新排版：漢堡選單、上下排列、作品照片以手機比例裁切，底部常駐「聯絡文心」，捲到頁尾自動隱藏。

把 logo 找回來

官網只有一張 246px 寬的 logo，放大就模糊。我們依原圖輪廓描出向量檔，頁首、主視覺中央與頁尾的大字標都使用同一個字形，在任何尺寸都銳利。

一個網址都不少

原站中英雙語的 232 個網址全數對應到新頁面：26 個作品、3 個都更案、38 則中文消息、3 個文心生活據點，以及隱私權與聯絡頁。每次產生網站時都會自動檢查所有內部連結與圖片，確保沒有失效的頁面。

成果

• 兩個設計方向共用同一份內容與照片：選擇一淺色人文、選擇二深色沉浸
• 作品頁改為大圖、相簿與作品資訊分區，照片全數換成原圖
• 首頁作品區以章節目次與捲動切換說故事，不再一次只看一屏
• 中英雙語 232 個網址完整對應，手機版重新排版
• logo 向量化，主視覺、頁首與頁尾共用同一個字形