上一篇我們已經完成了兩種主角色的註冊與登入畫面，也有將 Flow Chart 中所提到的店家角色稍微提及(如果忘記規則的話，可以回頭看下列文章)。本篇將重點放在服務項目這塊。

Day03：side project 必備的 Flow Chart(一)
Day04：side project 必備的 Flow Chart(二)

店家將必填的資料維護完成後，就可以開始上架即將提供給顧客的服務項目。所以選單中，開始有服務項目這個選項。

維護服務項目之 Wireframe 線稿(店家視角)

1. 服務表單列表頁

• 左上：完全沒有項目之情形，例如新加入的店家、服務項目被刪光等。
• 右上：一般有項目之情形，列表頁在電腦版會提供更多資訊，手機板因寬度有限，只會提供項目名稱，名稱後方會有狀態小 icon 供識別與篩選，表格最後方則可針對單一項目做編輯、刪除。預設每10筆一頁，提供頁碼切換功能。
• 左下：篩選後僅顯示符合條件之值。
• 右下：預想到有可能被顧客預約中之服務項目，被店家誤刪除，所以在此狀況下，該筆服務項目的刪除鈕將不開放點擊。
  

2. 新增服務項目之情境

• 新增服務項目時，如果最後一個欄位「是否開放預約」(IsOpen)未打開，系統不會報錯，店家可於後續有空時再回來新增供預約的時間。
• 呈上狀況，店家若開放預約，下方將會有表單供新增，每一個時段皆有兩個欄位，分別是的狀態、日期和時間。沒有被新增到的日期與時段，預設為「非供預約」。另外也彈性提供店家可自行將某些日期時段標示為「已預訂」。
  

3. 編輯服務項目之情境

基本上和新增一致規則。

預約服務項目之 Wireframe 線稿(顧客視角)

1. 服務項目單一詳細頁

• 進到單一頁面後，當然可以看到一些店家提供的詳細資訊。可供預約的日期預先使用表格方式，程式取到值後，還有時段可供預約的日期，會以綠勾 icon 顯示在該日期上。
• 如過都沒有也會清楚標示(在日期區塊蓋上白色遮罩)。
  

2. 開始預約後，一些特殊情境

3. 完整的預約流程

服務項目之 Wireframe 線稿設計小結

終於完成此 side project 的主軸功能線稿設計啦！