關於扁平化界面風格的設計美學討論

2021-01-16 藝術中國

這是一篇關於視覺方面的小文章,關於扁平化與擬物化風格的討論。有不少朋友來發表各自的看法,說明這確實是大家都蠻關心的設計問題。大家的觀點雖然不同,但都有一定的道理,都能看出發表論調的設計師的思考和激情。有人說了你怎麼這麼沒節操呢,你到底覺得哪種好?我要說的是,在我看來這個事情裡的的確確不應該存在哪個強於哪個的爭議,因為它根本就不是個非黑即白非美即醜涇渭分明的問題;脫離了實際產品的上下文環境,脫離了產品功能與目標用戶群類型之間的關聯,所謂好與不好的命題壓根就不成立。

  說的具體些,遠的不講,單說Beforweb這邊的視覺風格,除了每篇文章的圖標以外,可以說是徹徹底底的扁平化了(當然,細心的朋友可以在側邊欄標題背景底部發現類似陰影效果的1像素邊框,這個不算數...),但如果有人說我是扁平風格的衛道者的話,我會很不開心,因為我只是在自己覺得合適的地方使用這種風格而已。我喜歡iOS裡很多擬物擬真風格的界面,最典型的包括語音備忘錄、iBooks、iPad裡的日曆等等,它們的界面讓我覺得親切自然,讓我可以在冰冷的電子設備當中找到現實生活的真實感,就這麼簡單。

  下面這些截圖來自我平常自娛自樂時會用到的一些音樂方面的iOS或OS X應用。它們的功能的確非常棒,我著實在這些東西上花掉不少錢,但如果它們的界面沒有採用如此逼真的擬物化設計,如果他們只是乾巴巴的功能和數據陳列或是Metro風,我是絕不會在它們身上花半毛錢的。




    之前看到過一句話,大意是,Metro風格讓人看到未來,而擬物化則讓人感覺像是回到家裡一樣。說的挺不錯的;人不可能一直呆在家裡,也無法始終飄逸灑脫的在外面尋求新鮮與未來感。我喜歡聽真人使用真實樂器演奏的音樂,但這不妨礙我偶爾聽聽電子的東西。

    進入譯文的正文,從扁平化風格出發,慢慢引出相對「公允」的看法,我個人覺得比那些單純強調某種風格的文章要有點意思。

    如今,關於「扁平化」與「擬物化」孰優孰劣的爭論在圈子裡此起彼伏的。我(英文原文作者)個人總是會被極簡設計所吸引,所以扁平化的界面設計風格確實是我的菜。
 
    什麼是扁平化設計

    在實際當中,「扁平化設計」一詞所指的是拋棄那些已經流行多年的漸變、陰影、高光等擬真視覺效果,從而打造出一種看上去更「平」的界面。



    Layervault的設計師Allen Grinshtein曾經在HackerNews的一篇文章當中說:「長久以來,網站的界面風格似乎都在遵從著同一種設計美學,大家都在用斜面、漸變、陰影一類的效果來突出界面元素的質感。對於設計師們來說,製作這類『可愛』的元素簡直變成了行規甚至是榮譽。不過對於我們,以及為數不多的其他一些設計師來說,這種慣用的方式並非一定正確。」

    去Layervault看上幾眼,四處轉轉,你會發現他們所追求的這種於簡約當中體現出的視覺美感。看到我們一直以來習慣了的那些視覺風格正在越來越多的網站和移動應用產品中被潛移默化的顛覆著,也是蠻有意思的事情。下面是其他一些例子:

    Squarespace



    新版的Squarespace幾乎完全採用了扁平化的視覺風格,只在一些細節當中使用了相對傳統的方式突出了重要的交互元素。試用一下你就會發現,其實他們的產品在功能邏輯上還是蠻複雜的,但這一切都隱含在簡約直白的界面背後,你真的可以從中隱約感受到其設計團隊付出的心血。

    Facebook



    另外一個大家所熟悉的例子就是Facebook了。 「Facebook是扁平化界面設計的絕佳案例。除了幾個主要的動作按鈕當中使用了輕微的斜面效果以外,其他界面元素全部採用扁平風格。鑑於他們多年來在這方面一直保持著這樣的特色,至少我們可以說這種設計風格對於Facebook來說是完全適用的。」 - Ian Storm Taylor(Segment.io)

    Rdio



    Rdio最新版本的網站及產品界面中都採用了很徹底的最小化、扁平化的設計風格,你很難找到使用了陰影、漸變等效果的界面元素。

    Nest



    我曾經作為前端工程師參與過Nest的網站開發,現在依然記得他們的設計師對扁平風格的熱情追求。在他們的網站中,實際的產品及相關的應用環境照片作為「真實」元素融入到扁平風格的媒介載體(網站本身)當中,虛實結合,讓訪問者可以很容易的將注意力聚焦在產品上,而不會被網站界面上的視覺元素所幹擾。

  對擬物化的逆襲


    正如20世紀建築界當中的極簡主義運動,扁平化設計風格的逐漸興起也可以被看作是對多年以來過度設計、過度雕琢的界面風格的逆襲;尤其是最近一段時間,蘋果一直以來的擬物風格被詬病的蠻犀利的。


    Wikipedia對擬物化(「仿製品」、「Skeuomorph」)的定義是:原有物件中某些必需的形式在新的設計中已不再必要,但新設計仍模仿舊有形式,以使新的外觀讓人感覺熟悉和親切。

    舉個例子,我們通常會為界面當中的按鈕添加漸變和投影效果,因為現實當中的按鈕就是具有這些視覺特徵的,即使這些效果對於界面元素的功能來說沒有任何實際意義。又譬如有些天氣方面的應用會使用溫度計的形式來展示氣溫;在現實世界中,這種實體的存在是必需的,而在應用軟體當中,溫度計的形象則純粹是裝飾性的。

    日曆應用當中皮革質地的設計元素是必需的嗎?如果按鈕上不使用3D質感,用戶是否還知道它們可以被點擊?有多少裝飾性的元素是真正必要的?

  「在現實生活中,當按鈕被按下時,你可以清楚的感受到它的彈性,但在桌面設備或行動裝置的顯示屏上,你無法感覺到這種物理回饋。看上去是實體的東西卻無法讓人感受到實體本該具有的反饋效應,至少對我來說這是一種很蹩腳的、不符合預期的體驗。」 - Allan Yu (svpply / eBay)

  形式服務於功能


  20世紀建築界的極簡主義運動當中提出了一些著名的口號,包括「形式服務於功能(form follows function)」、「少即是多(less is more)」等等,直到今天我們依然會談到這些。此外,我個人非常喜歡米開朗基羅在被問到他是怎樣創作大衛雕像時回答的: 「很簡單。我只要鑿去多餘的石頭,留下有用的。」

  對於界面設計來說,也是同樣的道理;37signals的傢伙們在這方面的本事是有目共睹的。要在實際當中卓有成效的實現扁平化風格的設計美學,作為設計師,我們本質上最需要關注的是產品功能如何運作,而不僅僅是考慮視覺呈現方面的問題。

  扁平還是擬物?只是個選擇的問題

  至少我沒有見到任何研究報告表明擬物風格的按鈕會帶來更多的點擊量。的確,有足夠多的理論和實踐結論可以證明在視覺上能產生更強對比效果的交互元素可以更好的引起用戶的注意,但我相信,在某些上下文環境中,一個扁平化的橘色按鈕所帶來的對比效應會高於具有凸起質感的按鈕。所以,上下文,也就是具體產品的具體界面環境,是這裡的一個關鍵要素。我們來看看其他設計師的一些看法:

  「這件事和時裝時尚有些類似。當某種風格被全面普及之後,作為設計師,要想脫穎而出,你就得反其道而行之。」 - Cemre Güng r (Branch)
  「如果有人告訴你『擬物化是不好的設計』,這就相當於在說『紫色是醜陋的顏色』,沒有任何意義。」 - Sacha Greif
  「為什麼要在沒有任何實際證據的情況下貶低某種設計風格,同時抬高另外一種?忽略產品的實際功能與整體體驗而單純追求某種設計風格,這並不是一件令人興奮和愉悅的事。」 - Geoff Steams (YouTube)

  設計的好壞不是「美學」可以決定的

  對設計風格的選取最終還是要取決於具體產品的實際情況。在我個人看來,相比於擬物化而言,扁平風格的一個優勢就在於它可以更加簡單直接的將信息和事物的工作方式展示出來,減少認知障礙的產生。

  無論採用怎樣的風格,優秀的界面設計都需要遵從一些共通的設計原則:

  一致性
  通過具有一致性的設計模式及視覺風格,為用戶建立起完整一致的心智模型,使產品更加易用,提升整體體驗。

  對比
  通過對配色、尺寸和布局的調整,使可點擊的界面元素在視覺上與其他元素形成鮮明的對比。

  布局
  可以嘗試使用960gs一類的網格布局為界面設定視覺規範,使用戶的視線可以跟隨內容本身所界定出的路逕自然的移動,增強界面的視覺平衡。

  層級化
  最重要的東西要比相對次要的東西更容易被看到。關於這個話題我可以寫一整篇文章出來,簡單的說,就是在界面設計中著重突出那些與核心功能與常見用例相關的交互元素,而將其他操作元素置於次要位置,這可以使界面得到最有針對性的優化和簡化。 「我個人的經驗是,無論扁平化還是擬物化都沒什麼所謂,最重要的是界面能夠讓用戶在最短的時間內清楚的識別出信息和功能的層級關係,並且很容易的知道接下來應該做什麼。」 - Caroline Keem

  目標用戶
  不同類型的用戶所青睞的界面風格也有所不同。建築、設計、時尚等領域的用戶可以更好的擁抱扁平化風格,而其他更加「普通」的用戶則更容易接受相對傳統的擬物化界面。

  反饋

  當點擊行為發生時,要立刻向用戶提供清晰明確的視覺反饋。動畫過渡效果就是一種比較常見的反饋方式,例如在用戶執行操作後,使用旋轉圖標提示用戶系統正在進行響應。

  降低「摩擦力」
  無論採用怎樣的視覺風格,都要使界面儘量簡化,減少用戶完成目標所需執行的操作,打造更加流暢的交互體驗。任何一點障礙或額外的步驟都會提高操作成本,增加功能的複雜度,進而降低轉化率。

  鼓勵探索
  了解目標用戶有可能對產品進行哪些方面的探索。一旦他們習慣了產品的界面與基礎功能,並開始向「高級用戶」的階段進發時,要為他們的探索和學習行為進行必要的指引與「獎勵」回饋。

  原型
  無論風格如何,界面形式都取決於實際的功能。好的設計方案離不開產品前期的規劃工作,特別是通過草圖或線框原型進行的探索。識別出最核心的用例需求,使用原型不斷嘗試和驗證,為接下來的界面設計工作打下堅實的基礎。

