大前端技术生态体系

切换至深色主题

视觉体验设计中心 ​

重要通知

。

基本概况 ​

基本概况：比例姿态 1. 2. 3.
结构：内 1. 2. 3. 4. 5. 形状：内 1. 2. 3. 4. 5. 色彩搭配组合：内 1. 2. 3. 4. 5. 材质：内 1. 2. 3. 4.

ICON设计：内

图像设计：内 1. 2. 3.
平面设计：内 1. 2. 3.
UI设计：内 1. 2. 3.
交互系统：内 1. 2. 3.
文案设计：内 1. 2. 3.
语音设计：内 1. 2. 3.
视频设计：内 1. 2. 3.

使用示例 ​

炫酷网站与设计 ​

H5设计平台与在线平面设计 ​

Lucidpress：https://www.lucidpress.com/pages/
ficgra：https://www.ficgra.com
腾讯H5创意汇：http://www.chuangyihui.net/
易企秀：http://www.eqxiu.com/ | [画中画] 百度H5：https://h5.bce.baidu.com/
兔展：https://www.rabbitpre.com/
MAKA：http://maka.im/
菲果：https://www.ficgra.cn/
人人秀：https://rrx.cn/
图怪兽：https://818ps.com/
稿设计定：https://www.gaoding.com/
变色龙：https://www.bslong.cn/
H5DS：http://www.h5ds.com/ | https://cdn.h5ds.com/editor.html
熊猫办公：https://www.tukuppt.com/ 京东玲珑：https://ling.jd.com/ GIF动态图制作工具：https://gif-tool.whatthehell.cn/ 知末网 - 下素材找灵感看案例 - 发现更好的设计：https://www.znzmo.com/ 维本网络：http://www.weibenh5.com/ 图片编辑器：https://c.runoob.com/more/imageeditor/ 意派-专业H5制作工具：https://www.epub360.com/ 凡科微传单：https://cd.fkw.com/ | [画中画] 即时设计：https://js.design/

设计素材与创意 ​

优设网：https://www.uisdc.com/ 网站主题参考：http://jekyllthemes.org/

UI设计指导(常用配色设计) ​

UI风格设计 ​

Element设计指导：https://element.eleme.cn/#/zh-CN/theme/preview iView设计原则：http://v1.iviewui.com/docs/guide/design Ant Design色彩体系：https://ant.design/docs/spec/colors-cn DevUI Design：https://devui.design/ 颜色列表：https://www.runoob.com/cssref/css-colorsfull.html 255, 128, 59

Material Design：https://material.io/design/

在线PS：https://ps.gaoding.com/#/ | https://www.photopea.com/

ICON图标 ​

图标ICON集 ​

Font Awesome ​

<i class="fa fa-sharp fa-thin fa-house"></i>

颜色体系与搭配组合 ​

颜色模型与颜色应用 ​

# 资源文档
> Leptonica(用于图像处理和图像分析应用程序的软件)：https://github.com/danbloomberg/leptonica
> Leptonica官网：http://www.leptonica.org/
> 高级UI<第十八篇>， 图像处理之颜色矩阵：https://www.jianshu.com/p/d183b4edeb56
tesseract（光学字符识别）：https://github.com/tesseract-ocr/tesseract/
OpenCV（计算机视觉库）：https://github.com/opencv/opencv
jbig2enc（使用 jbig2 压缩对多页二进制图像文档进行编码）：https://github.com/agl/jbig2enc
Colour —— 实现大量颜色理论转换和算法的 Python 包
图像处理算法 http://c.zhetiaohe.com/ss/%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86%E7%AE%97%E6%B3%95.html
图的经典应用和算法 http://c.zhetiaohe.com/de/%E5%9B%BE%E7%9A%84%E7%BB%8F%E5%85%B8%E5%BA%94%E7%94%A8%E5%92%8C%E7%AE%97%E6%B3%95.html

# 颜色模型
> 用于在视频监视器上显示颜色。
> 用于叙述在打印机和绘图仪上如何输出彩色。
> 用于传输和存储颜色信息。
> 用于为程序提供更直观的颜色参数接口。

