README.md

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://www.designnotes.co/ : 免费的设计资源的集合

矢量绘图工具

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

绘图工具

• Photoshop
• krita: 自由开源的免费绘画软件，适用于草图、插画、漫画、动画、接景和 3D 贴图。支持中文。Ⓜ Ⓛ ⓦ
• ArtRage: 可以模仿油画、铅笔、水彩画等笔触的写实绘画工具。

P 图工具

• lama-cleaner: AI 算法 P 图工具。它提供 Docker，也有在线版，试了一下效果相当好。它可以选择用 CPU 计算还是用 GPU 计算。

原型设计

• ProtoPie: 体验一流的原型设计工具
• Pencil: 开源的，待改进

动效 Motion Graphics

• Adobe AE: 商业收费的动效设计工具。
• Natron: 开源免费的动效设计工具。
• Apple Motion: 价格 328 元。
• lottie: 开源的动效工具，支持 Web、Android、iOS 端，使用 React Native 实现。
• Haiku Animator: 开源工具，创建 Lottie 动效和 Web 组件（支持 React, Vue, Angular）
• Bodymovin: 可以将 Adobe AE 动画导出成 lottie 数据。

3D 建模

• 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: 头像生成器
  • avataaars React 组件
  • avataaars Sketch 插件

背景图

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

设计规范

• Material Design
• awesome-design-systems
• 移动设备屏幕尺寸大全

颜色 (Color)

• 色彩原理
• ColorSlurp: 取色器，免费的。 Ⓜ
  • Sip: 备选方案。体验更好。价格贵，年付。 Ⓜ

调色

• 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
• ant-design-colors
• https://www.realtimecolors.com/ : 可视化调整网站配色

无障碍配色

计算器

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

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

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

Icon

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

Typography

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

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

• https://type-scale.com/ 对比字体比例大小

  • 源码
  • https://www.modularscale.com/ 备用

• https://grtcalculator.com/ : Golden Ratio Typography

字体

• fontface.ninja: 查看网页所用的字体
• FontForge: 字体设计工具
• Nerd Fonts
• RightFont: 字体管理
• https://font-viewer.com : 字体比较。支持系统字体和 Google Font

像素字体

• Zpix 最像素

英文字体

• 有衬线英文

  • Georgia: 适合设计

• 无衬线英文

  • Helvetica Neue: 适合设计
  • DejaVu Sans Mono : 适合编程
  • Consolas: 适合编程
  • Quicksand: 适合设计

中文字体

• noto-cjk: Google 出品的去除豆腐字的中文字体

• DrXie/OSFCC: 中文开源字体集

• 有衬线中文

• 有衬线繁体中文

  • 昭源宋體

• 无衬线中文

  • PingFang CS
  • 得意黑 Smiley Sans
  • 思源黑体

• 无衬线繁体中文

  • 昭源黑體

像素风格 8-Bit

立体像素 Voxel

• MagicaVoxel

Design System

Awesome Design System List

• https://adele.uxpin.com/ : The repository of publicly available design systems and pattern libraries
  • 源码
• awesome-design-systems

Design System - Sketch

• UX Power Tools: awesome design system
• Frames for Sketch
• Cabana
• IBM - Carbon: 做得非常漂亮
• Mineral UI: A design system and React component library for the web

Color System

• Open Color

Sketch

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

Sketch 插件开发

• skpm: sketch 插件工程化工具
• 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: See your plugin logs, inspect the state of Sketch documents, explore actions, and more!

工作流 (Workflow)

• Sketch Runner: 最棒的插件管理器+工作流工具，sketch 必装
  • Sketchpacks: 另一款插件管理器
• kitchen: 蚂蚁金服出品。非常好用
• Zeplin: 业界最好的团队协作、标注、工作流 SaaS。商业用，开源替代品见 Marketch
  • Avocode: 「待评价」
  • Sympli: 「待评价」

Typography

• Font Packer: 轻松打包文档中用到的字体

定位

• Sketch Search Everywhere: 超强的搜索定位工具
• Font Finder: 根据字体选定图层

布局

• Anima Auto-Layout: 必装。很强大的布局排版工具
• butter-sketch-plugin: 垂直/水平重排工具，元素间排除间隔
  • SketchDistributor: 备选方案
• Symbol Organizer: 自动重排 Symbol 页
• Smartboards: 自动重排 Artboards 的布局，很人性化

标注

• Sketch Notebook
  • 商业版，功能强大
  • 开源版，早就不维护了，功能还行
• Marketch: 生成 HTML 文档，同时也是标注工具。开源的
  • Sketch Measure: 跟 Marketch 类似功能，设计得比较出色

预览

• psmirror: 设计稿实时预览工具，支持 iOS/Android/Web，支持 PS、Adobe、Sketch

版本控制

• Abstract: 目前最好的版本控制服务
• kactus
  • 源代码
• git-sketch-plugin: kactus 的前身开源项目
• Sympli Versions: 「待评价」「等支持私有仓库」

组件化设计

• react-sketchapp: 在 Sketch 里渲染 React 组件

颜色

• sketch-palettes: 色板 Document Colors 导入导出
• Prism: 根据色板 Document Colors 生成颜色展示列表。可自定义展示样式

样式

• sketch-styles-generator: 根据图层生成共享样式
• styledrop: 拷贝单个样式

图形

• Looper: 根据算法生成各种图形。非常漂亮
  • 其他参考教程

Icon

• sketch-icons: 把 Icon svg 做成带颜色的 Symbol

数据填充

• Data Populator: 使用文字占位符和 JSON 数据填充伪内容。支持 Sketch 和 Adobe XD
• Content Generator for Sketch: 比 sketch 自带的内容填充更灵活

等轴测图

• sketch-isometric: 生成轴测图平面
• Angle-Sketch-Plugin: 投映视图

其他插件

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