HackMD
    • Sharing Link copied
    • /edit
    • View mode
      • Edit mode
      • View mode
      • Book mode
      • Slide mode
      Edit mode View mode Book mode Slide mode
    • Note Permission
    • Read
      • Only me
      • Signed-in users
      • Everyone
      Only me Signed-in users Everyone
    • Write
      • Only me
      • Signed-in users
      • Everyone
      Only me Signed-in users Everyone
    • More (Comment, Invitee)
    • Publishing
    • Commenting Enable
      Disabled Forbidden Owners Signed-in users Everyone
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
      • Everyone
    • Invitee
    • No invitee
    • Options
    • Versions
    • Transfer ownership
    • Delete this note
    • Template
    • Save as template
    • Insert from template
    • Export
    • Google Drive Export to Google Drive
    • Gist
    • Import
    • Google Drive Import from Google Drive
    • Gist
    • Clipboard
    • Download
    • Markdown
    • HTML
    • Raw HTML
Menu Sharing Help
Menu
Options
Versions Transfer ownership Delete this note
Export
Google Drive Export to Google Drive Gist
Import
Google Drive Import from Google Drive Gist Clipboard
Download
Markdown HTML Raw HTML
Back
Sharing
Sharing Link copied
/edit
View mode
  • Edit mode
  • View mode
  • Book mode
  • Slide mode
Edit mode View mode Book mode Slide mode
Note Permission
Read
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Write
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
More (Comment, Invitee)
Publishing
More (Comment, Invitee)
Commenting Enable
Disabled Forbidden Owners Signed-in users Everyone
Permission
Owners
  • Forbidden
  • Owners
  • Signed-in users
  • Everyone
Invitee
No invitee
   owned this note    owned this note      
Published Linked with
Like BookmarkBookmarked
Subscribed
  • Any changes
    Be notified of any changes
  • Mention me
    Be notified of mention me
  • Unsubscribe
