Cedric’s Note-优快云博客

原创 Design System & Application - Chapter 6 配色 Color

配色不仅用于体现品牌或产品的特点，也用于表达某种情绪，为用户的使用带来便利，最重要的是，它使我们的界面生动和富有层次感。

2022-05-05 16:29:39 539

原创 Design System & Application - Chapter 5 文本布局 Text Layout

文本布局往往是在 UI 设计中被忽视的一个点，在大多数 UI 界面中，这一部分都显得平平无奇，没有进行任何的优化。我们对文本布局进行了大量的细节处理，这是为了使我们 UI 的文本部分更具有层次感，从细节上提升文本的阅读效率和体验。它也作为一个重要的优化点，大量出现在我们的设计中。

2022-04-25 14:44:34 282

原创 Design System & Application - Chapter 4 分类样式 Type & Style

本篇主要介绍文本部分通过其作用进行通用性分类，并描述通用样式（主要涉及到字重的使用，颜色以中性色为主），和 UI 组件相关的部分不在此说明。

2022-04-25 14:13:13 155

原创 Design System & Application - Chapter 3 字号 Font Size

本篇只针对结构性文字（UI 构成的文字部分及段落等）进行说明，装饰性文字（Banner 等）及指标板数值等特殊形态的文字部分不需遵循字号设定，但是涉及到结构性的部分，建议遵循网格系统，这样有助于进行响应适配。

2022-04-25 10:40:46 1136

原创 Design System & Application - Chapter 2 字体 Typography

字体（Typography）作为 UI 中的一个核心基础元素，往往在设计及还原过程中被忽略。从 UI 角度而言，好的字体及展示方式可以极大的提升信息展示的效果。

2022-04-25 10:23:09 282

原创 Design System & Application - Chapter 1 网格系统 Grid System

网格系统（Grid System）是本设计系统的基本规则，它是我用来解决浏览器适配问题并使界面整体表现的规范的非常有效的方法。另外需要指明，没有完美的方法，这就像前端中没有完美的可以解决所有问题并且都是最优解的框架一样。它仅是我们的一个思路，并围绕它去建立一套可以有效的解决规范及适配问题的 UI 设计系统，并应用到开发中。

2022-04-24 15:47:47 1617

原创常用色彩模式及基础概念整理

这篇将UI设计时的颜色模式，混合页面开发时的颜色设置，混在一起，整理了一下常用到的几种模式及其基础概念，其中标有图标的，为 CSS 中可以直接使用的颜色模式。RGB 光色模式由红（R | Red）、绿（G | Green）、蓝（B | Blue）三种颜色通道的变化以及它们相互之间的叠加来得到其他颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的色彩模式之一。此模...

2019-08-08 15:53:14 1412

原创 box-sizing 与元素布局

box-sizing是用来规定一个元素及其border和padding的关系的属性。以下均以宽高均为 200px，padding 及 border-width 均为 20px 的元素来举例说明两种情况下的布局情况。div { height: 200px; width: 200px; padding: 20px; border-width: 20...

2019-08-07 10:12:49 213

原创 vue-amap 使用笔记

Step 1 引用app.ts// 引入import VueAMap from 'vue-amap';// 全局应用配置初始化Vue.use(VueAMap);VueAMap.initAMapApiLoader({ // 申请到的AMap Key key: 'xxxxxx', // 用到的组件 plugin: ['AMap.Scale', 'AMap.OverVi...

2019-08-01 10:54:44 689

消息提示在web应用的开发中非常常见，而Web Notification API是一个系统级的消息推送，相较于传统的页面级消息推送，更适合做重要信息提醒的功能。系统级，是指它不要求当前页面处于focus（当前显示页签）状态，也不要求浏览器窗口处于可见（非最小化）状态，同时，打开它的父窗口可以被关闭，在父窗口关闭时，如果对它设置了点击事件并且该点击事件会聚焦到它的父窗口，则会唤醒它的父窗口。当然...

2019-07-26 16:59:25 559

原创常用的 CSS 长度单位

1. px（像素）最常用到的绝对长度单位，相对于显示器分辨率而定的单位，兼容性好。2. 百分比常见相对长度单位，相对于父元素的尺寸的取值，实际使用中，如果父元素是一个非稳定的取值，可能会导致父元素被撑开，而实际值取决于其祖先元素中最近的一个拥有稳定取值的元素。整数取值，并不适用于解决自适应问题。3. em常见相对长度单位，取决于目标元素字体尺寸。...

2018-07-17 10:16:08 4535

原创 CSS 中的自定义字体模块 @font-face

针对WEB页面开发过程中的自定义字体需求，会用到CSS中的@font-face模块。下面是@font-face的语法规则。 @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; ...

2018-02-05 10:03:01 1060 1