Open post

用 CHART.JS 畫圖表 V2.0,十分鐘就上手

2015 年的時候寫了一篇關於 Chart.js 的小教學,由於將數據圖表化的功能在一般公司裡會很常用,通常會建議設計師學一套簡單的套件來應付日常圖表的製作需要。Chart.js 在使用的難易度及呈現的效果上,一直是我心目中的第一選擇,當時寫教學文的時候 Chart.js 還只是 V1.x,設定上也比較簡單,非常適合沒有 Coding 背景的設計師使用。今年收到一篇網友的回饋時才發現 Chart.js 目前已經發展到 V2.0 了,功能變得更強大,像是新版的 Chart.js 支援混合型的圖表,動畫設定也變得更豐富,還有一些現代網站常見的功能,像是 RWD 的支援等等…最重要的是新版使用方式也與 1.x 有所不同。因此這篇是針對 Chart.js V2.0 的小教學,對象主要還是視覺設計師,內容會盡量簡化,方便大家馬上拿來用,希望對大家有幫助。

了解更多 “用 CHART.JS 畫圖表 V2.0,十分鐘就上手”

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

Open post

用 ScrollMe.js 做滾動動畫

我們在做一頁式的網頁時,由於內容都集中在同一頁,有時會被拉得太長。如果沒有做一些特別的處理,往往看起來會有點乏味,遇到這種情況我們通常會搭配一些 Scroll 的動畫效果來增加畫面的趣味,也就是當滑鼠滾動到頁面的某個區塊時,該區塊的元素會跑一些像是 Flash 的小動畫。但由於這些效果需要配合 Javascript,如果公司沒有配置前端工程師的話,設計師捧油們常常只能望效果興嘆。所幸,網路上已經有許多現成好用的套件可供大家選擇,像是之前我們介紹的 wow.js,或者今天要介紹的 ScrollMe.js,都可以很簡單的完成 Scroll Animation,下面是一個簡單的小教學,希望對大家有幫助。
了解更多 “用 ScrollMe.js 做滾動動畫”

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

10 個好用的 jQuery 外掛

一,Alton – jQuery Scrolling

透過滑鼠滾輪垂直切換頁面的區塊。

了解更多 “10 個好用的 jQuery 外掛”

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

Open post

如何讓網頁上的錨點,產生平滑過渡的效果?

這幾年由於行動網頁的崛起,為了適應行動網頁以觸控為核心的瀏覽方式,在製作網頁的時候,會更傾向將過去分成數個頁面的網頁合併成單一頁面,讓使用者在一次的下載後,就看到完整的網站內容,減少在頁面切換時等待下載的時間。只是,這樣的做法也導致網頁長度的增加,使用者在尋找特定區塊的內容時,容易因為過長的頁面而迷失其中。
了解更多 “如何讓網頁上的錨點,產生平滑過渡的效果?”

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

Open post

如何製作一個吸頂式的選單列

一個好用的選單系統,可以幫助使用者快速找到所需的內容,如果你經常觀察網頁的趨勢,因該很容易發現許多網站開始將選單列常駐在頁面的頂部,而不會隨著頁面的捲動而消失。這樣的做法可以幫助使用者在切換頁面單元時,不用為了點選選單而去捲動頁面,算是一個很貼心的 UX 規劃。做法也有很多種,從純粹的 CSS 到 Javascript 都有,網路上也有很多現成的範例,下面我們以 On Scroll Header Effects 為例:
了解更多 “如何製作一個吸頂式的選單列”

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

Open post

如何自訂 Scrollbar 的捲軸樣式

在規劃活動網站的設計時,會常遇到需要放置一些注意事項或者活動辦法的訊息,這類資訊通常會比較長篇,內容也比較乏味,但它對活動網站來說又很重要。如果沒有經過適當的整理,往往都會佔據較大的頁面空間,造成編排上的麻煩。因此大多數的時候,網頁設計師們會將這類資訊放在有 Scrollbar 的區塊內,讓這些長篇的內容可以控制在固定的範圍內。但這樣做又會產生一個新問題,那就是瀏覽器預設的 Scrollbar 樣式和網站的風格相比,如果沒有經過特別的處理會顯得非常突兀,而 jQuery custom content scroller 是一個 jQuery 的外掛,可以用來自訂上述所需的 Scrollbar 捲軸樣式,讓你在設計畫面時,可以配合網站的視覺來調整適當的 Scrollbar 樣式。
了解更多 “如何自訂 Scrollbar 的捲軸樣式”

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

Open post

WOW.js

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

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

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

Open post

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

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

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

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

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

如何讓表格中的行及列同時 Highlight?

要將表格中的某一行 Highlight 起來很容易,你只要 tr:hover{background:yellow;} 就可以完成。但,如果你想同時 Highlight 行及列的時候,麻煩就會出現,因為在現有的 HTML & CSS 中,沒有針對「列」的設定。對於這個問題 MATT WALTON 提出一個解決的方式。
了解更多 “如何讓表格中的行及列同時 Highlight?”

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

Posts navigation

1 2
Scroll to top