---
tags: UI/UX, HCI, 網頁設計
title: UI設計線上資源彙整
disqus: hackmd
image: https://lh4.googleusercontent.com/-p7y7LCDNDh4/AAAAAAAAAAI/AAAAAAAAHR8/xEA-x2mPEC0/photo.jpg?sz=400
ga: UA-130055634-1
---
# UI設計線上資源彙整

### CSS網格

- [**CSS Grid**](https://medium.com/@moz2000tw/css-grid-%E6%98%AF-ui-%E4%BD%88%E5%B1%80%E5%A5%BD%E5%B9%AB%E6%89%8B-5ebe483976be)

- [**Fixed Grid System**](https://blog.akanelee.me/posts/223536-detailed-explanation-of-grid-system/)

- [**30 Grid-Based Websites**](https://www.awwwards.com/30-grid-based-websites.html)
awwwards真的很強大

### Bootstrap 相關

- [**Bootswatch**](https://bootswatch.com/)
收錄各種Bootstrap Color Theme 和 Component

- [**50個網站配色(有點舊)**](https://www.canva.com/learn/website-color-schemes/)

- [**start bootstrap**](https://startbootstrap.com/template-categories/all/)
有許多bootstrap提供的網頁版型，還可以點進去看效果

- [**Get Bootstrap**](https://themes.getbootstrap.com/)
官方推出的網頁版型列表

- [**Bootstrap Magic**](https://pikock.github.io/bootstrap-magic/app/index.html#!/editor)
一個即時根據CSS Code 變化的網頁

- [**Get Boostrap**](https://getbootstrap.com/docs/4.1/examples/)
有許多Bootstrap component的應用案例

- [**Colormind.io**](http://colormind.io/)
可以根據你所選的五個配色即時render出一個網站頁面
有一般的Website、Material DashBoard、Paper Dashboard超方便的

### UI趨勢/方法論/研究相關

- [**UX四神湯**](https://medium.com/uxeastmeetswest/tagged/ux-design)

- [**Behance Design Trend 2019**](https://www.behance.net/gallery/71481981/2019-Design-Trends-Guide)

### Mockup/Prototype工具

- [**UI線上工具懶人包**](https://steachs.com/archives/32418)
有icon和UI工具介紹

### Case Study

- [**WIX template**](https://zh.wix.com/website/templates/html/design)
收錄了用wix製作的各種情境的網站案例，比方說作品集/部落格…
`
- [**Dribbble**](https://dribbble.com/)
建議用來找部分元件的設計

- [**awwwards**](https://www.awwwards.com/)
非常設計導向的眾多網頁case，還有Design, Ussability, Content, Creativity四個向度的評分可以參考

- [**CollectUI**](http://collectui.com/)
各種Component設計大全，超讚

- [**S5-Style**](http://bm.s5-style.com/)
日本的WEB UI彙總網站

- [**muuuuu.org**](http://muuuuu.org/)
日本的UI網站2

- [**lapa.ninja**](http://lapa.ninja/)
(據說越南設計師創建)
Landing Page 和 一頁式網站的設計
可以用顏色搜尋
很多看起來像手機UI(?)

- [**reeoo.com**](https://reeoo.com/category/yellow)
一個以顏色分類收錄網站設計的資料庫

(部分參考[這篇文章)](https://medium.com/as-a-product-designer/%E5%8D%81%E5%80%8B%E5%B8%B8%E7%94%A8%E7%9A%84ui%E9%9D%88%E6%84%9F%E5%8F%8A%E5%B7%A5%E5%85%B7%E7%B6%B2%E7%AB%99-4b21d4c0a5ac)

### UX/設計流程

- [**嫁給RD的UI Designer - UI設計流程**](https://blog.akanelee.me/posts/686437-ui-design-process/)
這篇在講UI設計流程

- [**專業人士的設計流程**](https://thecosignstudio.github.io/process/)

- [**UX Checklist**](https://uxchecklist.github.io/?fbclid=IwAR01Nrr_G-6J7DMJEze5p0FZ8YS7qGy1Pp4Q1TLNTI1t23eE5v6qai4E5Dw)

- [**螞蟻金服 - 設計指引**](https://design.alipay.com/design/web/principle)
就是他們家自己的Design Guide被我收進來

### 其他資源

- [**As a Product Designer**](https://medium.com/as-a-product-designer)

- [**UX Collective**](https://uxdesign.cc/)

### RWD
[**Media Queries**](https://mediaqueri.es/)

### Gallery系列
這類型的網站多得不可勝數

- [**behance 作品收藏館**](https://www.behance.net/galleries)]
就是Behance

- [**CSS Gallery**](https://www.awwwards.com/css-gallery.html)
Magazine for designers and web developers by awwwards.

- [**Best Web Gallery**](http://bestwebgallery.com/)
也是一個蒐羅各種網站範例的平臺

- [**對岸的設計交流論壇**](http://bbs.blueidea.com/forum.php)

- [**Smashing Magazine**](https://www.smashingmagazine.com/)

- [**68Design**](http://www.68design.net/)
看起來像中國版的Pinterest

- [**设计路上**](http://www.sj63.com/)

### Mobile

- [**iOS Mobile Patterns Library**](https://pttrns.com/)

- [**Mobile Mozaic**](http://mobilemozaic.com/)

- [**Mobile Patterns**](https://mobile-patterns.com/)

- [**Lovely UI**](http://www.lovelyui.com/)

~(從翔哥夫人VickyKuo那邊收錄了好多網站)~