# 基本概念
> 基色：用来生成其他颜色的光源的色彩。
> 互补色：通过混合生成白色光的两种基色。 红色•青色 | 绿色•品红色 | 蓝色•黄色
> 明暗(shades)：通过调整黑色来改变原色的明暗程度。
> 色泽(tints)：通过调整白色来改变原色的。
> 色调(tones)：通过调整白色、黑色来改变原色的。

# 电磁频谱 | 频率(赫兹)


# RGBA颜色模型
> R：。    
> G：。    
> B：。    
> A：。      

# HSV颜色模型
> Hue(色相)：色彩的类型，例如红色、黄色等。
> Saturation(饱和度)：色彩的纯度，越高色彩越纯，低则逐渐变灰。 
> Value(明度)：眼睛对光源和物体表面的明暗程度的感觉。

# HLS颜色模型



> Brightness(亮度)：指的人感觉光的明暗程度，光的能量越大，亮度越大。  
> Purity(纯度)：

# XYZ颜色模型：一组CIE基色 | X、Y、Z表示产生一种颜色所需的CIE基色的量


# 配色原理
> 

# 相关算法
> 中位切分法、八叉树算法


# 对比度：N取值为0到10
N 0 0 0 128*(1-N)  
0 N 0 0 128*(1-N)  
0 0 N 0 128*(1-N)  
0 0 0 1 0  

# 色彩饱和度


# 颜色反向
-1  0   0   0   255  
0   -1  0   0   255  
0   0   -1  0   255  
0   0   0   -1  0  

# 调整亮度
1  0  0  0  N  
0  1  0  0  N   
0  0  1  0  N  
0  0  0  1  0   

# 颜色去色
0.3086  0.6094  0.0820  0  0  
0.3086  0.6094  0.0820  0  0  
0.3086  0.6094  0.0820  0  0  
0       0       0       1  0  



