Open post

水波紋的按鈕回饋

在 UI & UX 的設計上,按鈕的回饋在設計上是一個需要反覆推敲的重點。目的是要提醒使用者目前的動作是什麼。一般常見的回饋方式有改變顏色、置換 ICON、轉換按鈕造型等等多種方式。其中,水波紋的效果因為 Google 的 Material Design 的採用,也開始被大家所接受。Subtle Click Feedback Effects 提供了 22 種各式水波紋的回饋效果,而且包含相關的原始碼,讓你可以藉由線上讀範例,馬上將各種水波紋彙整到需要的網站裡。(完)

PS. IE 10 不支援這個效果。

Open post

Transformicons:為 Icon 增加動態效果

目前一般的網頁 Iocn 都是靜態的,頂多用 Gif 表現一些簡單的效果,如果要像 Flash 可以有一個平滑的動畫效果,往往還需要借助程式設計師為這些動畫編寫相關的程式碼。這對視覺設計師來說,會產生一個問題,那就是對畫面失去部分的掌握,往往需要等到程式設計師處理完後,再由視覺設計師做最後的潤飾,在案件急迫或客戶預算有限的形況下,很容易產生執行上的困難。因此,對視覺設計師來說會希望有一個簡單的工具來幫助他處理類似的問題。

對於這個問題 Transformicons 顯然注意到了。它提供一系列由 SVG 及 CSS 組成的動態 Icon,像是常用的選單、網格、新增、刪除、寄信、載入等等動態效果,而且你只要透過點選 Builder 的按鈕,然後勾選你需要的動態效果,就可以直接在線上產生相關的程式碼。讓視覺設計師在製作網頁的時候能夠直接複製貼上,不用為這些可以添加畫面趣味的小動畫傷腦筋。(完)

讓網頁設計師會心一笑的 CSS 雙關語

任職於澳洲墨爾本 SEO 公司的 Saijo George,因為工作的關係時常需要蒐集各類型的資訊,他在 reddit 看到一篇關於 CSS 雙關語的討論,內容由歷史、天文、政治、商業、建築、小說、懸疑事件等等所組成,並透過標準的 CSS 來呈現這些事件,讓人乍看之下以為只是一般的 CSS,但仔細檢視內容後,又發現這些 CSS 別有洞天。Saijo George 覺得十分有趣,將這些由網頁設計師們提供出來的 CSS 笑話收錄分享到 CSS Puns & CSS Jokes 裡。
了解更多 “讓網頁設計師會心一笑的 CSS 雙關語”

is.js 小秘書,輕巧的檢查函式庫

在做網頁互動的時候,我們會希望對一些使用者提供的資訊或是環境參數進行檢查,例如,一份給使用者填寫的表單在送出之前會希望先對表單的內容做一些簡單的檢查,以免使用者填入一些錯誤的資訊 (不管有意或無意),增加 Server 檢查的負擔,像是電子郵件或網址的格式是否正確、信用卡的數值是否符合相關的規範、使用什麼類型的設備等等…
了解更多 “is.js 小秘書,輕巧的檢查函式庫”

Open post

SVG 做的載入動畫

載入動畫是網路上很常見的小功能,主要是用來提醒瀏覽者網頁目前正處於下載的階段,目前大多會使用常見的 Gif 來製作這樣的效果,像是知名的線上工具 Ajaxload。雖然這些 Gif 的確很方便,但還是有一些點陣檔普遍的缺點無法克服,像是不行自由縮放、檔案大小會與動畫的複雜度成正比、不是那麼完美的去背等等。而這些問題正是 SVG 的優點;Sam 是一位住在紐約布魯克林區的設計師,他在常見的 Gif 點陣檔之外,另外提供了一組向量 SVG 做的載入動畫,更重要的是,你可以免費下載,有需要的人趕快來玩看看吧。 (完)

Open post

用 chart.js 畫圖表,十分鐘就上手

有人說未來是一個數據化的時代,特別是即將到來的物連網,會讓生活中的每樣東西都連上網路,當這些設備連上網後會隨者消費者的使用而產生一連串的原生數據;這些原生的數據在未經整理的情況下,對一般人來說會很難理解,往往需要經過專門的單位把數據轉換成有意義的文字或圖像,才能方便理解這些數據背後的意義。舉例來說,如果你有經營網站,一定會使用到 Google Analytics 這套圖像化的工具來幫你紀錄一些訪客資訊,像是瀏覽器的種類、停留的時間、使用那些關鍵字等等。讓你可以透過 Google Analytics 提供的圖表訊息,進一步調整你的網站。
了解更多 “用 chart.js 畫圖表,十分鐘就上手”

Open post

四個提供線上毛筆字體的網站

在設計的領域,講到毛筆字體很直覺就會想到二南堂法帖,畢竟二南堂長期在這個領域耕耘,早就建立起不錯的口碑。但一套完整個二堂法帖所費不貲,如果你只想在小地方上局部使用,就成本效益來說並不划算。這時一些提供線上毛筆字體服務的網站就是不錯的替代方案,下面我們分享四個收藏量頗豐的毛筆字體網站,且查詢便利,讓你在製作網站或設計需要中國元素的稿子時參考使用。
了解更多 “四個提供線上毛筆字體的網站”

Google Fonts 提供五種中文 Webfont,早起的鳥兒有的玩

還在等待 Google 思源黑體的 Webfonts 嗎?現在 Google Fonts 早鳥頁開始提供黑體、仿宋、明體、楷體及圓體等五種中文 Webfonts 供大家測試使用。剛試了一下,基本的顯示沒什麼問題,行動設備的顯示非常優秀 (黑體),線條銳利清晰,桌面端則還有在優化的空間;但黑體字的部分,看起來似乎不是大家期待已久的思源黑體,也許 Google 還有其他的考量。由於目前中文的 Webfont 只是測試階段,使用上還有一些小問題,像是粗體的時候,部分文字會出現簍空的情況,現階段不建議用在正式的網頁裡,比較適合想嘗鮮的朋友玩看看。
了解更多 “Google Fonts 提供五種中文 Webfont,早起的鳥兒有的玩”

Open post

野生的設計師哪裡找?

365 Awesome Designers 提供了一個很有趣的服務,那就是每天在全球尋找一名傑出的設計師,並把他的作品及相關資料登錄在網站上,而且不限領域。如果剛好你也是一名設計師,可以透過 365 Awesome Designers 地介紹,看到世界各地傑出的設計師及他們的作品,也可以在創意枯竭的時候找靈感,看看他們今天又介紹哪位設計師,天天都會有小驚喜。如果你有案子要發包,正在頭痛該找誰時,365 Awesome Designers 幫你把全世界的設計師都搬到眼前來,讓你透過設計師提供的作品,慢慢選擇適合的合作對象。(完)

Posts navigation

1 2 3 4 5 6
Scroll to top