設計風格詞條 3-57

像素風Pixel Art Style

也常叫做：像素風、點陣風、Pixel Art

你可能會這樣說

做遊戲主題或懷舊專案的網站，想要 8-bit 像素圖、點陣字體的電玩味，但做出來不是糊掉就是不夠到位。

像素風是把圖面切成一格一格的小方塊來構圖，配上點陣字體與有限色票，召喚 8-bit 電玩時代的記憶。它的精神是「有限中見功力」：色票越少、格子越少，越考驗構圖。

網頁實作有兩個重點：像素圖要設成硬邊縮放（image-rendering: pixelated），放大才不會被瀏覽器糊化；字體選點陣字體，但只用在標題與裝飾，內文長文用點陣字會讀到眼睛花掉。

互動彩蛋很配這種風格：滑過時像素抖動、金幣音效、掃描線濾鏡，一點就很有味道。

PRESS START

(C) 1988 VIBE SOFT

❤️

emoji 一秒到位，但每台裝置長得不一樣。

兩個重點：像素圖要設 image-rendering:pixelated，放大才不會被糊化；點陣字只用在標題，內文用一般字體。
色票壓在八色以內最有味道。

有限色票、格子構圖、點陣字——8-bit 的限制就是它的風格。

圖 3-57　一格一格拼出來的愛心：像素風在限制中見功力。

中文就可以

請做一個像素風的活動頁：
標題與日期用點陣字體，內文維持一般黑體保證好讀。
主視覺用 8-bit 像素插畫，縮放設定為硬邊緣、不模糊。
色票限制在八色以內，按鈕做成遊戲選單的樣子，滑過有閃爍效果。
整頁加極淡掃描線，手機上也要保持像素清晰。