WOW.js

這三四年來,為了方便手機及平板使用,網頁的編排及內容也朝簡化邁。過去動輒三、四欄的編排方式漸漸被淘汰。取而代之的是透過數張高解析的底圖,輔以 Parallax scrolling (視差滾動) 的一頁式網站逐漸冒出頭來。這樣做有幾點好處,一、方便行動設備透過手指操控畫面,上下滑動非常直覺,完全不需要學習;二、內容和編排簡化後,文字和連結可以放大,避免文字或連結會因為內容過於豐富而太小;三、使用者不容易迷路,區塊和段落分明,網站的服務項目一目了然。

為了讓畫面不因內容的簡化而顯得單調,有時候設計師們也會在頁面的安排上一些 CSS3 的動態效果,添加使用者在閱讀上的趣味。但 CSS3 有個問題,它雖然可以用短短幾行敘述就輕易地創造出一些好玩的動態效果,但他缺乏一些 DOM 的觸發機制,讓 CSS3 在使用上相對受限。而 DOM 正是 Javascript 的強項。因此除了 CSS3 之外,往往還會再搭配 Javascript 來增加互動,而 WOW.js 就是用來處理觸發捲動頁面需求的函式庫。
Continue reading “WOW.js"

Trianglify:一鍵產生 Low Poly 風格的背景圖

Trianglify 是一個用 Javascript 編寫的 Open Source 函式庫,以 GPL 的方式對外釋出。用來隨機產生色彩豐富的 Low Poly 三角幾何圖形,並可輸出成 SVG 及使用於 CSS 背景圖。使用方式分兩種:

如果你是視覺設計師:

假設你厭倦使用 Illustrator 一筆一筆慢慢繪製 Low Poly 風格的背景圖,只想找個簡單的方式快速產生案件需要的 Low Poly,那你可以直接在 Trianglify 的網站上創造及調整 Low Poly 風格的背景圖。頁面上有三個主要的按鈕,分別為 Click for new pattern(產生新的背景圖樣)、SVG(下載 SVG 格式的背景圖樣) 及 show controls(圖樣的控制項)。使用方法也很簡單,每按一次 Click for new pattern 的按鈕,畫面就會產生新的 Low Poly 圖樣,喜歡的話就直接按 SVG 下載。

如果你是程式設計師:

你可以到 Github 下載 Trianglify 的原始碼,內有更多的參數可供控制,方便程式設計師們依案件的需要調整。

相關連結:

  1. 作者:Quinn Rohlf
  2. Trianglify 效果預覽:Demo
  3. 下載 Trianglify

Animate.css:CSS 動畫

過去我們在處理 CSS3 的動畫時,需要去了解 @keyframes 的使用方式,常常為了一個動畫效果的呈現,做了許多的嘗試才找自己的到滿意的設定,這其實挺花時間的。因此,有人就想說:何不先把常用的動畫預先編寫完成,以後需要這些效果的時候就可以直接調用,這樣豈不省事又方便。設計師 Daniel Eden 將網頁或 UI 常用的動態效果,如:淡入淡出、翻頁、旋轉、上下左右的位移、變形等1l集結成 Animate.css,而且還以 MIT License 的方式免費釋放出來給大家使用。鄉親們,有沒有啾甘心 🙂
Continue reading “Animate.css:CSS 動畫"

可彎曲的超薄平版會在未來 5-10 年內面市嗎?

很多人對微軟新任 CEO Satya Nadella 有所期待,認為他將有機會改變一些過去微軟不願意正視的問題,像是網路化對桌面軟體的衝擊,像是對行動設備反應慢半拍,像是 OFFICE 的封閉,像是與 LINUX 社群間的關係等等…但從他上任後的一些做為,像是願意面對 Windows Phone 在行動設備表現不佳的事實,轉而將原本專屬於 Windows Phone 平台的 OFFICE 釋放給更多的平台使用,讓具有市場優勢的 OFFICE 進入對手的領域 (iOS、Android),或者是收購頗受好評且支援跨平台的行事曆 Sunrise,這位可愛的印度人,正在用一個開放的方式改變大家過去對微軟的既定印象。
Continue reading “可彎曲的超薄平版會在未來 5-10 年內面市嗎?"

設計的素材不足時該怎麼辦?

記得以前讀復興商工的時候,有一門課程叫基礎造型。課程內容是透過尺規作圖的方式處理一些點、線、面的造型變化;像是先畫一條一公釐寬的線段,然後再畫兩公釐、三公釐、四公釐…依此類推,直線畫完改畫折線,折線畫完改曲線,或者是畫一個方形漸變到圓形、由大到小、由遠到近、由亮到暗、區分強弱,練習對一個造型的平塗、漸層、明濁等等。由於當時還未電腦化,所有的動作都要透過尺規、廣告顏料、平塗筆及鴨嘴筆一筆一畫完成,最後學期末就是要透過這些基本造型繪製一幅表板尺寸的圖像。由於這門課程的李美惠老師非常嚴格,繳交的作業如果未達李老師的標準,常常會當面撕毀,加上學長姐的種種傳說,所以對這門課的印象非常深刻。當時年幼,大多數的時間裡都無法體會這門課的趣味及重要性,只覺得平塗一個造型實在非常枯燥乏味,遠比不上可以大筆揮毫的水彩、油畫來的痛快有趣,同學們也多半苦不堪言。
Continue reading “設計的素材不足時該怎麼辦?"

Hover.css

CSS3 寫的 Hover 效果,內容涵蓋 2D、背景、Icon、邊框、陰影和光暈、各種方向的對話框及折角的轉換,部分效果需要使用新式的瀏覽器才能支援,以 MIT 的方式對外授權釋出,可以自由應用在各式連結、按鈕、Icon上。如果要加上 Icon 的效果,請另外下載 FontAwesome (如何使用 FontAwesome),支援 less 及 scss。
Continue reading “Hover.css"

水波紋的按鈕回饋

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

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

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 裡。
Continue reading “讓網頁設計師會心一笑的 CSS 雙關語"

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

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