發(fā)布時間:2024-01-25 12:06:09 瀏覽量:192次
扁平化設計這一趨勢已經(jīng)流行了挺長時間,而現(xiàn)在,設計風向似乎要有所轉(zhuǎn)變了,這或許可以從一些設計案例中透露出來。這篇文章里,作者就從案例出發(fā),展示了設計趨勢的演變,一起來看看吧。
設計趨勢來來去去,但一個普遍的趨勢已經(jīng)流行了很長時間,那就是扁平化設計,現(xiàn)在也幾乎是無處不在,UI中的按鈕,Logo,圖形設計等等。
最近感覺設計風向有點變啊,我碰到幾個例子感覺挺有意思的,似乎是印證了這波轉(zhuǎn)變。
在這篇文章里,我主要聚焦在UI設計領(lǐng)域,看看設計趨勢在這方面都經(jīng)歷了哪些變化。
2013 年蘋果推出 iOS 7 后,扁平化設計火得一塌糊涂,界面設計方向一夜之間發(fā)生了轉(zhuǎn)變。雖然蘋果也是借鑒了其他制造商已經(jīng)應用的元素,但其作為行業(yè)風向標的影響力依然無人能及。
從擬物到扁平,iOS 7 帶來了革命性的設計語言飛躍,顛覆了之前 iOS 的視覺風格。蒂姆·庫克將其稱為 “iPhone 以來 iOS 最大的變革”。
看上圖就一目了然(iOS 6 左,iOS 7 右),iOS 7 砍掉了許多元素的 3D 效果,整體扁平了很多。其實改成這樣是有道理的,畢竟擬物設計當初是為了讓用戶更快上手新界面,現(xiàn)在大家都習慣了,設計語言也需要更新迭代了。
十年過去了,絕大部分現(xiàn)代界面設計依然在用這種設計語言。然而,隨著設計逐漸追求更多復雜性和立體感(是的,又是3D,回到擬物設計),一些方面也開始出現(xiàn)變化。讓我們來看看幾個近期的例子。
值得說的是,盡管蘋果公司在引領(lǐng)扁平化設計趨勢方面發(fā)揮了重要作用,但其實靈感還是來自Windows Mobile 和 Android 等產(chǎn)品。Windows Mobile 才是先在主流制造商中第一個用扁平化設計的大廠。
對這段歷史感興趣的可以看看這篇10年前寫的文章:
https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences
先一起看看最近的一個大廠設計改版案例,Reddit最近刷新了它的Logo。你能從上面的圖中看到,相比于舊版,新的設計有了一些3D風格化。
一直以來,扁平化logo是主流,但隨著像Pentagram這樣的設計大廠都開始探索3D化設計風格,預示著扁平化的時代就快要過去了。
現(xiàn)代的品牌logo設計大多是扁平的,因為這樣既清晰易讀又方便調(diào)整大小。真想看看其他公司接下來會怎么玩品牌設計。
回到2020年,在那年的11月,蘋果刷新了它們的MacOS圖標風格。我個人認為,這是在細節(jié)設計上搭配更多3D效果這股趨勢的源頭,我在網(wǎng)上看到了很多這樣的討論。
從 Big Sur 開始,蘋果就在圖標上下功夫,給原生應用圖標加料,讓它們看起來不那么乏味。你看上面那些,陰影也深了,漸變也多了,整個圖標更有立體感。
一看蘋果都整 3D 了,不少第三方應用開發(fā)商也坐不住了,紛紛改起了自家圖標,看起來更立體了。
蘋果在界面設計上向來引領(lǐng)潮流,這次的新趨勢,又不知道多少公司和個人會跟著玩。
Airbnb在最近的夏冬主題設計更新里,玩了不少 3D 和復雜設計。就拿它們新出的“游客護照”來說吧,圖標就跟真“書”似的,點開交互還有翻書動畫,賊逼真。
游客護照打開后,頂部卡片加了陰影,看著更有立體感,一點都不扁了。
Airbnb 在其他地方也玩兒 3D 了,比如“最受歡迎”那個地方,評分都立體起來了,還有那個改版后的“選月份”的按鈕,做得跟真表盤似的。
最后,他們冬天的新版本里,插畫也搞起了等角投影風格,給你們看下面他們那個新版本宣傳片就知道了。
Shopify 對深受好評的設計系統(tǒng) Polaris 進行了重大更新,換了套新花樣!以前那些扁平的按鈕,現(xiàn)在縮小了,還更帶感了,按著賊舒服。
這次重設計也不是瞎改,當初設計團隊說扁平化做能讓界面干凈,理解簡單,用著還效率高??蓵r間一長,商家們就不樂意了,說這界面整得“沒勁”、“乏味”還“單調(diào)”。
改設計主要是為了把軟件界面打造成 “專業(yè)工具”,更加高大上。改動之后,按鈕在點擊時更爽了一些,就像商家們平時在用的物理按鍵一般。
探索的2種不同設計風格
上面這些案例展示了現(xiàn)代設計趨勢的演變,從扁平化設計向更加注重細節(jié)的方向過渡。
扁平化設計固然擁有清晰高效等優(yōu)點,但現(xiàn)代設計更傾向于展現(xiàn)層次和深度。設計師和開發(fā)者應當密切關(guān)注這一趨勢,并做好準備將相關(guān)元素融入自身系統(tǒng),尤其是在大型品牌和產(chǎn)品中逐漸成為趨勢的情況下。
設計趨勢真是一個輪回。
原文作者:Chan Karunaratne(本文翻譯已獲得作者的正式授權(quán))
原文:
https://uxdesign.cc/is-the-flat-design-trend-finally-over-1e531ceb0ffa
譯者:彩云Sky,公眾號:彩云譯設計;人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級視覺設計師。
本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
熱門資訊
1. iPhone6的UI設計尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設計的尺寸規(guī)范嗎?這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范,包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個絕佳的UI設計網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
3. 移動端UI設計中常見的5種APP界面類型,你get到了嗎?
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設計的基本知識
4. 10個免費學習UI設計的網(wǎng)站 提升你的設計能力
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網(wǎng)站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網(wǎng)頁設計、字體...
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓后的職業(yè)發(fā)展機會。
8. 物聯(lián)網(wǎng)APP UI設計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
想了解武漢UI設計培訓班的費用是多少嗎?不知道學UI設計要花多少錢?不妨看看這篇文章,了解UI設計培訓班的學費價格以及學習內(nèi)容。
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
同學您好!