Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124

UI Design Daily 是一個專門提供前端 UI 設計資源的網站,它的特色在於,每天都會提供一個新的 UI 設計,依據觀察,除了週六、週日之外,每天都會更新上傳一個免費資源。
用 AI 摘要這篇文章:
UI Design Daily 是一個專門提供前端 UI 設計資源的網站,它的運作模式很簡單:每天(週六、週日除外)都會上傳一款全新的免費 UI 設計素材,讓任何人都可以免費下載使用。這個平台從 2017 年開始營運至今,累積了大量的高品質免費資源,對於需要持續尋找設計靈感或實用素材的設計師來說,是一個非常值得收藏的網站。
跟市面上大多數提供免費設計資源的網站不同,UI Design Daily 最大的特色在於它採用了 CC0 1.0 授權條款。這意味著所有資源的作者已經放棄了全部的著作權利,你不需要署名、不需要取得許可、也不需要付費,就可以把這些設計用在任何地方,包含商業用途。你可以直接把下載的 UI 設計修改後拿去販售,完全合法。
說實話,在設計資源這個領域裡面,能做到 CC0 等級的開源授權真的不多見。大部分的平台要嘛要求你附上出處連結(Credit),要嘛限制你只能用於個人專案,商業用途得另外付費。UI Design Daily 直接把門檻降到最低,下載即用,不用註冊帳號,不用填表格,也不用擔心授權糾紛。這種「佛心來著」的做法,讓它成為很多設計師每天必逛的網站之一,也跟Pexels、Unsplash 這類知名的 CC0 免費圖庫一樣,是設計師不可或缺的工具。
如果你平常就有在關注免費 UI Kit或前端設計素材,那 UI Design Daily 絕對值得你加入書籤清單。每天花個兩分鐘瀏覽一下,不但能累積自己的設計靈感資料庫,說不定哪天就能直接找到可以套用到專案中的現成元件。而且它的更新頻率很穩定,週一到週五幾乎每天都會有新內容,這點比很多斷更的設計資源網站好太多了。
目錄
UI Design Daily 提供的 UI 設計資源全部都是原始檔格式,這意味著你拿到手的不是一張不能編輯的 PNG 圖片,而是可以在設計工具中完整操作的原始檔案。目前平台支援的格式包含了當今主流的幾款設計工具:
在網站的右側有一個篩選功能,你可以直接選擇自己慣用的設計工具,系統就會自動過濾出對應格式的資源。這個功能非常實用,因為沒有人想花時間下載了一個 .sketch 檔案,才發現自己用的是 Windows 系統根本打不開。
就我自己的經驗來說,如果你同時使用多種設計工具,我會建議優先選擇 Figma 格式。原因是 Figma 本身是免費的,跨平台運作(瀏覽器就能用),而且目前大多數新上架的 UI 設計資源都以 Figma 為優先發布格式。即便你最終的設計需要匯出到其他工具,Figma 的匯出相容性也是最好的。如果你正在規劃一個WordPress 網站的介面設計,先用 Figma 開啟這些免費素材做原型,再逐步修改成自己需要的樣式,整個流程會順暢很多。
CC0(Creative Commons Zero)是 Creative Commons 組織所推出的最寬鬆授權條款。簡單來說,當一個作品的作者選擇以 CC0 釋出時,就代表他自願放棄對該作品的所有著作權利,讓作品直接進入公共領域(Public Domain)。任何人拿到 CC0 授權的作品,可以任意使用,完全不需要取得作者的同意。這跟很多創用 CC 搜尋引擎上找到的資源不同,那些通常附帶署名或使用限制條件。
這跟很多人熟悉的「CC 授權」不太一樣。一般常見的 Creative Commons 授權有幾種等級,從最寬鬆到最嚴格分別是:CC BY(只需署名)、CC BY-SA(署名且相同方式分享)、CC BY-NC(署名且非商業用途)、CC BY-NC-SA(署名、非商業、相同方式分享)、CC BY-ND(署名且禁止改作)等等。每一種都或多或少對使用者設下了條件,唯獨 CC0 是完全零限制。
在 UI Design Daily 上的所有設計資源,全部都採用 CC0 1.0 授權。這代表你下載之後可以做到以下事情,全部合法且不需要任何額外許可:
為了讓你更清楚地了解 CC0 跟其他常見授權方式的差異,我整理了一張比較表:
| 授權方式 | 需署名 | 可商用 | 可修改 | 可轉售 | 代表性平台 |
|---|---|---|---|---|---|
| CC0 | 否 | 是 | 是 | 是 | UI Design Daily、iconmonstr |
| CC BY | 是 | 是 | 是 | 是 | Unsplash、免費圖庫 |
| CC BY-SA | 是 | 是 | 是(需同授權) | 是 | Wikipedia |
| CC BY-NC | 是 | 否 | 是 | 否 | 部分 Flickr 內容 |
| MIT License | 需保留聲明 | 是 | 是 | 是 | GitHub 開源專案 |
| Royalty-Free | 視平台而定 | 是 | 有限制 | 否 | Shutterstock |
從這張表可以很清楚地看出,CC0 是所有授權方式中最自由的一種。對於設計師來說,這意味著你可以放心大膽地把 UI Design Daily 的素材用於任何場景,完全不用擔心法律風險。如果你想查看完整的法律聲明,可以前往UI Design Daily 的授權頁面閱讀詳細說明。對於免費開源插圖或設計素材有興趣的讀者,也可以參考其他採用類似授權的平台。
使用 UI Design Daily 下載免費 UI 設計資源的流程非常直覺,整個過程從進入網站到完成下載,大概只需要兩分鐘。以下是完整的使用教學:
進入 UI Design Daily 網站後,首頁就會以卡片式排列顯示所有已發布的 UI 設計資源。每張卡片都會有一個縮圖預覽,讓你一眼就能判斷這個資源是否符合你的需求。你可以直接向下捲動瀏覽所有內容,或者利用網站左側的搜尋框來快速找到特定類型的設計。整體介面設計很乾淨,操作邏輯跟大多數免費線上圖庫平台類似,上手門檻很低。
在網站的右側有一個篩選面板,你可以依照設計工具的類型(Figma、Sketch、Adobe XD、Photoshop、Studio)來過濾資源。這個功能對於只使用特定工具的設計師來說非常方便,不用在一堆不相容的格式中浪費時間。假設你只使用 Figma,那麼只要選擇 Figma 篩選器,畫面上就只會顯示提供 .fig 格式的資源。
找到你有興趣的 UI 設計資源後,點擊卡片進入詳情頁面。在這裡你可以看到更大尺寸的預覽圖,畫面右上方會標示這個資源所支援的設計工具與檔案格式。這一步很重要,因為確認格式相符才能確保下載後能順利在你的設計工具中開啟。每個資源的頁面設計都很乾淨,主要資訊一目了然,不會讓你在雜亂的介面中迷失。
確認資源內容和格式都符合需求後,在右側找到「Download File」按鈕,點擊即可開始下載。整個過程不需要註冊帳號,不需要填寫任何表格,也不會跳出要求你分享到社群媒體的視窗,就是純粹的點擊下載。這種乾淨俐落的體驗在設計資源網站中算是不多見的,很多類似平台雖然也提供免費資源,但多少都會需要註冊或有使用條件。
每個資源詳情頁面的右下方都會顯示一個調色盤區塊,列出該 UI 設計所使用的所有顏色。你只需要點擊色塊就能複製對應的色碼,這對於需要統一品牌色彩或建立設計系統的設計師來說相當好用。如果不確定怎麼搭配顏色,也可以直接參考這些已經被專業設計師調好的配色方案。
如果你經常使用 UI Design Daily,我建議養成定期瀏覽的習慣,而不是等到需要素材的時候才去翻找。因為網站的資源量很大,臨時要找特定風格的設計可能會花費不少時間。每天花個兩分鐘看一下當天的新資源,看到喜歡的就先下載整理起來,等於是在建立你自己的設計素材庫。當然,也可以搭配其他前端素材網站一起使用,讓你的設計資源更加豐富多元。
UI Design Daily 有一個很容易被忽略但非常實用的功能,就是每個 UI 設計資源頁面右下方的調色盤。這個調色盤會以視覺化的色塊排列方式,顯示該 UI 設計中所使用的所有顏色,而且每個色塊都可以直接點擊複製色碼。對於需要精準控制色彩的使用者介面設計來說,這個小功能其實比你想像中還要好用。
配色是 UI 設計中影響使用者體驗的關鍵因素之一。一套好的配色方案能夠讓介面看起來更加專業、有層次感,同時也能傳達正確的品牌調性。很多知名的線上圖片編輯器也都把配色功能放在核心位置。當你在 UI Design Daily 上看到一個喜歡的設計時,不只是下載它的原始檔案,還可以把它使用的配色記錄下來,未來在自己的專案中就能直接套用這些已經被驗證過的配色組合。
實際操作上,我會建議把從 UI Design Daily 複製到的色碼整理到 Figma 或 Sketch 的色彩樣式(Color Styles)中。這樣一來,你在設計自己的介面時就能快速套用這些顏色,保持整個專案的視覺一致性。如果你需要更多配色靈感,也可以搭配 Coolors 這類的線上配色工具,或是使用 Color Palette Generator 來自動產生搭配色。至於 PaletteMaker 也是一個不錯的選擇,它可以直接將配色套用到範例畫面上預覽效果。
說個我自己的小習慣:每次在 UI Design Daily 看到不錯的配色,我會立刻把色碼記到一個專門的筆記檔案裡面,依照「暖色系」、「冷色系」、「商業風」、「活潑風」這樣的分類整理。時間久了,你就會累積出一套屬於自己的配色資料庫,之後接到新專案的時候,翻一翻筆記就能快速找到適合的色彩方向。
拿到 UI Design Daily 的免費 UI 設計資源之後,下一步就是把它們整合到你自己的設計工作流程當中。這個過程其實比你想像的更簡單,因為資源都是原始檔格式,可以直接在對應的設計工具中完整操作。
如果你使用的是 Figma,下載 .fig 格式的檔案後,只需要在 Figma 中選擇「Import」就能直接開啟。所有的圖層、元件、文字樣式、色彩變數都會完整保留,你可以立即開始修改。Figma 的好處是它是基於瀏覽器的設計工具,免費版就能滿足大多數需求,而且跨平台運作,不管你用的是 Mac、Windows 還是 Linux 都沒問題。這也是為什麼很多從事電商網站設計的團隊都選擇 Figma 作為主要的設計工具。
對於 Sketch 使用者來說,操作流程也差不多。下載 .sketch 檔案後雙擊即可開啟,裡面的所有設計元素都可以自由編輯。你可以修改顏色、調整文字內容、改變間距和佈局,甚至把其中某些元件複製到你自己正在進行的專案檔案中使用。因為是 CC0 授權,所以你做任何修改都是完全合法的。修改後的素材如果需要放到網站上使用,也可以搭配Cloudflare CDN來加速圖片載入,提升使用者體驗。
如果你的工作涉及到 WordPress 網站設計,UI Design Daily 的資源一樣能派上用場。你可以先用這些免費的 UI 素材在 Figma 中快速建立網站介面的原型(Wireframe 或 Mockup),確認設計方向沒問題之後,再透過 Bluehost 這類穩定的 WordPress 主機服務和佈景主題把設計實作出來。這種「先用設計工具做原型,再用 WordPress 實作」的工作流程,是目前很多接案設計師的標準做法,既能確保設計品質,也能加速整個專案的交付速度。如果你還不熟悉 WordPress,可以先了解一下WordPress.com 與 WordPress.org 的差異,選擇適合自己的架站方式。如果對主機選擇有疑問,也可以參考我們整理的WordPress 虛擬主機推薦懶人包,找到適合自己需求和預算的方案。
對於接案設計師來說,免費的 UI 素材還有一個很實際的好處:可以大幅縮短專案初期的設計時間。特別是在幫客戶建立虛擬主機上的新網站時,能在短時間內產出有質感的設計稿,對於贏得客戶信任非常有幫助。當客戶的需求還不明確的時候,你可以先從 UI Design Daily 找幾個風格相近的設計資源,快速拼湊出一個提案用的概念稿,讓客戶先對視覺方向有個具體的想像。等方向確認之後再進行細節的客製化修改,這樣做比從零開始設計要有效率得多。
我會建議你把常用的 UI 資源整理到一個自己的元件庫(Design System)當中。每次從 UI Design Daily 下載到好用的素材,就把它拆解成可重複使用的元件,按照按鈕、表單、卡片、導覽列這樣的分類歸檔。時間一長,你就會擁有一套非常完整的設計元件庫,之後不管接到什麼類型的專案,都能快速從元件庫中找到需要的素材,大幅提升工作效率。搭配一些網站效能優化的觀念,從設計階段就注意到載入速度和使用者體驗,整個專案的品質會更好。在實作階段,如果需要壓縮設計素材中的圖片,可以善用Squoosh或ShortPixel這類免費的圖片壓縮工具,確保網站載入速度不會被過大的圖片拖累。
雖然 UI Design Daily 已經是非常優質的免費 UI 設計資源平台,但作為一個設計師,你的工具箱裡當然不會只有一個選項。以下我整理了 6 個同樣提供免費設計資源的平台,每一個都有各自的特色和適用場景。搭配 UI Design Daily 一起使用,可以讓你的設計資源更加豐富。
| 平台 | 主要資源類型 | 授權方式 | 需註冊 | 特色 |
|---|---|---|---|---|
| UI Design Daily | UI 設計原始檔 | CC0 | 否 | 每日更新、附調色盤 |
| Freebiesbug | PSD/AI/Sketch/字型 | 視資源而定 | 否 | 資源種類最多 |
| Icons8 | 圖標/圖片/插圖/音樂 | CC BY(免費版) | 是 | 資源數量龐大 |
| iconmonstr | 圖標 Icons | CC0 | 否 | Iconic Font 支援 |
| LOADING.IO | 動畫/CSS 背景 | 免費+付費 | 否 | 動態效果專精 |
| Ionicons | 圖標 Icons | MIT | 否 | 跨平台設計 |
每個平台都有它擅長的領域,沒有哪一個可以完全取代其他所有。我的建議是根據你當前的需求來選擇:需要 UI 原始檔就用 UI Design Daily,需要圖標就用 Icons8 或 iconmonstr,需要動畫效果就用 LOADING.IO。把這幾個網站都加到你的書籤中,需要的時候隨時切換,你的設計效率會有明顯的提升。
UI Design Daily 有提供免費的電子報訂閱服務,我個人非常推薦大家訂閱。原因很簡單:每週它會固定寄一封 Email 到你的信箱,內容就是當週所有上架的免費 UI 設計資源的整理。你不需要每天記得去網站上查看,也不用擔心漏掉任何一個好用的素材,信箱會自動幫你做好彙整。
對於工作節奏比較快的設計師來說,這種被動接收資源的方式比主動去搜尋要來得省時省力。你只要每週花個五分鐘掃一下信件內容,看到感興趣的設計就點進去看看,喜歡的話就下載存起來。長期下來,你的設計素材庫會比那些從來不整理資源的人豐富很多,這對於建立個人線上學習和成長的習慣也非常有幫助。
如果你跟我一樣習慣用 Feedly 這類的 RSS 閱讀器來管理訂閱內容,也可以透過 RSS 的方式追蹤 UI Design Daily 的更新。好處是可以跟其他設計相關的網站放在一起統一管理,不會讓信箱被太多電子報淹沒。不管你選擇哪種方式,重點是要建立一個持續吸收設計靈感的習慣,這對於提升設計能力來說是非常有幫助的。
以下是關於 UI Design Daily 最常被問到的問題,幫助你快速了解這個平台的授權細節與使用方式:
不需要。UI Design Daily 的所有資源都採用 CC0 1.0 授權,作者已經放棄了所有權利,包含署名權。所以你完全不需要在任何地方標註來源或作者名稱。當然,如果你願意主動附上連結,那也是一種支持創作者的方式,但這不是強制要求。
可以,而且完全不受限制。你可以自由地複製、修改、拆解、重組 UI Design Daily 上的任何設計資源。不管是改顏色、改佈局、改文字內容,還是把多個資源的元素混合在一起,都完全沒有問題。CC0 授權的精神就是讓使用者擁有最大的自由度。
可以。你對原始資源進行修改後產生的衍生作品,可以自由決定要採用什麼樣的授權方式。你可以選擇將修改後的作品再次以 CC0 釋出,也可以選擇保留所有權利,甚至可以把修改後的作品拿去販售。這在 CC0 的授權框架下都是完全合法的。
當然可以。UI Design Daily 的資源可以添加在任何個人或客戶的專案作品中。不管你是接案設計師、在公司裡面做產品設計、還是單純做自己的 side project,都可以放心使用。這也是 CC0 授權最大的優勢之一,它不區分個人或商業用途。
可以。你可以將從 UI Design Daily 下載的資源和其他專案作品結合起來,衍生成全新的作品。比方說,你可以把一個 UI Kit 的按鈕元件跟另一個 UI Kit 的卡片元件組合在一起,創造出全新的介面設計。這種混合創作的方式在 CC0 授權下是完全被允許的。
可以,而且沒有次數限制。你可以在多個不同的專案中重複使用同一個或多個資源。同一個按鈕設計同時出現在你的十個不同專案中,在 CC0 授權下是完全沒有問題的。這點對於建立標準化設計系統的團隊來說特別實用。
你可以前往 UI Design Daily 的授權頁面查看完整的許可宣告與法律說明。頁面上會清楚標示所有資源的授權方式以及你作為使用者所擁有的權利。如果你對於 CC0 授權還有其他疑問,也可以參考 Creative Commons 官方網站的說明,或是透過免費線上去背工具的介紹文章了解不同平台對授權的處理方式。想了解更多免費圖庫與設計資源的授權方式,我們之前也整理過詳細的介紹。
UI Design Daily 上架的資源大多來自專業設計師的貢獻,整體品質相當穩定。每個資源在上架前都會經過基本的審核,確保檔案完整、圖層結構清晰、設計風格具有一定水準。雖然不能保證每一個資源都是頂級品質,但以一個每天更新的免費平台來說,它的品質控管做得相當不錯。許多資源也可以搭配Fotor或Adobe Creative Cloud Express等線上修圖工具進一步加工處理。
如果你對於免費資源的品質有疑慮,也可以搭配前面提到的幾個平台交叉使用,從中挑選最適合你專案風格的素材。