文章分析了 UI 從無到有的流行趨勢過程,從最初的擬態設計到當下設計,給出發生設計趨勢變化的背景和原因,幫助大家理解設計在每一個時期與人們需求之間的關聯,隨著人們在每一個時期需求的不同,設計趨勢也隨之改變。文章還嘗試預測新的UI界面趨勢,大膽提出變形設備的想法,給予設計者一些關於未來新的思考和指引。
從擬態到當代設計等等:
01 如何破冰?
當第一部 iPhone 推出時,使用多點觸摸手勢與小型設備進行交互的想法非常新穎。為了使人們與界面交互更加舒適,最初的設計使用 Skeuomorphism(擬物化)設計 UI 界面。
往昔時光的設計:它可能看起來“過時”,但絕對可愛。
基本上,擬物化意味著採用了“現實世界”元素,例如,書籍的木製書架,筆記本的皮革裝訂和翻蓋式 CD 封面,這些物理世界的常見元素會幫助你快速理解數字世界。通過使用熟悉的對象,它降低了新用戶的進入門檻。該界面與你之前見過的任何東西都不相同,但是你依然感到很熟悉。
02 人們習慣了觸摸設備
當人們漸漸習慣了使用手機,(在手機上的)木頭,金屬和皮革元素開始顯得過時和無聊。我們渴望新鮮而靈活流暢的、更接近數字化的新事物。
更加扁平化嗎?
我們之所以有這樣的需求,歸結為我們瞭解手機屏幕是“平面”的這一事實。偽 3D 元素和真實世界的紋理在心理上與這種“平面”產生了衝突,從而產生了不和諧。
由於我們手機的玻璃是100%平面的,因此界面看起來像是內置的立體模型
03 扁平化來了!
所以隨著 2013 年 iOS 7 的發佈,Apple 決定“走扁平化”風格。大多數陰影都消失了。現在,按鈕大多只是文本鏈接。一切都是二維的,沒有偽 3D 模型。
人們討厭它!
扁平化的想法來源於我們認為界面本就是平面的 —— 一堆像素顯示在平坦的錶面上。儘管準確而當代化,但人們意識到有些東西丟失了,失去了將按鈕按下而不是觸摸平坦錶面的趣味。
Windows Phone 嘗試了這種大膽的方法(並且是以一種非常漂亮的方式),但是這種“無樂趣”的感覺以及幾乎沒有應用程序支持配合,導致了該平臺被終止。
顯然,我們喜歡那種錯覺。
扁平化使界面更貼近玻璃,但缺少來好玩的趣味性
04 我們需要真實的“質感”
Google 在 2014 年推出了“Material Design”(材料設計語言)。基於 Android 的數字產品設計系統的基本原則是使用層級的概念。它不再單純依靠 X 和 Y 軸,而是又引入 Z 軸的概念。
與其他界面元素(例如按鈕和表格堆疊在卡片上的設計概念,是對 iOS 7 單調乏味的扁平化進行了一次不錯的升級。深度為界面元素賦予了層次和用途。它還有助於更快地使用戶識別它們的含義。比起平坦的形狀,投射陰影的按鈕更容易識別為按鈕。
從側面看,我們可以看到每個對象在 Z 軸上占據了自己的空間
材料設計語言讓一切變得簡單
為了更加簡潔,它是扁平化和極簡化(卡片)的結合,並從擬物體時代提煉了“深度“這一維度的概念。設計師不再試圖假裝我們的界面是由木頭,皮革或金屬製成的。它由“數字”卡製成,但具有空間感和深度感。
因此,在某種程度上,它既保留了極簡主義又保持了清晰感,同時又添加了急需的“有趣”元素,既保留了以前的風格,又融合了兩種風格。
由於它最初只有 Android 系統使用,因此我認為它並不是一個完整的趨勢,而是向當前設計趨勢的良好過渡,這個轉變在當時是非常必要的。
在擁抱扁平化的變革時,大多數應用程序外觀同質化的速度越來越快
05 然而,材料設計語言更快變得枯燥
由於有嚴格,有據可查且易於遵循的規則,Material Design(材料設計語言)很快就被應用到幾乎所有的 Android 系統上。
這個事實加上有限的選擇(除了顏色之外,你實際上做不了什麼)很快變得令人厭煩。花了兩年多的時間變得非常無聊,被 Google 更新之後,包含了一些“有趣的”和差異化的元素。現在,你可以添加各種裝飾和怪異的角度,在規範內使你的產品更具有個性。
但是那並沒有太大幫助…
當代設計 – 如何使材料更加“友好”
06 Dribbble 引領了新的趨勢
現在幾乎不可能找出是哪位設計師在 2016 年左右開啟了這股“當代”趨勢。
當然,這隻是一個獲得更多點贊和關註的設計方案,但它風行一時。?
通過引入柔和,多彩的陰影和曲線,它創建了具有“積極氛圍”的應用程序樣式。大量借用 material design(材料設計語言)中物體在彼此之間分層的方式,但是它將扁平化元素與一些更重要的突出元素相結合。這比無聊的 material design(材料設計語言)卡片在美學上令人愉悅。
隨著 iPhone X 的發佈,它進行了完善,其中包括更大的邊框半徑,以及過於複雜的動畫和過渡效果。
07 下一個趨勢會是什麼?
近 3 年來,我們一直致力於各種現代設計,而當您在 Dribbble 上搜索 “app“ 時,您會發現其中 99% 看起來都是一樣的。
這種當代趨勢看起來不錯,但我們又陷入了同樣的陷阱。
現在該讓“豆形軟糖”風格退休了嗎?
人們喜歡當代設計,因此我們在所有設計中都堅持在漸變的基礎上使用柔和的彩色陰影和大膽的字體,所以所有的設計看起來都相似。
由於在真實上線的產品中實現這樣的改變比較困難,因此需要花些時間才能在視覺風格上趕上 Dribbble 的發展。但是最終這種情況還是發生了,並且越來越多的應用程序開始看起來相同,只是它們使用的顏色有所不同。
08 新擬物化?
新擬物化(New – Skeuomorphism)是一個會帶來差異化的潛在趨勢。在現代設計上它有了進一步的超越,並帶來了一些偽 3D 元素,儘管它不像以前那樣更紋理感和真實感。
加上一點點的 3D 逼真度,使這些應用程序脫穎而出,再次使用戶感到“新鮮”。
註意環繞在卡片上的價格標簽和按鈕上非常微妙的紋理。有一些額外的深度,但是任何地方都沒有過度的紋理感。
我認為這是 UI 設計可能會走向的方向。畢竟人們喜歡欺騙自己,回到 100% 扁平時代可能不會發生了。
但是,還存在一個非常科幻的選擇?
09 可變形的屏幕設備?
自從界面在玻璃屏幕下偽造了 3D 效果以來,也許我們沒有用正確的方式去看待它?
如果我們可以創建某種流體 / 觸覺 / 力的 T – 1000 型玻璃,它不但能真的在屏幕上構建立體的對象,而且還能讓其稍微突出一些呢?然後一個 3D 的按鈕就可以在真實環境中出現,在界面上還會呈現出保證視覺連續性的陰影。通過將其按下,我們不僅可以感覺到玻璃的壓下感,還可以感覺到實際的運動。
如果玻璃在 3D UI 元素的作用下可以向外彎曲怎麼辦?
平面光滑的屏幕上有了能進行物理變形的鍵盤,這樣的變化肯定會提升打字技術
但是在此之前,我們可能會幾次經歷一些全新的趨勢(也可能是一些熟悉的趨勢)。
你如何看待 UI 的未來?
原文:https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c
作者:Michal Malewicz
譯者:Edilis;公眾號:三分設
本文由 @三分設 翻譯發佈於人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基於CC0協議