1. 程式人生 > >雲巨集WinCloud前端工程師告訴你什麼是UI扁平化

雲巨集WinCloud前端工程師告訴你什麼是UI扁平化

初見“UI扁平化”這個詞也許很多人會覺得陌生,但在今天UI扁平化其實一點也不神祕,因為UI扁平化在我們的生活中隨處可見。拿我們現在最常用的智慧手機為例,智慧手機的作業系統,手機裡的圖示,點選圖示開啟的應用,他們現在的UI風格大都是扁平化的。

扁平化設計已經成為UI設計中的主流設計方向,它跟以前所流行的細節豐富的擬物化設計不同,扁平化極簡主義設計使得UI看起來簡單易懂的同時對互動和功能的支援更加優秀,它是一種可用性更強的設計解決方案。雲巨集優秀的設計師團隊十分清楚扁平化設計的強大,更是在WinCloud產品中運用自如。

UI扁平化講求介面簡約,沒有多餘的效果,例如投影、凹凸或漸變。雲巨集WinCloud產品每一個頁面的設計都尊遁了這一原則,以系統頂部欄和左邊選單欄為例(見下圖)。這兩部分的背景都採用了純色,沒有使用色彩豐富的背景圖片,也沒有使用看起來產生立體感的漸變效果,而頂部欄和選單欄的區分僅是背景色的明暗度輕微的差別,這使得這兩部分看起來簡單明瞭,也不會被多餘的效果等其他資訊干擾。

UI扁平化使用簡潔風格的元素和圖示。以前人們都喜歡使用立體感的元素,如舊版本蘋果IOS系統介面(見下圖),圖示使用了帶反光玻璃的效果,右圖使他們看起來好像放在一個玻璃架子上一樣。如果我們現在在哪臺手機上還看到這樣的介面,我們一定會覺得“這手機大概有些年代了吧!”。

雲巨集優秀的設計師團隊在圖示設計上也是下足了功夫,WinCloud產品的圖示設計(如下圖)簡潔乾淨但不缺乏資訊,這跟當下大眾的認知和潮流的方向是一致的。簡單的形狀,清晰的排版,明亮而對比明顯的色彩可以使我們很容易區分雲主機、雲硬碟、公網IP等資源型別。更令人興奮的是,這樣簡潔的圖示還可以為使用者提供系統快速載入的體驗。

UI扁平化是一種儘量減少裝飾的極簡設計。比如好多的系統都喜歡在操作按鈕上加一個圖示來達到裝飾的效果,這種做法在操作稍微多一點的系統中顯得不是那麼明智了。因為大量的圖示會讓人眼花繚亂,而近似的操作通常圖示設計得也相近,容易產生歧義,這樣的UI只會讓人困惑,產生視覺疲勞。WinCloud產品龐大而複雜,裡面包含有大量的操作,在按鈕的設計上並沒新增任何裝飾,純色背景加上文字提示,讓按鈕長成最簡單的樣子(如下圖),這樣不但讓介面整體上看起來清新簡潔,而且可以最大限度地降低視覺噪聲,避免給使用者帶來不必要的困惑。

UI扁平化真的一點也不神祕是吧?先進的系統需要優秀前衛的UI來體現,優秀UI的概念一直在變化著,扁平化設計也一直在發展中,雲巨集WinCloud產品的UI也會緊跟時代潮流,為使用者創造更好的使用體驗!