具体来说可以怎么建立与管理产品的设计令牌或变量
近期执行的专案在进行翻新包含了整体的视觉设计,因此前端也面临要如何同步管理产品视觉的问题。先说痛点,先前专案并没有具体的规范应该如何定义 UI 当中的数值,导致魔法数字(没有规范与描述的值)流窜于整个产品当中,造成了非常大的的困扰。我会解释得尽量具体明白如果要重新设计一款数字产品会怎么管理其中的数值。
近期执行的专案在进行翻新包含了整体的视觉设计,因此前端也面临要如何同步管理产品视觉的问题。先说痛点,先前专案并没有具体的规范应该如何定义 UI 当中的数值,导致魔法数字(没有规范与描述的值)流窜于整个产品当中,造成了非常大的的困扰。我会解释得尽量具体明白如果要重新设计一款数字产品会怎么管理其中的数值。
先前提到「添加深色模式要考虑的代价」无可避免的会增加比预想中还要多的成本,但如果能在一开始用正确的方式制作网页风格,那么可以有效的避免掉许多问题。如果你希望制作不同风格的数字产品都可以参考本篇文章,用更省力的方式定义风格。
身为前端工程近期工作的感悟是很多时候开发问题还是陷于界面的外观、行为或互动层面上,并不是说花时间制作这些层面的事情就很逊,它们实际需要依靠经验丰富的开发者通过多方面的研究与考量才能打造合理的架构,例如有许多要留意的事:性能、适用性、可维护性、可测试性、搜索引擎优化、跨平台兼容性、多语言……
近期工作接触使用 Shadcn for Vue 来打造网页 UI,这是一款基于 Tailwind 可弹性客制化的组件组合,让我们可以快速建立出符合需求的网页界面。本文将介绍现有样式库的问题及 Shadcn UI 的特色,以及为什么在前端圈这么火爆。
近期在大改造现有产品的设计系统,预期会与来自不同领域的人合作,因此这篇文章是写给对网页无任何前置知识的人的,主要介绍「界面组件化」这个概念。组件是一块拼图、一个积木、一个齿轮……,就是一个可以被重复使用并且可被组合成更大物件的概念。
设计令牌(Design Tokens)或令牌是一种管理设计属性与数值的方式,用于建构 UI 最细小的元素,适当的使用设计令牌可以让设计系统更加弹性与可扩展,不论是任何职位,只要与设计系统相关的人士都应当了解设计令牌的概念。