網(wǎng)站地圖|客服中心|設為首頁(yè)|加入收藏

行業(yè)新聞

首頁(yè) > 新聞 > 設計 > 當扁平化設計陷進(jìn)了“扁平”的泥潭

當扁平化設計陷進(jìn)了“扁平”的泥潭

毫無(wú)疑問(wèn),扁平化是當今設計界最火的設計趨勢。

表面上看,扁平化設計很簡(jiǎn)單:

1、不要使用漸變、陰影和紋理。

2、使用簡(jiǎn)單的形狀,大膽的色彩和清晰的排版。

我相信有一些優(yōu)秀的扁平化設計犧牲了可用性和一些更優(yōu)的設計方案,例如為了美感的呈現而犧牲了一致性——這就是我將要重點(diǎn)討論的內容。但是首先,我想要在一定的歷史背景上討論扁平化設計。

1、扁平化設計的起源

“如果設計師認為他的設計很完美,那并不是因為沒(méi)有什么可添加的,而是沒(méi)有什么可減少了!

——Antoine de Saint-Exupery

擬物化設計(Skeuomorphic Design

扁平化設計是相對于它的前輩——擬物化設計而提出的。

擬物化的用戶(hù)界面設計看起來(lái)就像是真實(shí)世界的反饋。

例如,下面的UI界面就反映出真實(shí)世界中音頻壓縮器的外觀(guān)和功能。

0385-11_skeumorphic_design_example

圖片來(lái)源:Klaus G?ttling

擬物化設計起始于20世紀80年代,其初衷是幫助用戶(hù)從真實(shí)世界向計算機界面平滑過(guò)渡。直到最近,作為擬物化設計最忠實(shí)的擁護者,蘋(píng)果公司,把這種設計理念運用在了公司所有用戶(hù)界面和界面設計指南中。

例如,老版的Apple Safari圖標讓人一看就認出是指南針,相比較新版的扁平化圖標而言,它由陰影、漸變和許多精致的美學(xué)設計細節組成。

0385-01_safari_icon_skeuomorphic_vs_flat

扁平化設計的目的

作為一種設計方法,扁平化設計摒棄了所有美學(xué)上的修飾,僅留下(事物的)本質(zhì)特征。

在某種程度上,我視“扁平化設計”為另一種“現代派(modernism)”的稱(chēng)謂,這種稱(chēng)謂是那些隨著(zhù)計算機發(fā)展而成長(cháng)起來(lái)的一代UI設計師定義的,他們認為擬物化是不必要的。

沒(méi)有更多的漸變、投影和紋理,僅用漂亮的排版、簡(jiǎn)單的圖標和形狀、充滿(mǎn)活力的顏色來(lái)幫助構建視覺(jué)層次,并且,最重要的是,更深入地關(guān)注于易用性上。

扁平化設計是由那些要求更高效、界面更友好的理念所推動(dòng)的。

那就是扁平化設計田園詩(shī)歌般的目的,但當前的現實(shí)與之相差甚遠。

2、扁平化設計的問(wèn)題

扁平化設計喜憂(yōu)參半,出色案例很多,失敗案例也不少。

iOS 7的UI矛盾

iOS 7初次登臺之前,謠言四起:隨著(zhù)喬納森·伊夫(Jonathan Ive)帶領(lǐng)的新一屆領(lǐng)導班子上臺,iOS 7終將摒棄掉擬物化設計而走向扁平化。

它真的做到了。

下圖是iOS 7初次發(fā)布時(shí)兩種風(fēng)格的對比。

0385-02_ios_skeuomorphic_vs_flat

圖片來(lái)源:designmodo.com

擬物化元素都不見(jiàn)了。沒(méi)有更多高仿真的圖標和木質(zhì)裝飾。

iOS 7怎么了?

(整體風(fēng)格前后)很矛盾啊。

這些圖標看起來(lái)明顯格格不入,像是由兩個(gè)不同團隊設計出來(lái)的(可能正是如此)。

一些圖標有漸變,另一些沒(méi)有。

0385-12_inconsistent_use_gradient

對于那些有漸變的圖標,有的漸變的方向是相反的。

0385-13_inconsistent_use_gradient02_version02

線(xiàn)條的厚度也不統一。

一些圖標的符號化特征過(guò)于簡(jiǎn)單了,且有的是無(wú)意義的。例如“游戲中心(Game Center)”圖標,是一組有顏色的,玻璃質(zhì)感的圓圈:

0385-03_ios7_game_center_icon

“游戲中心”圖標代表什么意思?這怎么和游戲聯(lián)系起來(lái)?如果這個(gè)圖標后面有它的符號化含義,那這種含義對大部分用戶(hù)就太晦澀了,導致其成為了一種“弱化的隱喻”。

其他圖標的符號化特征又過(guò)于復雜了。例如“雜志(Newsstand)”圖標,比起它臨近的圖標,顯得太負責和突出細節了。

0385-04_ios7_newsstand_icon

不論是否扁平,在創(chuàng )建一個(gè)用戶(hù)友好的設計時(shí),一致性是至關(guān)重要的。

3、由于“太扁平”導致的可用性問(wèn)題

好的,讓我們看看沒(méi)有漸變、沒(méi)有紋理、沒(méi)有投影怎么做。

讓設計保持一致性。

并且試著(zhù)讓它看起來(lái)很有現代感。

就這樣么?小菜一碟啊。

但需要考慮的遠比這個(gè)多。

就像任何優(yōu)秀的UI設計一樣,好的扁平設計應該把可用性排在首位。

扁平化設計的美感需要和可用性息息相關(guān),并且如果我們必須要在“有美感”和“對用戶(hù)友好”之間二選一,后者應該要優(yōu)于前者。

在一些采用扁平化設計的UI界面上,功能性一直被忽視。以Windows 8為例:

0385-05_windows8_ui

圖片來(lái)源:obiletechworld.com

Windows 8的UI是徹底的扁平化。它大膽的配色和平鋪的“現代UI(Modern UI)”設計風(fēng)格為Windows品牌邁出新奇和積極的步伐。

但它的主要問(wèn)題就在可用性上。

微軟想通過(guò)Windows 8為用戶(hù)在桌面上營(yíng)造平板的體驗。

但這沒(méi)用。

Windows的扁平風(fēng)格“Modern UI”(正式稱(chēng)呼為Metro UI)對那些使用鍵盤(pán)和鼠標的人并不直觀(guān)。根據Soluto的月度觀(guān)察報告,44-60%的Windows 8用戶(hù)(包括桌面和平板)更傾向于以前的UI界面而不是“Modern UI”。

盡管人們期待扁平化設計能夠讓事情變得更簡(jiǎn)單,許多人仍舊認為以前的UI界面對用戶(hù)更友好。

Jakob Nielsen對Windows 8進(jìn)行了可用性測試,并列舉了很多它的UI設計問(wèn)題。Nielsen發(fā)現主要問(wèn)題是操作系統的扁平化設計讓用戶(hù)很難知道某個(gè)元素可不可點(diǎn)擊。

0385-06_windows_8_icons_usability

圖片來(lái)源:ngroup.com

盡管新的Windows 8圖標優(yōu)雅又整潔,他們的可操作性并不高。沒(méi)有漸變、投影或是一些讓它們有區分度的特點(diǎn),就很難讓用戶(hù)知道什么可點(diǎn)什么不可點(diǎn)。

有些時(shí)候,扁平化設計會(huì )變得太“平”了以至于影響了可用性。

如果用戶(hù)界面“太平”了,可操作性的元素就會(huì )淹沒(méi)在一片看起來(lái)都一樣的扁平化元素之海中。

甚至對于 iOS 7的控制中心,很多人認為它“太平了”。

0385-07_ios7_control_panel_ui

沒(méi)有任何良好的視覺(jué)提示的話(huà),人們并不知道能和哪個(gè)對象交互。

4、解決方案:近平設計(Almost-Flat Design)?

你如何補救由扁平設計造成的問(wèn)題?近平設計(Almost-flat design)。

作為一種設計方法,近平設計僅僅當扁平化風(fēng)格能提升可用性時(shí)才采用它。它并不會(huì )武斷地認定或暗示漸變和投影是有害的。

近平設計允許利用細微的投影和漸變來(lái)營(yíng)造空間感、距離感、視覺(jué)層次感、視覺(jué)線(xiàn)索和邊緣效果。

Gmail的近平設計

干凈且一致,Gmail近期的UI改版從視覺(jué)上看起來(lái)簡(jiǎn)潔了。很明顯Google的設計師喜歡扁平化設計——他們近來(lái)一致偏向越來(lái)越平的風(fēng)格。

0385-08_gmail_flat_good_example

圖片來(lái)源:idownloadblog.com

但是,但你移動(dòng)鼠標到按鈕上時(shí),你會(huì )發(fā)現懸停狀態(tài)在顏色上有輕微的漸變變化并出現一個(gè)有用的工具提示。

0385-09_gmail_flat_ui_example

這些微妙的“美學(xué)效果”給用戶(hù)一種視覺(jué)上的暗示,告訴他該對象很重要,且可操作。

用戶(hù)馬上意識到Gmail的按鈕可點(diǎn)擊或可輕敲,無(wú)需過(guò)多的擬物化裝飾。

方便地獲取關(guān)鍵界面元素。不需要一次性展示給用戶(hù)20個(gè)按鈕,因為Gmail的UI聰明地引進(jìn)了“漸進(jìn)展開(kāi)”(progressive disclosure)功能:

0385-10_gmails_progressive_disclosure

扁平化設計的未來(lái)

Gmail的界面正是扁平化設計應該有的:

  • 對用戶(hù)友好
  • 一致性
  • 簡(jiǎn)介干凈

iOS 7和Windows 8的扁平化設計風(fēng)格,經(jīng)常犧牲了可用性和針對扁平化確立的設計最佳實(shí)踐。

不過(guò)說(shuō)句公道話(huà),蘋(píng)果和微軟都聽(tīng)得進(jìn)批評。

在iOS 7發(fā)布之前,蘋(píng)果收集了一些可用性問(wèn)題,比如修改“滑動(dòng)解鎖(slide to unlock)”功能,為其增加向右箭頭,從而為用戶(hù)提供更好的視覺(jué)線(xiàn)索,并且他們已經(jīng)調整了Safari和Mail圖標的漸變方向,從而讓操作系統的APP圖標更有凝聚力。

微軟剛剛發(fā)布的Windows 8.1允許用戶(hù)完全繞開(kāi)Modern UI,直接進(jìn)入桌面版。

總之,好的設計——無(wú)論其是否扁平——都應該注重通過(guò)整潔的視覺(jué)交互、有效的設計和易用的體驗為用戶(hù)解決問(wèn)題。

  • 基于用戶(hù)創(chuàng )新

    界面設計日新月異,夢(mèng)創(chuàng )義堅持基于用戶(hù)需求的界面創(chuàng )新設計……

  • 服務(wù)設計思維

    互聯(lián)網(wǎng)的格局發(fā)生的改變,在我們進(jìn)行設計服務(wù)時(shí)更是考慮不同用戶(hù)、不同……

  • 洞察用戶(hù)心理

    洞察用戶(hù)有意識和無(wú)意識的行為以及心理特征通過(guò)構造一系列的服務(wù)來(lái)促進(jìn)……

  • 查看更多 >>

最新新聞Latest News

中小型企業(yè)網(wǎng)站建設完應該如何營(yíng)銷(xiāo)
很多中小型企業(yè)往往糾結于以下10個(gè)問(wèn)題:一、我們起步比別人晚,我們的……
做企業(yè)網(wǎng)站到底做給誰(shuí)看?
設計經(jīng)常時(shí)不時(shí)的遇到一些企業(yè)客戶(hù),常常搞不清楚誰(shuí)會(huì )真正看你的企業(yè)網(wǎng)……
傳統企業(yè)進(jìn)軍移動(dòng)互聯(lián)網(wǎng),從移動(dòng)云網(wǎng)站開(kāi)始
移動(dòng)互聯(lián)網(wǎng)是移動(dòng)通信和互聯(lián)網(wǎng)融合的產(chǎn)物,其發(fā)展的重要基礎便是智能手……
網(wǎng)站建設和運營(yíng)五大細節決定用戶(hù)黏性
網(wǎng)站的成功離不開(kāi)搜索引擎優(yōu)化,更離不開(kāi)最基礎最根本的用戶(hù)群體,如何……
2015年值得關(guān)注的電子商務(wù)5大趨勢
線(xiàn)上線(xiàn)下銷(xiāo)售的界線(xiàn)正在變得越來(lái)越模糊。在2015年,這一趨勢仍將繼續!

本站搜索關(guān)鍵詞:當扁平化設計陷進(jìn)了“扁平”的泥潭 | 北京網(wǎng)站建設 | 北京網(wǎng)站建設公司 | 北京網(wǎng)站建設中心 | 高端網(wǎng)站建設 | 電商網(wǎng)站建設 | 企業(yè)網(wǎng)站建設 | 手機網(wǎng)站建設 | 微站官網(wǎng)建設 | APP開(kāi)發(fā)

銷(xiāo)售熱線(xiàn)

7x24小時(shí)全國售前咨詢(xún)熱線(xiàn):010-57281389

7x24小時(shí)全國售后服務(wù)熱線(xiàn):13020085953 15313016798

手機 | 微信同號:18600846206   QQ:523313456

立即咨詢(xún) 網(wǎng)站建設業(yè)務(wù)咨詢(xún)|客服熱線(xiàn):010-57281389 13020085953

點(diǎn)這里給我發(fā)消息 電子郵箱:cnet99@cnet99.com

營(yíng)業(yè)地址(東部):北京市朝陽(yáng)區伊莎文心廣場(chǎng)A座3層B-22

位置分享

營(yíng)業(yè)地址(西部):北京市豐臺區汽車(chē)博物館東路1號諾德中心9-605

標準網(wǎng)站,網(wǎng)站建設,域名注冊,虛擬主機,獨享主機,企業(yè)云郵箱,網(wǎng)站維護一條龍,北京網(wǎng)站建設中心


  掃一掃 加微信
  微信號:cnet99com

  掃一掃 加關(guān)注
  微信平臺

天潤智力-專(zhuān)注于互聯(lián)網(wǎng)平臺建設與服務(wù)領(lǐng)域 中國互聯(lián)網(wǎng)平臺建設服務(wù)提供商

萬(wàn)網(wǎng)阿里云金牌首席合作伙伴站點(diǎn) 全線(xiàn)代理萬(wàn)網(wǎng)阿里云產(chǎn)品及服務(wù)

中國萬(wàn)網(wǎng)正式通過(guò)ISO9001國際標準質(zhì)量體系認證

Copyright©1999-2024 天潤智力 備案/許可證編號 京ICP備2020040216號-3

公安部備案號 11010502032413