阅读183篇

所谓旁观者清，也有站着说话不腰疼的意思。

2025-05-01速读12 条
从某一个行业来看受 AI 影响的部分因素理解

当Apple HIG（人机交互指南）已成为硅谷产品标配时，国内某头部电商平台2023年产品页改版仍采...

从某一个行业来看受 AI 影响的部分因素理解
查看完整文章评论

前言

在当今的数字化时代，优秀的用户体验已经成为互联网产品成功的关键因素之一。真正优秀的前端开发者，不仅要有扎实的技术功底，更要能够设计出如同 Apple 官网产品介绍般精致、流畅且极具吸引力的体验，为用户带来无与伦比的视觉与交互享受。然而，在国内独特的环境下，前端项目的评价标准却显得有些独特。

现状的枷锁

代际差​

在国内，对于一个前端项目，评价标准往往并非从美观、交互、设计、价值等专业角度出发，而是“领导满意的设计才是最好的设计”。这一现象背后有着深层次的原因。领导们通常更注重项目的稳定性和安全性，这就是守江山的思维，担心新事物带来不可控的风险，往往尽量在位期间不出错平稳度过。但掌权者又存在恋权的情况，因此审美迟迟无法提高。

畸形生态​

以政府部门的官方网站为例，很多网站页面设计多年来变化不大，依然是传统的布局和样式。因为领导们希望网站能够稳定运行，不出差错，所以宁愿选择保守的方案，也不愿意冒险采用新的设计理念和技术。掌权者这种恋权且求稳的心态，使得他们审美提升的动力不足，秉持着“能用就行”的策略。在这样的氛围下，前端开发者不得不迎合领导的需求，减少学习成本，采用更保守的开发方案。

马太效应​

这种“能用就行”的策略，直接导致前端行业的要求逐渐下降。当项目对美观和交互的要求不高时，开发者就无需花费过多时间和精力去钻研前沿的设计和技术。教育机会和前瞻技术的获取逐渐减少，形成了一个恶性循环。前端开发者难以接触到新的知识和理念，技术水平难以提升，进而导致整个行业的竞争力下降，工资水平也持续偏低。人们向来用行业薪资来评价行业的等级，因此前端逐渐在后端面前失去了竞争力。

此消彼长

我国互联网发展的初期，后端平台的建设是重中之重，就像新中国大基建需要建设坚固的地基一样。在这个阶段，后端开发者承担着搭建服务器、数据库、后台系统等重要任务，他们是互联网行业的基石。大量的资源和人才都投入到了后端开发中，以支撑互联网业务的快速发展。例如，阿里巴巴等电商巨头的崛起，离不开强大后端系统的支持，它们需要处理海量的交易数据、保证系统的稳定性和安全性。

然而，随着互联网行业的不断发展，后端平台搭建基本饱和。像一些传统的企业管理系统、电商平台后端，技术架构相对成熟，不会再有大量新的开发需求。此时，互联网企业为了降低成本，开始进行裁员，只保留少量的维护人员即可。这就是一个典型的行业发展过程，从快速发展到逐渐饱和，不再需要过多开发人员，互联网企业开始裁员，只保留维护的人才即可。

机遇与挑战

当人们的审美水平逐渐提高时，前端开发者的价值才有可能真正凸显。就像苹果公司通过其精致的产品设计和用户体验，引领了全球科技产品设计的风尚。如果消费者对产品的审美和要求提高，那么企业和组织就会更加重视前端开发。

然而，AI 的快速发展给前端开发者带来了巨大的挑战。AI 技术的进步使得它能够快速生成代码、设计页面，甚至能够根据用户需求自动生成交互方案。我国是一个人口大国，每个人的技术水平和发展程度差异很大。在 AI 快速发展的背景下，对未来各行各业的影响都不容忽视。当教育程度跟不上 AI 发展程度时，这就是一个很大的矛盾存在。

结语

