不問「做了什麼」,只問「為什麼這樣做」——一個專業形象網站 背後的設計思考完整紀錄 一、設計師的第一直覺:這個案子不能用老方法做 做設計久了,有時候會有一種危險的慣性——拿到新案子,腦袋裡的資料庫會自動比對:「這個類型,我之前做過,大概長這樣。」對設計師來說,這種慣性是效率,但也是陷阱。這次接到慶芳地政士聯合事務所 的設計委託時,我很刻意地把這個慣性先按下去,因為第一次訪談結束後,我就知道:套任何一個舊公式,結果都會是浪費。
市面上地政士或代書事務所的網站,有非常高比例長得出奇相似——一張放了房屋或土地的封面大圖,一排服務項目的條列,一個電話號碼放在最顯眼的地方,然後就結束了。這種設計沒有錯,它能用,能傳遞基本資訊,但它沒辦法做到「讓訪客在五秒內感覺到這個事務所和其他人不一樣」。而對這個案子的委託人而言,那個「不一樣」,恰恰是整個設計任務中最核心的目標。
所長李志殷博士是政治大學地政博士,三所大學的兼任助理教授,「不動產登記 」期刊主編,在地政領域同時具備最頂層的學術高度與三十年的實務厚度——這種組合,在整個業界幾乎是稀有物種。如果最終做出來的形象網站 ,和路邊隨便一家代書事務所的網站放在一起看不出差異,那設計師就是失職,不是完工。
這個念頭,是貫穿後續所有設計決策 的起點。每一次我在兩個選項之間猶豫,我問自己的那個問題都是:「哪一個選擇,更能讓那個差異被看見?」
二、為什麼選擇沉穩色調,而不是現代感的高對比配色 近幾年有一股設計趨勢,專業服務類網站開始往「高對比、大膽配色、不對稱版型」的方向走——奶油白底色搭上亮橘或螢光綠的 CTA 按鈕,或是黑底配大字的「酷設計」路線。這些設計放在新創科技公司、創意代理商的網站上,完全沒有問題;但對一個以法律信賴感和學術嚴謹性為核心定位的地政士事務所 來說,這樣的視覺語言發送的是錯誤的訊號。
色彩心理學在網站視覺設計 中的作用,從來都不是抽象的理論,而是非常具體的溝通工具。訪客看到一個網站的配色,在還沒讀任何一個字之前,已經對「這個機構是什麼性格」形成了初步的印象。沉穩的深色調、帶有份量感的中性色系,傳遞的是「穩定、可信、有深度」——這三個感受,恰好完美對應了一個人在尋找不動產法律諮詢 協助時,內心最核心的期待。
但沉穩不等於沉悶。很多設計師做「專業感」配色,最後做出來的是一個看起來像 1998 年的政府網站——灰色、灰色、還是灰色,缺乏層次,缺乏生命力。這個案子的挑戰在於:在視覺上維持法律與地政服務所需要的份量感,同時保留足夠的設計呼吸空間,讓整體頁面有節奏感,讓訪客願意繼續往下滾動。
解法是在配色的「飽和度」和「層次對比」上下功夫,而不是靠色相的跳躍來製造活潑感。封面主視覺以完整的版面張力建立視覺重量,然後讓內文區塊的背景保持輕盈,透過留白與文字排版的節奏感製造閱讀的舒適度。深色的品牌色作為錨點,淺色作為底襯,這個對比關係在整個網頁設計 的上下貫穿,形成了一種「穩重但不死板」的視覺節奏。
圖片尺寸1024 *768 pixel
三、為什麼標語裡要留那個日文「の」 這個決定,是我在這個案子裡最喜歡的一個設計選擇,值得多花一點篇幅說清楚。
服務標語「不動産稅務.登記.法律の専門家」——注意,「不動産」和「専門家」用的是日文漢字寫法,中間夾了一個日文助詞「の」。這不是設計師的視覺惡趣味,也不是為了讓標語「看起來比較有設計感」才隨手加上去的。這個選擇有非常具體的溝通目的,只是它同時在兩個截然不同的層次上運作。
第一層,視覺節奏。 「の」在字形上是一個圓弧流動的假名字符,放在方塊漢字之間,製造出一種字形節奏的變化,讓標語在視覺上比純中文更有律動感,不會因為太規整而顯得呆板。這個作用,任何訪客都能感受到,即使他完全不懂日文。
第二層,專業訊號。 對懂行的訪客——尤其是需要處理日治時期土地登記歷史案件的客戶、或正在研究這個領域的學術同行——這個「の」是一個精準的暗語。台灣現行地籍中,仍有相當數量的土地登記起源於日治時期,這類案件的處理涉及對日本地政法制的深度理解,而能夠處理的地政士 本來就不多。這個字,在不打擾一般訪客的情況下,悄悄地對那個特定族群說:「沒錯,這裡的人懂。」
一個好的設計元素,能同時服務多個受眾群體,對每個人說不同的話,卻不讓任何人感到被排除在外。「の」這個字,做到了這件事。這正是品牌視覺設計 中所謂「多層次溝通」的具體實踐——而且這個設計決策的來源,不是設計師的靈感乍現,而是訪談過程中仔細聆聽到的業務現實。
四、為什麼首頁用三欄卡片,而不是輪播圖或全版影片 在確認首頁中段的核心元素時,我們評估過幾個常見的替代方案:輪播圖(Carousel)、全版背景影片、以及手風琴式的展開選單。最後選擇了三欄靜態卡片——這個決定,是設計美學判斷、使用者體驗研究,以及對目標受眾行為模式的綜合考量。
先說為什麼不選輪播圖。輪播圖的問題,在數位設計圈其實已經被討論了很多年,但客戶仍然很常提出這個需求,因為「感覺可以放很多內容」。然而使用者研究的結論非常一致:大多數訪客只會看輪播圖的第一張,第二張以後的內容點閱率幾乎可以忽略不計,尤其是在行動裝置上,自動輪播的機制更是常見的體驗干擾源。一個正在用手機搜尋「桃園地政士 繼承登記怎麼辦」的使用者,他需要的是立刻看到答案,而不是等待輪播跑到他需要的那張。
全版背景影片的問題更直接:頻寬消耗大,在 4G 甚至部分 5G 環境下,影片緩衝會讓首屏的出現時間大幅延遲,直接衝擊 Google Core Web Vitals 的 LCP 指標。對於一個有具體技術效能目標的形象網站 ,這是一個很難被接受的代價,尤其這個案子的目標訪客群中,有相當比例是年齡偏長、使用中低階手機的在地民眾。
三欄靜態卡片最終勝出,理由是它在任何情境下都能穩定地同時呈現三個核心入口:「專業團隊」對應「我想確認這個人的資歷」、「服務項目」對應「我有個問題想確認能不能處理」、「聯絡我們」對應「我已經決定要詢問了」。三種訪客心理狀態,三個入口,一次全部照顧到,不需要等待,不需要滑動,也不需要在腦袋裡拼湊分散的資訊。這種設計的底層邏輯,其實是在替訪客的認知負荷做減法,讓「下一步要做什麼」這個問題在視覺上自動被回答。
在RWD 響應式設計 的框架下,三欄卡片在手機版自然疊成單欄垂直排列,優先順序的邏輯保持不變,第一張永遠是最重要的入口。這個結構的可預測性,讓跨裝置的使用者體驗 維持了一致的閱讀節奏。
五、為什麼學術資歷要放得這麼完整,一條都不能少 「專業團隊」頁面是這個網站設計 中,花最多時間和委託人討論內容結構的一個區塊。最終的設計決策是:所有可以公開的資歷資訊,全部放上去,一條都不省略。這個決定,有些設計師乍看之下可能會覺得「頁面會不會太滿、太擠」,但從說服心理學和使用者行為研究的角度來看,這是這個案子最正確的選擇之一。
原因很簡單:在高信任度需求的服務類型中,資訊的完整度本身就是信任的來源。當一個人考慮要把攸關土地產權或百萬稅款的案件交給一個地政士處理,他需要的不是一句「我們很專業,歡迎聯絡」,他需要的是可以查證的具體事實。三個學位(地政碩士、法學碩士、地政博士)、三所大學的兼任教職、完整的論文著作清單、內政部執照字號——這些資訊的每一條,都在做同一件事:讓訪客在網站內部就能完成對事務所的「盡職調查」,不需要另外 Google,不需要打電話先問,不需要猶豫。
兩位合夥地政士 陳鈺依與陳嫈妮,同樣以完整的學歷、內政部執照字號(分別為 83 台內地登字及 85 台內地登字),以及各自的實務專長公開呈現。這個設計選擇本身就是一種信任聲明:願意把官方核發的資格號碼放在公開頁面上,就是在告訴訪客「我們接受查證,因為我們沒什麼好隱瞞的」。
從版面規劃 的角度,資訊豐富不等於版面雜亂。關鍵在於層次——標題、次標題、列表的視覺層級清晰,讓訪客能依照自己的興趣選擇要看多深:只想快速掃描的人,標題行就夠了;想仔細確認的人,往下展開有完整細節。這種「漸進式揭露」的架構邏輯,既照顧了資訊需求深淺不同的訪客,也讓頁面在視覺上保持了結構感而不陷入混亂。
有一個細節特別值得一提:論文著作清單的呈現方式。這類列表很容易因為條目過多而讓頁面變得像學術履歷表,削弱了視覺的親和力。解法是在排版上讓著作清單和其他資歷資訊保持視覺差異,讓專業受眾(同行、媒體、學術界)能快速找到他們關注的那部分,同時不干擾一般民眾閱讀更關鍵的服務資訊。分眾設計,同一個頁面,多條路徑。
六、為什麼服務頁要細列七大類,而不是一句話帶過 很多服務型網站的做法是在服務頁面放幾個大字:「不動產登記、稅務規劃、法律諮詢,歡迎來電」。這種做法從設計師的角度看很乾淨,版面清爽,文字少,視覺上沒有壓力。但它有一個根本性的問題:它讓訪客不得不打電話才能確認自己的需求有沒有被涵蓋。而大多數人——尤其是對法律程序不熟悉、對自身需求也沒有很清晰認識的一般民眾——是不願意在確認「你能不能幫我」之前就先打電話的。那個打電話前的猶豫,往往就是他們轉而去找其他選擇的那個時間點。
這個案子的服務頁面,選擇了完全相反的策略:七大類業務,細項逐一條列,不省略,不模糊。這個決策的背後,是對目標受眾心理路徑的具體考量。以下是七大類服務的完整結構:
服務類別 對應的潛在客群 服務頁細列的設計效益 一、不動產登記 買賣屋主、繼承人、建商 訪客確認「繼承登記」在列,立即降低諮詢門檻 二、不動產稅務規劃 高資產人士、企業主、地主 「土地增值稅節稅規劃」等細項引發目標族群共鳴 三、特殊不動產登記 日治時期地籍案件當事人、祭祀公業 稀有專業明確曝光,捕捉極高價值的特殊需求客戶 四、不動產相關案件 農地業者、都市計畫受影響地主 「農業設施申請」等細項鎖定特定長尾搜尋關鍵字 五、契約撰擬 合建案地主、遺囑規劃者 「代筆遺囑」等細項讓訪客不需詢問即知服務範疇 六、行政救濟及非訟事件 稅務爭議當事人 「更正、復查、訴願」明確呈現,減少認知模糊 七、其他地政相關業務 銀行、會計師事務所、律師事務所 異業合作的潛在夥伴確認合作可能性,無需電話詢問
七大類細列的另一個關鍵效益,是搜尋引擎優化 層面的自然關鍵字覆蓋。「農業設施申請」、「公共設施保留地容積移轉」、「日治時期歷史案件」、「不動產信託登記」——這些細項本身就是真實的搜尋關鍵字,而且是同業網站極少完整呈現的長尾詞彙。當這些詞彙以自然段落的形式出現在頁面內容中,搜尋引擎便能針對每一個細項建立獨立的索引記憶,讓網站在對應關鍵字的搜尋結果中獲得更廣泛的可見度。這個設計決策,同時服務了「訪客體驗」和「搜尋排名」兩個目標,是一個典型的AI SEO 思維下的設計實踐——讓真實且完整的業務內容,自然而然地成為最有效的搜尋引擎訊號。
七、為什麼技術選型本身就是設計決策的一部分 這一章,我想說一件許多設計師不太願意承認的事:如果你設計了一個美輪美奐的頁面,但它跑得很慢——在手機上載入需要五秒,在海外訪問時白屏好幾秒——那個美麗的設計在現實中根本沒有機會被看到。技術規格不是工程師的事、設計師不用管的「後台問題」,它是設計師必須理解、必須介入的設計決策之一,因為它直接決定了設計能不能真正被感受到。
這個案子在技術層面的選型,每一項都可以從設計效益的角度來解讀:
技術決策 規格選用 對設計呈現的直接影響 主機架構 ARM 多 CPU 雲端主機 高並發下不卡頓,首屏大圖與多資源頁面仍能快速呈現 網路線路 直連國際交換中心骨幹網路 TTFB 壓低,LCP 指標改善,設計的第一印象不被延遲抹殺 傳輸協定 HTTP/2 全面啟用 多資源並行載入,圖片、CSS、JS 同步傳輸,首屏出現速度大幅提升 網頁伺服器 Nginx 靜態資源快取效率高,封面大圖傳輸穩定,不因並發量增加而劣化 後端語言 PHP 8.4 JIT 即時編譯加速動態頁面產生,頁面回應時間更短 網址格式 國際 .com(leelao.com) 社群分享預覽品質穩定,og: 標籤完整支援,品牌識別度高
其中,HTTP/2 的決策對這個案子的設計呈現影響最為顯著。首頁的視覺重量本來就比較高——封面主視覺是全版寬大圖,中段三欄卡片各有圖像元素,頁尾連結牆有九個機關 Logo。在 HTTP/1.1 的限制下,這些資源會依序排隊傳輸;HTTP/2 的多工串流讓它們並行進行,訪客感受到的頁面「彈出速度」是完全不同量級的體驗。設計師辛苦雕琢的封面視覺震撼感,就靠這個技術決策才得以真正被感受到,而不是在白屏等待中消磨掉。
ARM 多 CPU 雲端主機 的選擇同樣值得說明。相較於傳統 x86 架構,ARM 在多核心並行處理的能效比上有明顯優勢,意味著在流量高峰期,伺服器能更從容地應對多個訪客同時瀏覽,不會因為後端負載上升而導致前端的視覺載入速度下降。對形象網站 而言,每一個訪客的第一印象都是獨一無二的,沒有第二次機會;確保每一次的瀏覽體驗都一致流暢,是技術選型對設計保護的最直接貢獻。
八、為什麼知識輸出欄目是整個設計裡最重要的長線投資 如果要我從這個案子的所有設計決策中,選一個「十年後還在產生效益」的,我會選「相關資訊」欄目的三層分類架構設計——而不是任何一個視覺細節,也不是任何一個技術規格。
大多數專業形象網站 ,在上線的那一天是靜止的,然後永遠靜止下去。版面不動,內容不動,唯一會更新的可能是電話號碼偶爾換一下。這樣的網站,在搜尋引擎的眼中是一個沒有生命跡象的頁面,不會被主動推薦,不會累積排名,只能依靠廣告買流量,廣告停,流量就歸零。
這個案子的設計在一開始就拒絕了這條路。「相關資訊」欄目下設三個子分類——專題文章、最新訊息、活動花絮——不只是為了讓網站看起來「內容豐富」,而是為了替委託人建立一個可以持續生長的內容資產系統。所長李志殷博士是期刊主編,有定期發表評論的學術習慣,這個習慣本來只發生在學術圈;透過「相關資訊」的架構,這些觀點得以在面向一般民眾的數位空間裡流通,轉化為搜尋引擎的長尾流量來源。
舉一個具體的例子:當台灣的不動產稅制改革議題浮上公共討論,有數以萬計的民眾在 Google 上搜尋相關問題——「虛坪改革對我的稅有什麼影響」、「公設比修法之後登記費怎麼算」。一篇由地政博士所長親自撰寫、角度專業的分析文章,在搜尋結果中的可信度,遠遠高於普通媒體的淺度報導,也遠遠高於任何以廣告預算買來的置頂位置。這就是AI SEO 時代最核心的流量邏輯:讓真實的專業深度,成為演算法最願意推薦的內容。
從網站架構設計 的層面,「相關資訊」的三層分類有其精確的分工:專題文章負責學術觀點輸出,精準捕捉有特定法律議題研究需求的訪客;最新訊息處理業界動態與事務所公告,為既有客戶和關注業界的訪客提供持續回訪的理由;活動花絮則製造溫度,讓潛在客戶看到真實的人,而不只是一份頭銜清單。三個子分類的目標受眾和溝通目的彼此不重疊,卻又都在「建立信任、吸引諮詢」這個大目標底下協同運作。
這個設計的真正價值,在上線後的第一個月幾乎是看不到的。它需要時間——需要文章持續被發表,需要搜尋引擎持續建立索引,需要流量慢慢累積成排名,需要排名慢慢轉化為諮詢。但這正是它的設計意圖:不是一次性的煙火,而是一個會隨著時間持續增值的數位資產 基礎建設。
如果一個地政士網站設計 能做到這個層次——從訪客看到的第一眼視覺,到後來每一篇讓他回來的內容,到技術底層確保每一次瀏覽都流暢——那它就不只是一個「好看的網站」,而是一個真正在替委託人的業務持續工作的數位夥伴。而這個目標,始終是貫穿慶芳官方網站每一個設計決策的那條線。
文章目錄 一、設計師的第一直覺:這個案子不能用老方法做 二、為什麼選擇沉穩色調,而不是現代感的高對比配色 三、為什麼標語裡要留那個日文「の」 四、為什麼首頁用三欄卡片,而不是輪播圖或全版影片 五、為什麼學術資歷要放得這麼完整,一條都不能少 六、為什麼服務頁要細列七大類,而不是一句話帶過 七、為什麼技術選型本身就是設計決策的一部分 八、為什麼知識輸出欄目是整個設計裡最重要的長線投資