像骑自行车一样自然地设计网页。

——Sion

✍文章痕迹

写作时间线

2025-01-？

某日打开github星标榜，发现storybook项目。

2025-03-30

阅读《版式设计原理》

2025-03-31

再次产生创建STUDIO网站的念头，初步想法是使用React进行构建

2025-04-01~4-02

阅读《大前端三剑客——Vue+React+Flutter》，旋即弃置

2025-06-09

  • 受两年前喜欢的hexo主题《Paper》作者影响，尝试学习Sigma
  • 观看视频教程《零基础学Figma》[^2]

2025-06-10

2025-06-14

意识到Figam的局限性——只是一个原型设计软件，开始接触react。

2025-06-15

理性看待Figma。Figma可以作为指导性文件来勾勒整体的轮廓而后以此为基础进行开发，同时可以进行简单的封面制作。

2025-07-25

因为MES系统维护需要，借阅《JavaScript 技术手册》，开始系统学习js。

平日走路、工作、骑车，脑海里或多或少会浮现出一些念头，可能是一个照片的绝妙机位，一个有趣的游戏原型，一段悦耳的节奏，可能是一幅以天空为背景的插画，也可能是对网站主页的一个构建。有人说这叫灵感，我却以为这是虚感，不过是一阵风吹来，恰到好处地拂动了脑海里几个不同的念头而已，在这感觉没有落地之前，是毫无意义的。那如何让这些念头变得有意义呢？我觉得要去培养，去一点一滴地呵护它，如同养一盆花一般，让慢慢地成长，才会赋予其意义。

本文动笔的契机就是许多个念头的累积让这颗种子发了芽，至于到底能不能长大开花，甚至结果，我也不管，当下哩，我就静静地看着它，想起来了就浇点水~

写在开始的预期

本次试验要做出来几个原型，大概有这些：

  • 星际牛仔片头设计

  • 国画风格：留白——文本让位图像

  • 45°布局：

  • 90°布局：即直排版

  • 社会主义革命和建设时期宣传海报风格的当代演绎

  • 细朱文为主的拟物线条风格

  • 图表，数据可视化相关。

  • 个人主页、工作室主页、专题展示页（摄影、篆刻、绘画）

设计工具

figma

figma给我的初步观感：像做PPT一样设计网页。

本文定位只是一个辅助学习用的很随便的草稿，非教程，非笔记

  • 我们可以通过多种方式去补足这些知识，​“三大构成”就是开始系统认知设计或者UI设计的第一步。​“三大构成”包含《平面构成》(The Plane Constitution)、​《色彩构成》(The ColorConstitution)和《立体构成》(Three-Dimensional Constitutes)，通过这三本书，我们可以在更高的理论层面来对设计有个系统的认知。
  • 如果还有时间，伊顿的《设计与形态》​《康定斯基论点线面》​，福兰可·惠特福特的《包豪斯》也是非常适合设计师夯实基础的著作。

与时下流行的Material Design不同（尽管我也觉得这种设计很美观），笔者本次实践主要目标是向前求索：追寻、挖掘、表现古文古画古书上图像与符号的关联关系。具体到就是（竖排版，模仿自然）。

  • 图形绘制能力是几乎所有设计师都必须具备的一项能力，如果说版式设计能力决定了UI设计师60%的能力要素，那么图形绘制能力则让你的技能分从60分精进到80分甚至更高。

  • UI设计师学习的工具有以下几类，首先是

    • 图形绘制工具，如Sketch（Windows下有Adobe XD）​、Figma、Photoshop，这也是当今设计师用得比较多的主流工具，从难易程度上来说，Sketch(XD)和Figma上手难度最低，操作最简单。
    • 交互工具，在UI设计稿完成前，这类工具可以帮我们绘制低保真的线框图；而设计稿完成后，我们需要用这类工具将其处理成高保真演示原型。最常见的交互工具，可以统称为“连连看工具”​，只需按照页面的顺序，将点击区域及目标区域进行连接即可。目前大部分的设计工具都提供了此类连线功能，如Sketch、XD、Figma等。当然，也有更复杂的工具，如Flinto、Principle及一些在线设计工具（如墨刀）​，都可以完成从设计稿导入到连线导出，最终形成可以在手机上真实点击的效果，这类工具的特色是做出更接近手机真实动作效果的演示，比如论坛图、下拉刷新、页面滚动等。
    • 进阶类的图形绘制工具，以Photoshop或者Adobe illustrator为代表。用以完成界面中的一些图形化设计工作，如插画、字体、Logo设计。
    • 动效（微交互）效果的设计、3D视觉工具等。这类工具有Adobe的After Effect和Cinema 4D，通常学习成本较高，需要花费更多精力才能有所收获。
      作者推荐的软件

linux设计老师傅（穷人版）的工具箱

目前掌握程度简单自评：

Adobeillustrator(3年+)

Adobephotoshop(2年)

清华大学出版社提供了第二章的样章，微信阅读排版不好，还是读这个舒服。

Figam中的Frame（画框）与html中的<iframe>内嵌框架元素标签有类似的含义.

  • Figma的交互设计比较有趣的一点就是,特定的工具只有在激活的时候才会出现,非激活状态或者不可用状态下是完全隐藏的。
