Google Fonts 推出 Material Icons 免費圖示字型,收錄兩千個圖案五種樣式

Google Fonts 推出 Material Icons 免費圖示字型,收錄兩千個圖案五種樣式

五年前 Google I/O 大會 Google 釋出數百個 Material Icons 免費圖示,這些圖案不僅會應用到自家產品開發,也將它開放原始碼放到 GitHub 網站上讓使用者免費下載使用,可自由使用於個人或商業用途。時至今日已累積超過 2000 多種不同圖案,並有五種樣式可供選擇,這些圖案對於在傳達一些概念或想法上尤其重要,特別是在數位環境使用者介面更是無所不在。

Gmail Classic Theme 讓信箱重新回到舊版介面(Chrome 擴充功能)

Gmail Classic Theme 讓信箱重新回到舊版介面(Chrome 擴充功能)

Google 旗下的免費信箱服務 Gmail 堪稱是最成功的產品之一,2004 年僅提供內部員工和受邀請的使用者進行測試,在當時來說提供 1 GB 容量簡直不可思議!直到 2007 年 Google 宣布將 Gmail 註冊完全開放,直到今日應該已經成為每個人都會有的 Email 信箱。如果你是 Gmail 使用者應該會發現 2018 年四月 Gmail 有了新介面,轉為 Google 現用的 Material Design 風格,也將字型改為 Product Sans(一款由 Google 開發的字型)。

不習慣 Google Chrome 69 全新介面設計?使用此設定可返回舊版介面

不習慣 Google Chrome 69 全新介面設計?使用此設定可返回舊版介面

Google Chrome 瀏覽器更新到 69 版後,會發現操作介面已經變得跟原本完全不同!一直耳聞 Google Chrome 即將更新介面,直到看到新設計已經是今天早上的事了。新介面設計讓每個分頁標籤變得不那麼分明,顏色轉淡,邊角的處理也變得更圓滑,但我覺得細節看起來是很舒服的,不過對於設計或配色每個人喜好不同,一定會有人喜歡也有人不喜歡。

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。

HTML Color Codes 全方位免費線上選色器,輕鬆獲取色彩代碼、RGB 和 HSL

HTML Color Codes 全方位免費線上選色器,輕鬆獲取色彩代碼
(Copyright: alessandroguerriero / 123RF Stock Photo

不知道你會不會經常用到選色器選色工具(Color Picker)呢?對我來說,我在編輯網頁樣式表 CSS 時才會找顏色,通常會從一些網站配色服務尋找看起來合適且舒服的色碼,顏色雖然看似不多,但相差一些些就可能有完全不同的感覺,例如前幾天介紹的「Colors.css 符合當前網頁設計風格的預設 16 種顏色調色盤」就提供許多很適合現代網頁設計的預設配色,我最近也開始使用;另外像是 Colorable 可產生符合 WCAG 規範的配色組合也是很推薦的配色工具,假如你偏好日系風格,NIPPON COLORS 則有代表日本的 250 種配色組合。

Device Metrics 應用程式開發必備!Google 收錄筆電、行動裝置及穿戴裝置螢幕規格細節查詢

Device Metrics 應用程式開發必備!Google 收錄各種常見筆電、行動裝置螢幕規格細節查詢
(Copyright: suziria / 123RF Stock Photo

伴隨著各種大小尺寸的行動裝置問世,對開發者來說,這也是另一個不得不克服的問題,尤其是如何讓應用程式支援更多螢幕尺寸或在各種平台使用,當然最好的方式是先鎖定最大、最廣泛使用族群,目前來說行動裝置為 iOS、Android,電腦則是 Windows 和 macOS 兩大作業系統。如果你是應用程式或軟體開發者,應該會需要一份包含各種主流裝置的技術細節。

Material UI 收錄 Google、微軟及社群網站等常見設計風格配色組合

Material UI 收錄 Google、微軟及社群網站等常見設計風格配色組合
(Copyright: mbaysan / 123RF Stock Photo

最近在設定社群分享按鈕時,因為要指定不同社群網路按鈕使用的顏色,上去 Google 後找到一個完整的標準色表,對於一般使用者來說,你可能記得 Facebook、Twitter 和 Google+ 各自的深藍色、淡藍色和橘紅色,但很難精確轉換成色碼值,我找到一份「Social Colors」記錄各種常見的社群網站代表色,而這網站還有收錄其他好用的色碼表。

Dark Reader 讓網站使用深色夜間瀏覽模式

Dark Reader 讓網站使用深色夜間瀏覽模式,解決白色背景造成的眼睛疲勞

如果你還有印象,之前介紹過一款 Darkness 瀏覽器擴充功能,讓 Google、Facebook 轉變成深色主題,除了可以有全新感受,也降低夜間使用因為畫面過度明亮導致眼睛疲勞等問題,不過這個外掛僅限於兩個網站,設定選項太少,好像有些不太過癮,如果你想把幾個常用網站都轉為夜間暗色模式,可以試試看本文要介紹的 Dark Reader。

Darkness 讓你的 Google、Facebook 使用全新深色主題風格(Chrome 擴充功能)

Darkness 讓你的 Google、Facebook 使用全新深色主題風格(Chrome 擴充功能)

你知道嗎?在平常習慣使用的網路服務裡,除了透過內建功能來切換版面設計,還能利用第三方擴充外掛來讓網站看起來更不一樣!例如之前介紹過 Ink for Google 為各項 Google 服務加入更多色彩,更貼近 Material Design 設計風格;Facebook Flat 則是讓臉書設計平面化,使網頁看起來更美麗、輕量化,也能提升瀏覽速度;就連維基百科都有 WikiWand 能改變它的外觀。

Ink for Google 為你的 Google 網站樣式畫龍點睛!更具質感設計效果(Chrome 擴充功能)

Ink for Google 為你的 Google 網站樣式畫龍點睛!讓它更貼近質感設計(Chrome 擴充功能)

Google 在前年 Google I/O 大會發表了全新 Material Design(質感設計)規範,這項設計是希望能透過新技術與科學的可能性,組合出良好設計的經典原則,有越來越多 Google 服務及應用程式已經開始遵循著 Material Design 設計風格,Google 也釋出免費向量圖示集免費圖示來供開發者自由使用,如今有越來越多的服務正朝這個方向前進當中。