拉緹夏部屋

因為對UI有興趣，且剛接觸這領域只有一小段時間，為了能增加自己的作品，剛好從六角學院粉絲團上得知了The F2E - 前端修練精神時光屋這活動，於是就決定要參加了!
有分為UI設計組、前端工程組；活動期間是2019/7/4-2019/9/9 為期9週的活動(UI組)，每週一中午12點公佈題目，隔週一中午前12點完成，投稿上傳作品即當週成功闖關。

我參加的是UI設計組，目標是盡量完成這9週共9個作品。

第六關作品順利在時間內交件了~  (灑花)

---

 

第六關 - 旅館預約服務

題目網址：https://challenge.thef2e.com/news/17

user story

• 要幫一間旅館設計訂房流程
• 不需進行會員註冊，只需填寫姓名、電話、預約起迄時間等三個欄位，就可進行訂房。
• 這間旅館名稱未訂，旅館老闆請 UI 們幫忙想旅館名稱
• 重要：這間旅館有六個房間，房間資訊請觀看此連結。

functional map

• 首頁：能看到所有房型，並能點擊任一房型，進入到單一房型頁面觀看更多
• 單一房型頁面：
  • 客戶可以觀看該房型詳細資訊，例如旅館描述、平日價格(一~四)、假日價格(五~日)、checkIn 時間、其他服務，詳細資訊欄位請參考此連結。
  • 客戶可以用日曆方式，瀏覽未來 90 天已預約與尚未預約的時段。範例一、範例二
  • 客戶在選擇預約日期時，會即時顯示訂房價格總價
  • 客戶可以線上訂房，需填寫的欄位有
    • 欄位：姓名、電話、預約起迄
    • 只能預約未來 90 天內的時段
  • 若預約失敗，會回傳訊息讓客戶知曉，失敗原因項目如下
    • 預訂 90 天後
    • 預約時間已被人預訂
    • 您預約的是過去時間，例如昨天

理念

設計採簡單清爽的介面，色系也簡化，以白、黑、橘為主色。

Wireframe

(待補)

使用軟體/技術/素材

• 使用軟體：Adobe XD (介面設計)
• 素材：Iconfinder (ICON)、FLATICON (ICON)
• 作品縮圖：Photoshop

點我看連結