[案例分享] 明台產物｜從摺紙視覺到UIUX優化，重新設計保險產品網站

在實際成面上，保險產品網站最大的挑戰，往往不是資訊不夠，而是資訊太多。

不同險種有不同的保障內容、投保條件與試算方式；同一項商品中，又可能同時出現多組方案、保額、費率與理賠項目。尤其到了手機上，原本在桌機可以完整呈現的表格，很容易變得擁擠、難以比較。

這次明台產物保險產品網站的設計，便從「如何讓保險資訊更容易理解」出發，重新整理不同險種的內容呈現方式，並特別針對行動裝置調整閱讀與操作體驗。

本文章目次

01.從視覺出發，打造不同的高辨識度

專案前期，我們曾嘗試不同的視覺方向。

最初的提案以人物與生活情境為主，希望透過真實使用情境，讓保險商品顯得更親近。但隨著提案持續往下發展，並提出兩款主要視覺。

但.......，我們也開始思考：如果只是使用常見的人物攝影、插圖設計，雖然容易理解，卻很難在眾多保險網站中留下鮮明印象。

因此後續的設計方向，不只是調整畫面，而是重新思考一套能夠代表明台、同時又可以延伸到不同險種的視覺語言。最後，我們選擇以「摺紙」作為核心概念。

摺紙：本身帶有一種將平面的紙張，經過折疊後轉化成具體形體的過程。對保險而言，它也很適合延伸成保單一張紙，經過多層疊加，成為一種新的「守護」的意象：讓一份看似單純的保障，會隨著不同需求，轉化成旅行、居家、交通等不同生活情境中的保護。

同時，摺紙具有清楚的幾何結構，可以延伸成飛機、房屋、車輛、山景等不同造型，正好對應明台多元的保險商品。即使每個險種的主題不同，仍能透過相同的材質、折線與幾何語言維持整體一致性。

在第三版設計中，我們也開始運用 AI 產圖的協助，探索摺紙素材的可能性，再由設計師進一步調整構圖、色彩與網站介面，逐步建立出完整的視覺系統。

02.如何轉換複雜的保險內容？

保險網站怎麼能只有好看！！
保險商品不像一般產品介紹，可以只靠幾張圖片和簡短文字說明。從旅遊險、汽機車險到住火險，不同險種都有各自的保障項目、投保條件、費率與服務內容，資訊量大，閱讀方式也不完全相同。

因此這次設計並不是把客戶提供的資料直接放上網站，而是進一步思考：哪些資訊應該先看到？哪些可以收合？不同險種之間，又該怎麼維持一致的閱讀方式？

我們特別將不同商品重新整理成一致的資訊層級，並透過分類TAB區塊與收合設計，降低大量文字同時出現在畫面上的壓力。像汽車險、機車險、旅遊險、住火險等商品，都能先從清楚的分類入口進入，再依照需求逐步查看細節。

一些看似很小的設計決定，其實都是為了減少使用者找資訊的時間。

整理不是把資訊變少，而是讓複雜的內容有順序地被看見。

03.先讓使用者知道「現在該看什麼」

保險商品的資訊很多，但使用者進到產品頁時，通常不會想從第一行一路讀到最後一行。

因此在頁面規劃上，我們先把最重要的資訊往前整理放置首頁。以旅遊保險為例，進入頁面後先看到商品情境與核心訴求，再透過險種切換、保障亮點與線上試算入口，讓使用者可以很快掌握：「這是什麼保險、主要保障什麼、接下來可以做什麼。」

像班機延誤理賠、海外旅遊醫療保障等使用者較在意的內容，也不必等到閱讀完整份保障說明後才找到，而是先以重點資訊呈現，再視需求進一步查看完整方案。

不同險種之間則使用一致的頁面邏輯，讓使用者從汽車險、機車險切換到旅遊險或住火險時，不需要重新理解網站怎麼操作。

桌機與手機，不只是尺寸不同

這套資訊層級到了手機上，也不能只是將桌機版等比例縮小。

桌機有足夠的橫向空間，可以同時呈現多項保障重點與方案比較；手機則必須重新思考資訊出現的順序、表格比例、字級與操作方式。

因此我們針對 Mobile 重新安排產品重點、方案內容與試算流程，在較小的螢幕中保留必要的比較資訊，同時減少反覆縮放、左右尋找或滑動過多內容的情況。

我們不是單純做一個 RWD 版本，而是從使用者真正閱讀保險資訊的方式，重新安排不同裝置上的內容優先順序。

04.延續既有後端系統，單純重新設計前端流程

企業網站改版，不一定代表既有系統全部都要打掉重做。

明台產物原本就有自己的保險試算、投保與內部系統，因此這次專案的重點，是在既有後端架構之上，重新整理前台UIUX介面。

從機車險、國內外旅遊險到其他保險商品，我們依照不同險種的內容特性，重新設計產品頁的資訊結構與視覺呈現。

例如機車險頁面，不再只是大量條款與文字堆疊，而是依序整理成險種選擇、強制險與任意險差異、保障圖解、保障範圍以及常見問題，讓使用者可以從基本概念一路看到更完整的保障內容。

旅遊險除了要清楚說明保障內容，也需要讓使用者快速掌握實際費用。
因此國內旅遊險頁面除了重新整理商品重點、理賠案例、投保規定與常見問題，也加入簡易保費試算，讓使用者可以先依年齡、旅遊天數與保障額度查看方案價格，再進一步比較不同保障內容。相較於單純的商品介紹頁，這樣的安排讓「了解保障 → 試算費用 → 比較方案」可以在同一頁面中完成，閱讀與操作也更連續。