2018Web和App設計發展趨勢

2018Web和App設計發展趨勢?

mp.weixin.qq.com

全屏背景圖像

在各種網站上廣泛發現的趨勢之一是使用全屏背景圖像，無論是照片還是特殊渲染的可視化。這種方法使屏幕在視覺上和情感上都很吸引人。此外，它支持所有布局元素的完整性的感覺。

《大都市指南》登陸頁面的幻燈片之一是這樣的：著名的且易於識別的地標將柏林城市呈現給，使頁面既優雅又信息豐富。

這是專為外觀和室內設計可視化設計的網站主頁。為頁面創建和呈現的高質量原始圖形佔據了所有的背景區域：通過這樣的方式，圖像立即設置主題並呈現公司服務。

幾個互動式圖層

UI設計師不斷進行創造性實驗，以找到使網頁具有吸引力和互動性的新方法。其中一個不斷增長的趨勢是應用幾個交互層，使滾動體驗和交互看起來更原始。

這是一個致力於拯救海洋的慈善網站的動畫概念。當幻燈片發生變化時，設計師會同時移動兩層副本。順便說一下，這個概念的另一個流行趨勢是使用紋理和照片作為文本內容的底層，即所謂的圖像填充排版。

自定義數字插圖

自定義數字插圖並沒有失去他們的位置，他們在網路和移動用戶界面上的存在越來越多。自定義圖形以各種風格製作，有效支持頁面或屏幕上信息的快速感知。更重要的是，他們為創意奠定了堅實的基礎。

網站和應用程序應用定製的吉祥物，圖標和插圖來增強頁面或屏幕的外觀，以及增強可用性和直觀的導航。此外，圖像改善了用戶體驗設計的可訪問性，為具有文本識別自然問題的用戶（例如，閱讀障礙或非閱讀學齡前兒童）推動了感知的極限。

另一個增長趨勢是創建數字插圖作為博客文章的標題圖像（順便說一句，你可以在Tubik博客上看到很多插畫）。這絕對是一個很酷的趨勢，因為它為我們經常閱讀的博客和網站增添了美學和美感，同時也拓寬了藝術家的創作視野。

為界面設計的文章3C：顏色，對比度，內容創建的插圖。設計師選擇了關鍵詞「顏色」作為核心語義元素，並展示了用繪畫著色某些東西的文字過程。對比度反映在藝術品的調色板中，而內容則與圖片中所示的辦公室中的傢具元素一起顯示。貓變成了一個明亮的細節，為場景增添了動感和幽默感。

數字代理商登陸頁面的插圖是在使用關鍵字「目標」時建立的。籃球運動員的形象對於主題是完美的，因為擊中籃筐的瞬間是實現目標的真實反映。豐富的色彩為插圖增添了自信和力量的感覺。

為Cuteen應用程序創建的原始圖標：自定義圖形以吸引人且引人入勝的風格標記特定類別的內容。使用封閉技術，設計師使圖標看起來充滿了動態，以便它可以給人一種運動的感覺。

角色設計的故事

毫無疑問，自定義圖形的發展趨勢為界面中的故事敘述打開了更廣闊的視野。越來越多的網站和移動應用程序轉向專門設計的角色，展示故事，設置氛圍，發送消息或以與平台的情緒，語氣和語音相對應的方式呈現優勢。原始角色有助於使交互更像人，與現實世界建立強烈的視覺聯想，並立即轉移所需的情緒。更重要的是，根據構圖，角色可能成為使頁面或屏幕動態活潑的有效工具。

Tubik為我們最近的一個項目Florence App製作的第一套自定義插圖。這是一個在線市場，自雇護士可以在英國找到高薪班次。角色創造了視覺故事，並呈現了應用程序的特點和優點。

這是一個簡單服務的設計理念，幫助用戶在海邊找到住宿。主題插圖支持所需的氛圍，並創造強烈的情感吸引力。

這個例子非常具有社交性：它致力於世界癌症日，該日於2月4日在全球展開。今年的口號是「我們可以。我可以「 這就是設計師看到它的方式，在一個插圖中顯示了從痛苦到生活的所有路徑。

這套動畫插圖是社交網路應用的教程。基於講故事，它旨在以令人愉悅和有趣的方式展示應用程序的功能和性質，這與UI設計的一般風格相對應。

分屏

今年的熱點趨勢是在Web和移動界面上大量使用分屏。這種趨勢並不是什麼新鮮事，之前，它在設計領域的各個領域都消失了，但是現在，它在各種設計領域中又重新出現了。這種方法被認為在響應式設計方面是有效的，因為您可以在不丟失一致性的情況下處理內容變化。更重要的是，它為色彩組合和實驗打開了無限的領域。一些網站使用分屏來呈現同等重要選項的對偶性。

