淺談扁平化設計的優缺點與發展趨勢(下)

扁平化設計的前身

到底是誰先開始用扁平化設計的?沒錯,跟你想的不一樣,不是以設計聞名的 Apple 開始的,而是那個常常把事情搞砸的 Microsoft。

在2006年為了和當時紅極一時的 iPod 競爭,Microsoft 推出了 Zune,不過當然不是 Apple Music + iTunes 的對手,Zune 自然就失敗了,但是 Zune 簡潔的界面搭配它的軟件顯得十分清新,也讓播放器和電腦上的軟件有一致的用戶體驗。


淺談扁平化設計的優缺點與發展趨勢(下)


Microsoft Zune 和 Zune software

扁平化設計的應用

在 iPhone 推出後沒多久,Microsoft 在2010年也推出他的第一代智能手機 Windows Phone 7,這可以說是扁平化設計第一次在資訊產品上向世人展現其樣貌,使用簡單的方格狀色塊與無襯線字體的界面,圖標也不再以擬物化呈現,而是去除了細節與陰影。

淺談扁平化設計的優缺點與發展趨勢(下)

Microsoft 把這種界面稱為「Metro UI」(後來因為和德國零售業龍頭 Metro AG 有衝突而改名叫 Modern UI),之後便開始整合到公司旗下的產品,如 Xbox 360 和 Office 系列軟件,2012年更是使用在 Windows 8 的動態磚上。


淺談扁平化設計的優缺點與發展趨勢(下)


可是,扁平化設計是出現了,這也只不過是讓世人一窺它的面紗,那它又是如何快速竄起成為UI潮流的呢?

扁平化設計的崛起

精明的 Apple 大概在暗自竊喜把珍珠當石頭玩的 Microsoft,馬上在2013年發表了新版iOS 7,使用 Helvetica 做為系統字型,也一改前6代使用的擬物化設計,正式改為扁平化設計。

淺談扁平化設計的優缺點與發展趨勢(下)

不過一開始有些果粉不太能接受這種鉅變,一時間哀鴻遍野,不過現在看來這是十分正確的決定,因為就在幾年後,Google 也加入了扁平化行列,自此起扁平化設計變成了幾乎整個UI設計的趨勢。

不過,Apple為什麼願意冒著風險,排除眾議的使用扁平化設計呢?

扁平化設計的優點

越來越多的研究說明了智能手機出現後人們使用電子產品習慣的改變,使用者在一天當中使用智能手機的時間超過個人電腦,畢竟手機隨時隨地都可以使用,在這樣的情況下,就必須考慮要能在不同尺寸上的裝置呈現出一致的用戶體驗。

而扁平化設計正好有著一些十分棒的優點來解決問題。

The Same User Experience:扁平化設計的色塊單純、容易延伸拓展,可以在不同尺寸的裝置上呈現一致的風格,有著自適應的特性;而擬物化的按鈕在伸縮時則容易造成陰影或光澤被壓扁等扭曲問題。


淺談扁平化設計的優缺點與發展趨勢(下)


Keep It Simple : 扁平化設計有很好的可讀性和易讀性,在去除掉多餘的裝飾效果後,留下清楚明確的幾何圖案,呈現出極簡風格,用戶不用特別放大屏幕來尋找鏈接或按鈕。


淺談扁平化設計的優缺點與發展趨勢(下)


Bright Color & Visual Hierarchy:在顏色配置通常大量採用明亮色彩,並運用顏色去做階層和排版區隔,讓使用者有正向的觀感。


淺談扁平化設計的優缺點與發展趨勢(下)


Speeds Up the Workflow:由於圖案細節的簡化,不管是在 Adobe Photoshop 或 Adobe Illustrator 製作文檔都能加快設計速度,更甚者許多效果可以直接用 HTML/CSS 直接呈現。

淺談扁平化設計的優缺點與發展趨勢(下)

