shadow's wiki | 吴尒红

浅尝一下UI设计

blank

博客的前端项目基础功能终于做的差不多了，现在就差设计一下UI了，奈何我不是专业的UI，只能从前端的角度和一些专业的设计文档，去实现一下。

布局基础值

在我们构建网站的布局时，前端会依据设计图，设计网页。在开始工作前，我们会确认一些基础值，比如：

间距相关
色彩相关
动效相关
交互相关
布局相关

我对设计的初级了解主要来自于Antd Design的设计思想，它们的组件设计的真的很棒！现在先用原生css实现一次，以后再考虑改为less。如下:

css

:root {
  /** Base **/
  --padding-base: 8px;
  --margin-base: 8px;
  --font-size-base: 14px;
  --border-radius-base: 3px;
  --line-height-base: 22px;
  --transition-base: all .5s ease;
}

基础属性可以配置的有很多，我先定义一些比较常规的属性，然后根据这些基础属性，延伸出一些派生属性, 比如:

css

:root {
  /** Base **/
  --padding-base: 8px;
  --margin-base: 8px;
  --font-size-base: 14px;
  --border-radius-base: 3px;
  --line-height-base: 22px
  --transition-base: all .5s ease;
  
  /** Margin **/
  --margin-base-2: calc(2 * var(--margin-base));
  --margin-base-3: calc(3 * var(--margin-base));
  
  /** Border **/
  --border-radius-2: calc(2 * var(--border-radius-base));
  
  /** Line Height **/
  --line-height-default: calc(var(--font-size-base) + 10 - 2);
}

将这些派生属性的配置全部集中到一个样式文件当中，不要在组件中再次定义样式，以保证全局样式的整体一致性。

当然，派生属性的倍数设置，并不是简简单单的乘于整数倍这么简单，有一些相关的公式或者是规范，详情可以参考antd的设计文档。例如:

字号: 对于字号与行高的定义就是：lineHeight = fontSize+10 - 2。在Antd中基础字号为14px，相对应的行高为 22px，字阶的选择在3-5中之间，保持克制原则。
字重: 对于字重只建议使用3种，400、500和600。具体效果可以研究Antd的Typograph组件，赶紧按照标准实现一下自己的个人网站试一试。
字体颜色：个人认为，色彩还是很考验一个设计师的，因为需要搭配，整体搭配的色彩需要和谐，所以对于色彩的把握才是整个体系的重中之重。对于不同的应用场景有不一样的实现，需要提前定义好网站的主，次，辅助和标题的色彩。
暗黑模式: 给自己的网站准备一套暗黑模式是一个不错的功能，现在我们可以直接使用Antd的工具生成，站在巨人的肩膀上扩展，让我们的自定义开发快乐起来。

现在先试着将我们的基础属性定义出来。就用Antd官网的工具生成一系列的色彩值，在此之前我们需要定义一个主题色彩。除此之外，需要定义字体色彩、border色彩和shadow阴影。

最为关键的是，我们需要设计一下页面的布局结构。从我个人的项目来分，可以分为：

顶级标题
二级标题
三级标题
一级菜单
二级菜单
基础描述文案 -- Description
基本文案 -- Pages
背景色对比
Border外边框
Strong 增强类型文案
Small 渐弱类型文案
Shadow阴影
Hover类型色彩

从「克制」方向来看，我做出了调整:

页面上不需要太多的Heading标签，最多三级H1,H3,H6；
准备左侧菜单入口或者是顶部菜单入口，不需要太多的菜单，最多两级；
针对文章详情样式的调整，不用大的样式调整，需要多加一些细节调整；
页面内只准备三级字重，Strong等于600、Normal等于500以及Small等于400；
手势的交互增强，对比色彩、BorderRadius...
渐进动画，全部使用transition增强页面交互

确认基础设置值