# 各种颜色相互转换算法的C语言源代码
<script>

  //RGB to CMYk
  int* rgb2cmyk(int R,int G,int B)
  {
    int cmyk [4];

    cmyk[3]=(int)(min(min(255-R,255-G),255-B)/2.55);//cmykK
    int MyR = (int)(R/2.55);
    int Div = 100-cmyk[3];
    if (Div == 0)Div = 1;
    cmyk[0] = ((100-MyR-cmyk[3])/Div)*100;//cmykC
    int MyG = (int)(G/2.55);
    cmyk[1] = ((100-MyG-cmyk[3])/Div)*100;
    int MyB = (int)(B/2.55);
    cmyk[2] = ((100-MyB-cmyk[3])/Div)*100;

    return cmyk;
  }


  //CMYK to RGB
  int* cmyk2rgb(int C,int M,int Y,int K)
  {
    int rgb[3];
    int *R=&rgb[0];
    int *G=&rgb[1];
    int *B=&rgb[2];

    float MyC = C/100;
    float MyM = M/100;
    float MyY = Y/100;
    float MyK = K/100;

    int *R = (int)((1-(MyC*(1-MyK)+MyK))*255);
    int *G = (int)((1-(MyM*(1-MyK)+MyK))*255);
    int *B = (int)((1-(MyY*(1-MyK)+MyK))*255);

    if (*R<0) *R=0;
    if (*G<0) *G=0;
    if (*B<0) *B=0;
    if (*R>255) *R=255;
    if (*G>255) *G=255;
    if (*B>255) *B=255;

    return rgb;
  }


  //RGB to YUV
  int* rgb2yuv(int R,int G,int B)
  {
    int yuv[3];

    yuv[0] = (int)(0.299*R+0.587*G+0.114*B);
    yuv[1] = (int)(-0.147*R-0.289*G+0.437*B);
    yuv[2] = (int)(0.615*R-0.515*G-0.1*B);

    return yuv;
  }


  //YUV to RGB
  int* yuv2rgb(int y,int u,int v)
  {
    int rgb[3];
    int *R=&rgb[0];
    int *G=&rgb[1];
    int *B=&rgb[2];
      
    *R = (int)(y+1.14*v);
    *G = (int)(y-0.394*u-0.581*v);
    *B = (int)(y+2.028*u);

    if (*R<0) *R=0;
    if (*G<0) *G=0;
    if (*B<0) *B=0;
    if (*R>255) *R=255;
    if (*G>255) *G=255;
    if (*B>255) *B=255;

    return rgb;
  }


  //RGB to YIQ
  int* rgb2yiq(int R,int G,int B)
  {
    int yiq[3];

    yiq[0] = (int)(0.299*R+0.587*G+0.114*B);
    yiq[1] = (int)(0.596*R-0.274*G-0.322*B);
    yiq[2] = (int)(0.212*R-0.523*G+0.311*B);

    return yiq;
  }


  //YIQ to RGB
  int* yiq2rgb(float y,float i,float q)
  {
    int rgb[3];
    int *R=&rgb[0];
    int *G=&rgb[1];
    int *B=&rgb[2];

    *R = (int)(y+0.956*i+0.621*q);
    *G = (int)(y-0.272*i-0.647*q);
    *B = (int)(y-1.105*i+1.702*q);

    if (*R<0) *R=0;
    if (*G<0) *G=0;
    if (*B<0) *B=0;
    if (*R>255) *R=255;
    if (*G>255) *G=255;
    if (*B>255) *B=255;

    return rgb;
  }

  //RGB to YCbCr
  int* rgb2ycbcr(int R, int G,int B)
  {
    int ycbcr[3];

    ycbcr[0] = (int)(0.299*R+0.587*G+0.114*B);

    ycbcr[1] = (int)(-0.1687*R-0.3313*G+0.5*B+128);
    if (ycbcr[1] > 255) ycbcr[1] = 255;

    ycbcr[2] = (int)(0.5*R-0.4187*G-0.0813*B+128);
    if (ycbcr[2] > 255) ycbcr[2] = 255;

    return ycbcr;
  }


  //YCbCr to RGB
  int* ycbcr2rgb(int Y,int Cb,int Cr)
  {
    int rgb[3];
    int *R=&rgb[0];
    int *G=&rgb[1];
    int *B=&rgb[2];

    *R = (int)(Y + 1.402 * (Cr -128));
    *G = (int)(Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128));
    *B = (int)(Y + 1.772 * (Cb -128));

    if (*R > 255) *R = 255;
    if (*G > 255) *G = 255;
    if (*B > 255) *B = 255;

    if (*R < 0) *R =0;
    if (*G < 0) *G =0;
    if (*B < 0) *B =0;

    return rgb;
  }


</script>

RGB颜色模型 ​

YIQ颜色模型 ​

HSV颜色模型 ​

色相（Hue） ​

指色彩的固有属性，如红、黄、蓝、绿等，是区分不同色彩的核心标志。色相环是色相关系的直观呈现，常用的24色相环以红、黄、蓝为三原色，通过两两混合形成间色、复色，为搭配提供明确的色彩位置参考。

明度（Value） ​

色彩的明暗程度，如深红与浅红的差异。明度变化是增强画面层次感的关键，相同色相通过明度调整可避免单调，不同色相通过明度统一可实现协调。

纯度（Saturation） ​

色彩的鲜艳程度，也称饱和度，如正红与灰红的区别。高纯度色彩传递活泼、强烈的情感，低纯度色彩则更显柔和、雅致，纯度搭配需结合场景情感需求。

CMY颜色模型 ​

CMYK 颜色模型 ​

HLS颜色模型 ​

色彩搭配 ​

结构形状 ​

实践设计案例 ​

色彩与光线的疗愈效果 工业设计借助色彩和光线的疗愈效果，创造出能够改善情绪和心理状态的产品。指南工业设计了解颜色对情绪的影响，我们在产品设计中采用温暖、柔和的色彩，如蓝色、绿色等，以平和情绪、缓解压力。通过灯光的设计和控制，我们创造出能够模拟日出、日落等自然光线变化的产品，为用户营造一个宁静、舒适的环境，有助于舒缓压力，提升心理健康。

