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 的小教學,對象主要還是視覺設計師,內容會盡量簡化,方便大家馬上拿來用,希望對大家有幫助。

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

Open post

用 ScrollMe.js 做滾動動畫

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

Open post

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

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

Open post

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

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

Open post

如何自訂 Scrollbar 的捲軸樣式

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

Open post

WOW.js

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

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

Transformicons:為 Icon 增加動態效果

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

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

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

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

Posts navigation

1 2
Scroll to top