Padding 和 Margin的基数定为 8px, 整数倍增加，为8的倍数；
BorderRadius的基数为 3px，增加不限制；
FontSize的基数为14px，增加不限制；
LineHeight的基数为22px，与FontSize成线性关系，LineHeight = Fontsize + 10 - 2；
定义主题色，中性色和主题色的反色；
定义背景色，可能需要好几组对应的背景色，以对应不同的使用场景；
定义Border边框色彩，不需要太多，可以直接使用主题色或者是中性色；
定义动画函数，常见的函数是ease，linear，可以自己定义贝塞尔曲线；
定义辅助色，辅助色彩丰富一点点

定义Heading类型主题

首先给文案类配置主题，达到一种视觉上的层次感。可以通过主题色系的不同的色彩，然后在页面上使用。

在上图中，定义了8种类型，可以按照上面的顺序，将生成的色彩，一一对应。但是可能也会有特殊的位置需要额外定义。比如我们现在需要生成两套文字色，以对应light和dark模式下的展示。

css

/** Light **/
  --color-base: #ebecec;
  --color-base-10: #0d0d0d;
  --color-base-9: #333333;
  --color-base-8: #595959;
  --color-base-7: #808080;
  --color-base-6: #a6a6a6;
  --color-base-5: #b3b3b3;
  --color-base-4: #bfbfbf;
  --color-base-3: #cccccc;
  --color-base-2: #d9d9d9;
  --color-base-1: #e6e6e6;

/** Dark **/
  --color-base: #141313;
  --color-base-10: #fafafa;
  --color-base-9: #f8f8f8;
  --color-base-8: #f3f3f3;
  --color-base-7: #e8e7e7;
  --color-base-6: #dcdcdc;
  --color-base-5: #adacac;
  --color-base-4: #7e7d7d;
  --color-base-3: #5b5a5a;
  --color-base-2: #454545;
  --color-base-1: #2c2b2b;

一共生成10种色彩，用于对应上图的8种类型，可用的色彩还是比较多的，先定义一套最普通的样式出来。

css

--title-normal-color: var(--color-base-10);
--title-less-color: var(--color-base-9);

--text-primary-color: var(--color-base-8);
--text-less-color: var(--color-base-7);

--text-second-color: var(--color-base-6);

--disabled-color: var(--color-base-5);

--border-color: var(--color-base-4);

--divider-color: var(--color-base-3);

--background-color: var(--color-base-2);

--table-head-color: var(--color-base-1);

中性色搭配

偷个懒，直接用Antd的中性色，以color-7为基准，大于7的为Dark模式下的色彩，小于7的为Light模式下的色彩。

生成这些中性色有什么用呢？

我把它搭配使用在Card组件当中，中性色是以Gray色彩为基准生成的，灰色是百搭色彩，没有什么色彩能够比中性色更适合做背景色彩了。除非你需要自定义一些Alert或者的Message类型的样式，才会去给这些组件定义一些不同状态下的背景色彩。

辅助色搭配

在选择辅助色时，需要考虑到的是辅助色和背景色以及字色的搭配，需要好好准备一下色彩，最好是从选择的主题色出发，去选择相近的色系。

Transition 与 Animate交互

我们最少需要准备两套动画，即入场动画和出场动画。举一个例子，我们给一个标签做hover特效时，定义在hover类中的就是入场动画，比如使用ease-in，那么定义在当前标签类中的即为出场动画，比如使用ease-out，这个样子给用户的体验是不是有了一点点趣味呢。

如果需要将我们的页面细节做起来，我们可以给每一个属性都指定一个特有的出场和入场动画，那看起来就更美妙了，但是我觉得用两个动画就可以了。

间距设置

现在我们的基础都是基于8px，几何倍数的增加或者是减少，这样看起来的页面的间距值就全部统一起来啦，从结构上确实好看，具体去看Antd的组件。我是觉得好看的~

除了8n这一种写法，还可以使用em单位和rem单位，em相对于父级标签的字号，rem相对于根标签的字号，也是一种结构性的写法。但是使用场景上有差异，用em单位我们通过Fontsize属性轻松实现自适应的组件，比如在项目中的AudioContronl组件和Button组件组，就是通过Fontsize来控制Audio按钮组的样式。

富结构化缺省页

