UI 美學趨勢備忘錄─淺析扁平化設計

扁平化設計多年前曾經非常流行,現在又再次回到人們眼前,Windows 8、新版 Google 都呈現這種設計風格,連蘋果也正在推動 iOS 7 採用它。本文探討扁平化設計的特色並有大量範例供參酌。
評論
評論

圖為 2008 年 Benq Siemens Full Touchscreen 概念手機

本文轉載自 W3C plus,原文 〈扁平化設計:你在這趨勢中收穫了什麼?〉,翻譯自 〈Flat Design: Can You Benefit from the Trend?〉,作者為 Carrie Cousins,譯者為 LL

扁平化設計(Flat Design)—這個早在多年前非常流行的設計領域-又再一次捲土重來了。許多新網站以及需要重新設計的網站都紛紛採用了扁平化設計的方案,這種趨勢無論是在網頁設計或者行動端的設計方面都已經蔓延開了。

隨著融合了扁平化設計美學的 Windows8 以及新版 Google 的推出,以及其他人氣網站紛紛採用這種扁平化的主題設計,這種扁平化的趨勢將很有可能受到更多青睞。

你是否考慮過?你能夠把它運用到你的項目當中嗎?這種設計方案是否能夠給你帶來更加輕鬆的工作體驗?

扁平化設計具有著一種讓人心醉的美麗,沒有大量的修飾,它能以一個簡單直白的方式來傳遞一個信息或者幫助一個產品以及思想變得更加深入人心。所以說,趁著下一個新的設計潮流到來之前,我們現在就必須好好把握當前的設計趨勢。

什麼是扁平化設計?

 

扁平化設計正是通過放棄任何附加效果的方式,創建了一個「零」3D 屬性的設計方案。在這裡,沒有陰影效果(drop shadows)、斜角(bevels)、浮雕(embossing)、漸變(gradients)等其他方法來幫助元素產生相對於螢幕的凹凸效果。不帶有羽化邊緣以及陰影效果的圖標和 UI 元素也都是看起來非常鮮明。

扁平極簡就是 Flat design 的靈魂所在。

Flat design 並不是徹底放棄效果。它只是不存在那些能讓人產生立體感覺的深度(depth)和維度(dimension)。我們什麼甚至可以這樣認為,更多的設計傾向於「準扁平化」的範疇,這時候我們從產品的大體角度來看,仍然存在很小一部分的效果。

技術

忘掉所有的修飾元素,它們不是扁平化設計要關注的地方。

在這裡我們需要把注意力放在色彩上 。扁平化的設計方案經常使用許多鮮明的色彩。從色塊、色形以及色調來看,色彩確實是提升扁平化設計一個不可或缺的組成部分。在你的 logo 上的用色方面多加斟酌,能夠使得你的網站引人入勝。在扁平化方案上僅僅使用白色和黑色就能夠產生不錯的效果,但你想著這效果要更進一步,那也可以採用更多的色彩。

注意字體 。文字是必不可少的─他們提供了訊息,它作為了一個工具在你的網站上引導你的用戶該做什麼。使用一些有趣且獨特的字體來修飾文字,當然了,在這裡你就不要再想著 Arial(微軟字體)。挑選出字體來配合你所要表達的信息. 記住扁平化方案的要旨是極簡,因此在字體的運用中,我們應該考慮其如何切合這個要點。簡單的無襯線(sans serif)類字體在這個方案中可應用的種類非常廣泛。或者我們不妨做出一點稍微「越軌」的處理方法,考慮更加在一個扁平化設計方案中選擇一個新奇的字體作為美術元素,這必定比簡單的字體的運用更加奪目。

做到惜字如金 。許多扁平化設計同樣也運用了少量文字來營造一個簡約的風格。因此,我們要確保每個字都能發揮出重要的作用。

簡約的用戶界面和 UI 元素 。用於被點擊的按鈕不需要過於複雜的設計。只要這些風格要素有了明確的定義,就不會阻礙他們成為「稱職的」按鈕。這些要素包括顏色、輪廓、框架或者甚至是不同字體或者形狀。