約會應用程序的登陸頁面應用具有顏色對比度的對角分屏，與主題插圖上的對角陰影形成視覺和諧和一致性。它使圖像變得更加優雅和令人印象深刻。

百科全書網站為入口頁面應用分屏，這樣可以將正確可讀的文本部分與漂亮的照片內容分開。

至於移動，分屏是基於黑暗或明亮背景方案的界面的用戶友好趨勢。這是向他們提供正確可讀性的一步，這通常是辯論的問題：應用具有淺色背景的框或空間用於核心數據塊，設計師解決了這個問題並為屏幕或頁面添加了優雅的對比度。

當用戶在目錄中刷食譜卡片時，素食食譜應用程序在背景上應用顏色分割，並且還有明亮和淺色部分的對比度分割，其中淺色部分包含副本並且提供信息。屏幕的分割部分與交互一起轉換，使過程保持生動和清晰。

Watering Tracker應用程序使用水平分割的屏幕：上部背景為暗色，有利於圖表和視覺的優雅呈現，而下部背景為亮色，以保持高度的可讀性。

大膽的排版

大膽而引人注目的排版繼續保持其在網頁和移動布局中的高度存在。在大多數情況下，它成為關鍵設計元素之一，設計人員非常注意保持其可讀性和可掃描性：印刷層次結構和正確字體的選擇是每個UI設計項目的核心任務。

《大都市指南》的登陸頁面應用了複製塊的清晰可視層次結構，並使城市名稱成為布局中最吸引人的元素。更重要的是，它將剪切或刻劃標題關鍵字或標題的技術應用於頁面上的視覺元素。該方法增強了布局元素的和諧完整性，並使排版感覺與界面中的所有內容緊密結合。

以上的應用程序很簡單，簡約，它不使用任何特殊的自定義圖形，所以文本成為了核心設計元素。思考和平衡大膽的排版使它變得更加優雅並具有高度可讀性。

無按鈕UI

雖然按鈕仍然是UI設計的重要元素之一，但今年我們在沒有按鈕的UI交互視角下看到了更多關於移動用戶體驗的創意實驗。這種方法節省了屏幕上的寶貴空間以獲取更多信息，甚至認為它只是基於手勢的虛擬界面的初始步驟。

我們團隊還有一個教育概念，一個百科全書應用程序，它提供了各種主題的互動式信息圖表，這次是大象。與數據的所有交互都基於手勢而不需要在布局中應用任何按鈕。

充滿活力和大膽的色彩

UI設計的另一個趨勢是設計師為應用程序和網站選擇的各種調色板 ，包括明暗顏色的調色板。新字體和字體的多樣性以及可用性研究繼續推動標準。因此，設計師正在嘗試新的組合，這將利用各種顏色，但不會缺乏可用性。在色彩選擇領域，越來越多的創新者將傳統技術與創新方法結合起來，發現了新的視野。

這是音樂新聞應用程序的一個創意概念，可以在一個地方收集有關音樂的歌詞、新聞和測驗。UI通過明亮的配色方案和自定義插圖呈現，使應用程序看起來更加原始。主頁的背景應用幾何形狀，當用戶在屏幕上滑動時，這些形狀會改變它們的位置和顏色。

參與界面動畫

界面動畫仍然是一個熱門且值得商榷的話題。即使有很多人認為UI動畫是一個不必要的功能，使得用戶界面過載並使其變得更加複雜，但大多數用戶都希望動作成為交互體驗中不可或缺的一部分。因此，設計師和開發人員尋求複雜的方法，來使現代應用和網站的動畫具有令人愉悅的外觀和解決問題的功能。通過運動清晰定型支持的微交互為用戶創建快速反饋，使體驗積極和有效，同時導航簡單和直觀。動畫按鈕，開關，切換和其他交互元素通知用戶在瞬間激活所有潛在的快速視覺感知。

這是一個應用程序，使人們能夠單獨或在一個組中跟蹤他們的開支和收入。選擇字體是為了提供高可讀性，因為屏幕上充滿了各種數據。動畫從餅圖到應用顏色標記的列表創建了一個時尚過渡。

Slumber App

Slumber應用程序的特點是採用了主屏的一個很好的和吸引人的一點。它與預載入一起的動畫自定義圖示，使等待的過程變得不無聊和美觀。

登陸頁面的英雄形象