AI 本是帮助人们更好工作的工具，然而仅仅对于本就很厉害的人才是工具。AI 真正取代的不是行业，而是行业里的普通人。

2025-03-28速读14 条
THYUU/星度主题精心设定第一期：自适应标识颜色特性

在THYUU/星度主题里的顶栏，标识除了引入常见的 IMG 图片外，主题还支持 SVG 格式并引入了...

THYUU/星度主题精心设定第一期：自适应标识颜色特性
查看完整文章评论

前言

在 THYUU/星度主题里，仅仅对于顶栏的设定就有多种排版，具体可至主题品牌介绍站查看 https://theme.thyuu.com/ 查看顶栏的排版设定。而在顶栏标识区域里，除了引入常见的 IMG 图片外，主题还支持 SVG 格式并引入了变色特性，让标识根据不同的页面展示不同的颜色方案。这是一项很新颖的设计，也是星度主题为大家用心设计的表现之一。

若您不了解 SVG 格式图片，请继续往下看。若您了解，请直接查看本文第四节：点此跳转

什么是 SVG 及其特点

SVG 是一种基于 XML 的矢量图形格式。作为网页设计与前端开发的核心技术之一，SVG 凭借其矢量特性与灵活性，成为构建高清、动态图形的首选方案。SVG 是一种基于 XML 的矢量图形格式，其核心特点包括：

  • 无损缩放：无论放大多少倍，图形边缘始终清晰，解决了传统位图（如 PNG、JPG）的像素失真问题。
  • 文本可编辑：SVG 代码可直接通过文本编辑器修改，支持 CSS 与 JavaScript 动态控制，便于实现交互效果（如点击事件、动画）。
  • 轻量高效：文件体积小，适合网页加载优化，尤其在地图、图标等场景中表现突出。

SVG 核心语法与元素

SVG 本质是 XML 格式的文档，基本语法和结构规则相同，需包裹在标签内。但又有一些专属于 SVG 格式的标签，定义元素及其与属性。

基础结构

这有一个标准的 SVG 格式图：

<svg viewBox="0 0 500 500">
    <circle cx="100" cy="100" r="50" fill="#000" stroke="#000"></circle>
</svg>
  • viewBox 属性：控制可视区域，语法为 viewBox=”x y width height”，实现矢量自适应缩放
  • 所有元素存在 SVG 标签内

常用标签

属性名称作用描述
<defs>定义可复用的渐变、模糊等效果
<g>组合元素
<use>引用已定义图形

元素标签

属性名称作用描述
矩形 <rect>x 定位横坐标，y 纵坐标，width height 定义尺寸，rx/ry 设置圆角
圆形 <circle>cx 圆心横坐标，cy 圆心纵坐标，r 为半径
路径 <path> 最强大的元素，通过 d 属性定义贝塞尔曲线、多边形等复杂图形

CSS 属性

定义图形轮廓

属性名称作用描述常见值
stroke设置图形边框的颜色颜色名称（如 blue）、十六进制颜色代码（如 #0000FF）、rgb() 或 rgba() 等
stroke-width定义边框的宽度任何长度单位，如像素（px）、点（pt）、厘米（cm）等
stroke-opacity定义边框颜色的不透明度范围从 0（完全透明）到 1（完全不透明）
stroke-linecap定义线条末端的形状butt（平直末端，默认值）、round（圆形末端）、square（正方形末端）
stroke-linejoin定义线条相交处的形状miter（尖角连接，默认值）、round（圆角连接）、bevel（斜角连接）
stroke-dasharray定义边框的虚线模式由逗号或空格分隔的数字序列，表示线段和间隙的长度
stroke-dashoffset定义虚线模式的起始偏移量数值，表示偏移量
stroke-miterlimit当 stroke-linejoin 为 miter 时，限制斜接角的长度数值，表示斜接角的最大长度

定义图形填充

