Design

⬅︎ 返回上层

TOC

• 其他
• Awesome List
• 矢量绘图工具
• 绘图工具
• P 图工具
• 原型设计
• 动效 Motion Graphics
• 3D 建模
• 插图资源 (Illustrations)
• 纹理 Patterns
• Mock
  • 头像
  • 背景图
• 设计规范
• 颜色 (Color)
  • 调色
  • 配色
  • 无障碍配色
• Icon
• Typography
  • 字体
• 像素风格 8-Bit
  • 立体像素 Voxel
• Design System
  • Awesome Design System List
  • Design System - Sketch
  • Color System
• Sketch
  • Sketch 插件开发
  • 工作流 (Workflow)
  • Typography
  • 定位
  • 布局
  • 标注
  • 预览
  • 版本控制
  • 组件化设计
  • 颜色
  • 样式
  • 图形
  • Icon
  • 数据填充
  • 等轴测图
  • 其他插件

其他

• https://lipsum.com/ : Lorem Ipsum，也称乱数假文或者哑元文本，是印刷及排版领域所常用的虚拟文字。支持各种语言。
• https://www.blobmaker.app/ : 制作圆形形变背景 SVG

Awesome List

• [Awesome Design Tools](https://github.com/LisaDziuba/Awesome-Design-Tools)
• https://www.designnotes.co/ : 免费的设计资源的集合

矢量绘图工具

• [Sketch](https://www.sketchapp.com): 矢量图形设计工具 Ⓜ
  • [Adobe XD](https://www.adobe.com/cn/products/xd.html): Sketch 的强力竞争者，跨平台 + 免费，独有的网格编组和滚动的特性，操作体验流畅，兼容最新版的 Sketch 文件。
  • [Figma](https://www.figma.com): Sketch 替代品。
• [Affinity Designer](https://affinity.serif.com/zh-cn/designer/)
• [MasterGo](https://mastergo.com/): 国产 sketch + figma，功能和 UI 做的挺不错，而且跨多平台，就是用起来有点卡。
• [pixso](https://pixso.cn/): 免费在线设计工具，插件生态做得很完善。缺点是没有色彩空间选项。

绘图工具

• [Photoshop](https://www.adobe.com/ca/products/photoshop.html)
• [krita](https://krita.org/): 自由开源的免费绘画软件，适用于草图、插画、漫画、动画、接景和 3D 贴图。支持中文。Ⓜ Ⓛ ⓦ
• [ArtRage](https://www.artrage.com/): 可以模仿油画、铅笔、水彩画等笔触的写实绘画工具。

P 图工具

• [lama-cleaner](https://github.com/Sanster/lama-cleaner): AI 算法 P 图工具。它提供 [Docker](https://lama-cleaner-docs.vercel.app/install/docker)，也有在线版，试了一下效果相当好。它可以选择用 CPU 计算还是用 GPU 计算。

原型设计

• [ProtoPie](https://www.protopie.io): 体验一流的原型设计工具
• [Pencil](https://github.com/evolus/pencil/): 开源的，待改进

动效 Motion Graphics

• [Adobe AE](https://www.adobe.com/products/aftereffects.html): 商业收费的动效设计工具。
• [Natron](https://github.com/NatronGitHub/Natron): 开源免费的动效设计工具。
• [Apple Motion](https://www.apple.com.cn/final-cut-pro/motion/): 价格 328 元。
• [lottie](http://airbnb.io/lottie/): 开源的动效工具，支持 Web、Android、iOS 端，使用 React Native 实现。
• [Haiku Animator](https://github.com/HaikuTeam/animator/): 开源工具，创建 Lottie 动效和 Web 组件（支持 React, Vue, Angular）
• [Bodymovin](https://github.com/airbnb/lottie-web): 可以将 Adobe AE 动画导出成 lottie 数据。

3D 建模

• [blender](https://github.com/blender/blender): 免费开源的 3D 建模工具

插图资源 (Illustrations)

免费可商用的资源

• 摄影图
  • https://unsplash.com/ : 质量非常高的摄影分享社区
  • https://pixabay.com/ : 免费图片和视频，质量还行
  • https://www.pexels.com/
• 矢量图
  • https://undraw.co/ : 丰富的使用场景
  • https://www.humaaans.com/ : 卡通人物
  • https://iradesign.io/ : 渐变色。开源的
  • https://icons8.com/ouch : 丰富的使用场景
  • https://gallery.manypixels.co/ : 丰富的使用场景
• 可定制的
  • https://doodleipsum.com/ : 卡通插图，支持定制、随机生成、生成 URL、API 请求
  • https://blush.design/ : 卡通插图，定制生成 PNG、SVG
  • https://icons8.com/mega-creator : 卡通插图 + 照片

纹理 Patterns

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

Mock

头像

• https://joeschmoe.io/ : 头像 Mock
• https://mastergo.com/omg : 卡通头像
• [avataaars-geneator](https://github.com/fangpenlin/avataaars-geneator): 头像生成器
  • [avataaars React 组件](https://github.com/fangpenlin/avataaars)
  • [avataaars Sketch 插件](https://avataaars.com/)

背景图

• https://coolbackgrounds.io/
• https://wangyasai.github.io/designtools.html

设计规范

• [Material Design](https://material.io/)
• [awesome-design-systems](https://github.com/alexpate/awesome-design-systems)
• [移动设备屏幕尺寸大全](https://uiiiuiii.com/screen/index.htm)

颜色 (Color)

• [色彩原理](http://www.charts.kh.edu.tw/teaching-web/98color/color.htm)
• [ColorSlurp](https://itunes.apple.com/cn/app/colorslurp/id1287239339): 取色器，免费的。 Ⓜ
  • [Sip](http://sipapp.io): 备选方案。体验更好。价格贵，年付。 Ⓜ

调色

• https://www.colorhexa.com : 色彩信息计算
• https://www.toptal.com/designers/colourcode : 移动鼠标选择配色
  • http://color.aurlien.net : 备选方案
• http://nipponcolors.com : 日系传统色彩。界面超好看！用字很美！
• http://zhongguose.com/ : 中国传统色彩。
• http://paletton.com : 色轮调色
• https://color.adobe.com/zh/create/color-wheel/ : 色轮调色
• http://www.calmar.ws/vim/256-xterm-24bit-rgb-color-chart.html : 终端色表

配色

• https://coolors.co : 按空格生成配色方案
• http://colorhunt.co : 别人提供的配色方案。四种色
• https://webgradients.com/ : 渐变色配色
• http://colormind.io/ : 使用深度学习自动生成配色方案
• https://palx.jxnblk.com/ : 根据一种基色自动生成配色方案。源码 [palx](https://github.com/jxnblk/palx)
• [ant-design-colors](https://github.com/ant-design/ant-design-colors)

无障碍配色

计算器

• https://webaim.org/resources/contrastchecker/
• http://www.msfw.com/Services/ContrastRatioCalculator

找到最符合无障碍对比度的颜色

• https://github.com/Tanaguru/Contrast-Finder
• http://colorsafe.co/
• [stark-sketch-plugin](https://github.com/stark-contrast/stark-sketch-plugin): 无障碍颜色对比度检查 Sketch 插件

Icon

• [Font Awesome](https://fontawesome.com)
  • https://fontawesome.com/icons?d=gallery&m=free
  • https://fontawesome.com/cheatsheet
• [Feather Icons](https://feathericons.com/)
  • [源代码](https://github.com/feathericons/feather)
• [Ionic Icon](https://ionicons.com/)
  • [源代码](https://github.com/ionic-team/ionicons)
• [octicons](https://github.com/primer/octicons): Github 出品的 Icon
• [cssicon](https://github.com/wentin/cssicon): 完全用 CSS 做的 Icon
• [devicon](https://github.com/devicons/devicon): Set of icons representing programming languages, designing & development tools
• [IconPark](https://github.com/bytedance/IconPark): 支持 React/Vue/SVG 的开源图标库，字节跳动出品。

Typography

• https://practicaltypography.com/ : 写得非常用心的 Typography 指南。初学者必读。

• http://fontmap.ideo.com/ : 字体地图

• https://type-scale.com/ 对比字体比例大小
  • [源码](https://github.com/jeremychurch/type-scale)
  • https://www.modularscale.com/ 备用
• https://grtcalculator.com/ : Golden Ratio Typography

字体

• [fontface.ninja](https://fontface.ninja/): 查看网页所用的字体
• [FontForge](https://github.com/fontforge/fontforge): 字体设计工具
• [Nerd Fonts](https://github.com/ryanoasis/nerd-fonts)
• [RightFont](https://rightfontapp.com/cn): 字体管理
• https://font-viewer.com : 字体比较。支持系统字体和 Google Font

像素风格

• [Zpix 最像素](https://github.com/SolidZORO/zpix-pixel-font)

有衬线英文

• [Georgia](https://www.fonts.com/font/microsoft-corporation/georgia): 适合设计

无衬线英文

• [Helvetica Neue](https://www.fonts.com/font/linotype/neue-helvetica): 适合设计
• DejaVu Sans Mono : 适合编程
• [Consolas](https://www.fonts.com/font/microsoft-corporation/consolas): 适合编程
• [Quicksand](https://fonts.google.com/specimen/Quicksand): 适合设计

有衬线中文

无衬线中文

• PingFang CS
• [得意黑 Smiley Sans](https://github.com/atelier-anchor/smiley-sans)

像素风格 8-Bit

立体像素 Voxel

• [MagicaVoxel](https://ephtracy.github.io/)

Design System

Awesome Design System List

• https://adele.uxpin.com/ : The repository of publicly available design systems and pattern libraries
  • [源码](https://github.com/marcintreder/adele)
• [awesome-design-systems](https://github.com/alexpate/awesome-design-systems)

Design System - Sketch

• [UX Power Tools](https://www.uxpower.tools/): awesome design system
• [Frames for Sketch](http://framesforsketch.com/)
• [Cabana](https://cabanadesignsystem.com/)
• [IBM - Carbon](https://github.com/IBM/carbon-design-kit): 做得非常漂亮
• [Mineral UI](https://github.com/mineral-ui/mineral-ui): A design system and React component library for the web

Color System

• [Open Color](https://github.com/yeun/open-color)

Sketch

• https://sketch.cloud : sketch 官方的共享协作平台，支持私密和公开分享。
• [Sketch Tool](https://www.sketchapp.com/tool): Sketch 自带的命令行工具

Sketch 插件开发

• [skpm](https://github.com/skpm/skpm): sketch 插件工程化工具
• [sketch-module-web-view](https://github.com/skpm/sketch-module-web-view): A Sketch module for creating a complex UI with a webview. The API is mimicking the BrowserWindow API of Electron.
• [sketch-dev-tools](https://github.com/skpm/sketch-dev-tools): See your plugin logs, inspect the state of Sketch documents, explore actions, and more!

工作流 (Workflow)

• [Sketch Runner](http://sketchrunner.com/): 最棒的插件管理器+工作流工具，sketch 必装
  • [Sketchpacks](https://sketchpacks.com/): 另一款插件管理器
• [kitchen](https://kitchen.alipay.com/): 蚂蚁金服出品。非常好用
• [Zeplin](https://zeplin.io/): 业界最好的团队协作、标注、工作流 SaaS。商业用，开源替代品见 Marketch
  • [Avocode](https://avocode.com/): 「待评价」
  • [Sympli](https://sympli.io/): 「待评价」

Typography

• [Font Packer](https://github.com/bigxixi/font-packer): 轻松打包文档中用到的字体

定位

• [Sketch Search Everywhere](https://github.com/mrpeak/sketch-search-everywhere): 超强的搜索定位工具
• [Font Finder](https://github.com/ukn530/fontfinder): 根据字体选定图层

布局

• [Anima Auto-Layout](https://github.com/AnimaApp/Auto-Layout): 必装。很强大的布局排版工具
• [butter-sketch-plugin](https://github.com/pberrecloth/butter-sketch-plugin): 垂直/水平重排工具，元素间排除间隔
  • [SketchDistributor](https://github.com/pez/sketchdistributor): 备选方案
• [Symbol Organizer](https://github.com/sonburn/symbol-organizer): 自动重排 Symbol 页
• [Smartboards](https://github.com/elihorne/smartboards): 自动重排 Artboards 的布局，很人性化

标注

• Sketch Notebook
  • [商业版](https://marcosvid.al/sketch-notebook/)，功能强大
  • [开源版](https://github.com/marcosvidal/Sketch-Notebook)，早就不维护了，功能还行
• [Marketch](https://github.com/tudou527/marketch): 生成 HTML 文档，同时也是标注工具。开源的
  • [Sketch Measure](https://github.com/utom/sketch-measure): 跟 Marketch 类似功能，设计得比较出色

预览

• [psmirror](http://www.psmirror.cn/zh): 设计稿实时预览工具，支持 iOS/Android/Web，支持 PS、Adobe、Sketch

版本控制

• [Abstract](https://www.goabstract.com/): 目前最好的版本控制服务
• [kactus](https://kactus.io/)
  • [源代码](https://github.com/kactus-io/kactus)
• [git-sketch-plugin](https://github.com/mathieudutour/git-sketch-plugin): kactus 的前身开源项目
• [Sympli Versions](https://versions.sympli.io/): 「待评价」「等支持私有仓库」

组件化设计

• [react-sketchapp](https://github.com/airbnb/react-sketchapp): 在 Sketch 里渲染 React 组件

颜色

• [sketch-palettes](https://github.com/andrewfiorillo/sketch-palettes): 色板 Document Colors 导入导出
• [Prism](https://github.com/ment-mx/Prism): 根据色板 Document Colors 生成颜色展示列表。可自定义展示样式

样式

• [sketch-styles-generator](https://github.com/lucaorio/sketch-styles-generator): 根据图层生成共享样式
• [styledrop](https://github.com/ryanmclaughlin/styledrop): 拷贝单个样式

图形

• [Looper](https://github.com/sureskumar/Looper): 根据算法生成各种图形。非常漂亮
  • [其他参考教程](https://archive.ph/wNnsa)

Icon

• [sketch-icons](https://github.com/amoreaux/sketch-icons): 把 Icon svg 做成带颜色的 Symbol

数据填充

• [Data Populator](https://github.com/preciousforever/data-populator): 使用文字占位符和 JSON 数据填充伪内容。支持 Sketch 和 Adobe XD
• [Content Generator for Sketch](https://github.com/timuric/Content-generator-sketch-plugin): 比 sketch 自带的内容填充更灵活

等轴测图

• [sketch-isometric](https://github.com/sureskumar/sketch-isometric): 生成轴测图平面
• [Angle-Sketch-Plugin](https://github.com/MengTo/Angle-Sketch-Plugin): 投映视图

其他插件

• [comma](https://github.com/margusholland/comma): 文本处理工具。大小写转换，空格处理，计数等等功能
• [Rename It](https://github.com/rodi01/renameit): 图层重命名工具，大赞！
• [Automate Sketch](https://github.com/Ashung/Automate-Sketch): 上百个功能集合
• [sketch-tiles](https://github.com/kumo/sketch-tiles): 方便制作 Tile 的插件
• [Sketch-Stickers](https://github.com/romannurik/Sketch-Stickers): Quickly drag+drop stickers in your Sketch Libraries.