2022-03-25|閱讀時間 ‧ 約 3 分鐘

HTML Reserved Colors|可用於設計和幫助開發的色票複製工具

簡介
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近 140 種網頁保留色,覺得似乎記住或是有系統的管理這些顏色有助於提升開發效率,因此決定做一個能夠幫助開發、同時也能作為美術作品來展示的 web app。色卡的外觀設計上,聯想到在 2020 年風靡一時的新擬物風格 Neumorphism (即 New Skeuomorphism),對於使用亮暗陰影就能做出 3D 視覺效果而深受啟發,未曾嘗試過的好奇心驅使我完成了這次的作品。

外觀與互動設計
  • 以 Neumorphism 新擬物風格作為主視覺,再加上可愛的圓角,呈現出比 Pantone 色票 更為討喜、耐看的色票卡片
  • 顏色名稱的字體大小和上下間距,依照長度做三段漸進調整
  • 封鎖不必要的文字選取、拖拉和右鍵點擊操作,並設計雙擊左鍵 (觸控設備點兩下) 直達頁首
  • 在鼠標碰觸到顏色名稱、HEX/RBG 碼時,更換鼠標為滴管圖案以提示可複製區域,同時也將預設和客製化鼠標改得稍大一些,且統一顏色為較淡一點的黑色 (`#222`)
  • 點擊複製顏色名稱、HEX/RBG 碼時,加入複製成功的音效,提升使用體驗
  • 將網站設計為可在網址後加入 Query String 參數 `colors`,實現方便的顏色分享功能 (範例)

開發紀錄
  • 自製 色彩資料 API
  • 使用相似於 Preact 的 micro-library petite-vue,開發無需 build
  • 排版採手機優先 (mobile first),並使用 Flexbox 讓色票卡片達到自適應效果,以及使用 `rem` 和 `em` 作為元件單位,達成在任何尺寸裝置上 (120 吋超大螢幕也 ok!),保持一致絕佳比例的響應式設計
  • 將網頁元素預設為不可見 (`opacity: 0`),等資料掛載後再配合動畫做淡入 (fade in),讓動畫的銜接更為順暢
  • 使用優雅的無聲定時播放音效方式來製造音檔緩存

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.