top of page

UI/UX推薦工具

“Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.” — Donald A. Norman

​線上作品集網站

  • Pinterest:這網站具有很強的搜尋尋引擎,可以幫你搜尋到全世界不同網站裡,質量高的圖片、照片

  • Behance:這平台目前是Adobe旗下的一個服務,也主要是全世界大部分設計師建立線上作品集的地方

  • Dribbble:它跟Behance其實是一樣類型的網站,但最大的差別是,他們設計師會員是採邀請制,需要設計作品被認可後才會發素邀請碼給你,所以上面的設計師作品質量就更高了。

  • Muzli:這裡常常是累積視覺設計和互動設計靈感的地方,建議可以訂閱的電子報,每日都會固定發送新的設計給你

​相關

臉書社團:Taiwan ui/ux designers

全台UI,有122筆接案兼職工作機會-PRO360達人網接案中心

從入門到業界實戰 - UI / UX 前端網頁設計

https://hahow.in/courses/58d5c70c27ea7d070060160e/main

 

Adobe XD:網頁設計真容易

https://courses.hexschool.com/courses/enrolled/670193

  • Pinterest:可以順暢的釘選、蒐集並分類圖片。也因為所釘選的圖較多是設計師所選,圖片的品質也較高。

  • Behance:收錄的內容非常廣,從 App、網頁設計、插畫等都有。也因為與 Adobe CC 系列可以做連結上傳, 也成為許多設計師上傳作品的選擇。

  • Dribble:UI設計師的愛逛網站,因為是採邀請制,網頁中的作品品質都非常高。

  •  Cofolios:這個網站搜集了美國各大公司的「實習生作品集」,舉凡臉書、Google、Paypal 等都有,蠻值得參考。​

  •  Bestfolios:這個網站比較雜,什麼類型、資歷的設計師作品集都找得到,可以多善用 Tag 搜尋。

 Bestfolios - UI/UX Design Portfolio Inspiration and Showcase

  • CGSociety 與 artstation:有許多場景設定、概念美術等等作品,也會有一些3D模組。適合想從事概念美術的人上來吸收新知。

  • sketchfab:可上傳3D模組,也可直接在網頁中360度翻轉模組檢視。

  • FWAAwwwards:定期蒐集優秀的網站設計案例,甚至會舉辦投票讓網友票選出最佳作品。

  •  Awwwards(歐美網頁設計)

  •  I/O 3000(日本網頁設計) 

  • S5 Style(日本網頁設計)

  •  Mobbin(App 產品)

io3000 - イケサイ (ikesai.com)

【S5-Style】Webデザインギャラリー / Web Design Inspiration

Mobbin (ui.guide)

Blogger.com - 輕鬆打造獨一無二的精美網誌,而且完全免費!

https://www.blogger.com/about/?hl=zh-TW

Webflow: https://webflow.com/

Wix & Editor X: https://www.wix.com/

WordPress: https://wordpress.com/

Squarespace: https://www.squarespace.com/

Weebly: https://www.weebly.com/

ukit: https://uKit.com/

Strikingly: https://www.strikingly.com/

Webnode: https://us.webnode.com/

HTML5 UP!: https://html5up.net/

Bootstrap: https://getbootstrap.com/

Carrd.co: https://carrd.co/build

Code editor - Visual Studio Code: https://code.visualstudio.com/

https://github.com/

Adobe Portfolio

Adobe Portfolio | 建立你自己的個人化網站

AAPD — As A Product Designer – Medium

https://medium.com/as-a-product-designer

嫁給 RD 的 UI Designer

https://blog.akanelee.me/

簡報、文書工具:Keynote、Word、Page

giphy  gif動畫

GIPHY - Be Animated

Canva

免付費即可共同製作令人驚豔的平面設計 (canva.com)

COLORS

Coolors - The super fast color schemes generator!

PEXELS

免費圖庫相片 · Pexels

PNGTREE

