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

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

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

簡介

雖然知道可以透過 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),讓動畫的銜接更為順暢
  • 使用優雅的無聲定時播放音效方式來製造音檔緩存
0
贊助支持創作者,成為他繼續創作的動力吧!
作者介紹
Ray C
Ray C
居住於台北市,熱衷網站開發和設計,認為兩者相輔相臣,致力於做到開發如同揮劍一般優雅。更多關於我:https://rayc.dev/links
本文發佈於
嗯... 就把專案設計和開發的紀錄放在這邊吧!
如果要發表留言,請先登入註冊會員
領取見面禮
只要設定追蹤作者,即可享有 48小時
Premium 閱讀權限