已經(jīng)有越來(lái)越多的APP看起來(lái)都一樣，那么UI的進(jìn)化到底經(jīng)歷了怎么樣一段歷程，他又是如何變化的，下一個(gè)UI趨勢(shì)又是什么呢，一起來(lái)今天的文章中尋找答案吧！
從擬物化到現(xiàn)代化設(shè)計(jì)及其以后的變遷
?沉寂是如何被打破的 ?
當(dāng)?shù)谝徊縤phone問(wèn)世時(shí)，在小型設(shè)備上采用多點(diǎn)觸碰的各種手勢(shì)進(jìn)行交互的想法極為新穎。為了讓人們?cè)谑褂脮r(shí)感覺(jué)更舒服，最早的UI界面設(shè)計(jì)應(yīng)用了擬物化。
來(lái)回顧一下往昔時(shí)光吧。它看起來(lái)也許“過(guò)時(shí)”了，但絕對(duì)是可愛(ài)的。
擬物化主要是指采用來(lái)自“現(xiàn)實(shí)世界”的元素，就像木質(zhì)書架，皮革筆記本和你瀏覽過(guò)的CD封面，這些元素會(huì)讓你對(duì)新的數(shù)字世界有所認(rèn)識(shí)。通過(guò)使用人們熟悉的對(duì)象，它降低了新用戶的進(jìn)入門檻。盡管這個(gè)界面不像你曾經(jīng)見(jiàn)過(guò)的一切，但它讓你感到熟悉。
人們習(xí)慣了觸控設(shè)備。
然而，人們?cè)谝欢螘r(shí)間后習(xí)慣了手機(jī)，那些木頭、金屬和皮革類的元素開始顯得陳舊乏味。我們渴望一些帶來(lái)新鮮感，靈活流暢，并且更接近數(shù)字化的東西。
來(lái)點(diǎn)扁平的？
我們之所以有這樣的需求，是因?yàn)橐庾R(shí)到手機(jī)屏幕的“扁平”。偽3D效果與真實(shí)世界的紋理被放置于平滑的手機(jī)屏幕上，讓人在心理上產(chǎn)生沖突，從而感受到不協(xié)調(diào)。
因?yàn)槲覀兪謾C(jī)的玻璃是100%平滑的，所以這個(gè)界面看起來(lái)像是內(nèi)置了一個(gè)立體模型。
?扁平化來(lái)了 ?
因此，隨著2013年iOS 7的發(fā)布，蘋果決定“擁抱扁平”。大部分陰影消失不見(jiàn)，按鈕也大多變成了文字鏈接，一切都變得純二維，沒(méi)有假象的三維元素。
人們討厭它！
扁平化傳遞了一個(gè)觀點(diǎn)：界面就應(yīng)該是這樣-——一組 顯示在平滑表面上的像素 ...這種說(shuō)法盡管既準(zhǔn)確又現(xiàn)代，不過(guò)人們意識(shí)到好像缺了點(diǎn)什么：少了些通過(guò)按下一個(gè)仿真“按鈕”而不是觸摸一個(gè)平面所獲得的樂(lè)趣。
Windows手機(jī)嘗試了這種大膽的形式(還非常漂亮)，但這種“無(wú)趣”的感覺(jué)加上幾乎沒(méi)有足夠的app支持讓這個(gè)平臺(tái)加速死亡。
顯然，人們更喜歡欺騙自己。
扁平化使界面感覺(jué)離玻璃更近，但減少了好玩的趣味。
? 我們需要真實(shí)的“質(zhì)感” ?
谷歌在2014年對(duì)此做出回應(yīng)，它推出了“ 原質(zhì)化設(shè)計(jì)語(yǔ)言” （Material Design）。這個(gè)最終基于安卓的數(shù)字產(chǎn)品設(shè)計(jì)系統(tǒng)的一般原則是使用“層級(jí)”。它不再依賴于單純的X和Y軸，而是又引入了Z軸的概念。
在卡片式設(shè)計(jì)的概念中，卡片作為其他界面元素(如按鈕和表單)堆疊其上的載體。這對(duì)于靈氣不在的扁平化iOS 7系統(tǒng)來(lái)說(shuō)，是個(gè)不錯(cuò)的升級(jí)。增加“深度”讓界面元素具備層次關(guān)系與設(shè)計(jì)目的。它還有助于我們更快地識(shí)別出它們是什么。投下陰影的按鈕會(huì)比普通的按鈕容易識(shí)別得多。
我們可以從側(cè)面看到每個(gè)物體在Z軸上占有自己的空間。
原質(zhì)化設(shè)計(jì)讓一切更簡(jiǎn)單。
簡(jiǎn)單點(diǎn)兒說(shuō)，原質(zhì)化設(shè)計(jì)是一種混合物，它有著扁平和極簡(jiǎn)(卡片)的風(fēng)格，還融合了從擬物化時(shí)代精煉出的關(guān)于“深度”的概念。設(shè)計(jì)師們不再試圖把我們的界面?zhèn)窝b成是由木頭、皮革或金屬制成的。它就是用“數(shù)字”卡片制作的，不過(guò)自帶一種空間感和深度感。
所以在某種程度上，它確實(shí)是前面兩種風(fēng)格的混合，保持著極簡(jiǎn)主義和信息清晰性，又增添了人們急需的“好玩”的元素。
因?yàn)樗畛踔换诎沧肯到y(tǒng)設(shè)計(jì)，所以我認(rèn)為它并非一個(gè)完整的趨勢(shì)，而是向前沿設(shè)計(jì)趨勢(shì)發(fā)展的一個(gè)不錯(cuò)的過(guò)渡。在那個(gè)時(shí)期，這是一個(gè)非常有必要的過(guò)渡。
在擁抱扁平化的變革時(shí)，大多數(shù)app外觀同質(zhì)化的速度甚至越來(lái)越快
然而，原質(zhì)化設(shè)計(jì)讓人乏味得更快。
因?yàn)樵|(zhì)化設(shè)計(jì)語(yǔ)言有著有著嚴(yán)格、齊全的文檔和易于遵循的原則，毫無(wú)疑問(wèn)，很快它就在整個(gè)安卓系統(tǒng)中被完全采用。
因?yàn)橛兄邢薜倪x擇(除了顏色，你真的沒(méi)辦法改變太多)，這種設(shè)計(jì)很快就令人厭倦。它在兩年多的時(shí)間里變得非常乏味，谷歌公司更新了它，把“好玩”和能形成差異化的元素包含在內(nèi)。現(xiàn)在你可以添加各種裝飾和奇怪的角度，使你的產(chǎn)品在原則之內(nèi)更具備屬于你自己的差異化特質(zhì)。
不過(guò)這沒(méi)有多大幫助...
現(xiàn)代化設(shè)計(jì)（Modern design）- 如何使材質(zhì)更“親切”
? Dribbble來(lái)力挽狂瀾 ?
現(xiàn)在我們幾乎無(wú)法知道到底是哪個(gè)dribbble上的設(shè)計(jì)師在2016年左右開創(chuàng)了“現(xiàn)代化設(shè)計(jì)”（Modern design）的潮流。
當(dāng)然，最初它只是一個(gè)為得到更多點(diǎn)贊和關(guān)注的設(shè)計(jì)方案，不過(guò)看看我們現(xiàn)在——它變得流行起來(lái)了。
通過(guò)引入柔和、多彩的陰影和曲線，它創(chuàng)造了一種帶有某種積極的視覺(jué)氛圍的app風(fēng)格。它從原質(zhì)化設(shè)計(jì)大量借用了分層的方式，但它將純扁平的元素和顯得“突出”的重要元素混合在一起。這比原質(zhì)化設(shè)計(jì)中乏味的卡片重疊更賞心悅目。
隨著iPhoneX的發(fā)布，現(xiàn)代化設(shè)計(jì)得到了改進(jìn)，它將更大的圓角邊框以及通常過(guò)于復(fù)雜的動(dòng)效包含在內(nèi)了。
? 下一個(gè)趨勢(shì)是什么 ?
我們已經(jīng)用了近3年的時(shí)間來(lái)探索各種現(xiàn)代化設(shè)計(jì)，現(xiàn)在我們正面臨這樣一個(gè)處境：如果你在Dribbble上搜索一個(gè)“app”，你會(huì)發(fā)現(xiàn)99%的它們看起來(lái)都是一樣的。
這個(gè)現(xiàn)代化的趨勢(shì)雖然看起來(lái)不錯(cuò)，但我們卻又陷入了同樣的困境。
是時(shí)候讓果凍軟糖提前下崗了？
人們喜歡現(xiàn)代化設(shè)計(jì)，所以我們所有的設(shè)計(jì)中都堅(jiān)持在光感漸變上使用柔和且彩色的陰影與粗體字。于是所有的設(shè)計(jì)又開始看起來(lái)一樣了。
不過(guò)在Dribbble之外這個(gè)潮流過(guò)了一陣子才流行起來(lái)，畢竟做好真正的產(chǎn)品要困難一點(diǎn)。但最終這種同質(zhì)化的情況也發(fā)生了，越來(lái)越多的app開始看起來(lái)一樣，而有所不同的僅是它們選取的顏色。
? 新擬物化來(lái)了 ?
我所說(shuō)的新擬物化（New-Skeuomorphism）是一個(gè)會(huì)帶來(lái)差異化的潛在趨勢(shì)。它在現(xiàn)代化設(shè)計(jì)上有了進(jìn)一步的超越，把一些偽3D元素帶回來(lái)了，盡管它的紋理感和現(xiàn)實(shí)感都不如以前。
這些app一旦增添了三維的真實(shí)，就又會(huì)脫穎而出，再次讓人感覺(jué)“新鮮”。
看看卷繞在卡片上的價(jià)格標(biāo)簽，還有按鈕上非常細(xì)微的紋理。有一些額外的深度，但任何地方都沒(méi)有什么過(guò)度的紋理感。
我認(rèn)為這是一個(gè)更有可能的UI設(shè)計(jì)走向。畢竟人們熱衷于自己騙自己，我們可能不會(huì)回到100%的扁平時(shí)代了。
不過(guò)，這里還存在一個(gè)非常科幻的選項(xiàng)。
? 可變形的屏幕 ?
偽3D的界面效果自出現(xiàn)在平滑的玻璃表面之下以后，或許一直以來(lái)我們都沒(méi)有用正確的方式去對(duì)待它？
要是我們能創(chuàng)造出某種流體/和觸覺(jué)有關(guān)/具有T-1000能力的變型玻璃，它不但能真的在屏幕上構(gòu)建立體的對(duì)象，而且還能讓其稍微突出一些呢？接著，一個(gè)按鈕就可以輕易地“出現(xiàn)”在現(xiàn)實(shí)中，在界面上還會(huì)呈現(xiàn)出保證視覺(jué)連續(xù)性的陰影。我們?cè)诎催@個(gè)按鈕時(shí)，不但能從觸感，而且還能通過(guò)實(shí)際運(yùn)動(dòng)，感受到玻璃被按壓著向下。
（譯者注： T-1000 是《終結(jié)者》里的角色，由思想控制的液態(tài)記憶金屬構(gòu)成，是一個(gè)極其復(fù)雜的電子機(jī)體，全身可以隨意變形。）
如果玻璃可以被三維的UI元素?cái)D著向外彎曲會(huì)怎樣？
平面光滑的屏幕上有了能進(jìn)行物理變形的鍵盤，這樣的變化肯定會(huì)提升打字技術(shù)。
但在此之前，我們可能會(huì)經(jīng)歷幾次全新的趨勢(shì)(和一些熟悉的趨勢(shì))。
