2023年2月20日約 1 分鐘閱讀

德恩生命禮儀官網開發心得 — 資訊架構與易用性設計

在啟程教育學院工作的時候，接過一個印象深刻的案子——德恩生命禮儀的品牌官網。這個專案的重點在於如何讓使用者快速找到需要的資訊，包含服務項目、定價、聯絡方式等。這篇來分享一下在規劃資訊架構和提升易用性時的一些心得。

專案背景

德恩生命禮儀是一間殯葬服務公司。這類網站的使用者通常是在有需求的時候才會來搜尋，他們需要快速了解：

基於這些需求，網站的設計重點就是讓這些資訊好找、好懂。

這個專案使用 WordPress + Elementor Pro 來開發。選擇這個組合主要是考慮到：

雖然 Elementor 是視覺化編輯器，但如果要做出有質感的設計，還是需要用 CSS 來調整細節。這個專案我寫了不少自訂 CSS，才達到設計稿的效果。

使用者進到網站，最常需要的就是聯絡方式。所以我們把電話號碼放在 header 最顯眼的位置，而且設計成可以點擊直接撥打。

服務項目和定價資訊也是使用者最關心的。首頁就把主要服務分類列出來，讓訪客不需要點進去就能大概了解有哪些選擇。

選單的分類要符合使用者的思考邏輯。我們把服務項目、價格方案、公司介紹、聯絡我們這幾個主要分類放在主選單，讓使用者一眼就能找到想要的頁面。

另外，每個頁面的麵包屑導覽也很重要。讓使用者隨時知道自己在網站的哪個位置，想回上一層也很方便。

殯葬服務的定價對很多人來說是很模糊的，不知道行情大概多少。我們設計了清楚的價格表，列出各個方案包含的項目和價格。這樣使用者可以先有個概念，再決定要不要進一步詢問。

價格資訊的呈現也經過設計，用表格的形式讓不同方案可以並排比較，一目瞭然。

版面設計上，我們注重字體大小和行距的配置，讓長段落讀起來不會那麼累。重點資訊用粗體或顏色來強調，讓使用者可以快速掃描。

標題層級也要明確，讓使用者可以快速理解頁面的結構。

可以點擊的元素要讓使用者一眼就認出來。按鈕用對比色來設計，連結加上底線或不同顏色，避免使用者不知道這裡可以點。

尤其是「聯絡我們」、「立即諮詢」這類行動呼籲按鈕，要放在顯眼的位置，而且視覺上要夠突出。

現在很多人是用手機上網，所以 RWD 響應式設計是必須的。手機版的選單、按鈕點擊區域都要夠大，整體操作要順暢。

電話號碼在手機版更重要，使用者點一下就能直接撥打，這是手機版特有的優勢。

殯葬服務的網站需要給人莊重、專業、有信任感的印象。配色上選擇沉穩的色調，避免太鮮豔的顏色。版面設計講求對稱和留白，讓視覺感受比較平靜。

這跟一般商業網站追求活潑、吸睛的風格完全不同。設計的時候要一直提醒自己，這個產業需要的是專業感和信任感。

雖然 Elementor 是拖拉式編輯器，但這個專案還是寫了不少自訂 CSS：

Elementor 的好處是可以直接在後台寫 CSS，不需要另外開發佈主題。這對後續維護來說蠻方便的。

這個專案讓我對資訊架構的重要性有了更深的體會。一個網站好不好用，不只是看視覺漂不漂亮，更重要的是使用者能不能快速找到他需要的資訊。

另外也體會到，跟傳統產業的客戶合作，溝通方式要調整。他們不懂什麼是 RWD、什麼是 SEO，但他們很清楚自己的客戶需要什麼。把這些需求轉換成技術實作，是前端工程師的專業價值所在。