Design

⬅︎ 返回上层

TOC

其他

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

Awesome List

矢量绘图工具

  • 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://coolbackgrounds.io/
  • https://wangyasai.github.io/designtools.html

设计规范

颜色 (Color)

调色

  • 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

Typography

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

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

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

字体

像素字体

英文字体

中文字体

像素风格 8-Bit

立体像素 Voxel

Design System

Awesome Design System List

Design System - Sketch

Color System

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 必装
  • kitchen: 蚂蚁金服出品。非常好用
  • Zeplin: 业界最好的团队协作、标注、工作流 SaaS。商业用，开源替代品见 Marketch

Typography

定位

布局

标注

  • Sketch Notebook
  • Marketch: 生成 HTML 文档，同时也是标注工具。开源的

预览

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

版本控制

组件化设计

颜色

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

样式

图形

Icon

数据填充

等轴测图

其他插件