相關焦點

  • 扁平化2.0時代!今年六個全新的扁平化設計風格
    時至今日,扁平化已不再是流行一時的設計風潮,而是一種美學風格。扁平化大膽的用色,簡潔明快的界面風格一度讓大家耳目一新,當它對元素效果拋棄的如此徹底之際,它又將效果撿起來,改裝成另一番模樣,使得扁平化進化為扁平化2.0。
  • 關於扁平化設計,你還需要知道這些
    就其本質而言,扁平化設計的下載速度比複雜設計的下載速度要快的多。(複雜設計的特性是有很多裝飾元素,如陰影和分層等。)有鑑於此,平面設計師開始探索一種讓用戶感到熟悉,一致,易用和有秩序的排版及設計風格。這是一種全新的設計理念。這也許是第一個由平面設計師主導的數字變革。微軟在視覺傳達方面做了很多投資。它對於平面設計風格的重視形成了一種全球設計風潮。
  • 圖標風格扁平化 蘋果iOS7概念圖曝光
    圖標風格扁平化 蘋果iOS7概念圖曝光 2013年05月14日 09:19作者:董曉龍編輯:董曉龍文章出處:泡泡網原創   泡泡網手機頻道5月14
  • 設計經驗分享:扁平化設計的8個Tips
    我此處所談的扁平化指的是一個大的概念,將後面衍生出來所謂的「似扁平化」也包含進來。Tip1:關於高光、漸變和投影網上所說扁平化風的三大要素:去高光、去漸變、去陰影。這麼說是有點絕對了,我認為應該是去掉過渡式高光、過渡式漸變、過渡式陰影。在這篇文章裡,扁平化高光、階梯式漸變以及所謂的長投影是允許的。
  • 如何練習扁平化插畫風景?扁平化風景插畫設計
    如何練習扁平化插畫風景?扁平化風景插畫設計!現如今扁平矢量插畫已經成為廣告行業、網際網路行業等行業內備受追捧的重要視覺素材。在本教程中,我們將以當下流行的扁平插畫風格為創作方向,繪製一幅溫馨、可愛的扁平森林場景插畫。
  • 扁平化名片設計PS教程
    ——百度百科雖然名片的尺寸已經討論過是3.5*2英寸,但是為了做一些出血延伸,需要多流出一些邊距。上下左右各0.125英寸,因此尺寸設置為3.75*2.25英寸。(國內標準是上下左右各加2mm,因此也就是94*58mm)現在需要加入參考線,以便規範布局。
  • 設計風格——蒸汽朋克
    所有的設計都像是一面鏡子反射出某一階段社會的主流審美,要是討論起設計的各種潮流風格,蒸汽朋克必須得有名字。蒸汽朋克是一個組合詞,由蒸汽steam和朋克punk兩個詞組成。蒸汽自然是代表了以蒸汽機作為動力的大型機械了。
  • 圖標,必不可少的界面元素
    應用商店也就是手機桌面上的系統圖標以及不同應用的圖標,可以看出:從早期的擬物化到如今的扁平化,圖標能夠形象的表達出對應的功能以及代表的應用,幫助以及引導用戶快速進入對應的APP。2. 功能入口通常放在APP第一屏的位置,能夠將APP的核心功能、或者用戶常用的入口直觀的展現給用戶。
  • 設計師最愛的扁平化圖標icon合輯
    還記得上周公子教你們做的技術流科技風嗎,最後那個人物圖標我留了個懸念,它是一個扁平化的icon。所以這周的每周開方,公子要分享給你們的就是,我個人一直收藏的幾個扁平化圖標庫!因為扁平化圖標本身就很有設計感,所以有些時候我們根本不需要做其他的設計,單靠幾組圖標就可以撐起一份完整的PPT。
  • 破曉版本預告③|界面煥然新生,以點線韻律,傳遞中國美學
    破曉至,萬物生王者界面煥然新生以國畫基礎元素【點線】為靈感傳遞中國氣質的簡約之美在點線概念設計上加入能量動效呈現點線韻律的生命感快戳下方視頻和小妲己一睹為快~王者榮耀:破曉至,萬物生。王者界面煥然新生一生二,二生三,三生萬物由點成線,線逝化點點線韻律,生生不息界面新生,希望展現中國美學和現代審美碰撞後的新生簡約美!和小妲己一起期待新版本的王者界面叭~看完了新版本的王者界面,大家是否更期待新版本吶~孫悟空新皮膚零號·赤焰同款ROBOT魂孫悟空成品可動機甲模型已經開啟預售了哦,快跟隨小妲己一起了解更多詳細內容叭!
  • 譯文|界面設計中,關於字體設計的10 個錦囊
    字體作為界面設計的一個元素,對用戶的閱讀體驗起著至關重要的作用。本文是 UI 設計師 Viljami Salminen 分享的用戶界面字體設計的基本規則和技巧。在現代的交互界面中,文本即界面,字體設計則成為主要的設計規範。字體即界面設計的基石在用戶界面中,每一個單詞和字母都至關重要。好的字體等於好的設計。字體成了界面設計的基石,而我們設計師,則是這些這類「信息基石」的修造者。觀察下面這個例子,想像一下,把以下圖片中的元素拆解開來,看看會是什麼樣子——一個個單詞、兩張圖片、幾個圖標。
  • 蘋果iOS14界面首秀,iPhone 桌面布局發生改變
    隨著近日大多 iOS 14 新功能與設計的曝光,有設計師根據曝光的消息製作了 iOS 14 渲染圖, 或許我們可以在這些渲染圖上窺見 iOS 14 的最終樣貌。從被曝光的渲染界面中可以看出,iOS14系統將系統圖標進行了重新設計,相比iOS13系統的圖標,iOS14線條數量更少,而且具備更高的扁平化程度,跟國產定製安卓系統的風格頗為相似。整體來看,iOS14的UI比iOS 13更漂亮,而且在蘋果團隊的優化下,滑動間的視覺效果想必也是一大驚喜。
  • 民間高手重新設計 Windows 10 資源監視器:一眼就中毒
    Windows 10的扁平化設計受吐槽頗多,微軟也在不斷改進,最近就宣布了新的Fluent Design設計語言,有些類似當年Vista毛玻璃的特效,但又不是簡單的復刻。
  • 什麼是圖標設計,圖標在UI設計界面當中起到什麼作用
    圖標設計(Icon Design),是設計師在入門界面設計的必經之路,圖標是透過「符號」來簡化文字,主要是用來指示或暗示行為,在界面設計上我們會使用大量的圖標來節省空間,也可技術性的避免一些跨國語系的問題,常見的圖標例如,分享、贊、搜尋、地圖…等等,光聽到這些名詞,多數的人應該也能快速的聯想到圖標樣式了吧,網絡上對於圖標細節的討論很少,本篇就以界面設計常用的圖標來做更深入的討論
  • 扁平化風格雙人對戰!山工藝畢業作品《百年戰爭》在桌遊中了解英法...
    《百年戰爭》是一款具有扁平化風格的雙人對戰類桌遊。本款遊戲以策略為主,以英法百年戰爭為背景,遊戲卡牌的內容與百年戰爭相關,增強了玩家的代入感。以桌遊為表現題材,以扁平化風格為主要的展現方式,畫面採用簡潔、清晰的色塊分割,提高辨識度。讓玩家在玩遊戲的過程中區分遊戲人物和事件,能增加大家對百年戰爭的一些了解。
  • 聊聊數位化產品的「設計語言」
    界面設計的語言屬性 在這裡我們將藉助語言學的角度,來探討數位化產品界面設計語言系統的構建。而我們平時所說的組件庫,其實就是一部詞典,其中包含了設計系統中所需的基礎組件與用法,在界面設計中也具有較高的通用性。
  • 騰訊手機管家5.0正式發布 簡約界面再引潮流
    從業界首創的小火箭加速到5.0版輕薄、簡約的全新UI界面設計,騰訊手機管家都以引領潮流的行動詮釋著其「玩得酷,靠得住」的品牌理念。今天發布的5.0版,不僅以獨創的摺疊式功能菜單大大增加了使用效率,在強化行動支付安全領先功能基礎上,還支持二維碼安全掃描、公共WiFi安全檢測、大文件和緩存清理、QQ安全登錄等多項新功能,使用戶手機能夠得到更為綜合、全面、個性化的安全保護。
  • 「騰訊課堂大師班」羅子雄:好的設計是宜家和麥當勞
    在演講之後,我們有幸採訪到了羅子雄,和他聊了聊很多人關於設計的困惑,以及許多設計師實際會遇到的問題,以下內容整理自採訪對話:Q:今天騰訊課堂主題是「我們如何做設計」,你在很多場合和大家分享過關於設計的心得,那麼在你自己學習設計的過程中,有沒有什麼特別的技巧?A:設計就跟所有的知識技能是一樣的,多看多練,沒有什麼特別的技巧。
  • APP界面中的「圖形創意」!
    文/溫郭英 APP通過屏幕完成功能操作,以滿足用戶各種需求,APP的共性特點,首先是清晰的視覺傳達,具有明確的指代性和識別性;其次是高效率的搜索和瀏覽體驗,通過導航功能促成用戶好感;最後是幫助人機互動組件,組件設計優劣能夠決定應用軟體是否好用。圖形創意通過界面傳達信息的精準和可信,提升APP界面的視覺感染力和服務效能,促使產品有自我營銷的的功能。
  • 最全ui設計圖標解析,圖標概念大揭曉
    圖標的分類按功能分類圖標分為:1、啟動類圖標,2、系統圖標1、啟動類圖標這類圖標的典型代表有我們手機上的app應用,在手機界面上的展示狀態就是屬於啟動圖標!比如有微信,qq,酷狗音樂,等。(如下圖所示)2、系統圖標系統圖標也是現階段在我們手機屏幕上出現最多的圖標,在app界面中是不可或缺的一部分!