Open lei4519 opened 5 months ago
2024-03-05
精力是有限的,多花费一分在某个点上,就注定会减少在另一个点上
好用 + 好看 = 时间长
时间短 + 好看 = 不好用
时间短 + 好用 = 不好看
制定更多基础的 UI 规范(字号、间距、圆角...),提高设计、开发的交付效率
规范 = 约束= 效率
假设左边是精心设计的完美视觉效果页面,右边是根据「死板」规范无脑堆出来的页面
没有标准答案,需要考虑具体的应用场景、定位
但不可否认的是,如果去掉标注,仅凭肉眼是很难分辨两者的差 |
但不可否认的是,如果去掉标注,仅凭肉眼是很难分辨两者的差异的,所以右边的性价比高无疑是更高的
长期持续的系统组件化 + 芝士组件迁移之后,现在已经大幅减少了设计和研发在 UI 上的成本
需求很多,但真正需要设计的模块很少,绝大多数都是直接复用现有组件
在商业经常 battle 颜色问题,比如按钮组件封装后,后续需求发现颜色变了
(用提示文案举例可能更合适,八百种灰
「颜色」只是举例,间距、字号、行高、圆角等等都有同样的问题
转社区后,就再也没有过这样的问题了,因为有了颜色规范
上次的组件迁移时,就聊到能不能规范一下圆角,统一一下,最后的结果就是做不到
要么都改,要么都不改。怕的就是每处都单独改,每处都不一样,系统就失控了
◦ 纠结字体大小是 12px 还是用 13px ? ◦ 边框阴影应具有 10% 的不透明度还是 15% 的不透明度? ◦ 头像高度应该是 24px 还是 25px?
成本降低:
限制设计发挥,达不到完美效果
◦ 字体大小(Font size) ◦ 字体粗细(Font weight) ◦ 行高(Line height) ◦ 颜色(Color) ◦ 外边距(Margin) ◦ 内边距(Padding) ◦ 宽度(Width) ◦ 高度(Height) ◦ 边框阴影(Box shadows) ◦ 边框半径(Border radius) ◦ 边框宽度(Border weight) ◦ 不透明度(Opacity) ◦ …
举例:间距规范下的按钮设计,更加具有辨识度
所有 CSS 属性都被符号化了
背景
精力是有限的,多花费一分在某个点上,就注定会减少在另一个点上
好用 + 好看 = 时间长
时间短 + 好看 = 不好用
时间短 + 好用 = 不好看
目标
制定更多基础的 UI 规范(字号、间距、圆角...),提高设计、开发的交付效率
规范 = 约束= 效率
下面的场景如何抉择?
假设左边是精心设计的完美视觉效果页面,右边是根据「死板」规范无脑堆出来的页面
没有标准答案,需要考虑具体的应用场景、定位
但不可否认的是,如果去掉标注,仅凭肉眼是很难分辨两者的差 |
没有标准答案,需要考虑具体的应用场景、定位
但不可否认的是,如果去掉标注,仅凭肉眼是很难分辨两者的差异的,所以右边的性价比高无疑是更高的
现状
长期持续的系统组件化 + 芝士组件迁移之后,现在已经大幅减少了设计和研发在 UI 上的成本
问题
举例
在商业经常 battle 颜色问题,比如按钮组件封装后,后续需求发现颜色变了
(用提示文案举例可能更合适,八百种灰
转社区后,就再也没有过这样的问题了,因为有了颜色规范
上次的组件迁移时,就聊到能不能规范一下圆角,统一一下,最后的结果就是做不到
要么都改,要么都不改。怕的就是每处都单独改,每处都不一样,系统就失控了
系统化 UI:提前定义系统,有约束的设计
限制选择 (Limit Your choices)
优点
成本降低:
缺点
限制设计发挥,达不到完美效果
万物都可系统化(Systematize everything)
举例:间距规范下的按钮设计,更加具有辨识度
Tailwind CSS
所有 CSS 属性都被符号化了
内外间距
字号、行高
边框圆角
卡片阴影
字体
动画过渡
Ref