Subscribe
--- tags: 零時的學習不能等,設計 --- # 設計 / 資訊視覺化 / 教學與資源 / 插圖素材 - hackpad 內容有更新:https://g0v.hackpad.tw/PeIJH77AjNt - 待整理單則素材: - 插圖素材 https://www.facebook.com/story.php?story_fbid=pfbid0mZtwUAcTJwX2YfqHaNpdgNdNahnHJ1AjAhNULsxHgLrDhSvk476Bmyx5CnZD1qagl&id=100064118913209&mibextid=tejx2t - 整理方式討論: - 如果用 hackmd-bookmode 會不會比較方便?如果該網頁可以收納至書本模式呈現的話 --- ## 馬上應用 ### ICON - [500多種扁平化陰影 ICON 自動產生器!圖示免費下載](http://www.playpcesor.com/2014/11/Flatty-Shadow-Flat-icon-download-free.html) - [https://www.facebook.com/freegroup/posts/10155784489733966](https://www.facebook.com/freegroup/posts/10155784489733966) - AutoDraw [https://www.autodraw.com/](https://www.autodraw.com/) - Google Material Icons [https://material.io/icons/](https://material.io/icons/) - [http://nathanfriend.io/inspirograph/](http://nathanfriend.io/inspirograph/) \- 輔助你畫出齒輪軌跡圖 - [Hipster Logo Generator](http://www.hipsterlogogenerator.com/) \- [http://buzzorange.com/vidaorange/2015/02/25/hipster-logo-generator-customizable-designs/](http://buzzorange.com/vidaorange/2015/02/25/hipster-logo-generator-customizable-designs/) - [http://blog.infographics.tw/2015/05/build-gif-loader-with-loading-io/](http://blog.infographics.tw/2015/05/build-gif-loader-with-loading-io/) - [https://thenounproject.com/](https://thenounproject.com/) - [http://danklammer.com/articles/svg-stroke-ftw/](http://danklammer.com/articles/svg-stroke-ftw/) - [https://icons8.com/](https://icons8.com/) - [http://www.flaticon.com/](http://www.flaticon.com/) - [http://flat-icon-design.com/](http://flat-icon-design.com/) - Method Draw:線上icon客製化編輯 [https://youtu.be/rL9dggIZ_wQ?list=PLdkvZCcLvKbYs5IFuPpMbGed4x31vhmAP](https://youtu.be/rL9dggIZ_wQ?list=PLdkvZCcLvKbYs5IFuPpMbGed4x31vhmAP) - ICON 圖標設計指南,圖示繪製必須注意的小細 - [https://jiemr.com/icon-icon-design-guide](https://jiemr.com/icon-icon-design-guide) ### Loading Icon - Kirby Wu> 為了方便大家在專案中加入社群識別,之前做過 g0v 的 loading icon,現在我把他重新建到獨立的頁面,在這裡除了下圖看到的布丁效果外, 還有 40 種不同的動畫類型可以選,需要的朋友可以自己調來玩囉~ - 文字來源:[https://www.facebook.com/groups/g0v.general/permalink/1392846010791801/](https://www.facebook.com/groups/g0v.general/permalink/1392846010791801/) - 網址:[https://loading.io/animation/icon/31659](https://loading.io/animation/icon/31659) ### LOGO - [https://www.facebook.com/playpc/posts/10155475969407108](https://www.facebook.com/playpc/posts/10155475969407108) ### 字體 - CNS11643中文標準交換碼全字庫(簡稱全字庫),內含明體、正宋體及正楷體3種字型, - 授權:行政院國發會-政府資料開放授權條款-第1版,需要時可以直接轉 CC BY-4.0 來使用這些素材 - [https://www.facebook.com/photo.php?fbid=10209651209996624&set=a.1421355993490.50608.1820401805&type=3&theater](https://www.facebook.com/photo.php?fbid=10209651209996624&set=a.1421355993490.50608.1820401805&type=3&theater) - [https://fonts.google.com/](https://fonts.google.com/) - [https://www.fontfont.com](https://www.fontfont.com) - 日星鑄字行 [http://typography.ascdc.sinica.edu.tw/%E5%AD%97/](http://typography.ascdc.sinica.edu.tw/%E5%AD%97/) - [https://www.facebook.com/字型下載區-1442837152678167](https://www.facebook.com/字型下載區-1442837152678167) - [http://www.skyfont.com/](http://www.skyfont.com/) - [https://www.facebook.com/dspim/posts/1850677385194059](https://www.facebook.com/dspim/posts/1850677385194059) - [https://www.facebook.com/lovefonts/posts/1495452330534286](https://www.facebook.com/lovefonts/posts/1495452330534286) ### 標籤雲產生器 - Wordsift [https://wordsift.org/](https://wordsift.org/) ### 網格紙產生器 - [http://gridzzly.com/](http://gridzzly.com/) ### 筆刷 - 台灣食物 - [https://www.plurk.com/m/p/m2xxq1](https://www.plurk.com/m/p/m2xxq1) - [https://www.facebook.com/tikalyangfc/posts/1350010351712040](https://www.facebook.com/tikalyangfc/posts/1350010351712040) ### 點線圖 - 點線圖 dotsDraw 混合式的製作方式,網址: [http://vea.tw/works/dotsDraw/](http://vea.tw/works/dotsDraw/) ### 8bit - [https://make8bitart.com/](https://make8bitart.com/) - [http://c64.superdefault.com/](http://c64.superdefault.com/) ### GIF - [https://giphy.com/categories](https://giphy.com/categories) ### 圖表 - [http://www.charted.co/](http://www.charted.co/) \- 丟個CSV 就可以自動畫圖 > [name=Ying:404 了 (20231101)] - RAW Graphs. The missing link between spreadsheets and data visualization. - [http://app.rawgraphs.io/](http://app.rawgraphs.io/) - [http://raw.densitydesign.org](http://raw.densitydesign.org) - [https://www.facebook.com/data.visualize](https://www.facebook.com/data.visualize) \- 專門貼資料視覺化 \- 利用各種工具,包含繪圖軟體、線上網站、函式庫甚至手繪來把資料視覺化的案例 - ChartBlocks 免費的線上製作統計圖表服務 - [http://www.playpcesor.com/2015/02/chartblocks.html](http://www.playpcesor.com/2015/02/chartblocks.html) - [http://echarts.baidu.com/doc/example.html](http://echarts.baidu.com/doc/example.html) - [http://infogr.am](http://infogr.am) \- 很傻瓜又很炫的圖表產生器, 支援互動式操作 - [http://www.datajournalismtw.com/#!about1/c1pkh](http://www.datajournalismtw.com/#!about1/c1pkh) - [https://www.facebook.com/shenhornyen/videos/10203789256250225/](https://www.facebook.com/shenhornyen/videos/10203789256250225/) - [https://opensource.com/life/15/6/eight-open-source-data-visualization-tools?sc_cid=7016000000127ECAAY](https://opensource.com/life/15/6/eight-open-source-data-visualization-tools?sc_cid=7016000000127ECAAY) - 關係圖 [GXV Guan Xi Visualized](https://g0v.hackpad.tw/5gygVb26WId) - 說明類資源 - [http://dataviz.tools/](http://dataviz.tools/) - 蒐集更多網站資源 - [https://buzzorange.com/techorange/2014/06/10/30-simple-tools-for-data-visualization/](https://buzzorange.com/techorange/2014/06/10/30-simple-tools-for-data-visualization/) - [https://www.ft.com/content/304419ec-63a3-11e6-8310-ecf0bddad227](https://www.ft.com/content/304419ec-63a3-11e6-8310-ecf0bddad227) - [http://blog.infographics.tw/2016/08/tips-on-basic-charts/](http://blog.infographics.tw/2016/08/tips-on-basic-charts/) - [http://www.datavizcatalogue.com/index.html](http://www.datavizcatalogue.com/index.html) - [https://www.facebook.com/data.visualize/photos/a.137798399723944.1073741827.137698833067234/635054893331623/?type=3&theater](https://www.facebook.com/data.visualize/photos/a.137798399723944.1073741827.137698833067234/635054893331623/?type=3&theater) ### 表單 - Google 表單:[不再只有醜醜範本!如何幫 Google 表單美化背景外觀?](http://www.playpcesor.com/2014/09/google-form-design.html?m=1) - Typeform:[https://www.typeform.com/](https://www.typeform.com/) ### 顏色 / 配色方案 配色工具與案例,Todos:應該要加上評語、說明該網站工具的特色 - HCL Editor 用等距分佈選六種顏色 [http://goo.gl/mmdmG6](http://goo.gl/mmdmG6) - Kuler - Adobe 色輪工具可選類比 / 三色 / 對比 / 補色 [http://goo.gl/PiyQrn](http://goo.gl/PiyQrn) - 配色工具網站 [http://colorsupplyyy.com/app/](http://colorsupplyyy.com/app/) - HTML Color Codes 線上選色器 [https://www.facebook.com/freegroup/posts/10155943748708966](https://www.facebook.com/freegroup/posts/10155943748708966) - [https://color.hailpixel.com/](https://color.hailpixel.com/) - [https://colourco.de/](https://colourco.de/) - [https://flatuicolors.com/](https://flatuicolors.com/) - [https://www.colorhexa.com/](https://www.colorhexa.com/) - [http://materialuicolors.co/](http://materialuicolors.co/) - Coolors [https://www.facebook.com/freegroup/posts/10153725709878966](https://www.facebook.com/freegroup/posts/10153725709878966) - 將一張圖片拆分出用色 [http://www.colr.org/](http://www.colr.org/) - Pantone's Addictive New App [https://www.facebook.com/FastCoDesign/videos/1151457734926968/](https://www.facebook.com/FastCoDesign/videos/1151457734926968/) - Beautiful Colors, Every Day. [http://colorhunt.co/](http://colorhunt.co/) - LOLCOLORS, Curated color palette inspiration. [https://www.webdesignrankings.com/resources/lolcolors/](https://www.webdesignrankings.com/resources/lolcolors/) - 配色案例 [https://www.facebook.com/media/set/?set=a.869836763159572.1073741850.270450253098229&type=3](https://www.facebook.com/media/set/?set=a.869836763159572.1073741850.270450253098229&type=3) - Awwwards 收集網頁設計案例,可觀察其配色 [https://www.awwwards.com/websites/nominees/](https://www.awwwards.com/websites/nominees/) 漸層 - 漸層 [https://webgradients.com/](https://webgradients.com/) - 漸層 [https://uigradients.com/](https://uigradients.com/#Instagram)[#](https://g0v.hackpad.tw/ep/search/?q=%23Instagram&via=PeIJH77AjNt)[Instagram](https://g0v.hackpad.tw/ep/search/?q=%23Instagram&via=PeIJH77AjNt) - 漸層 [https://lstore.graphics/meshgradients/](https://lstore.graphics/meshgradients/) 傳統色 - 日本傳統色 [http://nipponcolors.com/](http://nipponcolors.com/#tonoko)[#tonoko](https://g0v.hackpad.tw/ep/search/?q=%23tonoko&via=PeIJH77AjNt) - 中國傳統色 [http://zhongguose.com/](http://zhongguose.com/) 色覺模擬 - xScope 模擬色盲者的世界 [http://goo.gl/MHTikR](http://goo.gl/MHTikR) - Color Oracle 透過色盲人士的眼睛,檢查自己製作的圖表 [http://colororacle.org/](http://colororacle.org/) - Chromatic Vision Simulator 色覺模擬器 app [http://a-chien.blogspot.tw/2016/03/ipad.html](http://a-chien.blogspot.tw/2016/03/ipad.html) - 從紅綠燈談色盲者的視界 [https://www.facebook.com/permalink.php?story_fbid=10209467706870452&id=1259134110](https://www.facebook.com/permalink.php?story_fbid=10209467706870452&id=1259134110) ### 素材 - 手繪簡單元素,電腦提供可能相對應的素材,提供選用 - [https://www.autodraw.com/](https://www.autodraw.com/) - 老台灣的素材 - [http://catalog.digitalarchives.tw/](http://catalog.digitalarchives.tw/) - 鳥類插畫圖鑑素材 - [https://jiemr.com/bird-illustrator-ebook](https://jiemr.com/bird-illustrator-ebook) - 中國東方紋樣集錦電子書,素材下載 - [https://jiemr.com/oriental-decoration-book](https://jiemr.com/oriental-decoration-book) - 日本ダ鳥獣戯画 - [http://www.chojugiga.com/](http://www.chojugiga.com/) - 綜合網站 - [https://www.vecteezy.com/](https://www.vecteezy.com/) - [https://www.sitebuilderreport.com/stock-up](https://www.sitebuilderreport.com/stock-up) ### 去背 - 「Malabi」是一款免費線上去背工具 - [https://free.com.tw/malabi/](https://free.com.tw/malabi/) ### 地圖相關 - pixelmap - [http://pixelmap.amcharts.com/](http://pixelmap.amcharts.com/) - [http://artofslide.blogspot.tw/2017/04/pixel-map-generator.html?utm_source=%E7%B0%A1%E5%A0%B1%E8%97%9D%E8%A1%93%E7%83%98%E7%84%99%E5%9D%8A](http://artofslide.blogspot.tw/2017/04/pixel-map-generator.html?utm_source=%E7%B0%A1%E5%A0%B1%E8%97%9D%E8%A1%93%E7%83%98%E7%84%99%E5%9D%8A) - [Mapfessional](https://g0v.hackpad.tw/EJfaf9C5gaT) ### 包裝刀模 - 免費包裝刀模下載,紙袋、紙盒印刷用刀模圖下載,可轉 AI 向量格式 [https://jiemr.com/packaging-die](https://jiemr.com/packaging-die) - 免費印刷刀模下載,合計50幾款紙袋與包裝盒刀模 [https://jiemr.com/packaging-daomo-2](https://jiemr.com/packaging-daomo-2) ### free CAD files - [https://grabcad.com/library](https://grabcad.com/library) ### 格式轉換 - ai2html turns your Illustrator files into HTML. [http://ai2html.org/](http://ai2html.org/) ### 擬定合約 - The Freelance Contract - [https://www.and.co/the-freelance-contract](https://www.and.co/the-freelance-contract) ## 支援多人協作的設計工具 - 子龍的晾衣架: 零時政府 |[說到設計如何開源協作這件事](http://blog.yam.com/shulusama/article/79092506),給想要跨進g0v的設計師,一份關於設計開源協作的討論心得 ### 網路協作工具 - [https://www.canva.com/about](https://www.canva.com/about) - [https://webflow.com/](https://webflow.com/) - [http://froont.com/](http://froont.com/) - [https://www.figma.com/](https://www.figma.com/) - [http://workflowy.com/](http://workflowy.com/) - [http://zbryikt.github.io/bezier-edit/](http://zbryikt.github.io/bezier-edit/) - [https://www.facebook.com/data.visualize/posts/574521169384996](https://www.facebook.com/data.visualize/posts/574521169384996) ### 3D 與 GIS 協作工具 - [Crowd Planning System Prototype](https://g0v.hackpad.tw/dVyaLcWGdNA) ## 設計觀念探討 待整理 - g0v tw hackath10n 中場短講 今天 聊外貌 台灣零時政府第拾次資料科學黑客松 by 子龍 - [https://youtu.be/DcZvOcci3Lg](https://youtu.be/DcZvOcci3Lg) - 將作品進行網格分析 [http://grids.qoopu.net/](http://grids.qoopu.net/) - g0v design guide 零時政府的視覺設計原則:[G0V UI](https://g0v.hackpad.tw/Mb2yoaVY378) - UBER 更新視覺識別設計規範 - [https://www.facebook.com/initiumlab/posts/2141441886081889](https://www.facebook.com/initiumlab/posts/2141441886081889) - 資訊圖像化概念與應用 - [https://youtu.be/2qBwM5uI3QA](https://youtu.be/2qBwM5uI3QA) - 從使用者到APP頁面設計準則 - [https://medium.com/as-a-product-designer/%E5%BE%9E%E4%BD%BF%E7%94%A8%E8%80%85%E5%88%B0app%E9%A0%81%E9%9D%A2%E8%A8%AD%E8%A8%88%E6%BA%96%E5%89%87-9d3437090a46](https://medium.com/as-a-product-designer/%E5%BE%9E%E4%BD%BF%E7%94%A8%E8%80%85%E5%88%B0app%E9%A0%81%E9%9D%A2%E8%A8%AD%E8%A8%88%E6%BA%96%E5%89%87-9d3437090a46) - 挑選顏色是個大議題, 這篇教你怎麼做: [http://goo.gl/eYk7fq](http://goo.gl/eYk7fq) - Best Practices in Data Visualizations - [https://www.microstrategy.com/Strategy/media/downloads/training-events/microstrategy-world/2014-barcelona/MSTRWorldEU2014\_T1\_S3\_Best\_Practices\_in\_Data_Visualizations.pdf?ext=.pdf](https://www.microstrategy.com/Strategy/media/downloads/training-events/microstrategy-world/2014-barcelona/MSTRWorldEU2014_T1_S3_Best_Practices_in_Data_Visualizations.pdf?ext=.pdf) - Button - [https://medium.com/ux-power-tools/a-better-way-to-make-buttons-in-sketch-6c23470f27c#.5dn805gtb](https://medium.com/ux-power-tools/a-better-way-to-make-buttons-in-sketch-6c23470f27c#.5dn805gtb) - 談簡報色彩 - [https://www.tien-chang.com/amazingslide-ch01-4/](https://www.tien-chang.com/amazingslide-ch01-4/) - 蒐集手繪地圖案例網站 - [http://datored.wixsite.com/map-home](http://datored.wixsite.com/map-home) - 實體場域 - Reading Forms is a blog-shaped depository of hyperlinks and images of graphic design exhibitions, and of other situations that are visually, thematically or conceptually related. It tries to examine modes and forms of presentation, observation, curation and interaction in the recontextualized display of graphic design. [http://readingforms.com/](http://readingforms.com/) - Expertise in UX design, design for the IoT, data-informed design, and more;Enhance your design skills with these free ebooks from experts in UX, Data, IoT, and more. - [http://www.oreilly.com/design/free/?cmp=tw-design-free-lp-dsca17\_free\_report_ac](http://www.oreilly.com/design/free/?cmp=tw-design-free-lp-dsca17_free_report_ac) - visualizing rights 資料視覺化的人權倡議應用 - [https://medium.twngo.xyz/visualizing-rights-dcb65233fe6b](https://medium.twngo.xyz/visualizing-rights-dcb65233fe6b) - 加點製造是屬於產品開發的專業知識平台 你可以在這裡討論設計與製造技術,也可以發現優秀的生產廠商! - [https://addmaker.tw/landing](https://addmaker.tw/landing) ### 風格 - 曼菲斯風格設計案例 - [http://goo.gl/TfJ2hH](http://goo.gl/TfJ2hH) - 日本2017年1月DM分享 - [https://www.facebook.com/jack3020/media_set?set=a.10210192953292445.1073741830.1597726891&type=3](https://www.facebook.com/jack3020/media_set?set=a.10210192953292445.1073741830.1597726891&type=3) - Baugasm - 365 Posters - [https://www.behance.net/gallery/50411735/Baugasm-365-Posters](https://www.behance.net/gallery/50411735/Baugasm-365-Posters) - Paul Cox 與麒麟淡麗的合作 - [https://www.facebook.com/designsurfing/posts/1138746169559285](https://www.facebook.com/designsurfing/posts/1138746169559285) - [https://green-name.kirin.jp/](https://green-name.kirin.jp/) - 同形異構的運用 - [https://goo.gl/iMbqP5](https://goo.gl/iMbqP5) ### 人因因素 - 字級大小原則討論 [https://www.facebook.com/tamago.gogogo/posts/10210435887038098](https://www.facebook.com/tamago.gogogo/posts/10210435887038098) - 「Design for Accessibility Cheatsheet」,從包含弱視、失讀、失聰等六個面向 [https://www.facebook.com/data.visualize/posts/549909348512845:0](https://www.facebook.com/data.visualize/posts/549909348512845:0) - Microsoft Inclusive Design [http://mp.weixin.qq.com/s/ihsk7luLK595Khj-hcDVFw](http://mp.weixin.qq.com/s/ihsk7luLK595Khj-hcDVFw) - [https://www.microsoft.com/en-us/design/inclusive](https://www.microsoft.com/en-us/design/inclusive) - xScope - 原文寫可模擬色盲者的世界, 但其實是組功能極強大的套件組! ([http://goo.gl/MHTikR](http://goo.gl/MHTikR) ) - 但是,要怎麼透過色盲人士的眼睛,檢查自己製作的圖表呢?網路上有一款免費的小工具「Color Oracle」,能夠解決這個問題。進入以下網址([http://colororacle.org/](http://colororacle.org/)) - 易讀服務 Easy Read Service - [http://www.sunable.net/node/31168](http://www.sunable.net/node/31168) - [http://www.](http://www.changepeople.org/)[changepeople.org/](http://www.changepeople.org/) - [https://www.facebook.com/sunboytw/posts/10208167522296209](https://www.facebook.com/sunboytw/posts/10208167522296209) - [https://www.facebook.com/groups/sunable/permalink/1334561573275993/](https://www.facebook.com/groups/sunable/permalink/1334561573275993/) - 關於雲端千眼 - [http://www.edocumentservice.org/](http://www.edocumentservice.org/) - 莎士比亞有句名言:「生活里沒有書籍,就好像大地沒有陽光;智慧里沒有書籍,就好像鳥兒沒有翅膀。」而『edocumentservice平台』的建立,主要便是希望透過平台,讓視障視障者能夠閱讀重製轉化後的電子書,並且透過平台自動化管理,減少視障視障者在取得資訊所遇到的困難。 - Tools for educators. Compliance for organizations. Headaches for no one. End-to-end document accessibility for Google is here. - [https://www.grackledocs.com/](https://www.grackledocs.com/) ## 更多資源蒐集區 - [Quora: What are the best resources for learning bleeding edge web UI and UX design ](http://www.quora.com/What-are-the-best-resources-for-learning-bleeding-edge-web-UI-and-UX-design) - [https://vide.tw/7815](https://vide.tw/7815) - 日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました!(たぶん)[http://boxil.jp/magazine/uiux/](http://boxil.jp/magazine/uiux/) - [http://buzzorange.com/techorange/2015/05/28/design/](http://buzzorange.com/techorange/2015/05/28/design/) - [http://resources.ogdesign.tw/](http://resources.ogdesign.tw/) - [https://www.facebook.com/data.visualize/posts/551794734990973](https://www.facebook.com/data.visualize/posts/551794734990973) - [https://www.facebook.com/imDataMan/posts/1812037675741857](https://www.facebook.com/imDataMan/posts/1812037675741857) - [https://www.ordnancesurvey.co.uk/blog/2015/01/cartographic-design-principles-summary/](https://www.ordnancesurvey.co.uk/blog/2015/01/cartographic-design-principles-summary/#more-18093)[#more](https://g0v.hackpad.tw/ep/search/?q=%23more&via=PeIJH77AjNt)[-18093](https://www.ordnancesurvey.co.uk/blog/2015/01/cartographic-design-principles-summary/#more-18093) - [http://freedesignresources.net/](http://freedesignresources.net/) - [https://medium.com/sketch-app-sources/preparing-and-exporting-svg-icons-in-sketch-1a3d65b239bb#.67jygymit](https://medium.com/sketch-app-sources/preparing-and-exporting-svg-icons-in-sketch-1a3d65b239bb#.67jygymit) - Tachyons 不是 css framework ,不送任何的套裝行程,但它把所有會用的 css 組合全都用最精簡而且不互相衝突的方式包起來,所以寫網頁時,直接標 class 就好,不另外寫 css ,像是 div 長寬比要多少、 padding, border 要多少等等。有興趣的人可以看這兩份字典: - [http://tachyons.io/docs/table-of-styles/](http://tachyons.io/docs/table-of-styles/) - [http://tachyons.io/docs/table-of-properties/](http://tachyons.io/docs/table-of-properties/) - AI WEBSITES THAT DESIGN THEMSELVES - [https://thegrid.io/#7](https://thegrid.io/#7) ### 設計社群共筆區 - [https://uiuxlink.hackpad.com/](https://uiuxlink.hackpad.com/)