属性名称作用描述常见值
fill设置图形内部的填充颜色颜色名称（如 red）、十六进制颜色代码（如 #FF0000）、rgb() 或 rgba() 等
fill-opacity定义填充颜色的不透明度范围从 0（完全透明）到 1（完全不透明）
fill-rule定义填充区域的算法nonzero（非零规则，默认值）和 evenodd（奇偶规则）

如何适配星度主题变色标识

现在，你已经了解基本 SVG 的知识，当我们看到 SVG 图片的代码时，你可以轻松找到框架中包含颜色的属性 stroke 和 fill，我们就是针对这两个属性进行适配。

单色标识

序号风格是否与主题色相同fill 或 stroke 属性适配示例
1仅 fill是直接删除 fill 属性，即可适配
2仅 stroke是stroke: var(--logo-color, var(--main-color))
3仅 fill 或仅 stroke否fill 或 stroke: var(--logo-color, #000)
4fill + stroke/可按上述酌情适配
#000 的位置具体颜色，请输入原 fill 颜色

双色标识

序号风格是否与主题色相同fill 或 stroke 属性适配示例
1仅 fill 或仅 stroke是主色区域 fill 或 stroke: var(--logo-color, var(--main-color))
辅色区域 fill 或 stroke: var(--logo-color, var(--subs-color))
2仅 fill 或仅 stroke否主色区域 fill 或 stroke: var(--logo-color, #000)
辅色区域 fill 或 stroke: var(--logo-color, #000)
3fill + stroke/可按上述酌情适配
#000 的位置具体颜色，请输入原 fill 颜色

多色标识

序号风格是否与主题色相同fill 或 stroke 属性适配示例
1仅 fill 或仅 stroke/对应区域 fill：var(--logo-color, #000)
3fill + stroke/可按上述酌情适配
由于多色标识存在复杂的颜色设计，适配时可能存在颜色重叠等问题影响标识整体，请酌情适配。
#000 输入原 fill 渐变色对应命名 ID

至此，你已经了解 SVG 各种情况下的标识，适配主题特性的属性示例。注意：必须是原生制作的 SVG 格式文件才可以进行适配，位图转制的格式实际上仍然是位图，无法适配。

接下来为大家介绍几种 SVG 编辑工具。

SVG 编辑工具推荐

以下是一些推荐的 SVG 编辑工具，根据不同的需求和使用场景，您可以选择适合自己的工具：

专业设计类

  • Adobe Illustrator：功能强大的矢量图形编辑软件，支持创建和编辑 SVG 文件。绘图功能丰富，对文本处理能力强，可创建和编辑文字，调整字符间距、行间距等，还能将文本沿路径呈现。与 Adobe After Effects 配合方便，可实现众多动态效果。https://www.adobe.com/cn/creativecloud/roc/business.html
  • CorelDRAW：平面设计领域的知名软件，配备了强大的 SVG 编辑工具，可以帮助用户创建专业的矢量插图。支持多种文件格式，如 Adobe Illustrator、PDF、HTML、JPG、PNG、SVG 和 EPS 等。https://www.coreldraw.com/cn/product/coreldraw/

在线编辑类

  • 即时设计：具有强大的 SVG 编辑功能，支持矢量网格、自动布局、组件、智能选择等精细的 SVG 设计功能。https://js.design/
  • 易点编辑器：具有简单的 SVG 编辑功能，可简单编辑图形。https://svg.wxeditor.com

结语

本期介绍了自适应标识颜色特性的设定，当在复杂封面图颜色的页面时，就可以轻松调用标识的白色版本，当处于限定主题时又会调用限定主题色。THYUU/星度主题精心地带来丰富的浏览体验，无论是主题拥有者还是站点访问者，都会有着不同角度的解读。

下一期将为大家介绍，THYUU/星度主题中主辅双色的特性设定，如何搭配双色增强体验，以及在面对不同搭配时的效果会是如何。