> For the complete documentation index, see [llms.txt](https://docs.tenten.co/awesome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/awesome/design/awesome-ui.md).

# awesome-ui

## Awesome-UI [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![太棒了](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) [!\[MIT\](https://img .shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)

> 精選的 UI/UX 和設計列表 與 UI / UX 相關的一切資源。歡迎投稿，只需提出拉取請求！

＃＃ 執照

麻省理工學院

＃＃ 貢獻

> 歡迎投稿！只需做一個拉​​取請求！

* **正在處理你的第一個 Pull Request？** 你可以從這個 *免費* 系列 [如何在 GitHub 上為開源項目做出貢獻](https://egghead.io/series/how-to-contribute) 中學習如何-to-an-open-source-project-on-github)

＃ 中等的 [中等博文在這裡](https://medium.com/free-stuff/500-curated-design-to-learn-ui-ux-resource-list-2ca7c857adbd#.pup0ub371) ##其他很棒的免費東西列表 [在這裡](https://medium.com/free-stuff)

＃ 目錄 1.【原型工具】(<https://github.com/kevindeasis/awesome-ui#prototyping-tools>) 2.【線框圖工具】(<https://github.com/kevindeasis/awesome-ui#wireframing-tools>) 3. [風格](https://github.com/kevindeasis/awesome-ui#style)

* [顏色](https://github.com/kevindeasis/awesome-ui#colors)
* [圖標](https://github.com/kevindeasis/awesome-ui#colors)
  * [股票圖標](https://github.com/kevindeasis/awesome-ui#stock-icons)
* [圖像](https://github.com/kevindeasis/awesome-ui#imagery)
  * [庫存照片](https://github.com/kevindeasis/awesome-ui#stock-photos)
* [排版](https://github.com/kevindeasis/awesome-ui#typography)
* [寫作](https://github.com/kevindeasis/awesome-ui#writing)

1. [佈局](https://github.com/kevindeasis/awesome-ui#layout)
2. [組件](https://github.com/kevindeasis/awesome-ui#components)
3. [模式](https://github.com/kevindeasis/awesome-ui#patterns)
4. [可用性](https://github.com/kevindeasis/awesome-ui#usability)
5. [動畫](https://github.com/kevindeasis/awesome-ui#animation)
6. [在線課程](https://github.com/kevindeasis/awesome-ui#online-courses)
7. [播客](https://github.com/kevindeasis/awesome-ui#podcasts)
8. [社區](https://github.com/kevindeasis/awesome-ui#communities)
9. [靈感](https://github.com/kevindeasis/awesome-ui#inspiration)
10. [清單](https://github.com/kevindeasis/awesome-ui#checklist) 14.【工作流程】(<https://github.com/kevindeasis/awesome-ui#planning>)
11. [其他軟件和工具](https://github.com/kevindeasis/awesome-ui#other-software--tools--resources)
12. [工作](https://github.com/kevindeasis/awesome-ui#jobs)

\#UI-UX 終極指南

* [UX StackExchange](https://ux.stackexchange.com/questions?sort=votes)
* [UX 神話](http://uxmyths.com/)
* [必讀 UI 書籍](https://ux.stackexchange.com/questions/74/the-must-read-user-interface-book)
* [52 週的 UX](http://52weeksofux.com/tagged/week-1)
* [直覺和諧指南](http://harmony.intuit.com/)
* [臉書設計](http://facebook.design/)
* [HackDesign](https://hackdesign.org/lessons)
* [GoodUI](http://asktog.com/menus/designMenu.html)
* [布朗大學 CS 1300：用戶界面和用戶體驗](http://cs.brown.edu/courses/csci1300/)
* [Donald Norman 的日常用品設計](https://archive.org/details/DesignOfEverydayThings)
* [比爾巴克斯頓，輸入手稿](http://www.billbuxton.com/inputManuscript.html)
* [SideBar.IO](http://sidebar.io/)
* [AskTog](http://asktog.com/)
* \[AskTog：交互設計的第一原則（修訂和擴展）]（<http://asktog.com/atc/principles-of-interaction-design/）>
* [AskTog: DesignMenu](http://asktog.com/menus/designMenu.html)
* \[SoundCloud 播客，精益創業：結合以用戶為中心的設計和精益創業，打造更好的產品]\(<https://soundcloud.com/lean-startup/4-season-3-combining-user-centered-design-lean-啟動構建更好的產品？in=lean-startup/sets/lean-startup-webcasts）>
* [關於面部，交互設計要點 PDF](http://feiramoderna.net/download/pos-positivo/COOPER-Alan/About_Face_3-The_Essentials_of_Interaction_Design.pdf)
* [維涅利佳能](http://www.vignelli.com/canon.pdf)
* [魔墨](http://worrydream.com/MagicInk/)
* [Bill Buxton - 繪製用戶體驗](http://www.vignelli.com/canon.pdf)
* [Day 2 Workshop of Sketching User Experiences Workshop Nicolai Marquardt](https://www.medien.ifi.lmu.de/lehre/ss14/id/Day%202%20Sketching%20IxD.pdf)
* [谷歌材料設計](https://www.google.com/design/spec/material-design/introduction.html)
* [設計代碼](https://designcode.io/)
* [黑客設計](https://hackdesign.org/)
* [發現設計](http://discovering.design/)
* [谷歌網絡基礎](https://developers.google.com/web/fundamentals/?hl=en)
* [ux pin](https://uxpin.com/knowledge.html)
* [嬉皮元素](http://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals)
* [粉碎雜誌](https://www.smashingmagazine.com/2012/08/beyond-wireframing-real-life-ux-design-process/)
* [黑客設計](https://hackdesign.org/)
* [zurb](http://zurb.com/university/past-lessons)
* [ux-mag](http://uxmag.com/)
* [ux 展位](http://www.uxbooth.com/)
* [nn組](https://www.nngroup.com/articles/)
* [ui-patterns](http://ui-patterns.com/)
* [uie](https://www.uie.com/)
* [可用性極客](http://usabilitygeek.com/)
* [列表分開](http://alistapart.com/topic/user-experience)
* [方框和箭頭](http://boxesandarrows.com/)
* [八種形狀](https://medium.com/eightshapes-llc)

\#原型工具

* [像素](http://www.pixate.com/)
* [設計 CC / Adob​​e Comet](http://www.adobe.com/products/experience-design.html)
* [Invision Sketch](https://www.invisionapp.com/sketch-prototyping)
* [原型](https://proto.io/)
* [Marvelapp](https://marvelapp.com/)
* [表格](http://www.relativewave.com/form/)
* [成幀器](http://framerjs.com/)
* [金剛鸚鵡](http://macaw.co/)
* [炒作 3.5](http://tumult.com/hype/)
* [摺紙](https://facebook.github.io/origami/)
* [Flinto](https://www.flinto.com/)
* [網絡流](https://webflow.com/)
* [前台](http://froont.com/)
* [網絡流](http://webflow.com)
* [Krista 用動畫製作文字和矢量真棒](https://krita.org/download/krita-desktop/)

\#線框圖工具

* [Mockplus](http://www.mockplus.com/)
* [Moqups](https://docs.tenten.co/awesome/design/www.moqups.com)
* [Balsamiq](http://balsamiq.com/products/mockups/)
* [AdobeCC](http://www.adobe.com/uk/products/photoshop)
* [Adobe Spark](https://spark.adobe.com/)
* [模擬流](https://docs.tenten.co/awesome/design/www.mockflow.com)
* [Justinmind](http://www.justinmind.com/)
* [OmniGraffle](https://www.omnigroup.com/omnigraffle)
* [線框.cc](https://github.com/tentenco/awesome/blob/main/design/awesome-ui/ww.wireframe.cc)
* [知更鳥](https://docs.tenten.co/awesome/design/www.gomockingbird.com)
* [Axure](http://www.axure.com/)
* [Flair Builder](http://flairbuilder.co)
* [UX Pin](http://uxpin.com)

＃風格

> 款式分類

＃＃＃ 顏色

* [Tobias Van Schneider 獨特的色彩組合](http://www.vanschneider.com/colors/)
* [顏色對比](https://www.viget.com/articles/color-contrast)
* [TNW：色彩情感](http://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotions-with-color-in-web-design/)
* [Kissmetrics：轉換顏色](http://www.slideshare.net/kissmetrics/how-the-psychology-of-color-can-increase-your-website-conversions/3-Neil_Patel_KISSmetrics_neilpatel_Neil)
* [SMW：色彩心理學](http://socialmediaweek.org/blog/2014/08/use-color-psychology-web-design-projects/)
* [GMD: 顏色](https://www.google.com/design/spec/style/color.html)
* [DFF：色彩理論](http://www.designforfounders.com/color-theory/)

\###圖標

* [GMD：圖標](https://www.google.com/design/spec/style/icons.html#)
* [Tubik Studio：UI 中的圖標與復制](http://tubikstudio.com/visual-perception-icons-vs-copy-in-ui/?utm_source=designernews)
* [Tuts+](http://design.tutsplus.com/articles/10-top-tips-for-creating-awesome-icons--cms-25538)

\###股票圖標

* [Fontello：圖標字體生成器。](http://fontello.com/)
* [平面圖標：16000+ 字形矢量圖標的搜索引擎。](http://www.flaticon.com/)
* [Font Awesome：標誌性字體和 CSS 工具包。](http://fortawesome.github.io/Font-Awesome/)
* [Glyphsearch：從其他圖標數據庫中搜索圖標。](http://glyphsearch.com/)
* [Material Design Icons: 750 個由 Google 提供的免費開源字形。](https://github.com/google/material-design-icons/releases/tag/1.0.0)
* [圖標查找器：網站的免費圖標部分。](https://www.iconfinder.com/free_icons)
* [塗鴉集：50 個免費手繪塗鴉圖標](http://roundicons.com/doodle-icons-free-set/)
* [扁平集：免費扁平圓形圖標集 — 60 個圖標](http://roundicons.com/free-icons/)
* [矢量線集：免費矢量線圖標集 — 50 個圖標](http://roundicons.com/free-vector-line-icons-set/)
* [MakeAppIcon：一鍵生成各種大小的應用圖標。](http://makeappicon.com/)
* [無盡的圖標：免費的平面圖標和創意。](http://www.endlessicons.com/)
* [Perfect Icons：社交圖標創建工具。](http://perfecticons.com/)
* [Material Design Icons: 750 個由 Google 提供的免費開源字形。](https://github.com/google/material-design-icons/releases/tag/1.0.0)
* [圖標糖果：60 個免費矢量 Photoshop 圖標。](http://iconsweets.com/)
* [Ico Moon：4000+ 免費矢量圖標，圖標生成器。](https://icomoon.io/)
* [名詞項目：來自不同藝術家的數千個字形圖標。](http://thenounproject.com/)

\###圖像

* [GMD：圖像](https://www.google.com/design/spec/style/imagery.html)

\####庫存照片

* [股票](https://github.com/tentenco/awesome/blob/main/design/awesome-ui/thestocks.im)
* [庫存](http://www.sitebuilderreport.com/stock-up)
* [像素](http://www.pexels.com/)
* [所有免費庫存：免費庫存圖片、圖標和視頻。](http://allthefreestock.com/)
* \[Unsplash：免費（隨心所欲）高分辨率照片。]（<http://unsplash.com/）>
* [Splashbase：搜索和發現免費的高分辨率照片和視頻。](http://www.splashbase.co/)
* [啟動庫存照片：去。做點什麼。](http://startupstockphotos.com/)
* [傑曼特里：免費圖片。做任何事（CC0）。製造魔法。](http://jaymantri.com/)
* [Moveast：這是一個葡萄牙人向東移動的旅程。](http://moveast.me/)
* [旅行咖啡書：分享美麗的旅行時刻。](http://travelcoffeebook.com/)
* [設計師圖片：供您個人和商業使用的免費照片。](http://www.designerspics.com/)
* [Death to the Stock Photo：每月免費向您發送照片。](http://deathtothestockphoto.com/)
* [Foodie's Feed：高清免費食物圖片](http://foodiesfeed.com/)
* [Mazwai：免費創作共用高清視頻剪輯和鏡頭。](http://mazwai.com/)
* [Jéshoots：新的現代免費照片。](http://jeshoots.com/)
* [Super Famous：荷蘭交互設計師 Folkert Gorter 拍攝的照片。](http://super著名.com/)
* [圖片：免費的高分辨率照片。](http://picography.co/)
* [Pixabay：免費的高質量圖像。](http://pixabay.com/)
* [Magdeleine：每天一張免費的高分辨率照片。](http://magdeleine.co/)
* [快照：個人和商業用途的免費庫存照片。](http://snapographic.com/)
* [小視覺效果：每 7 天收件箱中有 7 張高分辨率圖像。](http://littlevisuals.co/)
* [斯普利特郡：美味的免費庫存照片。](http://splitshire.com/)
* \[新舊股票：公共檔案中的複古照片。]（<http://nos.twnsnd.co/）>
* [Picjumbo：完全免費的照片。](http://picjumbo.com/)
* [Pix 的生活：免費的高分辨率照片。](http://www.lifeofpix.com/)
* [Gratisography：免費的高分辨率照片。](http://www.gratisography.com/)
* [Getrefe：免費照片。](http://getrefe.com/downloads/category/free/)
* [IM Free：精選的免費資源集合。](http://www.imcreator.com/free)
* [紙杯蛋糕：Jonas Nilsson Lee 的攝影師款待。](http://cupcake.nilssonlee.se/)
* [模式庫：項目的免費模式。](http://thepatternlibrary.com/)
* [公共領域檔案：新的 100% 免費庫存照片。](http://publicdomainarchive.com/)
* [ISO 共和國：高品質、免費的創意照片。](http://isorepublic.com/)
* [Stokpic：完全免費的照片。](http://stokpic.com/)
* [Kaboompics：獲得免費照片的最佳方式。](http://kaboompics.com/)
* [功能：免費照片包。](http://wefunction.com/category/free-photos/)
* [MMT：Jeffrey Betts 提供的免費圖片素材。](http://mmt.li/)
* [保羅賈維斯：免費的高分辨率照片。](http://pjrvs.com/a/photos)
* [鎖定和庫存照片：為您提供免費庫存照片。](http://lockandstockphotos.com/)
* [Raumrot：免費的高分辨率圖片。](http://www.raumrot.com/10/)

\###排版

* [GMD：排版](https://www.google.com/design/spec/style/typography.html)
* [字體配對](http://www.designforfounders.com/font-pairing/)
* [排版介紹](https://buscandotrazos.wordpress.com/2012/08/27/a-brief-introduction-to-typography/)
* [排版評論](http://typographica.org/)
* [TypeGenius：為您的下一個項目找到完美的字體組合。](http://www.typegenius.com/)
* [FontFaceNinja：用於查找網站使用的網絡字體的瀏覽器擴展。](http://www.fontface.ninja/)
* [Google 字體：針對網絡優化的免費開源字體。](http://www.google.com/fonts)
* [Font-to-width：將文本片段緊貼在其容器中。](http://font-to-width.com/)
* [Beautiful Web Type：來自 Google 網絡字體目錄的最佳字體。](http://hellohappy.org/beautiful-web-type/)
* [Font Squirrel：100% 免費商業字體。](http://www.fontsquirrel.com/)
* [DaFont：可免費下載字體的存檔。](http://www.dafont.com/)
* [1001 免費字體：大量免費字體。](http://www.1001freefonts.com/)
* [FontPark：網絡上最大的免費字體檔案庫。](http://www.fontpark.net/en/)
* [排版資源：谷歌字體](https://www.google.com/fonts)
* [靈感：狼型](https://www.typewolf.com/)
* [靈感：輸入靈感](http://typeinspire.com/)
* [靈感：設計靈感](http://designspiration.net/search/saves/?q=typography)
* [靈感：運球](https://dribbble.com/tags/typography)
* [靈感：靈感網格](http://theinspirationgrid.com/category/typography/)
* [靈感：為你打字](http://www.typeforyou.org/)
* [靈感：abduzeedo](http://abduzeedo.com/tags/typography?page=1)

**字體資源**

```
* [谷歌字體文件](https://github.com/google/fonts)
* [安裝谷歌字體文件](https://github.com/qrpike/Web-Font-Load)
```

＃＃＃寫作

* [GMD：寫作](https://www.google.com/design/spec/style/writing.html)

＃佈局 佈局類別

＃＃＃原則

* [GMD：佈局原則](https://www.google.com/design/spec/layout/principles.html)

\###單位和測量

* [GMD：單位和測量](https://www.google.com/design/spec/layout/units-measurements.html)

\###指標和關鍵線

* [GMD：指標和關鍵線](https://www.google.com/design/spec/layout/metrics-keylines.html)

＃＃＃結構

* [GMD：結構](https://www.google.com/design/spec/layout/structure.html)

\###響應式用戶界面

* [GMD：響應式 ui](https://www.google.com/design/spec/layout/responsive-ui.html)

\###分屏

* [GMD：分屏](https://www.google.com/design/spec/layout/split-screen.html)

＃組件

* [GMD](https://www.google.com/design/spec/components/bottom-navigation.html#)

\#模式

* [GMD](https://www.google.com/design/spec/patterns/data-formats.html)

\#可用性 可用性類別

* [設計原則](http://www.designprinciplesftw.com/collections/10-usability-heuristics-for-user-interface-design)
* [可用性手冊](http://www.usabilitybok.org/principles-for-usable-design)
* [Reddit 可用性](https://www.reddit.com/r/usability/)

#### 可訪問性

[gmd](https://www.google.com/design/spec/usability/accessibility.html)

#### 雙向性

[gmd](https://www.google.com/design/spec/usability/bidirectionality.html)

＃動畫片 動畫類別

＃＃＃ 繪畫

\[繪圖空間：繪圖] (<https://www.drawspace.com/lessons>)

\###用戶體驗設計

* [粉碎雜誌](https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/)
* [谷歌開發者](https://developers.google.com/web/fundamentals/design-and-ui/animations/?hl=en)
* [動畫原理](http://adaptivepath.org/ideas/jedi-principles-of-ui-animation/)
* [動畫原理](https://medium.com/motion-in-interaction/animation-principles-in-ui-design-understanding-easing-bea05243fe3#.tz3i4crs3)
* [儀表板](http://www.sisense.com/blog/4-design-principles-creating-better-dashboards/)
* [用戶體驗心理學](http://thehipperelement.com/post/87574750438/ux-crash-course-user-psychology)

＃資源

* [增長供應](http://growth.supply/free/design-code/)
* [學生網頁設計](http://www.studentguidewebdesign.com/)
* [為創始人設計](http://www.designforfounders.com/learn-design/)
* [方框和箭頭](http://boxesandarrows.com/)
* [設計代碼](https://designcode.io/learn)
* [ontiwik](http://ontwik.com/)
* [複雜](http://ca.complex.com/style/2014/03/online-resources-every-graphic-designer-should-know/tutorialzine)
* [Tuts+](http://design.tutsplus.com/)
* [工具](http://1stwebdesigner.com/best-ux-design-tutorials/)
* [人物：Paul Boag](https://www.youtube.com/watch?v=inT-VLzpEzE)
* [uie](https://www.uie.com/)
* [uxmag](http://uxmag.com/)
* [Sketch 應用資源](http://www.sketchappsources.com/)
* [素描工具箱](http://sketchtoolbox.com/)
* [草圖插件](https://designcode.io/sketch-plugins)
* [Krista 讓文字和矢量變得很棒](https://krita.org/download/krita-desktop/)

\#在線課程

* [界面設計法則](https://courses.platzi.com/courses/laws-of-interface-design/)
* [轉向](https://docs.tenten.co/awesome/design/www.steer.me)
* [網絡平台](http://www.webplatform.org/)
* [學習設計更好的界面](https://courses.platzi.com/courses/interface-design-startups/)
* [Noexcuselist](http://www.noexcuselist.com/)
* [哈佛公開課件](http://cs50.tv/2013/fall/)
* [麻省理工開放課件](http://ocw.mit.edu/index.htm)
* [耶魯開放課件——課堂上的實際視頻講座，讓您獲得課堂體驗。很多課程，很多科目。](http://oyc.yale.edu/)
* [斯坦福開放課件](http://see.stanford.edu/see/courses.aspx)
* [Codecademy — 免費學習交互式編碼。](http://www.codecademy.com/)
* [Codeplace.com — 學習如何從頭開始編碼。以前 Stuk.io](http://codeplace.com/)
* [Udacity — 獲得行業領導者認可的納米學位。](https://www.udacity.com/)
* [Learnable — 學習 Web 開發的最佳方式。](https://learnable.com/)
* [Code School - 邊做邊學。](https://www.codeschool.com/)
* [Thinkful — 通過一對一指導提升您的職業生涯。](https://www.thinkful.com/)
* [Code.org — 通過簡單的教程從今天開始學習。](https://code.org/)
* [代碼學校](https://docs.tenten.co/awesome/design/www.codeschool.com)
* [樹屋](https://docs.tenten.co/awesome/design/www.teamtreehouse.com)
* [Freecodecamp](https://www.freecodecamp.com/)
* [林達](https://docs.tenten.co/awesome/design/www.lynda.com)
* [Code.org](http://code.org/)
* [Codeacademy](https://docs.tenten.co/awesome/design/www.codecademy.com)
* [Udacity](https://docs.tenten.co/awesome/design/www.udacity.com)

\#播客

* [設計事項](https://itunes.apple.com/podcast/id328074695)
* [深度設計](https://itunes.apple.com/podcast/id494747654)
* [快樂星期一](https://docs.tenten.co/awesome/design/www.happymondaypodcast.com)
* [行業](https://docs.tenten.co/awesome/design/www.theindustry.cc/category/podcast)
* [設計冒險](https://itunes.apple.com/podcast/id503341322)
* [Boagworld](https://docs.tenten.co/awesome/design/www.boagworld.com/show)
* [商店脫口秀](https://docs.tenten.co/awesome/design/www.shoptalkshow.com)
* [迭代](http://www.imore.com/iterate)
* [The Back to Front Show](https://docs.tenten.co/awesome/design/www.backtofrontshow.com)
* [在網格上](https://itunes.apple.com/podcast/id547928774)
* [網絡大秀](https://docs.tenten.co/awesome/design/www.zeldman.com/category/the-big-web-show)
* [前期播客](https://docs.tenten.co/awesome/design/www.upfrontpodcast.com)
* [未完成的事情](https://docs.tenten.co/awesome/design/www.unfinished.bz)
* [自由職業者網](https://docs.tenten.co/awesome/design/www.thefreelanceweb.com)

\#社區

* [eventbrite](https://www.eventbrite.ca/)
* [聚會](https://docs.tenten.co/awesome/design/www.meetup.com)
* [設計師新聞](https://www.designernews.co/)
* [UXstackexchange](http://ux.stackexchange.com/)
* [UX 平面設計](http://graphicdesign.stackexchange.com/)
* [Reddit 設計](http://www.reddit.com/r/design/)
* [Reddix UX](https://www.reddit.com/r/userexperience/)
* [設計師對話](http://www.designerstalk.com/forums/)
* [Layervault](https://news.layervault.com/)

＃靈感

* [MatrialUp：日常材料設計靈感。](http://www.materialup.com/)
* [FLTDSGN：最佳平面 UI 設計網站和應用程序的每日展示。](http://fltdsgn.com/)
* [Site Inspire：網頁設計靈感。](http://www.siteinspire.com/)
* [UI Cloud：全球最大的用戶界面設計數據庫。](http://ui-cloud.com/)
* \[Moodboard：建立一個漂亮的moodboard並分享結果。]（<http://www.gomoodboard.com/）>
* \[蠟筆：最全面的營銷設計集合。]（<http://www.crayon.co/）>
* [Land-Book：產品登陸頁面圖庫。](http://land-book.com/)
* [Ocean：設計師分享反饋的社區。](http://ocean.ink/)
* [Dribbble：為設計師展示和講述。](https://dribbble.com/)
* [Behance：展示和發現創意作品。](https://www.behance.net/)
* [Pttrns：移動用戶界面模式。](http://www.pttrns.com/)
* [平面 UI 設計：感謝 Erik，我發現了有用的板子。](https://www.pinterest.com/warmarc/flat-ui-design/)
* [Awwwards：設計、創意和創新獎。](http://www.awwwards.com/)
* [入門工具包：為開發人員和設計師設計的資源。](http://www.thestarterkit.info/)
* [一頁愛：一頁網站靈感的資源。](http://onepagelove.com/)
* [UI Parade：用戶界面設計工具和設計靈感。](http://www.uiparade.com/)
* [最佳設計：最佳網頁設計。](https://www.thebestdesigns.com/)
* [敏捷設計師：設計師和開發人員的最佳資源。](http://agiledesigners.com/)
* [Niice：有品味的搜索引擎。](https://niice.co/)
* [r/web\_design](https://www.reddit.com/r/web_design)
* [r/userexperience](https://www.reddit.com/r/userexperience)
* [r/internetisbeautiful](https://www.reddit.com/r/InternetIsBeautiful)
* [r/webdesign](https://www.reddit.com/r/webdesign)
* [r/smt](https://www.reddit.com/r/SomebodyMakeThis)
* [r/androidisbeautiful](https://www.reddit.com/r/AndroidIsBeautiful/)
* [你幾乎可以做任何事情：標誌](http://www.elischiff.com/blog/2016/4/12/do-almost-anything)
* [freebiesbug](https://www.facebook.com/freebiesbug/?fref=nf)
* [鼓膜](http://tympanus.net/codrops/2016/05/25/isometric-and-3d-grids/?utm_content=buffer08334\&utm_medium=social\&utm_source=facebook.com\&utm_campaign=buffer)
* [90 年代的用戶體驗設計](http://techcrunch.com/2016/05/28/what-ux-designers-can-learn-from-1990s-japanese-video-games/)

## 清單

* [UX 清單](http://www.uxcheck.co/)
* [UX 清單倉庫](https://github.com/uxchecklist/uxchecklist.github.io)
* [uxchecklist](https://uxchecklist.github.io/)

＃規劃

* 規劃
  1. 研究
  2. [競爭分析](http://boxesandarrows.com/competitive-analysis-understanding-the-market-context/)
  3. [數據分析](http://www.nngroup.com/articles/analytics-user-experience/)
  4. [用戶反饋](https://www.gov.uk/service-manual/user-centred-design/user-research/index.html)
  5. 計劃
  6. [用戶故事](https://www.newfangled.com/how-to-tell-the-users-story/)
  7. [用戶流程](http://www.smashingmagazine.com/2012/01/04/stop-designing-pages-start-designing-flows/)
  8. [紅色路線](http://userfocus.co.uk/articles/prioritising-functions.html)
  9. 探索
  10. [頭腦風暴與素描](http://www.gamestorming.com/the-wiki/)
  11. [線框](http://www.uxpin.com/guide-to-wireframing.html)
  12. [原型](http://uxdesignweekly.com/ux-resources/prototyping-tools/)
  13. 溝通
  14. [IA](http://alistapart.com/article/thedisciplineofcontentstrategy)
  15. [語言](http://alistapart.com/article/translation-is-ux)
  16. \[輔助功能]（<https://www.gov.uk/service-manual/user-centred-design/accessibility.html）>
  17. 創建
  18. [UI 元素](http://styleguides.io/)
  19. [手勢](http://www.smashingmagazine.com/2013/05/24/gesture-driven-interface/)
  20. [響應性](http://uxmag.com/articles/create-a-better-responsive-user-experience/)
  21. 提供反饋
  22. [等待時間](http://www.sitepoint.com/3-tips-make-application-feel-faster/)
  23. [錯誤](http://uxmag.com/articles/failing-gracefully)
  24. [已完成的動作](http://www.lukew.com/ff/entry.asp?1759)
  25. 敲定
  26. [最終佈局](http://www.usability.gov/what-and-why/visual-design.html)
  27. [圖像和圖標的使用](http://www.nngroup.com/articles/icon-usability/)
  28. [字體顏色和層次結構](http://52weeksofux.com/post/443828775/visual-hierarchy)
  29. 喜悅
  30. [微文](http://www.smashingmagazine.com/2012/07/18/the-personality-layer/)
  31. [微交互](http://microinteractions.com/what-is-a-microinteraction/)
  32. \[過渡]（<http://www.google.co.uk/design/spec/animation/authentic-motion.html）>
  33. 分析
  34. [KPI 設置](http://www.gv.com/lib/how-to-choose-the-right-ux-metrics-for-your-product)
  35. [AB 測試計劃](https://www.gov.uk/service-manual/user-centred-design/user-research/multivariate-testing.html)
  36. [測試](http://www.nngroup.com/articles/which-ux-research-methods/)

## 道德

* [花費時間](http://timewellspent.io/)
* [黑暗模式.org](http://darkpatterns.org/)

\#其他軟件/工具/資源

* [Pixlr](https://pixlr.com/)
* [Uxdesign](http://uxdesign.cc/ux-tools/)
* [現在](https://www.invisionapp.com/now)
* [做](https://www.invisionapp.com/do)
* [草圖](https://www.sketchapp.com/)
* [忍者模擬](https://ninjamock.com/)
* [應用登陸示例 2015](http://webdesignledger.com/best-2015-app-pages/)
* [Iphone 矢量](http://www.freepik.com/free-photos-vectors/iphone)
* [放置：Iphone 矢量、模型和視頻](https://placeit.net/)
* [魔術模型](http://magicmockups.com/)
* [PicApp](http://picapp.net/)
* [MockDrop](http://mockdrop.io/)
* [智能模型](http://smartmockups.com/)
* [Isweet it 模型](https://itunes.apple.com/us/app/isweetit/id895625230?l=de\&ls=1\&mt=8)
* [設計收藏和啟示](https://www.reddit.com/r/Design/comments/szz0t/a_collection_of_design_inspiration_and_resources/)
* [最佳用戶體驗設計師工具和資源集合](https://medium.com/@UXAliveTurkey/the-best-ux-designer-tools-resources-collection-24bf115d17bc#.sgh1i2b2c)
* [有史以來唯一的 ux 閱讀列表](https://medium.com/interactive-mind/the-only-ux-reading-list-ever-d420edb3f4ff#.65zsj3nxc)
* [前 10 名 UI 設計資源](https://medium.mybridge.co/top-10-ui-design-resources-that-make-designers-life-easier-d5cd0d789959#.kd49b23gs)

## 隱藏的寶石

* [綠襪](http://greensock.com/)

## 書籍

* [別讓我思考](https://www.amazon.com/dp/0321344758)
* [微交互](http://microinteractions.com/about-the-book/)
* [打造更好的產品](http://rosenfeldmedia.com/books/build-better-products/)
* [Kevin Hale 的閱讀清單](https://www.amazon.com/gp/richpub/listmania/fullview/R18EQHHM74IXPQ/ref=cm_lm_byauthor_title_full?\&tag=rnwap-20)

## 鍋爐板

* [應用登陸頁面](https://github.com/joshbuchea/awesome-app-landing-page)

## 教程

* [創建華麗 UI 的 7 條規則（第 2 部分）](https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96#.8kvn02a7k)
* [創建華麗 UI 的 7 條規則（第 1 部分）](https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda#.tk3hiznnl)
* [確保圖像上文本的高對比度](https://www.nngroup.com/articles/text-over-images/)

＃工作

* [Dribbble 工作](https://docs.tenten.co/awesome/design/www.dribbble.com/jobs)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.tenten.co/awesome/design/awesome-ui.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.