Less Assets in General:相較於擬物化的圖片文件,扁平化設計的圖標大幅降低了文件大小,有些效果甚至可以直接用幾行 CSS 和Js代碼替代,直接省去圖片了,降低 Web 和 App 的體積。

淺談扁平化設計的優缺點與發展趨勢(下)

Load Faster:由於手機的系統空間及硬體效能仍比不上PC,扁平化設計降低文件大小和較佳的自適性可增加載入速度。


淺談扁平化設計的優缺點與發展趨勢(下)


Focus on Great Typography and Font:設計師可專注在排版與文字上,讓畫面看起來銳利而清晰,而非多餘的文字外觀修飾與無意義的動畫效果,無襯線字體也能讓用戶快速看懂內容而又不會分散焦點。


淺談扁平化設計的優缺點與發展趨勢(下)


It's Trendy:Microsoft、Apple、Google 等許多知名軟件公司及網頁、App都加入了扁平化設計的行列,所以跟上潮流是個保險的作法,而且網絡上也有許多相關的資源可以使用。

扁平化設計的缺點

扁平化設計聽起來棒極了!似乎總算打倒了流行多年的擬物化設計,但是,在這波趨勢之下,你還是得想想那些關於扁平化設計的缺點。

Usability Concerns:扁平化設計在多層次資訊和複雜資訊的呈現上有困難,Win 8 是個很好的失敗例子,另外一個問題是手機上因為不像電腦有鼠標,有著移到某個標示時、該標示會改變顏色或字體的「Hover」功能,使用者並非總是清楚哪邊可以按鈕、哪邊可以輸入文字。


淺談扁平化設計的優缺點與發展趨勢(下)


用戶時常會困惑到底哪些是純展示內容,哪些是可以操作的區域?

Color Palettes is Tough to Match:當界面上使用越多種類的顏色時,顏色間彼此是否協調就會變得相當困難,設計師對顏色的掌握優劣就會十分明顯除了品味與美感之外,還需要懂一些色彩心理學。

淺談扁平化設計的優缺點與發展趨勢(下)

(多數工程師沒有美學方面的知識,一般設計師又不懂網頁語言)

Weak Typography Becomes Obvious:當界面沒有太多裝飾與附加效果,一個失敗的排版會看起來像是粗劣、半吊子的未完成作品。

面對這種情況,由 Google 主導的 Material Design 則是另一個趨勢,可以說是後扁平化時代或扁平化設計2.0。

結語

扁平化設計的成功並非一蹴而就,而是經過擬物化過程的演變而來,人們對於認知學習已足夠看懂抽象圖示的功能。那麼,扁平化設計改變的只有資訊產業嗎?絕對不僅於此。

除了上述提到的之外,扁平化設計也日益普及影響到其他的設計領域,特別是印刷產品的設計,如海報和書籍封面(畢竟原本瑞士設計就是用於此),有越來越多的旅遊手冊或產品說明書也開始採用人們逐漸習慣的扁平化設計。

淺談扁平化設計的優缺點與發展趨勢(下)

淺談扁平化設計的優缺點與發展趨勢(下)

有趣的是,許多手機遊戲也開始使用扁平化設計的概念在製作,像是很有名的2048數字遊戲。

當科技產品中的用戶體驗逐漸改變人們的認知學習時,會開始影響其他領域的相關設計,改變成大家所習慣的視覺風格,那麼扁平化會持續多久呢?

其實從歷史的角度來看,每一個時期的風格都不會持續太久的,更何況是資訊爆炸的今天,扁平化才開始興起的隔年 Google 就推出 Material Design 虎視眈眈,而人對於視覺的風格依舊會疲乏,擬物久了就會想要扁平,扁平久了又想回到擬物,週而復始。

而設計就是要在這潮流之中,尋找出最適合當下的元素和風格來解決眼前的問題,唯有能解決問題的設計才是好設計。


分享到:


相關文章: