WEBA - 輪播元件優化

優化區塊編輯流程，提升操作直覺與版型彈性

年份

2024

我的角色

UI/UX 設計師

負責項目

功能流程規劃、設計完稿、工程交付

WEBA 是一款協助使用者快速建立互動網頁的 No-Code 平台，輪播元件是其中使用最頻繁的內容區塊之一。過去的設計在操作流程與樣式設定上不夠直覺，使用者難以快速編輯，也缺乏外觀上的調整彈性。此次改版針對這些問題，優化元件的設定邏輯與操作體驗，讓使用者能更高效地打造符合需求的版面。

WEBA 的使用者多為銀行與保險業的美編與行銷人員，常需在短時間內建立活動網頁。

根據我們在平台上的設計經驗與過往用戶回饋，整理出三個對使用體驗影響重大的問題，並針對這些問題重新設計輪播元件的操作流程與介面，提升整體編輯效率，並讓使用者能更靈活地打造符合需求的視覺效果。

在這次的設計改版中，我遵守以下幾項設計原則，作為規劃與決策的依據：

原有樣式與區塊設定項目分散，排序混亂、彈性不足，導致使用者難以快速理解與調整元件樣式。這次改版將設定項目重新分類為「輪播設定」與「樣式設定」，同時加入圓角、箭頭與導覽列樣式等控制選項，讓使用者能依需求靈活調整元件外觀與結構，大幅提升整體編輯效率與視覺自由度。

過去需在不同模式間來回切換，才能完成區塊設定與編輯。這次改版將操作整合至單一模式中，減少跳轉，提高流程順暢度與操作專注度。同時也優化了區塊命名邏輯，將「區塊、新區塊、新區塊…」調整為「區塊 1、區塊 2…」，方便使用者快速辨識並選擇欲編輯的內容。

原本的介面在一般畫布模式與輪播區塊編輯模式之間無視覺區隔，使用者難以辨識當前狀態。這次設計在進入編輯模式後，畫布上非輪播區塊內元件會套用半透明的遮罩，並鎖定點擊操作，幫助使用者清楚掌握目前的編輯位置與狀態。