Ghibli Gallery｜重新設計吉卜力工作室作品相簿

更新於 2022/04/29發佈於 2022/03/25閱讀時間約 2 分鐘

簡介

2020 下半年在全世界仍受到冠狀病毒肆虐期間，吉卜力工作室在官網四次公開合計 24 部動畫作品、共 1,178 張高畫質劇照，表示在未觸法的情形之下可自由下載使用，並且還會持續釋出過去動畫作品的劇照。由於官網的劇照呈現方式不太友好，也未在移動裝置上做排版優化，加上分批公開的作品劇照未整合在一起，對於歷史悠久且廣受好評的工作室而言實在可惜，因此這次透過對吉卜力工作室網站的網址命名邏輯和動畫出版年份做資料處理，設計開發出整合目前所有吉卜力工作室公開的作品劇照、且排版更為清晰和易於使用的新吉卜力相簿。

外觀與互動設計

依照動畫出版年份和作品劇照的網址命名邏輯，整合出新的作品劇照資料
網頁載入時加入 Loading 畫面，加深使用者對吉卜力工作室的品牌印象，並預設瀏覽位置回到最上方
使用 Noto Serif JP 字體，統一日文、英文和數字基線
將網站設計為可在網址後加入 Query String 參數 en，輕鬆切換英文、日文介面
透過點擊作品目錄切換動畫劇照，達成不換頁觀看
將原本吉卜力工作室官網散佈式的劇照改為兩欄並排 (平板與手機則ㄧ欄) 並配合深色主題呈現，視覺上更為精緻且能長久觀看
使用平板尺寸以上的設備觀看時，可透過點擊劇照進入劇院模式
將劇院模式的關閉按鈕「✕」設計為只在碰觸或移動滑鼠的 2 秒內顯示，減弱關閉按鈕的強烈存在感

開發紀錄

自製吉卜力動畫作品劇照資料
使用相似於 Preact 的 micro-library petite-vue，開發無需 build
樣式與功能性程式碼皆以模組化方式進行拆分管理
RWD 響應式設計上使用 rem 單位配合 Media Query 呈現，達成任意縮放螢幕、元素單位比例也能自適應
使用壓縮工具 Terser 搭配 IIFE 立即函式壓縮 JavaScript 程式碼

即將進入廣告，捲動後可繼續閱讀

為什麼會看到廣告

37會員

31內容數

短篇奇幻作品將不定期更新。

留言0

查看全部

發表第一個留言支持創作者！

Ray C的沙龍的其他內容

Vite Todo｜使用 Vite 和 Tailwind 打造的待辦事項清單

這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...

#設計 #程式設計 #產品設計

Vanilla Calculator｜立即顯示結果的優雅計算機

我並非這美術設計的原創，不過得益於 Instagram 上 @uixperience 的作品參考，才實現了這優雅計算機的外觀。在互動的部分，我讓按鍵在按下時減少陰影，並加深按鍵背景的顏色，這樣就像是真的被按了下去一樣；另外，在顯示計算結果的部分，透過 JS 增減 CSS class 的方式隨時...

#設計 #平面設計 #產品設計

Draggable To-Do List｜可拖曳的待辦事項清單

一開始的版本是和 Todo MVC 類似的簡易待辦事項清單，由於本身的使用需求，不斷調整和優化 Todo 清單的外觀與功能，如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持，以及對 XSS 跨網站指令程式碼的防禦處...

#設計 #程式 #程式設計