健身機構網站制作：課程表與私教預約功能的實用設計

作者：天晴創藝發布時間：8/24/2025 9:05:06 AM瀏覽次數：10221文章出處：移動端網站制作

健身機構網站的核心功能之一是幫助會員便捷地查看課程安排并預約私教服務。一個設計精良的課程表和預約系統不僅能提升用戶體驗，還能提高運營效率和客戶滿意度。

課程表設計的核心原則

1. 清晰易讀性

課程表信息必須一目了然，用戶應能在 30 秒內找到感興趣的課程。采用明確的視覺層級，突出關鍵信息如課程名稱、時間和教練。

2. 篩選便捷性

提供多維度篩選功能，如按課程類型、時間段、教練等篩選，幫助用戶快速找到所需課程。

3. 實時性

顯示課程當前狀態（可預約、已滿、熱門），并實時更新預約情況。

4. 響應式設計

在手機、平板和桌面設備上均能良好展示，特別優化移動端體驗，方便會員在任何場景下查看和預約。

私教預約功能的設計要點

1. 簡化預約流程

將預約步驟控制在 3 步以內，減少用戶放棄率。

2. 教練信息展示

提供教練照片、專長、資歷和評價等信息，幫助用戶做出選擇。

3. 時間選擇直觀

采用日歷視圖展示教練可預約時段，清晰標記已預約和可預約時間。

4. 預約提醒

提供郵件或短信提醒功能，減少爽約率。

課程表設計的技術實現要點

1. 數據結構設計

為課程表設計合理的數據結構，便于管理和展示：

							javascript
						
// 課程數據結構示例 const courseData = { // 按日期組織課程 "2023-06-12": [ { id: 1, name: "晨間瑜伽", type: "yoga", level: "beginner", startTime: "07:00", endTime: "08:00", trainer: { id: 2, name: "李教練", avatar: "https://picsum.photos/id/64/100/100" }, location: "瑜伽室", capacity: 20, booked: 8, status: "available" // available, limited, full }, // 更多課程... ], // 更多日期... };

2. 動態渲染與篩選

實現課程表的動態渲染和多條件篩選功能：

							javascript
						