創建層級 。在扁平化設計中,即便在被點擊的區域中使用了陰影、漸變、斜角等其他效果來進行特別註明,一些人還是感覺這些用於被點擊的區域表現得還不夠明顯。這足以說明,建立一個明顯的層級結構在任何一個網站上是極其重要的。我們要明確地讓用戶做到對你的網站一目了然。如果連結本身就擁有不同的色彩或者獨立被包含同一個區域中以供使用者點擊,那麼連結也應該要清晰地表現出來。

Flat Design 的命名

圍繞著「flat design」(這裡譯者翻譯為扁平化設計)這個名字存在著諸多爭論。現在你說看到的這個名稱「flat design」,也不是被大家絕對地認可。

不同的公司團體都嘗試用過其他名稱,例如「minimal design」、「honest design」,而微軟公司甚至稱它「authentically digital」。

對此你的看法是什麼呢?讓我們在 Branch 集思廣益吧。

Flat Design 啟示

很多人都說扁平化設計只是剛剛在設計/開發的團體中開始流行。下面請你借鑒下這些來自 Pinterest 和 Dribbble 一些關於 flat design 優秀資源,並以此考慮你的下一個項目該能怎麼用得上他們)(我們需要注意的是:Pinterest 本身不採用扁平化設計方案)

Flat UI Design Pinterest board by War Marc

Flat UI Pinterest board by Marco Heutink

Square UI elements on Dribbble

Santa tracker icons on Dribbble

Flat UI on Dribbble

Square UI on Dribbble

Haraldur Thorleifsson on Dribbble

Bobby McKenna on Dribbble

Griffin Moore on Dribbble

Kyee on Dribbble

總結

得益於它自身簡單的特性,扁平化設計方案才能夠在訊息和產品當中表現得如此突出、簡單、整潔、直接。這種樣式設計在小螢幕上有了更好的表現,尤其是在手機行動端上,不過許多人覺得其在大螢幕的表現同樣搶眼,Android 平台以及微軟手機同樣在他們的操作平台上採用了扁平化設計方案。(蘋果是一個與之相對例外,它採用的的是 skeuomorphic scheme)

在扁平化設計上進行添加相對來說相對困難,因為再也沒有那些陰影修飾效果來隱藏你設計上的不足,在這裡,每一個細節,你都必須要用心顧及。扁平化設計同樣在多色彩的方案中有不俗的表現。無論是艷麗的色彩,還是黑白灰都能夠在扁平化的設計當中找到一席之地。在另一方面,在平面的某些設計當中僅僅設置黑白兩種顏色當然無可厚非,但如果整個頁面設計都是如此的話,那麼確實也讓人看起來有點嚇人,在這個時候,我們也許能考慮採用一個「準扁平面方案」,為此保留少量的效果以作修飾。


「微企e時貸」為你的大夢想「助燃」!利用手機1天內快速取得企業資金

國銀中小企業放款龍頭第一銀行,蟬聯11年中小企業放款第一名,堅持做企業最強後盾。現在只要利用手機,簡單資料填寫即可審核、快速撥款,申請貸款不再受營業時間和地點限制。想要踏出夢想第一步,「微企e時貸」讓你隨時都可以出發。
評論
Photo Credit:第一銀行
評論

 …從事金屬加工業的阿展,是一間中型工廠的老闆。多年營運穩定,本來和2至3家民營銀行往來,但阿展始終覺得應該分散風險,希望授信往來銀行可以增加公股銀行,透過「微企e時貸」進件申貸,順利獲得300萬的周轉金額度。…

…小芳今年初開了一間包裝禮盒設計店,她最喜歡收到客戶「開箱」包裹後的欣喜回饋,雖成立未久,但業務仍是持續成長。豈料,5月時遇到疫情,嚴重影響訂單,原本僅和民營銀行存款往來的她,疫情期間申貸也僅獲得很少的額度,適逢年底大節日將至,缺乏備料資金又急需接訂單,頓時陷入雙重困境。幸好,小芳在網路上看到「微企e時貸」廣告,用手機成功申貸300萬元紓困。…

