【Cloudscape云景】React框架的使用-文档细读-云景的视觉基础 .

Shinkai005
44 阅读6分钟

【Cloudscape云景】React框架的使用-文档细读-云景的视觉基础 .

cloudscape.design/ 这是框架的官网

image-20230801183558484

官网首页homepage

An open source design system for the cloud适用于云计算的开源设计系统

Cloudscape offers user interface guidelines, front-end components, design resources, and development tools for building intuitive, engaging, and inclusive user experiences at scale.

提供了用户页面指南, 前端组件, 设计资源和开发工具, 用于构建直观, 吸引人的, 具有包容性的大规模用户体验

官方文档分成四个部分:

image-20230801182916435

Foundation部分-云景的视觉基础

A great user experience is comprised of more than components and individual patterns. Cloudscape visual foundation includes our color palettes, iconography, use of spacing, motion, and more.

出色的用户体验不仅仅是由组件和单个图案组成的。云景的视觉基础包括我们的调色板、图标、间距的使用、动作等。

这一节又分为下面13小节

  1. Colors颜色
  2. Content density 内容密度
  3. Data visualization colors数据可视化颜色
  4. Design tokens 设计代币
  5. Iconography 图标
  6. Layout布局
  7. Motion动效
  8. Spacing间距
  9. Theming主题化
  10. Typography 版式
  11. Visual context 视觉语境
  12. Visual modes视觉模式
  13. Visual style视觉风格

1.颜色:

image-20230801184541179

这部分实际列出了, 在这个框架中, 每部分是按照怎样的设计要求和思想设计的颜色.

这部分提到了design token 设计令牌, 主要是为了实现视觉模式(暗色主题/浅色主题切换)

  • 突出显示和强调： 蓝色主要用于引起人们对页面上主要操作的注意。它还应该用于辅助操作、链接，并强调交互元素。
  • 编码 和关联： 红色和 绿色状态颜色应主要用于指示资源的状态，以便用户可以采取行动，并确信其他资源运行正常。

2.内容密度

内容密度部分主要是改变组件之间间距来实现的.

image-20230801190020580

一致性: 所有的组件基本都适配这两种模式

灵活性:可以选择用户喜欢的密度级别(4px为增量)

可读性: 帮助面板,警报,闪存条, 表单验证信息是不受控制的.

互动性: 对有额外互动的组件进行了设置. 仪表盘, 资源列表,资源详细信息

3.数据可视化颜色

这部分主要关于数据可视化组件的颜色的配置的.分成以下几部分

饼图: piechart

使用的叫做: Status and severity palette 状态和严重性调色板

image-20230801191323648

和颜色部分一样, 这部分是记录了每个颜色的使用方式和使用原则. 以及sass和js两种引用方法.

image-20230801191409748

折线图 linechart

使用的是: Generic categorical palette通用分类调色板

要求是, 每个类之间没有联系, 没有程度划分, 但是要有视觉冲击, 就使用这个. 代表就是柱状图和折线图.

image-20230801191634228

Threshold colors阈值颜色

image-20230801191741434

这里放一下自定义调色板的源码, 这是一个算法, 主要原理就是尽可能的不选择相邻的值, 如果要选择也会选择尽可能远的

image-20230801192059882

// The function takes an array of color scales, with each scale being an array of color values (or token names)
function makeChevronPalette(scales) {
  const scaleCount = scales.length;
  const colorsPerScale = scales[0].length;
  const finalColors = new Array(scaleCount * colorsPerScale);

  for (let i = 0; i < scaleCount * colorsPerScale; i++) {
    const round = Math.floor(i / scaleCount);
    const scaleIndex = i % scaleCount;
    const colorIndex = ((scaleIndex % 2 === 0 ? 0 : 2) + ((3 * round) % colorsPerScale)) % colorsPerScale;
    finalColors[i] = scales[scaleIndex][colorIndex];
  }

  return finalColors;
}

// Example usage
import * as awsui from '@cloudscape-design/design-tokens.js';

