V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
This topic created in 938 days ago, the information mentioned may be changed or developed.
我感觉不止是 Button 组件，C 端的 UI 组件真的很难封装。拿 Button 来说：
我接手项目前，Button 是椭圆圆角的，并且可控度不够高。姑且称之为，ButtonV1
后来设计师 A 说，要改成小圆角的，字重要 Semibold 的，没有 padding 等等，我封装了一个新版本，并且改进了可控度。称之为，ButtonV2 。但实际用起来的时候，已经觉得很怪。给的设计稿，button 经常长得有细微差别。一会是 Semibold 的字重、一会是 Bold ； padding 也很不一样，没有一个定律。搞得最后，有封装跟没封装一样。
再后来设计师 A 离职了，设计师 B 接手了。给的设计稿又是另一个风格，回到了最初的椭圆圆角系。用 ButtonV2 要写更多的覆盖样式。
我不知道各位怎么封装这种变化多端的组件的？
我接手项目前，Button 是椭圆圆角的，并且可控度不够高。姑且称之为，ButtonV1
后来设计师 A 说，要改成小圆角的，字重要 Semibold 的，没有 padding 等等，我封装了一个新版本，并且改进了可控度。称之为，ButtonV2 。但实际用起来的时候，已经觉得很怪。给的设计稿，button 经常长得有细微差别。一会是 Semibold 的字重、一会是 Bold ； padding 也很不一样，没有一个定律。搞得最后，有封装跟没封装一样。
再后来设计师 A 离职了，设计师 B 接手了。给的设计稿又是另一个风格，回到了最初的椭圆圆角系。用 ButtonV2 要写更多的覆盖样式。
我不知道各位怎么封装这种变化多端的组件的？
 |
1
NerbraskaGuy Oct 8, 2023
本质是没有统一的设计规范吧，UI 按照自己的习惯来设计的话前端样式没法复用很正常，像 antd 那种框架虽说能实现组件各种自定义样式，但是也是在规定的范围内变的
|
 |
2
justdoit123 OP @NerbraskaGuy antd 那种适用于后台系统我知道。toC 场景下，这种“样式没法复用很正常”真的是常态吗？ T_T
|
 |
3
xxmym Oct 8, 2023
本质上是 ui 水平不行，设计不光要好看更要克制。尽量制定设计规范吧
|
 |
4
hexi1997 Oct 17, 2023
说下我这边的解决方案，使用 tailwindcss+classname ，button 只封装基本样式的 flex item-center justify-center hover:opaction-75 。然后使用的时候通过 className 参数传递 w-[xxx] h-[xxx] rounded-[xxx] font-[xxx] text-[xxx]。当然 button 也可以自定义默认的 宽高、圆角。通过 !w-[xxx] 覆盖即可。
|
Select Language