即便是鴻海集團,也是從10萬元標會金開始

這是阿展與小芳的故事,也是第一銀行「微企e時貸」的真實客戶故事,更是台灣社會許多小老闆的縮影。根據統計,2020年台灣中小企業家數將近155萬,佔全體企業98.9%,囊括全台就業人口的8成,「若我們能照顧好小微企業,等同照顧整個社會。」

Photo Credit:The News Lens Brand Studio

第一銀行法人金融業務處副處長林峻嘉談起「微企e時貸」的創立初衷,就是希望能協助中小企業發展,或是比中小企業更小規模的微型企業,因為所有大夢想的開端,都需要小火種助燃,「所有大企業、上市櫃公司,都是從小公司發展而來,鴻海集團的最一開始,也是郭董(郭台銘)的媽媽標會10萬、20萬,一點一點打拼成型。」

一銀已蟬聯國銀中小企業放款龍頭11年,深知中小企業信用資料向來不易評估,剛創業的微型企業更是難以拿出漂亮的申請文件,為因應數位金融、普惠金融以及中小企業放貸市佔率第一名的趨勢和優勢,一銀希望藉由融合AI的金融數位化服務,提供簡便、快速的服務。

快速、簡單、便利的一銀微企e時貸

為什麼選擇手機作為主要申請介面?因為即便是實體服務也有顧及不全的地方。曾有一間在一銀附近開業近50年的老店家,因為網路服務這才第一次接觸到一銀,「還有個好處是,不受時間、地點限制,結合線下服務,銀行端也能同步拜訪客戶,協助解決申貸問題並提供企業發展建議。」網路申貸甚至間接解決企業老闆們的面談壓力,線上核貸過程即便受到拒絕,也相對不會造成太大心理壓力。

林峻嘉也透露,「微企e時貸」每日申貸高峰時間為晚間9時至12時,「這代表我們有打到企業主的使用痛點,白天大家要忙著打拼沒空,晚上才是能鬆一口氣好好處理資金需求的時段。」現在只要透過手機,就能簡單填寫資料即可審核、快速撥款,充分展現線上申貸解決時間地點限制的優勢。

今年上半年,許多商家營運受到疫情波及,導致信用或資產紀錄不佳,想順利籌資度過難關更是難上加難。而「微企e時貸」卻能奠基一銀長期以來協助中小企業發展的經驗,更能確切評估企業的未來性、競爭力,以及未來是否能轉換為可行的商業模式,加上搭配移送政府信保基金,亦能確保資金用途明確、還款來源可靠、信用無瑕疵、具發展潛力,但擔保品不足的資金需求者,順利取得融資。

「微企e時貸」對於申貸無企業成立年限要求,貸款額度最高500萬,貸款期限最長可至5年,只要是所有銀行總融資額度在50萬元以下且取得信保成數9.5成的中小企業,都能透過手機進入平台填寫基本資料試算額度,線上送件後就有專員聯繫提供申貸所需資料。

夢想推手的下一步

目前「微企e時貸」已協助2萬名資金需求者進件,其中1.6萬戶成功撥款,累放款金額達到300億元。這成績早已超出一銀原先預期,未來若法規再鬆綁,有更簡便的方式協助企業主提供備齊相關財務資料、核准設立文件、近三年財務報表及最近一期暫結報表、負責人及保證人身分證影本等貸款相關文件,一銀即可在現有基礎上快速建立線上對保功能,加速核貸。

Photo Credit:第一銀行

只要透過「微企e時貸」平台申貸,可有前3個月1.68%以上的年利率優惠,如果對於試算額度不滿意,也可選擇由專人聯繫,客製化貸款額度和貸款利率。一銀期待,能與中小企業與微型企業主相互學習,一同找到營運平衡點、發展出長遠經營策略,並協助企業主在追尋夢想的過程中,獲取另一條順利融資的管道。

☞現在就申請微企e時貸