设计推荐(一)

​ 我做前端也有3年左右的时间了，慢慢地开始积累一些UI方面的知识了

plantuml

快速画图的在线工具

https://plantuml.com/zh/starting

动画制作工具

principle

https://principleformac.com/

motion

motion in Figma

https://www.figma.com/community/file/1037293413721148158

rive

https://www.google.com.hk/search?q=rive+app%E6%98%AF%E4%BB%80%E4%B9%88&rlz=1C5CHFA_en__1038TW1040&oq=rive+app%E6%98%AF%E4%BB%80%E4%B9%88&aqs=chrome..69i57j33i160l2.7202j0j7&sourceid=chrome&ie=UTF-8

flare

flutter-rive

https://github.com/rive-app/rive-flutter

Figma插件

第三方： https://figmachina.com/guide/integrations/figma-and-protopie.html

插件：https://www.easemob.com/news/6848

icon：https://github.com/leadream/figma-icon-automation

Logic Pro

Logic Pro 是一款Mac平台的数字音频工作站（DAW）与MIDI音序器软件。 Logic Pro最早由德国软件开发商Emagic开发，并随着2002年苹果公司对Emagic的收购成为苹果的产品，并作为苹果的专业级音乐软件套装Logic Studio的一部分

candyCode

https://candycode.com/

Compressor

苹果全家桶之一，压缩图片

Noya

https://www.noya.io/home

visily

https://app.visily.ai/

sketch-system

https://sketch.systems/

快速设计/交互

设计文档

https://www.yuque.com/ant-design/design-pattern/drop-down-chooser

Dropdown Menu与Select的区别

色彩

HCT色彩

随着 Android 12 动态主题 Material You 的发布，Google 新研制的色彩空间 HCT 也开始为人所知。

HCT 是 Hue、Chroma、Tone 三个单词的缩写。显然，Google 这一套新的色彩空间，主要由色相、色度和色调来定义。

色彩空间，可以简单理解为一套组织和命名成千上万种色彩的方法。比如，设计师不会直接说「蓝色」，而会用几个数字准确定义是哪一种蓝——用 RGB 表示为(0,0,255)，用 HSL 表示为(240,100,50)。目前广泛使用的色彩空间主要有：

RGB	Red, Green, Blue	最通用的硬件色彩模型
CMYK	Cyan, Magenta, Yellow	工业印刷
HSL/HSV	Hue, Saturation, Lightness/Value	数字化图像处理
Lab*	L亮度；a+为红色，a-为绿色；b+为黄色，b-为蓝色	与设备显示限制无关的场景如照明

从使用广泛的 HSV/HSL/HSB 色彩空间来看，目前共识是人眼主要用三个维度来组织颜色：色相、饱和度和亮度。色相告诉我们使用色轮上的哪个角度，比如红色和紫色。饱和度描述颜色看起来有多鲜艳或中性（接近灰色）——颜色离色彩空间的中心越远，色彩越鲜艳。亮度则描述该颜色与白色或黑色的接近程度。

https://zhuanlan.zhihu.com/p/474904016

Antd 色彩

https://zhuanlan.zhihu.com/p/32422584

Ant Design 1.x 色彩部分，第一版的实现较为简单，这部分主要介绍了：

• 对颜色部分进行了简要的说明
• 提供了一套调色板，并介绍了每种颜色的含义，但不能直接复制色值
• 提供了交互指引，介绍了色板生成工具的使用方法
• “色彩识别”部分，用简单的标签数值计算来确定对比度是否符合要求，这对于新人的使用特别友好

原理

选取一个主色作为 5 号色,

将主色与纯白色(#fff)混合，主色与纯白色之间分成 100 份， 20/40/60/80 的位置分别分割，得到 4/3/2/1 号色;

将主色与纯黑色(#000)混合，主色与纯黑色之间分成 100 份， 20/40/60/80 的位置分别分割，得到 6/7/8/9 号色;

通过以上方式得到一条完整渐变色板。

Ant Design 将这一版本的色板生成算法称之为 “tint/shade 色彩系统”。

Ant Design 2.x 色彩部分，相对于第一版，第二版的调色板的颜色过渡更加平滑，提供了点击调色板复制颜色值的功能。

原理

经过设计师和程序员的精心调教，结合了色彩加白、加黑、加深，贝塞尔曲线，以及针对冷暖色的不同旋转角度，得出一套色板生成算法（用以取代我们原来的 tint/shade 色彩系统）。使用者只需指定主色，便可导出一条完整的渐变色板。

最初一看这个原理感觉很复杂，其实不是那么难以理解：

1. 选取一个颜色作为主色(6 号色)；
2. 判断减淡或加深，进行颜色混合
3. 若减淡，则主色与纯白色(#fff)混合，根据色号，获取贝塞尔曲线上的对应值。
4. 若加深，则主色与它对应的深色混合，根据色号，获取贝塞尔曲线上的对应比例值。加深时主色对应的深色进行了明度与色相的调整，其中对色相的调整也就是上述引用中说的“针对冷暖色的旋转”；
5. 分别取1~9色号的色值，得到一条完整渐变色板。

资源

UI Blog：https://abduzeedo.com/

UI工具调查：https://uxtools.co/survey/2022/ui-design