PNG圖片素材-背景圖庫和向量圖案免費下載|Pngtree

FREEPIK

Free Vectors, Stock Photos & PSD Downloads | Freepik

VectorPortal

Download Royalty Free Stock SVG Vectors, Clip Art and Icons. (vectorportal.com)

vector4free

Free Vector Art, Images, & Graphics for Free Download (vector4free.com)

站長素材

站长素材-分享综合设计素材的平台 (chinaz.com)

懶人圖庫

矢量图素材_懒人图库 (lanrentuku.com)

videezy

Free Stock Footage Videos, 4k After Effects Templates and More! (videezy.com)

优设网 - UISDC - 设计师交流学习平台 - 看设计文章,学软件教程,找灵感素材,尽在优设网!

https://www.uisdc.com/

半路出家成為 UI 設計師,零經驗的我如何靠自學轉職成功?

https://fc.bnext.com.tw/articles/view/443

 

站酷

站酷 (ZCOOL) - 设计师互动平台 - 打开站酷,发现更好的设计!

学UI网—UI设计师学习教程平台 (xueui.cn)

iOS design resources

主題 - iOS - 人介面指南 - 蘋果開發人員 (apple.com)

Design for Android  |  Android Developers

Android Material Desgin

Design - Material Design

iOS Guideline 怎麼看?(1) · 嫁給 RD 的 UI Designer (akanelee.me)

基础知识学起来!为设计师量身打造的DPI指南 - 优设网 - UISDC

iphone螢幕尺寸整理

The Ultimate Guide To iPhone Resolutions (paintcodeapp.com)

一份最详尽全面的UI界面切图命名规范-UICN用户体验设计平台

告别切图标注-Sketch/PS+Zeplin |UI|教程|chadwick - 原创文章 - 站酷 (ZCOOL)

產品原型製作工具(Prototyping Tools)使用分享. Prototype,顧名思義是產品原型,而為什麼要做產品原型?在現在軟體開發速度… | by uxeastmeetswest | UXeastmeetswest | Medium

Balsamiq. Rapid, Effective and Fun Wireframing Software | Balsamiq

InVision | Digital product design, workflow & collaboration (invisionapp.com)

Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool

Proto.io - Prototyping for all

The prototyping tool for teams | Framer

px、pt、dp、sp 大混戰 · 嫁給 RD 的 UI Designer (akanelee.me)

徹底理解 UI 及 Web 的尺寸單位:基本觀念. iOS 的 pt、CSS 的 pt、Android 的… | by Taylor | UXabc | Medium

網頁和行動裝置介面設計的尺寸單位(二). 理解不同尺寸單位 pt、px、dpi 之間的定義差別,實際應用的方式以及在… | by Syue Ming Yu | Medium

ui設計師推薦用mac還是win? - 雪花台湾 (xuehua.tw)

UI/UX工具挑選入門指南. 這些是一般常見的UI工具,是不是多到一個爆炸?這篇文章會超級簡單迅速的簡介這些工… | by Stephanie Kuo | AAPD — As A Product Designer | Medium

Mac - Apple (台灣)

UI設計入門必看:如何讓你的錢花的物超所值 - 每日頭條 (kknews.cc)

Ayden Tiao – Medium

Tom Liou – Medium

如何準備您的 UI 作品集,打造完整的「作品集體驗」. 應徵 UI… | by Kai Lin | AAPD — As A Product Designer | Medium

WACA 部落格 - 素材設計推薦網站,私藏大公開!

バナーデザイン制作 | 楽天ショップ専門 (ryuki-design.jp)

千图网-免费设计图片素材网站-正版图库免费设计素材中国 (58pic.com)

Pinterest

色輪、調色盤產生器 | Adobe Color

Create a palette - Coolors

NIPPON COLORS - 日本の伝統色

PNG圖片素材-背景圖庫和向量圖案免費下載|Pngtree

