TinyVue 组件库UI升级全新设计规范

你好，我是 Kagol，个人公众号：

前端开源星球

。

自从去年TinyVue组件库开源以来，我们一直收到用户反馈，表示我们的UI设计不够美观，风格陈旧，无法满足现代审美需求。

“TinyVue 给我的感觉就是一个没啥审美能力、但是很努力的老程序员开发的”

看到这个评价，我们心里有些苦涩。一方面，我们对用户真诚友好的反馈表示感激，另一方面，也意识到我们的UI设计确实没有做到位。

因此，我们与设计师同事合作，对TinyVue组件进行了全面的UI升级，引入了一套全新的设计规范：OpenTiny Design。这套设计规范是我们的设计师同事结合华为云业务特点和最新设计趋势打磨出来的。目前，TinyVue所有组件均已支持OpenTiny Design设计规范。

这套设计规范不是一成不变的，后续我们将不断迭代和优化。我们也欢迎广大的开发和设计师朋友给予宝贵的意见。

访问TinyVue组件库官网即可进行体验：
https://opentiny.design/tiny-vue

整体组件效果

整体视觉风格以黑蓝为主，稳重又现代，并且更加圆润，看起来非常舒服。

新旧效果对比

我们再来看下新旧效果对比。

按钮、表单类组件

除了颜色上的变化，按钮的变化比较明显，变成了全圆角，其他组件也更加圆润。

复选框按钮组件变化较大，右上角增加了对勾效果，勾选效果更明显，不易与按钮混淆。

数字输入框组件的优化效果也很明显，原先细长细长的，感觉不太协调，优化之后更符合现代风格。

输入、下拉类组件

所有的输入框类组件边框颜色都比之前淡一些，不会太突兀，并且更加圆润。

日期选择框是一个复杂的组件，我们花了很多精力进行优化。虽然每个细节的优化都不起眼，但所有细节合起来，整体给人的感觉有很大的不同。大家可以体验下日期选择框这个组件：
https://opentiny.design/tiny-vue/zh-CN/os-theme/components/date-picker

弹窗组件

弹窗组件主要是整体宽度、圆角、阴影的调整，看起来调整的东西不多，但每一处调整都起了画龙点睛的效果。

警告组件

警告组件比较明显的变化是颜色和图标。颜色的层次更加分明，图标的表意也更加准确，比如警告图标，之前是圆形的，现在改成三角形，更加符合大家的共识。

表格组件

表格组件看起来变化不大，但细看也有很多优化，比如整体线条颜色更浅，更能突出单元格中的核心内容，表头颜色和高度也有一定的调整。

其他组件

滑块组件的优化也非常明显，之前的滑块手柄给人一种古老的感觉，现在改成圆形效果好多了，看起来就像是现代风格。

大家觉得这次TinyVue的视觉升级效果怎么样呢？欢迎在评论区留言。

联系我们

GitHub：
https://github.com/opentiny/tiny-vue
（欢迎 Star ⭐）

官网：
https://opentiny.design/tiny-vue

B站：
https://space.bilibili.com/15284299

个人博客：
https://kagol.github.io/blogs

小助手微信：opentiny-official

公众号：OpenTiny

未经允许不得转载：大白鲨游戏网 » TinyVue 组件库UI升级全新设计规范