4周前速读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仅 strokestroke: var(--logo-color, var(--main-color))
3仅 fill 或仅 strokefill 或 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/星度主题中主辅双色的特性设定,如何搭配双色增强体验,以及在面对不同搭配时的效果会是如何。

简述
我是一名来自盛京的大叔!希望我的文章能给您带来正能量和思考,如果能在您的生活中体现些许色彩那就更好了。
  • me@thyuu.com
  • 生涯
  • 行业农业
  • 职业企划
  • 人生
  • 生活角色父母的孩
  • 社会角色设计师 剪辑师 摄影师
  • 类型
  • 星座天秤座
  • 生肖
  • 血型B+
  • 数据
  • 发表文章246篇
  • 发表评论1490个
  • 星球加热7281168度
  • 最近的心情能量
  • 我在辽宁
    沈阳市
  • 地图数据来源于高德地图
  • infj 提倡者
    infj 提倡者
    • 外向内向
    • 远见现实
    • 理性感受
    • 评判展望
    • 坚决起伏
  • 了解更多信息