Download Free Vectors, Cliparts, Images - illustAC (ac-illust.com)

ぱくたそ - すべて無料の写真素材(フリー素材)、人物や背景・テクスチャーなど高解像度の写真をダウンロード (pakutaso.com)

Free Vector Icons and Stickers - PNG, SVG, EPS, PSD and CSS (flaticon.com)

Free Vector Icons — Download 181,300 icons (SVG, PNG) (icons8.com)

Free Vectors, Stock Photos & PSD Downloads | Freepik

2.3 million+ Stunning Free Images to Use Anywhere - Pixabay

Beautiful Free Images & Pictures | Unsplash

火腿蛋吐司插畫(上) | 以拉小教室 | 第三季 | illustraotr 教學 | 食物篇 | 電繪 | ham and egg toast | AYao's ArtWork - YouTube

Collect UI - Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.

https://color.adobe.com/zh/explore/?filter=newest

https://dribbble.com/

如果你的答案是A,那可能就是「從眾效應」在你的心中作祟! 從眾效應又稱樂隊花車效應(Bandwagon Effect),指的是「人們受到多數人的一致思想或行動影響,而跟從大眾的想法或是行為」的現象。原意為:參加者只要跳上大遊行中搭載樂隊的花車,就能夠輕鬆地享受遊行中的音樂,又不用走路。也因此,英文中的「jumping on the bandwagon」(跳上樂隊花車)也就代表進入主流。… - AAPD — As A Product Designer - Medium

https://www.yourator.co/articles/189

尺寸

 

https://www.xdguru.com/adobe-xd-icons/

Icon Sets

 

Material design

https://fonts.google.com/icons?selected=Material+Icons

 

Font awesome

https://github.com/google/material-design-icons

 

color tool

https://material.io/resources/color/#!/?view.left=0&view.right=0

 

較多的配色參考

http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5

 

搜圖

https://unsplash.com/

 

背景素材

https://www.toptal.com/designers/subtlepatterns/

 

 

字體

https://fonts.google.com/

 

https://justfont.com/

https://fonts.google.com/specimen/Noto+Sans+TC?subset=chinese-traditional

 

https://www.crazy-tutorial.com/67430.html

https://www.pkstep.com/archives/5693

華康

https://www.dynacw.com.tw/netshop/netshop.aspx

https://www.adobe.com/tw/express/create/banner

banner 設計

https://creativemini.com/what-is-banner/

什麼是切版?切版練習的方式與工具. 根據自身的學習歷程和經驗,分享給還是初學,甚至還不知道該如何開始的你:學習的資源… | by Mike Huang | 麥克的半路出家筆記 | Medium

px、pt、dp、sp 大混戰 · 嫁給 RD 的 UI Designer (akanelee.me)

UI/UX 相關工作職責參考 · 嫁給 RD 的 UI Designer (akanelee.me)

不要用平面設計的思維做 UI · 嫁給 RD 的 UI Designer (akanelee.me)

靈感搜尋:APP類 · 嫁給 RD 的 UI Designer (akanelee.me)

靈感搜尋:網站類 · 嫁給 RD 的 UI Designer (akanelee.me)

設計師最好知道一下的常用縮寫 · 嫁給 RD 的 UI Designer (akanelee.me)

iOS、Android 字級單位 · 嫁給 RD 的 UI Designer (akanelee.me)

自製簡易 icon 教學 · 嫁給 RD 的 UI Designer (akanelee.me)

App 切圖檔案命名方式 · 嫁給 RD 的 UI Designer (akanelee.me)

UI 設計師應該要會寫的文件 · 嫁給 RD 的 UI Designer (akanelee.me)

UI 怎麼面對 RD 的美學? · 嫁給 RD 的 UI Designer (akanelee.me)

万字干货!超全面的色彩与应用指南 - 优设网 - UISDC

作品集加上这五页,成功率翻倍 – 学UI网 (xueui.cn)