Import from clipboard

Advanced permission required

Your current role can only read. Ask the system administrator to acquire write and comment permission.

This team is disabled

Sorry, this team is disabled. You can't edit this note.

This note is locked

Sorry, only owner can edit this note.

Reach the limit

Sorry, you've reached the max length this note can be.
Please reduce the content or divide it to more notes, thank you!

Import from Gist

Import from Snippet

or

Export to Snippet

Are you sure?

Do you really want to delete this note?
All users will lost their connection.

Create a note from template

Create a note from template

Oops...
This template has been removed or transferred.


Upgrade

All
  • All
  • Team
No template.

Create a template


Upgrade

Delete template

Do you really want to delete this template?

This page need refresh

You have an incompatible client version.
Refresh to update.
New version available!
See releases notes here
Refresh to enjoy new features.
Your user state has changed.
Refresh to load new user state.

Sign in

Forgot password

or

Sign in via GitHub

New to HackMD? Sign up

Help

  • English
  • 中文
  • 日本語

Documents

Tutorials

Book Mode Tutorial

Slide Example

YAML Metadata

Resources

Releases

Blog

Policy

Terms

Privacy

Cheatsheet

Syntax Example Reference
# Header Header 基本排版
- Unordered List
  • Unordered List
1. Ordered List
  1. Ordered List
- [ ] Todo List
  • Todo List
> Blockquote
Blockquote
**Bold font** Bold font
*Italics font* Italics font
~~Strikethrough~~ Strikethrough
19^th^ 19th
H~2~O H2O
++Inserted text++ Inserted text
==Marked text== Marked text
[link text](https:// "title") Link
![image alt](https:// "title") Image
`Code` Code 在筆記中貼入程式碼
```javascript
var i = 0;
```
var i = 0;
:smile: :smile: Emoji list
{%youtube youtube_id %} Externals
$L^aT_eX$ LaTeX
:::info
This is a alert area.
:::

This is a alert area.

Versions

Versions

Upgrade now

Version named by    

More Less
  • Edit
  • Delete

Note content is identical to the latest version.
Compare with
    Choose a version
    No search result
    Version not found

Feedback

Submission failed, please try again

Thanks for your support.

On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

Please give us some advice and help us improve HackMD.

 

Thanks for your feedback

Remove version name

Do you want to remove this version name and description?

Transfer ownership

Transfer to
    Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.