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,進一步加快網頁載入
贊助創作者百元,就抽 $8,888 紅包與好禮!
居住於台北市,熱衷網站開發和設計,認為兩者相輔相臣,致力於做到開發如同揮劍一般優雅。更多關於我:https://rayc.dev/links
嗯... 就把專案設計和開發的紀錄放在這邊吧!
如果要發表留言,請先登入註冊會員
打造你的創作天地
在這裡尋找共鳴,與方格子的 35 萬格友分享觀點與生活。
領取見面禮
只要設定追蹤作者,即可享有 48小時
Premium 閱讀權限