Pokédex|寶可夢圖鑑

2023/01/14閱讀時間約 2 分鐘

簡介

在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文,聯想起先前在網上閱讀到關於 Pokémon API 的文章,一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中,發現連續抓取 905 份寶可夢資料實在耗時 (約 50 秒),因此特意自製一份包含了 905 隻寶可夢 id、名稱、圖片及種類的 JSON 資料檔,極大縮短頁面的載入時間。

外觀與互動設計

  • 使用瀏覽器內建支援的色彩 - HTML Colors 作為色票參考
  • 使用思源黑體 (Noto Sans TC) 作為網站字體
  • 加入皮卡丘跑步動畫作為網頁載入完成前的過場
  • 透過載入目標數和當前資料量做計算、結合樣式綁定 (Style Binding) 方法,製作出頁面上方跑動的進度條
  • 參考 W3Schools 介紹使用 CSS 製作的提示框 (Tooltip),做出滑鼠碰觸圖鑑元素就會在序號前顯示寶可夢名稱的方便設計
  • 資訊卡中的寶可夢圖片加上白色陰影 (CSS drop-shadow()),達成如同發出光輝般的效果
  • 設計在大尺寸螢幕上,元素及字體大小能夠自適應縮放的響應式設計

開發紀錄

  • 透過 Node.js 將 PokeAPI 905 份寶可夢資料轉換成一份 JSON API,將網頁載入時間縮短為 1 秒,並實現中英語言切換
  • 使用體積小的 Vue 代替方案 - Petite Vue 作為開發方式
  • 使用寶可夢的 types 資料,製作出可透過點擊切換不同寶可夢種類的標籤
  • 開發過程中發現在切換寶可夢分類 (filter) 時,相較於建立 computed 的資料再使用 Vue 語法 v-for 產出元素,透過對元素綁定 HTML 屬性 hidden 或是改變其 CSS 屬性 display 的作法,有更好的狀態更新效能
  • 分別針對資訊卡中的寶可夢中、英文名字,以平均字數為基準,自動調整字體大小
  • 將整體寶可夢圖片從 118.2MB 壓縮到 32.8MB,進一步加快網頁載入
為什麼會看到廣告
37會員
32內容數
短篇奇幻作品將不定期更新。
留言0
查看全部
發表第一個留言支持創作者!