電子商務平台那麼多!該怎麼選呢?

電子商務平台那麼多!該怎麼選呢?

電子商務在這幾年發展得非常迅速,尤其在阿里巴巴上市後,算是把這波熱潮推到一個高峰,這也讓很多企業主對於電子商務躍躍欲試。只是往往在了解之後,會發現市場上有很多方案可以選擇,從完全客製化、租用電子商務平台到開放原始碼的產品,從大西洋到太平洋,零零總總不下二三十種,好像每個方案都不錯,但又不清楚適不適合自己的公司。就以成本的角度來說,要自行開發一套電子商務系統所需的費用會過於龐大,人事及維護的成本也會是負擔,對於台灣一般的中小企業來說,存在很深的門檻。其實類似的困難也存在於國外的中小企業主,因此市場也就出現許多圍繞這個問題的解決方案。像是早期很紅的 osCommerce,到近幾年因為 WordPress 而走俏的 WooCommerce,或是提供平台讓第三方租用的 Shopify,都各自有一定的支持。

BuiltWith® 是一個網站分析的工具,只要輸入一個網址,就可以立即知道這個網站使用那些系統來架構。最近他們在自己的部落格公佈 2015 年 1-7 月間全球電子商務平台的數據資料,將市場上電子商務解決方案的市佔率列表出來,如果你現在正為要採用哪個平台而苦惱?或者你是一位獨立工作的網頁設計師,想要找一套開放式的系統,好做為日後接案提供給客戶選搭的方案,也許這份報告可以給你提供一個參考的方向。

Hexy 簡化選取顏色的流程

Hexy 簡化選取顏色的流程

當我們透過 Photoshop 製作網頁的時候,如果我們要選取畫面中的某個顏色,一般都會先透過滴管工具,然後再進入檢色器裡,把剛剛點選的色碼複製起來,然後在切換到網頁編輯器中,過程其實有點複雜。

Hexy 這個 Photoshop 的外掛,可以再透過滴管選取的同時,就將色碼複製到剪貼簿裡,省略了進入檢色器複製色碼的的過程,讓製作網頁的過程更加順暢。(完)

  • 官方網站:Hexy
如何自訂 Scrollbar 的捲軸樣式

如何自訂 Scrollbar 的捲軸樣式

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

Low Poly & 瀕臨絕種的生物

Low Poly & 瀕臨絕種的生物

如果要做一個保育類的網站,你第一個閃過的想法會是什麼?可能是一張一張動人的照片,或是一段喚醒大家注意的影片,這些方法都很常見。而位於荷蘭阿姆斯特丹的設計師 Bryan James 不這麼想!他顛覆了傳統具象的作法,以抽象色塊的方式做了一個名為 In Pieces – 30 Endangered Species, 30 Pieces 的網站,裡面以 Low Poly 的方式繪製了三十種各類瀕臨絕種的生物,搭配流暢的動畫,讓網站推出沒多久就榮登 CSS Design Awards 的首頁推薦,一起來欣賞吧。

WOW.js

WOW.js

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

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

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

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 動畫

Animate.css:CSS 動畫

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

2 of 6
123456