產品管理流程中,使用者故事(User Story)常見的三種使用情境 | by Anne Hsiao | 3PM LAB 產品三眼怪實驗室 | Medium

iOS design resources

Android Material Desgin

iOS Guideline該怎麼看?——Akane Lee

iOS Guideline 怎麼看?(1) · 嫁給 RD 的 UI Designer (akanelee.me)

想當 UI UX 設計師,需要讀研究所嗎?(全面解析) | UX mindset (ux-master.com)

1.國立清華大學服務科學研究所
2.國立交通大學傳播研究所
3.國立交通大學應用藝術所
4.台灣科技大學設計所
5.政治大學數位內容學士學程
6.雲科創意生活設計所
7.雲科工業設計所

作品集推薦:

GARY CHANG | PORTFOLIO (garychangood.ga)

ALTERA - Awwwards Nominee

Altera GmbH, Ihr Bauträger aus Rheinfelden (Baden): Home (altera-immobilien.com)

推薦瀏覽器:

Secure, Fast & Private Web Browser with Adblocker | Brave Browser

https://www.invisionapp.com/

https://tumult.com/hype/

https://blog.akanelee.me/2019/11/13/usc-ui-design-class-10-prototype/

https://zonble.medium.com/%E7%BF%BB%E8%AD%AF-%E5%A6%82%E4%BD%95%E4%BF%AE%E6%AD%A3%E5%A3%9E-ui-2f972da15d5b#.stv7oqe38

https://app.diagrams.net/

https://www.youtube.com/watch?v=M7vEzEHB2Cs

https://getbootstrap.com/

喜歡的公司網站設計:

威亞創意網頁設計 | 客製化網頁設計,提升企業品牌形象 (weya.com.tw)

海棠設計 Begonia Design - UX/UI設計團隊,打造優質體驗網站/APP數位產品 (begonia-design.com.tw)

The Cheer Technology Corps (cheer-tech.net)

COSMO愷偲品牌企劃|台中網頁設計公司首選 (cosmo-br.com)

JOE'S 喬斯空間設計 (joes.com.tw)

Never Stop Improving | 新加坡商鈦坦科技 (titansoft.com)

耐思財富有限公司-台灣分公司 (nextfortune.tw)

優聘 Talfin

奇迹科技 (mrctech.cc)

凡谷興業官網 (vangoodtech.com)

凱鈿行動科技 | 行動工作領導品牌 (kdanmobile.com)

Pumpkin Studio | UE4 XR Production in Taiwan (pumpkinvrar.com)

Leverage The Power of Ecommerce To The Fullest. The problem with e-commerce is shipping costs and slow shipping that can cost you money. These costs can be passed on to the customer and end up costing you sales. Ship To The Moon is an e-commerce sourcing agent company that will help you to get the best possible price on your goods by negotiating the best possible shipping rate for your goods. We pay for your shipping and we ship quickly so you can get your goods to your customers quickly.

雷麒科技有限公司 (lctech.com.tw)

國泰世華銀行 (cathaybk.com.tw)

日陞空間資訊 (srgeo.com.tw)

Taiwan Go Service – Everyone is a gamer

FB直播購物小幫手 (168money.com.tw)

「大心不用等」點餐平台APP | 外帶自取第一品牌、店內點餐店家最愛 (35money.com.tw)

NEUX 新逸資訊科技 — 讓美好體驗落地

No.1 Beauty Tech, Skincare Tech, AR & AI Tech | Perfect Corp

大麥網路 數位轉型加速器 餐飲|票券|採購|預約|智能系統整合服務 (damaiapp.com.tw)

雲端互動 Cloud Interactive – 客製化軟體設計與開發|UX/UI設計|託管服務 (cloud-interactive.com)

啟因科技股份有限公司 (digigenomics.com)

NEUX 新逸資訊科技 — 讓美好體驗落地

