AC 學期 2–3 電商網頁切版 | 面試模擬
Alpha Camp 模擬面試作業 — 介紹你的專案
✎大綱
1. 專案導覽與介紹
- TSHIRT STORE 電商網頁2. 回答面試問題：
▪︎ 你為何會選擇這個專案？
▪︎ 你使用了什麼技術？
▪︎ 哪部分你相對能掌握？哪裡花了最多時間？
▪︎ 過程中碰到什麼困難？又如何克服？
▪︎ 過程中你有對哪個前端技術有特別深刻的學習？
▪︎ 如果有時間，你會繼續開發哪個部分？
▪︎ 如果能夠重寫一次切版，你會修改哪個區塊的設計讓專案更好？
1. 專案介紹 — TSHIRT STORE 電商網頁切版
商品總覽頁面 | 頁面特色
- RWD 設計，適合一般網頁及小螢幕使用者瀏覽
▪︎ 導覽列於小螢幕尺寸時會自動縮合，呈現簡潔的頁面
▪︎ 單行商品呈列數與照片大小皆會根據使用者的裝置寬度自動調整
▪︎ 文字大小與行距會依據使用者裝置做微調 - 滿足使用者體驗的微互動設計：
︎▪︎ 黏著於頂部的導覽列能提供使用者觸手可及的導覽資訊
▪︎ 部分元件隱藏折疊 (如：搜尋欄、導航列)，提供簡潔舒適的 UI ，以保持與用者的投入程度
▪︎ 按鈕樣式會在滑鼠停留時產生對應變化，提供使用者引導
▪︎ 商品圖會在使用者 hover 時切換，自動浮現 Model 實穿照片
[ 商品瀏覽頁面 ]
[ 網頁版 — RWD View ]
[ 小螢幕裝置 — RWD View ]
[ Codepen Link ] 於 Codepen 上瀏覽作品 ☞ Here
2. 面試模擬指定題
▪︎ Q1 你為何會選擇這個專案？
網路購物已經成為現代人生活中不可獲缺的一部分，消費者的購買習慣在 Covid 疫情的催化下更快速的被改變，B2C 電商平台所創造的營業額逐年攀升，已成為不可忽視的零售新戰場。
我自己也是網路購物的愛好者，從學生時期到開始工作的十年間，我對網路購物的喜愛從未下降，依賴程度甚至更加的提升。於電商消費的 UX 在十年間有卓越的進步，為我的生活帶來極大的便利，成為我日常生活的重要夥伴。
綜合以上，電商龐大且仍在成長的市場需求，加上我自身對網路消費的熱愛，促使我選擇電商網頁作為我的專案主題。
▪︎ Q2 你使用了什麼技術？
在排版的部分，我綜合使用了 Flexbox 與 Grid 來幫助我更有效率的進行一維及二維的網頁排版。
在 RWD 的部分，我遵循了 Mobile First 的開發流程，考量行動裝置有限的硬體效能，優先針對小螢幕裝置進行樣式排版，提高行動版畫面的呈現速度。後續使用 Media Queries 針對網頁用戶的版面進行調整，善用 Grid-area 有效地設定導覽列版面切換，並透過 Grid auto-fit 屬性來使產品呈現自動隨隨螢幕尺寸調整。
為了提升用戶體驗，我利用 position 的設定使搜尋列黏著於頂部，提供使用者觸手可及的導覽資訊。也透過 CSS 設定導覽列與搜尋欄的摺疊隱藏，使畫面盡可能的簡潔。並搭配各種偽類來設定 CSS style，呈現網頁互動、提供使用者適當的提示，保持內容趣味性來維持用戶的專注度，減低用戶跳出率(Bounce Rate）並增加停留時間(Dwell time)。
另外考量到產品行銷，為了吸引消費者對產品的興趣，當滑鼠移過商品圖時，照片會切換為 Model 實穿照，展現商品的不同樣貌。這部分的設計實現應用到了 transform 與 position、opacity 的操作。
▪︎ Q3 哪部分你相對能掌握？哪裡花了最多時間？
在這個專案中花費我最多時間的是 Grid 排版，在剛開始執行切版時，我對Grid 的許多細節並不了解，因此花費不少時間研究 Grid 相關屬性和應用。在導覽列的 RWD 實現過程中，最考驗我對 Grid 的理解深度，因為導覽列的排版會隨 Media Queries 進行大程度的重新排列，需要對 Grid 有一定程度的熟悉，才能順利完成。
反之 flex box 相對好掌握，一部分是因為自己已經累積了不少 flex box 的運用經驗，但主因我認為是 flexbox 與 grid 兩者維度的差異，一維的 flexbox 相對起二維的 grid 單純許多。
▪︎ Q4 過程中碰到什麼困難？又如何克服？
在頁面最下方的 banner 區塊，畫面構造簡單，原先預期可以快速輕鬆的處理完畢，但實際切版時，受限於 banner 圖檔尺寸，為了呈現最佳的畫面反覆的調整了多次 CSS 設定，結果卻一直不如預期。
一般來說，若圖檔是由團隊內的設計師提供，應該不會有這種困擾，但既然現況不是這麼幸運，遇到障礙了就只能想辦法繞開。我的克服方式是把圖檔與文字以 position 定位拆成不同的圖層，並額外包加一層父元素來協助圖檔不在大螢幕尺寸中過度放大失真。
▪︎ Q5 過程中你有對哪個前端技術有特別深刻的學習？
過程中最特別深刻的學習是 Grid 的設定，透過專案實作，我對 Grid container 與 Grid items 的操作有了更全面的理解，體悟到了Grid auto-fit 的貼心與方便，grid-area 的強大與便利，綜合應用起來讓我的程式碼簡潔需多，架構也更加乾淨益維護，實在是收穫滿滿。
▪︎ Q6 (非指定題目) 如果有時間，你會繼續開發哪個部分？
如果有時間，我會想繼續琢磨 <select> <option> 的樣式優化，目前的樣式仍是瀏覽器的內建設定，只有功能性而缺少美觀設計。
▪︎ Q7 (非指定題目) 如果能夠重寫一次切版，你會修改哪個區塊的設計讓專案更好？
如果重來一次，我會想把 Category 的 filter 排版重新設計，現行的三個篩選下拉選單太佔畫面了，應該要做出折疊隱藏的設計，在使用者不需要的情況時盡可能使頁面簡潔俐落。
