Hello, I'm Kagol, personal public:Front-end open source planet。
Since the TinyVue component library was open-sourced last year, we've been getting feedback that our UI isn't beautiful enough, the style is outdated, and it doesn't quite satisfy the current stage of aesthetics.
"TinyVue strikes me as being developed by an old programmer with little aesthetic ability, but a lot of hard work"
I was crying and laughing when I saw this comment. On the one hand, I was full of gratitude for the sincere and friendly feedback from my buddies, and on the other hand, I was ashamed that we didn't do a good job with the UI.
So we worked together with our designer colleagues to do a comprehensive UI upgrade of TinyVue components, adapting a set of design specifications that are more in line with modern aesthetics: OpenTiny Design. This new set of design specifications was polished by our designer colleagues, taking into account Huawei Cloud's business characteristics and the latest design trends, and all TinyVue components now support the OpenTiny Design specification. All TinyVue components now support the OpenTiny Design design specification.
Of course, this set of design specifications is not static, the follow-up will continue to iterate and optimize, and welcome the majority of developers and designers to give us valuable advice.
Visit the TinyVue Component Library website for a taste:
/tiny-vue
Overall component effect
The overall visual style is predominantly black and blue, robust and modern, and more rounded and very comfortable to look at.
Comparison of old and new effects
Let's look at a comparison of the old and new effects.
Button, form-like components
In addition to the color change, the buttons have changed more noticeably to fully rounded corners, and other components are more rounded.
The checkbox button component has changed quite a bit, adding a checkmark effect in the upper right corner, which makes the checkmark effect more obvious and less likely to be confused with the button.
The optimization effect of the numeric input box component is also very obvious, the original thin and slender, which does not feel very coordinated, after the optimization is more in line with the modern style.
Input, drop-down components
All of the component borders for the InputBox class are a bit lighter in color than before, less obtrusive, and more rounded as well.
Date selection box is a very complex component, we spent a lot of effort to optimize, a lot of detail polishing, although each detail of the optimization is insignificant, but all the details of the optimization together, the overall feeling of a big difference, you can experience the date selection box this component.
/tiny-vue/zh-CN/os-theme/components/date-picker
pop-up window component
The pop-up window component is mainly the overall width, rounded corners, shadow adjustment, it does not seem to adjust a lot of things, but each of the adjustments have played a role in the effect of the finishing touch.
warning component
The more obvious changes to the warning component are the colors and icons, with a more distinct hierarchy of colors and more accurate ideograms. For example, the warning icon, which was previously a circle, has been changed to a triangle, which is more in line with the consensus.
table component
The table component doesn't look like much has changed, but there are a lot of optimizations when you take a closer look, such as lighter overall line colors to better highlight the core content in the cells, and some adjustments to the header color and height.
Other components
The optimization of the slider component is also very obvious, the previous slider handle gives a very old feeling, no wonder people say the style is old, now it is changed to a round effect is much better, it looks like a modern style.
What do you think of this visual upgrade to TinyVue? Feel free to leave your comments in the comments section.
Contact Us
GitHub：/opentiny/tiny-vue(Welcome Star ⭐)
Official website:/tiny-vue
Station B:/15284299
Personal Blog:/blogs
Small assistant WeChat: opentiny-official
Public: OpenTiny