臺久企業股份有限公司-WILITA威力特 最值得信賴的汽機車養護用品,柴油車DPF積碳解決方案,汽油添加劑,自行車保養品,工業特用化學品,專業代工,機油,汽油精,機油,柴油精 (taijeou.com)

Careers | Mlytics

RogersAI

模板參考:

昂墨有限公司 - 首頁 (onmore.com.tw)

你訂Nidin!最棒的線上訂餐系統

COBIE 嚴選好物

肚肚dudoo - 餐飲管理系統:智慧POS、餐廳訂位、線上點餐、排隊候位、肚肚美食搜尋 (dudooeat.com)

新叡光電-防偽標籤 / TTID / NFC / 電子行銷 / 雲端驗證 (hj-rfid.com)

TKLAB台灣保養品| 提供好用、有效、價格實在的優良產品

創科資訊 Trunk Studio (trunk-studio.com)

Wondercise 空中健身學院 | 即時動作比對 & 健身影音串流服務

波阿斯居家智慧-智慧家庭系統,台中智慧家庭系統 (boaz-smart.com)

Marketing Automation – Sales Funnel, Redemption Funnel, Event Funnel (xleadfunnel.com)

Hyena e-bike system solution | Hyena e-bike system (hyena-ebike.com)

敦謙國際智能科技股份有限公司 (dunqian.tw)

網頁設計-RWD響應式網站設計|威德網頁設計公司 (wddgroup.com)

Game Soul Technology

全富數位有限公司 (cfd.com.tw)

智樂堂美術音樂中心 (zealotdigital.com.tw)

FB直播購物小幫手 (168money.com.tw)

宇辰系統科技股份有限公司 (yuchens.com)

洗照片|相片沖印 無框畫,桌曆,相片書|nuPhoto拍立洗

大樹連鎖藥局 (greattree.com.tw)

辦公租賃專家 - 言瑞 影印機 事務機 出租 電腦 飲水機 咖啡機 (yanray.com.tw)

Johnson Health Tech

TGFC台灣宸運雲端有限公司|Taiwan Good Fortune Cloud Co., Ltd.

台灣自我血糖監測系統血糖機廠商 - 華廣生技 (bionime.com)

旭聯科技SUNNET-eHRD人才管理第一品牌.eLearning領導廠商

科勝科技 Utitech | 自動化系統整合與智慧工廠專家 | AVEVA台灣總代理

季河資訊-全方位餐飲系統整合專家 (jinher.com.tw)

Professional PMOLED Display Manufacturer - 智晶光電股份有限公司 (wisechip.com.tw)

Home - 華苓科技 (flowring.com)

LIAN LI is a Leading Provider of PC Cases | Computer Cases | PC Build | Gaming Cases (lian-li.com)

AI/IoT Edge Device Management SaaS with OOB Solutions | Allxon

Home | Statecraft Tech (ktrade-official.com)

優派台灣 ViewSonic Taiwan | ViewBoard, LED LCD 液晶顯示器, 投影機, 數位看板, 互動白板

FaSwift Tech
 

GIGABYTE 技嘉科技

零碼科技 Code Zero

理財寶 - 投資好軟體,我只推薦理財寶 (cmoney.tw)

Free PDF Scanner App for iPhone and iPad | Ifunplay

GranDen 狂點 |– 跨境虛實,造夢XR –

SEQUENT | The Swiss way of health monitoring – Sequent (sequentworld.com)

智睿科技-創新積極,堅持永續 (iit.com.tw)

eCloudvalley|1st AWS Premier Consulting Partner in GCR

飛象資訊|飛出你的想像,滿足你在乎的需求 (flyelephant.com.tw)

Home - attittu_

Home (baifu-tech.net)

興創知能股份有限公司 thinktron (thinktronltd.com)

alpha pulse

Surreal Education Login

Trevi

XREX - The Blockchain TradeTech Company

Night Owl Security Products - Home Page (nightowlsp.com)

bottom of page