声音与音乐的治疗效应 工业设计结合声音与音乐的治疗效应，设计出能够改善心理状态的创新产品。指南工业设计了解音乐对情绪的影响，我们设计出能够播放舒缓音乐、自然声音等的产品，帮助用户放松身心，减轻焦虑和压力。通过智能技术，我们使产品能够根据用户的心情和需求，自动选择合适的音乐和声音，为用户提供个性化的心理治疗。

触觉与舒适的互动体验 工业设计通过触觉与舒适的互动体验，设计出能够让人感到宁静和放松的产品。指南工业设计注重触觉的刺激，我们设计出能够模拟按摩、轻拍等触觉体验的产品，帮助用户缓解紧张和不适感。通过材质的选择和设计的形状，我们让产品具有舒适的握持感和触感，为用户提供放松身心的体验。

科技与个人化的心理辅导 工业设计结合科技和个人化的心理辅导，创造出能够提供心理支持和指导的创新产品。指南工业设计了解个人化的需求，我们设计出能够根据用户情况提供个性化心理辅导的产品，通过智能技术分析用户的情绪和需求，为用户提供有效的心理支持和指导。通过与专业心理学知识的结合，我们让产品成为用户的私人心理健康助手。

心理健康的未来愿景 工业设计正不断探索如何利用创新和科技，为心理健康带来更多的可能性。指南工业设计深知工业设计在心理健康领域的重要性，通过色彩、光线、声音、音乐、触觉等方式，我们致力于为人们创造出能够缓解压力、促进心理健康的创新产品。工业设计，让科技助力心理健康，为你提供舒适、放松、愉悦的心理体验。

色彩情感与文化内涵 ​

红色代表热情、警示； 蓝色代表冷静、信任； 绿色代表自然、健康； 黄色代表活力、温暖； 紫色代表优雅、神秘； 中性色（黑、白、灰、米）代表简洁、百搭。

白色在东亚部分地区代表哀悼，在欧美则代表纯洁； 红色在我国象征喜庆，在南非部分地区则与哀悼相关

生活场景 ​

家居装饰 客厅：米色沙发搭配灰色地毯和蓝色靠垫，营造出温馨舒适的氛围。 卧室：白色床单搭配粉色窗帘和绿色植物，带来清新自然的感觉。 厨房：白色橱柜搭配木质台面和红色餐椅，增添活力与温暖。 服装搭配 商务装：深蓝色西装搭配白色衬衫和浅灰色领带，显得专业且稳重。 休闲装：黑色T恤搭配牛仔裤和白色运动鞋，简约时尚。 晚礼服：黑色礼服搭配金色配饰，优雅高贵。 商业场景 品牌标识 可口可乐：红色和白色的经典搭配，象征活力和快乐。 星巴克：绿色和白色的搭配，传达自然和清新的品牌形象。 耐克：黑色和白色的搭配，简洁而充满力量感。 产品包装 苹果产品：白色和银色的搭配，简约现代，突出科技感。 雀巢巧克力：棕色和金色的搭配，传达高品质和奢华感。 百事可乐：蓝色、红色和白色的搭配，充满活力和现代感。 文化与艺术 艺术作品 梵高的《星空》：蓝色和黄色的强烈对比，营造出梦幻和动感的效果。 莫奈的《睡莲》：绿色和粉色的柔和搭配，带来宁静和和谐的视觉体验。 毕加索的《格尔尼卡》：黑白灰的搭配，突出战争的残酷和沉重感。 传统服饰 中国旗袍：红色和金色的搭配，象征喜庆和富贵。 日本和服：粉色和白色的搭配，传达温柔和典雅。 印度纱丽：多彩的搭配，如红色、绿色和金色，充满活力和节日氛围。

Released under the MIT License.

焰光实验室版权所有 | Copyright © 2022-present 王军