// 課程篩選函數 function filterCourses(courses, filters) { return courses.filter(course => { // 課程類型篩選 if (filters.type && course.type !== filters.type) return false; // 教練篩選 if (filters.trainer && course.trainer.id !== filters.trainer) return false; // 難度級別篩選 if (filters.level && course.level !== filters.level) return false; return true; }); } // 渲染課程表 function renderCourseTable(date) { const courses = courseData[date] || []; const filters = getCurrentFilters(); // 獲取當前篩選條件 const filteredCourses = filterCourses(courses, filters); const tableBody = document.querySelector('#course-table tbody'); tableBody.innerHTML = ''; if (filteredCourses.length === 0) { tableBody.innerHTML = ` <tr>
        <td colspan="4" class="py-8 text-center text-gray-500">
          沒有找到符合條件的課程
        </td>
      </tr> `; return; } filteredCourses.forEach(course => { const statusClass = course.status === 'available' ? 'bg-green-100 text-green-800' : course.status === 'limited' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'; const statusText = course.status === 'available' ? '可預約' : course.status === 'limited' ? `剩余${course.capacity - course.booked}席` : '已滿'; const buttonHtml = course.status === 'full' ? '<button class="bg-gray-200 text-gray-500 px-4 py-1 rounded-md text-sm cursor-not-allowed">候補</button>' : `<button class="btn-outline py-1 px-4 text-sm" onclick="bookCourse(${course.id})">預約</button>`; const courseRow = document.createElement('tr'); courseRow.className = 'border-b hover:bg-light/50 transition-colors'; courseRow.innerHTML = ` <td class="py-4 px-6 font-medium">${course.startTime} - ${course.endTime}</td>
      <td class="py-4 px-4">
        <div class="flex items-center">
          <div class="w-10 h-10 rounded-full ${getCourseTypeColor(course.type)} flex items-center justify-center ${getCourseTypeTextColor(course.type)} mr-3">
            <i class="${getCourseTypeIcon(course.type)}"></i>
          </div>
          <div>
            <div class="font-medium">${course.name}</div>
            <div class="text-sm text-gray-500">${getLevelText(course.level)} · ${course.location}</div>
          </div>
        </div>
      </td>
      <td class="py-4 px-6 text-center">
        <div class="flex items-center justify-center">
          <img src="${course.trainer.avatar}" alt="${course.trainer.name}" class="w-8 h-8 rounded-full mr-2">
          <span>${course.trainer.name}</span>
        </div>
      </td>
      <td class="py-4 px-6 text-center">
        <span class="inline-block px-2 py-1 text-xs ${statusClass} rounded-full mr-2">${statusText}</span>
        ${buttonHtml}
      </td> `; tableBody.appendChild(courseRow); }); }

私教預約系統的實現要點

1. 預約流程設計

將預約流程分解為幾個關鍵步驟，降低用戶操作難度：

選擇教練 - 展示教練信息和專長
選擇課程類型 - 提供不同時長和類型的私教課程
選擇日期和時間 - 直觀展示教練可預約時段
填寫個人信息 - 收集必要的聯系信息
確認預約 - 展示預約詳情并提交
預約成功 - 顯示成功信息和后續步驟

2. 日歷與時間選擇器

實現直觀易用的日歷和時間選擇器：

							javascript
						
// 生成日歷 function generateCalendar(year, month, availableDates) { const firstDay = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); let calendarHtml = ''; // 生成星期標題 const weekdays = ['日', '一', '二', '三', '四', '五', '六']; weekdays.forEach(day => { calendarHtml += `<div class="text-center text-gray-500 text-sm">${day}</div>`; }); // 填充月初空白 for (let i = 0; i < firstDay; i++) { calendarHtml += '<div class="h-12"></div>'; } // 填充日期 for (let day = 1; day <= daysInMonth; day++) { const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const isAvailable = availableDates.includes(dateStr); const isToday = new Date().toDateString() === new Date(year, month, day).toDateString(); let classes = 'h-12 flex items-center justify-center cursor-pointer transition-colors'; if (isToday) { classes += ' bg-primary text-white rounded-full'; } else if (!isAvailable) { classes += ' text-gray-400 cursor-not-allowed'; } else { classes += ' hover:bg-gray-100 rounded-full'; } calendarHtml += `<div class="${classes}" data-date="${dateStr}">${day}</div>`; } return calendarHtml; } // 加載教練可預約時間 function loadTrainerAvailability(trainerId, date) { // 模擬API請求 fetch(`/api/trainers/${trainerId}/availability?date=${date}`) .then(response => response.json()) .then(data => { renderTimeSlots(data.availableSlots, data.bookedSlots); }) .catch(error => { console.error('Failed to load availability:', error); }); } // 渲染時間段選擇 function renderTimeSlots(availableSlots, bookedSlots) { const timeContainer = document.querySelector('#time-slots-container'); timeContainer.innerHTML = ''; // 生成一天中的可能時間段（例如8:00到22:00，每小時一個時段） for (let hour = 8; hour <= 22; hour++) { const timeStr = `${String(hour).padStart(2, '0')}:00`; const isBooked = bookedSlots.includes(timeStr); const isAvailable = availableSlots.includes(timeStr); let classes = 'py-2 border rounded-md transition-colors'; let clickHandler = ''; if (isBooked) { classes += ' border-gray-300 bg-gray-100 text-gray-400 cursor-not-allowed'; } else if (isAvailable) { classes += ' border-gray-300 hover:border-primary hover:text-primary cursor-pointer'; clickHandler = `onclick="selectTimeSlot('${timeStr}')"`; } else { classes += ' border-gray-300 bg-gray-50 text-gray-400 cursor-not-allowed'; } timeContainer.innerHTML += ` <button type="button" class="${classes}" ${clickHandler}>${timeStr}</button> `; } }

提升用戶體驗的關鍵功能

1. 實時庫存顯示

實時展示課程剩余名額北京網站建設，創造稀缺感，促進用戶決策：

當剩余名額少于 5 個時，顯示 "名額緊張" 標識
課程已滿時，提供候補功能
實時更新已預約人數，保持數據準確性

2. 預約提醒系統

減少用戶爽約，提高資源利用率：

							javascript
						
// 設置預約提醒 function setBookingReminder(bookingId, date, time, method = 'sms') { // 計算提醒時間（提前2小時） const reminderTime = new Date(date); const [hours, minutes] = time.split(':').map(Number); reminderTime.setHours(hours, minutes); reminderTime.setHours(reminderTime.getHours() - 2); // 計算當前時間與提醒時間的差值（毫秒） const now = new Date(); const timeDiff = reminderTime - now; if (timeDiff > 0) { // 設置本地提醒（實際應用中可能需要后端支持） setTimeout(() => { sendReminder(bookingId, method); }, timeDiff); // 存儲提醒設置網頁制作，以便頁面刷新后恢復 saveReminderSetting(bookingId, reminderTime, method); } } // 發送提醒 function sendReminder(bookingId, method) { // 獲取預約詳情 const booking = getBookingDetails(bookingId); if (method === 'sms') { // 實際應用中調用短信API console.log(`發送短信提醒: 您預約的${booking.trainer}教練課程將于${booking.time}開始`); } else if (method === 'app') { // 應用內通知 showNotification(`您的私教課程將于${booking.time}開始`, '提醒'); } }