英雄橫幅是在與網頁交互的第一秒內引起用戶注意力的大圖像。它們對主要內容吸引人的視覺呈現做出了很大貢獻。英雄橫幅證明了自己在設定情緒或傳遞信息方面非常有效。此外，除了網頁上的任何其他引人注目的圖形，這是一種既有信息又有情感吸引力的內容。突出的英雄旗幟可以滿足多個目標，例如：

• 引起用戶的注意
• 直觀地傳遞信息
• 支持一般的風格概念
• 設置所需的主題，心情或氛圍
• 有效地展示核心利益或項目。

這可能就是為什麼設計師經常轉向這種技術來實現當今登陸頁面的多樣性吧。

這是名為HeartBeat的舞蹈學院登錄頁的動畫版本。優雅簡約的布局展示了由紐約舞蹈項目，Paul B. Goode，Andrew Eccles，Paul Kolnik的舞者照片啟發的傑出英雄形象。動畫的使用讓圖像變得更加吸引人和具有情感吸引力。

這是一個金融服務網站的概念，幫助養老金領取者有效地管理其財務並增加儲蓄。插圖會立即傳輸消息，使其與標語和複製塊相一致。這樣，當布局中的所有元素協同工作時，網頁看起來就會很吸引人。

海報樣式頁面

使用突出的視覺內容的趨勢在外觀和感覺上像海報的網頁中獲得了一個更多的視角。如果選擇正確的圖像和時尚的排版，它可以使頁面脫穎而出，吸引用戶的注意力。

Tasty Burger應用程序的登陸頁面基於吸引人且引人入勝的動畫：新鮮美味的漢堡創造令人垂涎的效果，立即設置主題和情感吸引力，原始刻字使其具有海報風格的外觀。

實驗調色板和布局

色彩與布局實驗結合的趨勢並沒有失去它的流行性，帶來了新鮮的原創結果。無論如何，有效的色彩實驗不僅僅是純粹的創造力：即使是最有創意和令人驚訝的組合也是基於色彩理論知識，色彩心理學和用戶界面設計師的精湛技藝。

這是一個美食網站，也是一家銷售草藥，油和香料的電子商務商店。它的用戶界面以創意實驗為特色：它將電子商務中傳統的設計技術應用於時尚，但商品的類型卻截然不同，它們是用於飲食和烹飪的。

用戶體驗個性化

今年，我們可以看到更加複雜和深入個性化用戶體驗的強大動力。這意味著設計師提供了更多功能，用戶可以根據個人需求自定義這些特徵。

在完美的食譜應用程序允許用戶設置自己想要達到的目標，比如減肥或體重增加，保持健康的飲食之類的目標。此外，用戶可以標記他們不喜歡的成分，使得應用程序不會顯示包含這些內容的食譜。

「Tasty Burger app」為用戶提供定製自己漢堡的機會，在訂購前添加或排除特殊成分。

Slumber應用程序有一個簡單清晰的過濾器系統，允許用戶選擇最舒適的設置和聲音組合，以完善冥想或睡眠的體驗簡單而明確的制度。調整背景效果，用戶創建個性化的聲音。

高品質的照片內容

之前的UI設計示例也展示了今年更受歡迎的趨勢。大量使用高品質和藝術照片內容。攝影是一種通過逼真和清晰的視覺效果給用戶留下深刻印象以及設置所需關聯的好方法。隨著照片股票網站的快速發展，設計師擁有越來越多的機會去尋找好的圖像；然而，對於許多項目，特別是電子商務項目，創意團隊拍攝的原始內容完全符合產品的目標。在接近日常生活的領域尤其引人注目：時尚，玩具，食品，飲料等。

在Perfect Recipe應用程序中呈現了精美的飯菜和時尚的照片配方。

「Tasty Burger」應用程序使用真實漢堡的照片，使體驗變得積極，並告知用戶他們將購買什麼。

Vinny的麵包店網站使用高品質的真實物品的照片，使網上購物體驗更加接近真實。

2018年繼續增加界面設計的多樣性，這就是所謂的用戶友好體驗的趨勢。數以百萬計的用戶具有不同的品味和喜好，喜歡的風格和角色，對舒適和對他們看起來很好的特殊感覺，使應用程序和網站作為他們日常生活的一部分。我們為它們設計的外觀和功能提供更多的變體和更廣泛的多樣化選項。

如果您想了解更多的前瞻信息和權威專家普修的專業性建議，就留言聯繫我們吧！

參考：Tubik Studio：15 Hot Trends in UI Design for Web and Mobile in 2018