你好，我是 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