figma可以创建文本样式与组件以便复用 文本转化为矢量(Flatten Selection)进行编辑

  • 导出内容：“①使用切片工具划定需要导出的内容；②选中某个图层，在右侧的属性检查器中，找到“Export”选项，并单击加号，设定导出倍数、后缀和图片格式。”

  • 快捷键说明（基本与PPT一致）

    • Ctrl + D ：副本
    • Ctrl + G ：编组
    • Ctrl + +Shift+G ：取消编组
    • 拖拽调整数值：与Blender类似
    • 选择矢量图形，然后直接粘贴可以将图形贴到矢量图形中。

  • 创建蒙版步骤

    1. 新建一个矢量图层，右键新建蒙版（mask）
    2. 此时左侧会生成一个蒙版组（Mask Group）
    3. 把图片放进蒙版组里面
    4. （调整图片或者矢量图形可以得到不同的画面）

问题

  • Figma对竖排没有支持，插件vertja的实现方式是文本框溢出，不能简单转换成css。

🕳前端框架

先挖坑，待学习

JavaScript

编程随感：https://si-on.top/channels/aai4qoz5o11lvkx1

基本类型与运算

  1. 数字：0xA十六进制；0b1010001二进制；0o4545八进制；8.848e3、8848000e-3科学计数法。js中可以表示的数字的最小值 Number.MIN_VALUE是−253-2^{53}，最大值 Number.MAX_VALUE是2532^{53}。

Number()可以把数字的字符串转化成数字。

node 环境
1
2
3
4
> A='0xB'
'0xB'
> Number(A)
11
  1. 字符串，转义相关（超过\uhhh用\u{}，ES6新增特性）
  2. 布尔，boolean
  3. 复合类型，{}，中间以逗号隔开，可以同时放置各种字段。使用点运算符来随时操作对象的特性(js的重要特点，这个写法太优雅了。)
复合类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
> let dog001 = {name:'小黑', color: 'black'}
undefined
> dog001.name
'小黑'
> dog001.color
'black'
> dog001.color = ‘white’
'white'

> delete dog001.name
true
> dog001.name
undefined
> dog001
{ color: 'black' }
  1. 数组[111,222,333,444]
  2. 变量声明
    • let:变量。在区块{}内有效，区块外无定义则会报错
    • const:常量，一次声明而后不能改变。
    • var:声明变量，有提升行为（全局变量）：在未指定值之前，会被定义为undefined

undefined代表“值没有定义”的值,其在JavaScript中不是保留字，在函数中可以被拿来作为变量名称，但尽量不要用它。通过void可以在任何值或表达式前产生undefined。类似的还有null表示没有对象，令对象为null相当于给它置空。NaN:当结果无法运算时，便会产生此值。

  1. 加减乘除运算：js中的数字是IEEE 754标准64位浮点数，使用分数以及指数来表示小数，然而有些小数无法用分数表示，这就导致比如0.3之类的数字会有浮点数误差。如果要避免需要用第三方库bignumber.js来解决
    1. *：乘法
    2. **：指数
    3. %：取模
    4. /：除法

严格模式，ES5后新增，若误用了不好或早期规则含混不清的特性，就会报错。使用use strict来进入严格模式。
8. 比较运算：使用 ===、!== 来进行比较
9. 逻辑运算：&&、||、!这个返回值要研究研究。
1. A && B：A为真，则不论B真假都返回B；A为假，则直接返回A
2. A || B：A为真，则不论B真假都返回A；A为假，则直接返回B。（可以看作默认返回值，输入A假，返回B作为默认值）
3. !A：A为真，返回false，A为假(0)，返回true

返回值为TRUE
1
0 || `` && NaN || !undefined || null
  1. 条件运算：表达式 ? 成立返回值 : 失败返回值。可用于局部的判断语句，减少程序体量。

流程语法

break可以离开switch、for、while、do…while的区块，break与continue可以搭配标签使用，离开整个区块。

  1. if分支判断：条件默认
单层判断
1
2
3
4
5
6
if(条件){
语句A;
}
else{
语句B;
}
多层判断
1
2
3
4
5
6
if(条件){
语句A;
}
else if(条件2){
语句C;
}
  1. Switch 复合分支,使用break进行结束跳转
switch
1
2
3
4
5
6
7
8
9
10
11
switch(number){
case 10:
	score= 'S';
	break;
case 9:
	score= 'A';
	break;
case 8:
	score= 'B';
	break;
}
  1. for 循环，先判断后执行循环语句
for
1
2
3
for(let number=1; number<10; number++){
console.log(number);
}
1. `for of`，循环访问数组中(of)的值`for(let nuumber of [10,20,30])`
2. `for in`，列举对象的特性名称，搭配`[]`运算符使用

js中{}表示对象，[]/·访问对象的属性。

  1. While循环，先循环语句后执行判断
while
1
2
3
4
do{
	语句;
}
while(条件表达式);

函数

  1. 声明函数function。如果没有return值，则返回undefined
1
2
3
4
5
6
7
let n1 = 100
let n2 = 200
console.log(max(n1,n2));

function max(n1,n2){
    return n1 > n2 ? n1:n2;
}

语句中如果不写分号结束，则js会以分行判断结束。

辗转相除法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function gcd(m,n){
    if(n ===0){
        return m;
    }
    return gcd(n,m%n);
}

let m = 999;
let n = 666;
let r = gcd(n,m);
if(r === 1){
    console.log('互质');
}
else {
    console.log('最大公因子', r);
}

css

按钮背景动画：

1
2
3
4
5
6
7
8
9
10
.glowing-button::before, .glowing-button::after, .glowing-button-alt::before, .glowing-button-alt::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    transform: rotate(45deg);
    animation: glow 4s linear infinite;