查询结果结构化是我在做google查询优化时接触到概念，我认为这个概念也可以用到我们的构建个人网站的查询结果中。

举个例子404页面，我个人认为：在类博客项目这种内容型项目中，我并不是想看一个枯燥的404提示，我更想看的是我查询的关键字在没有反馈的内容时，开发者给用户的交互是一种什么样的实现，才能吸引用户停留在我的网站中。

比如，我查询一个色彩关键字，我的网站上没有相关的博客内容，但是我不能给你一个简简单单的404，而是给用户一些推荐内容的快捷入口，引导用户点击进入博客内容页面，留住流量。

而资源类的404，可以给一些动画，或者是引入腾讯404服务的交互，让服务器端的错误或者是资源缺失，给用户一种丰富、有趣的体验。

在最近有一个主题卖疯了，就是华为商城的宇航人主题，它不就是靠着有趣才吸引了消费者吗，在短视频中火了后，不知道多少人为了一个主题去买了一块手表。可见，现在C端产品考虑趣味性的比重应该是比较大的。

Empty 空状态

为了弥补我们网站内容的缺失和资源缺失，给用户带来的不良体验，我们需要优化的点就是做一个有意思的Empty 空状态展示页。

在Empty中，我设计的结构是，一个简单的动画吸引用户视线，一组类bilibili中的火星文，一组引流快捷入口，如下图：

blank

定制型设计

我们在写作时，工具会提示让我们选择是否启用专注模式，专注模式就是一种定制型设计。再类比一下，我们使用网易云App时有精简模式和普通模式，精简模式下，只有控制按钮组其他的什么都没有。

所以，一个网站能不能够吸引用户长时间停留，最为关键的点大概就是有意义的丰富内容和有意思的交互。让用户觉得好玩，让他自己去浏览、去玩。这样的网站才能够保证回访率。

清新的结构和出彩的细节

单从设计结构来看，开发者可以给用户提供两套布局模式，比如：菜单固定在左的模型和菜单固定在顶部的模型。给用户提供两套视觉模型，Light型和Dark型，然后我们可以根据系统时间，默认给用户切换主题色。

或者，定义精简模式，在阅读模式下，减少系统相关的交互和按钮入口，新增一些阅读类型的按钮，比如：自定义行高、字号，自定义阅读模式下网站字色和背景色，有耐心的话，还可以给出一些国际化方案，例如，中英文切换或者是简繁体切换。

总之，需要我们动用一些时间和心血去做一些不一样的细节出来，把网站打磨的漂漂亮亮的，就可以比较大方的拿出去拉外快项目啦。

一个开发者的个人网站大概就是他的一个比较有特色的个人名片啦。我们前端开发者还是占据了大量的优势的，我们可以自己做一些自己想要的效果出来，我们自己就是自己项目的产品经理。

简洁而不简单，清新才是关键

在Antd的设计文档中，始终在着重描述三个设计思想：自然、高效和克制。始终在表达一种简简单单才是美。

在理想状态下，我们不太需要关注更多的细节，比如那个经典的撕逼话题：”你这个1像素能不能细一点点，我看着就不像1像素“。相反我们需要去做减法，但是此减法非彼减法。视觉上的细节少了但是给开发的工作却多了。单是色彩就至少准备40多个，其看不见的工作就给了视觉上的简单赋予了另外的一种不简单。

做好一份设计并不是我以上描述的这么简单，有很多内容我们都不知道，毕竟不是专业的设计师，我了解的相关知识全部来自于书本。但是我们现在是从前端角度去分析一下下怎么去做设计，让我们的项目做得更好一点，更快一点，更简单一点。

简洁而不简单，把背后的工作留给自己慢慢品，把清新留给用户。

浅尝一下UI设计 ​

布局基础值 ​

确认基础设置值 ​

定义Heading类型主题 ​

中性色搭配 ​

辅助色搭配 ​

Transition 与 Animate交互 ​

间距设置 ​

富结构化缺省页 ​

Empty 空状态 ​

定制型设计 ​

清新的结构和出彩的细节 ​

简洁而不简单，清新才是关键 ​