專案介紹 — Checkout Page
AlphaCamp 學期 3 模擬面試作業
※ 大綱：
1. 專案導覽與介紹
- 電商結帳頁面 Checkout Page2. 回答面試問題
▪︎ 你為何會選擇這個專案？
▪︎ 你使用了什麼技術？
▪︎ 哪部分你相對能掌握？哪裡花了最多時間？
▪︎ 過程中碰到什麼困難？又如何克服？
▪︎ 過程中你有對哪個前端技術有特別深刻的學習？
▪︎ 如果有時間，你會繼續開發哪個部分？
▪︎ 如果能夠重寫一次切版，你會修改哪個區塊的設計讓專案更好？
1. 專案頁面總覽 | 頁面特色
👉 電商結帳頁面 Checkout Page [ View ]
👉 ( Nov. 2021 更新) 使用 Vue.js 重新設計 [ Github ]
- RWD 設計，適合一般網頁及小螢幕使用者瀏覽
▪︎ 導覽列於小螢幕尺寸時會自動縮合，呈現簡潔的頁面
▪︎ 結帳表單與購物車的區塊會依螢幕大小進行不同的排版，以提升閱讀性
▪︎ 表格欄位自動根據使用者螢幕做調整，適時調整欄寬及換行
▪︎ 於小螢幕尺寸隱藏 footer 資訊，以避免資訊量過多模糊關注焦點 - 滿足使用者體驗的微互動設計：
︎▪︎ 黏著於頂部的導覽列能提供使用者觸手可及的導覽資訊
▪︎ 結帳表單拆分為多步驟，以減輕使用者閱讀負擔，
藉此維持 user 投入程度，避免消費者在下單前半途而廢
▪ 提供 dark mode，讓身處不同使用環境的 user 皆保有良好的 UX
▪︎ 按鈕與連結樣式會在滑鼠停留時產生對應變化，提供使用者引導
2. 回答面試問題
▪︎ Q1 你為何會選擇這個專案？
網路購物已經成為現代人生活中不可獲缺的一部分，消費者的購買習慣在 Covid 疫情的催化下更快速的被改變，B2C 電商平台所創造的營業額逐年攀升，已成為不可忽視的零售新戰場。
我自己也是網路購物的愛好者，從學生時期到開始工作的十年間，我對網路購物的喜愛從未下降，依賴程度甚至更加的提升。於電商消費的 UX 在十年間有卓越的進步，為我的生活帶來極大的便利，成為我日常生活的重要夥伴。
綜合以上，電商龐大且仍在成長的市場需求，加上我自身對網路消費的熱愛，促使我選擇電商網頁作為我的專案主題。
▪︎ Q2 你使用了什麼技術？
在這個專案中，我使用 Sass 來設計網頁，透過使用此 CSS 預處理器來提升樣式的撰寫速度。
選擇 Sass 是因為它所提供的變數、巢狀寫法、Mixins、Extend、迴圈…等語法，能夠使我更有結構地撰寫清晰、簡潔、好維護的 CSS 程式碼。
尤其在實踐 Dark Mode 與 RWD 功能時，搭配 Sass 能夠簡潔快速的呈現效果，當想抽換其中一部分的底色或寬度時，也能夠快速的調整，不需在茫茫 CSS code 中找出四散的相關設定，避開要逐一修改的麻煩。
▪︎ Q3 哪部分你相對能掌握？哪裡花了最多時間？
最能掌握的步驟是在 RWD 版面調整，我認爲這歸功於自己在切版前進行的事前規劃，在規劃 HTML 架構時，就已將版面流動方式納入考量。正式開始實作切版時，僅需依照規劃與 mobile first 原則先為小螢幕尺寸做樣式設定，整體畫面完成後再按照設計稿添加大螢幕的 RWD 設計即可。
花最多時間的部分是 Sass 語法的熟悉，初期對語法上不熟悉，因此花費了較多的時間在查找官方說明，以了解 Mixins、Extend、迴圈等功能該如何實踐。
▪︎ Q4 過程中碰到什麼困難？又如何克服？
在進行 Dark Mode 實作時，發現原先的規劃方式不適合，因此進行了重構。
原先的規劃是透過監聽代表 dark mode 的月亮符號，當 button 被點擊時，觸發樣式套用在 documentElement 的節點上，並隱藏月亮按鈕改顯示太陽按鈕。但實作過程發現要設定的 add/remove classes 過多，並不是個好方法，因此決定放棄此法。
最後是透過翻閱自己的學習筆記尋找靈感，決定改為監聽 input checkbox 的 ‘change’ event，將原先的 <button> 改為 <label>，針對新的想法重構 HTML and JS，完成設定。
▪︎ Q5 過程中你有對哪個前端技術有特別深刻的學習？
透過這次實作，讓我對 Sass 有了更深入的了解，更能體會到 Sass/scss 是熱門工具的原因了。
▪︎ Q6 如果有時間，你會繼續開發哪個部分？
我會繼續開發 RWD 的相關設定，目前 Media queries 只針對 PC 與手機做設定，若有時間會想增加平板的設定，以提升使用體驗。
▪︎ Q7 如果能夠重寫一次切版，你會修改哪個區塊的設計讓專案更好？
本次的切版，我使用了 Sass create 出來的 shorthand classes，在 HTML 中加入許多元素選擇器。當初有這樣的想法是為了效仿 Bootstrap 的框架，希望在撰寫 HTML 的同時就能讓版面有六七成的相似度，但當我開始細微的調整 CSS styles 時，發現混用 class 元素選擇器與 CSS 樣式會造成樣式互相干擾，維護與調整時的閱讀性也不佳。
若可以重新寫一次切版，我會捨去大多數的 shorthand classes，直接將樣式設定統整在 Sass/CSS 中，避免樣式干擾、提升可閱讀性。