const colors = makeChevronPalette([
  // Receives a total of 30 color values from three different scales, returns the 30 color values in a new order.
  [awsui.colorChartsRed300, awsui.colorChartsRed400, /* ... */ awsui.colorChartsRed1200],
  [awsui.colorChartsTeal300, awsui.colorChartsTeal400,  /* ... */ awsui.colorChartsTeal1200],
  [awsui.colorChartsOrange300, awsui.colorChartsOrange400, /* ... */ awsui.colorChartsOrange1200],
]);

4.设计代币design token

这里涉及到原子设计.如果组件是充当系统基本构建块的原子，那么设计令牌就是用于构建组件的亚原子粒子。bradfrost.com/blog/post/e…

image-20230801192351560

这主要的目的就是, 设计系统不断地变化, 我们只需要只用key, 而不需要关注于value值. (可定制)

比如上述的例子: 颜色>背景>输入>禁用

代表的就是. 输入组件 在 禁用状态时 的 背景颜色

这样的话我们就可以在一个地方, 写满整个项目中我们会用到的颜色.

image-20230801221831787

这里是两种使用方式, 一个是sass, 另一个就是js变量,但是里面还是用的sass变量.

5.图标

这部分内置了一些图标

image-20230801214845979

6.布局

这部分直接提供了几个布局组件

网格, 应用程序布局和列布局.

7动效motion

动效有助于将用户的注意力吸引到页面上的关键元素和交互上，而不会干扰他们对整个任务的注意力。

提供了, Scale, Fade, Slides的动效

8.间距

可以使用三个选项来控制间距。

盒子模型的padding,margin,浮动属性

组件之间的间距选项, 比如: 操作条按钮之间的间距,表单字段的间距, 容器之间的空间.

9. 主题化

主题化是为了将组件轻松的满足自己公司的设计要求. 可以配置自己公司的dark和light模式

这部分提供了两种方式实现主题化: 构建时主题化Build-time theming和运行时Runtime theming主题化

运行时就相当于css内联样式, 在程序执行时候让浏览器加载一个新的css文件, 将其全部覆盖.

构建时主题化就是直接更改内部组件主题.

buildtime

import { join } from 'path';
import { buildThemedComponents } from '@cloudscape-design/components-themeable/theming';

const theme = {...};

buildThemedComponents({
  theme,
  outputDir: join(__dirname, './themed'),
});

这个部分是预处理的

执行后，该/themed文件夹将包含：

  • /components 使用您的自定义主题导出 Cloudscape 组件的文件夹
  • /design-tokens 导出设计标记的文件夹

有了这个文件后只用webpack的别名alias功能, 将程序所有导入的组件和设计令牌重定向自己的路径而不是npm中的.

这里使用了"装饰器模式"的设计模式. 它允许你在运行时动态地修改对象的行为，而不改变其源代码

主题系统通过生成一套新的组件（装饰器），来修改原始组件的行为（在这里是视觉样式），而不改变原始组件的源代码

// webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      '@cloudscape-design/components': '[outputDir]/components',
      '@cloudscape-design/design-tokens': '[outputDir]/design-tokens',
    },
  },
};

运行时 runtime

import { Theme, applyTheme } from '@cloudscape-design/components/theming';

const theme: Theme = {...};

const { reset } = applyTheme({ theme });
// Use the reset method to remove the custom theme

10.Typography版式

一般包含字体, 段落样式,代码风格,列表样式等. 主要涉及到文字的显示

这部分使用md的会好理解一些.

11.视觉语境

视觉语境context的意思就是全局样式和局部样式.

全局字体颜色是黑色, 在警告里可能就是红色.

然后文档里还提到了, 还会根据主题进行相应的变化, 比如: 在一个深色主题的背景下，一个按钮可能会使用浅色的文字和边框，以确保其可见性；而在浅色主题的背景下，同一个按钮可能会使用深色的文字和边框。

image-20230801225951241

还涉及到了密度模式和主题.

12.视觉模式

主要就是亮色和暗色风格

13.视觉风格

这里主要提到的就是阴影. 边框和分割线, 轮廓和填充.

avatar
文章
阅读
粉丝