網頁設計最新趨勢

 菜單
  就像段落一樣，菜單的大小也大大增加了，你還記得那些2005年帶有像素字體的小菜單嗎？看起來令人難以置信的是，在幾年的時間里，我們已經達到了規(guī)模如此相反的一端，時尚是如此變化多端～
  在這種情況下，菜單的大小也受移動模式的影響。在移動界面的設計中，全屏覆蓋菜單的使用是常見的，因為界面是基于觸摸的，并且較小的觸摸目標對于用戶而言比較大的觸摸目標更難。
  它不僅僅是大小，還有裝飾元素，懸停和所有類型的微觀互動和效果。
  Bersi Serlini菜單與懸停效果在菜單的啟示
  用插圖塑造一個獨特的聲音
  插圖是作為一個不同的元素，因為它在文化上提醒我們藝術的獨特性。近年來插畫在科技行業(yè)蓬勃發(fā)展的時代，Slack、Airbnb、Mailchimp、Dropbox和WeTransfer等公司都展示了來自不同設計師和藝術家的作品，讓用戶在等待的過程中更加愉悅，同時也傳達了情感和品牌價值。
  更多案例:Illustrations for Slack,Mailchimp,Kikk 2018,Airbnb.design
  如今，與知名插畫家合作是一種常見的現象，在設計系統(tǒng)中，插畫經常被用作傳達信息的一種額外表達方式，我們可以在Slack和Glitch的例子中看到這一點。
  更多案例:Gucci glasses,GLITCH,Mariano Pascual,Eat Genesis

  變量的字體
  可變字體目前沒有足夠的瀏覽器支持，但應該在我們的技能列表中學習。可變字體是OpenType字體規(guī)范的發(fā)展。一個字體文件可以包含多種字體變體。使用CSS可以訪問這些變化和樣式之間的動畫轉換。
  在這個例子中，可以看到一個可變字體，我們可以修改weight和serif的參數，這不僅允許創(chuàng)建動畫，還允許創(chuàng)建字體的多種變體。
  Variable Fonts，Variable fonts guide
  可以通過壓縮或擴展CSS中的字體軸來實現一般的動畫，但是它的其他屬性將由字體設計器決定。David Berlow設計的Decovar是一個很好的例子，它是一種多風格的裝飾性變量字體，用于參數化多個屬性。
  基于排版的布局
  排版一直是設計的基礎，但現在我們擁有高度的自由，表達和實驗，排版正在占據其應有的位置。
  目前，字體的發(fā)展趨勢很有個性，但這并不是說要選擇字體或它們的組合，而是使用“單詞”作為美學和語義的主要元素。文字現在在設計中有了實體的存在，這是一個結構元素，其余的組成部分圍繞著它流動。
  “與其說是選擇字體或它們的組合，不如說是使用“單詞”作為美學和語義的主要元素?！?br />   排版突出顯示的用途和效果之一是將字體作為圖形元素處理，應用變形、效果和動畫，以及將不同的樣式和權重與粗體、斜體、襯線、無襯線相結合，并在同一段落中愉快地概述了所有這些元素。
  更多案例：Beyond Beauty,Agnes Lloyd Platt,Louis Ansa,Aristide Benoist
  修飾、擴充和大段文字
  段落不再受簡單列分布或包裝幾何形式的限制。未來的段落設計是更大的，充滿了懸停，表情符號，圖片，樣式的變化，和陌生的分布。
  動畫：次要元素和有機運動
  動畫次要元素是在不消耗過多資源的情況下在視覺上豐富網站的方法，這可能導致加載時間增加。這些動畫通常構成微交互的一部分，創(chuàng)造流暢的用戶體驗。
  借助Lottie和Bodymovin等工具，流暢，有機和更復雜的動畫栩栩如生。當然，CSS和Javascript為動畫界面提供了許多可能性，它們提供了很多參數控制，緩和曲線，混合模式，濾鏡，svg變形等，但需要很多技巧。
  使用有機變形動畫的矢量元素，在界面和微交互中模仿液體或粘性效果，當然排版也不能免除這些類型的動畫和變換！
  可愛的微交互和迷你游戲
  正如之前提到的，需要以更通俗的方式表達，這是許多品牌的聲音和基調的一部分。這種需要在一般文本，微觀圖和動畫微交互中的小細節(jié)中體現出來。
  在UI動畫和微交互中的Femme插圖微交互
  更進一步，增添一絲幽默和趣味，我們發(fā)現迷你游戲，作為一種資源，用于在內容加載時讓用戶更加愉快，同時展示設計師或開發(fā)人員的技能，他們與用戶建立密切和有趣的聯系。
  野蠻主義和主義
  在我們的布局、文本和交互中流動，風格已經逐漸完善，為了界面的可用性而逐漸完善。
  Search filter and colorful product scroll navigation In Brutalism
  圖像效果、變形和波浪效果
  “GLSL著色器意味著，創(chuàng)建的所有頁面都必須在某個地方包含某種扭曲或影響。”
  Zoom transition In Filters and Effects
  按住
  這是有史以來最隱蔽的導航。永遠不會有更令人不舒服的互動，當你次看到它時看起來很有趣但是當新奇用完時它就不再有趣了。在可發(fā)現性方面的按住是一個糟糕的決定?？傊m然它已經在一些實驗性的網站上出現過，但它不應該成為一個共同的趨勢。
  獨立設計師時代+創(chuàng)意開發(fā)者
  在這些獨立設計師或創(chuàng)意開發(fā)人員中，發(fā)現基于細微交互方式的圖像，排版和小細節(jié)的最小組合。
  自定義光標和鼠標效果
  自定義光標已經發(fā)展并且被用作新奇事物，通常根據它們重疊的元素混合效果來修改光標的顏色和不透明度。這些“反應性游標”響應于其他元素或用戶的動作而改變形狀，大小，不透明度，顏色或動畫。有機運動是光標復出中看到的另一個共同特征。
  排版跟隨光標-ContraryCon In Hovers，Cursors和Cute Interactions

  混合滾動
  我們一直看到的最常見的事情是使用長滾動的布局，但是使用分割的部分，而不是純粹的“單頁面布局”，內容的某些部分是分開的。他們還保留了諸如視差之類的微妙效果，當然還有大量使用滾動觸發(fā)動畫和滾動顯示的內容。
  在badass.shoes-up.com中，我們看到了不同方向的滾動的說明性示例。它的導航結合了垂直滾動和水平滾動的單頁布局。
  在導航中混合水平和垂直滾動
  1配色方案
  這種趨勢是配色方案本身以及它作為主要設計元素的使用方式-談論的是具有在整個產品體驗中始終如一地應用的個性的配色方案。
  一般來說，我們看到的方案有兩種或三種原色和各種二次色。飽和和柔和的色彩相結合，為醒目的高對比度效果讓路。背景中有許多簡單大膽的顏色與攝影，排版和插圖相結合的例子。
  Frans Hals Museum by Build in Amsterdam
  混合2d和3d元素
  3D動畫在過去幾年中對設計產生了很大的影響。Blender或Cinema 4D等軟件使其可供大量廣告素材使用。VR，AR和3D打印正在重新激活3D數字內容的制作。
  視差效果使用由不同Z軸的2D平面構建的假3D。在CSS動畫中很常見的是模仿這種三維效果。這種趨勢的基本思想是搜索對比度，平面顏色上方的3D元素或2D平面創(chuàng)建3D假場景，為幾乎單一的圖像提供位置。
  編輯風格的布局
  由于CSS網格和flexbox的逐步標準化，我們正在實現更“自由”的布局，這些布局不受限于必須在其響應斷點的不同列中重新構建的網格。我們應該放棄響應式網頁設計的幻想，沒有人希望單個設計能夠以靈活的方式響應10個設備。
  AI，PWA，用戶體驗寫作，語音界面等等......
  1用戶體驗寫作，微觀和品牌個性
  在過去幾年中，我們目睹了公司,企業(yè)的信息和交流方式發(fā)生了重大變化，語音和語調已成為基礎。品牌正在嘗試使用更人性化的口語-更能讓人聯想到與朋友交談而不是與客戶打交道。
  以前看不見的微縮膠片現在具有專為品牌設計的聲音和色調，并經過精心設計，以保持整個用戶體驗的風格和連貫性。
  幽默是這里的關鍵，因為它是一種與用戶同情并在網站上花費時間盡可能愉快的特殊方式。
  用戶體驗師扮演著非常重要的角色，負責使網站易于理解，幫助用戶完成任務，在嘗試實現其主要目標時發(fā)現他們遇到的界面，內容和其他所有內容，這通常是消費產品或服務。
  1PWA是新的響應式網頁設計
  我們可以正式說PWA是新標準，類似于新的響應式網頁設計，因為它們代表了進步。移動版本不是簡化版本，它是一種不同的體驗，可以進行優(yōu)化以獲得良好的性能，索引和轉換。
  漸進式網絡應用程序允許開發(fā)人員和設計人員使用全屏和自定義導航欄，自動更新，不加載其他URL的部分之間的過渡，主屏幕中的訪問圖標以及能力，基于典型的本機應用程序體驗的Web技術創(chuàng)建應用程序脫機并接收通知。
  但的是，他們保持搜索引擎優(yōu)化和索引等網絡應用程序的積極特征，與Google Developers Team合作閱讀我們的書“漸進式網絡應用程序-移動網絡的未來”。
  設計系統(tǒng)
  隨著越來越多的公司意識到使品牌的每一個數字表現形式具有可擴展性和凝聚力的好處，設計系統(tǒng)將繼續(xù)普及。它們是設計團隊的基本工具，允許開發(fā)人員之間的溝通。
  一個設計系統(tǒng)是一個宣言的設計的各個方面，并在創(chuàng)建新的內容重用元素和隱含的過程迭代任務。它涉及諸如復制，聲音和音調，動作等的書寫風格之類的點。設計系統(tǒng)伴隨著風格指南和模式或組件庫。
  模式庫收集圖形用戶界面的所有元素，如按鈕，表單字段，警報，每個元素的懸停狀態(tài)等。
  該風格指南收集的排版，重量和尺度，利潤率，填充，網格，圖標和調色板的所有用途。這些定義包括應用于每個元素的CSS樣式，因此可以與前置者直接通信，并且更容易進行未來的更改。
  AI Everywhere，設計隱私和安全
  人工智能算法只需要100個喜歡就像你的母親一樣準確地預測你的個性。中國人工智能公司SenseTime一直在大規(guī)模掃描和分類人口，他們甚至設法通過實時面部識別系統(tǒng)在音樂會上扣留違法者。AI已經無處不在，因此我們確實需要在人工智能的所有用途中設計隱私，安全和透明度。
  我們已經看到了黑暗模式的情況，我們可以在這種情況下與機器人交談，或者讓AI助手在沒有意識到的情況下執(zhí)行我們的個人任務。大公司正在申請專利制度以優(yōu)化其宣傳回報，以不加區(qū)分和不安全的方式使用我們的個人詳細信息，而機器人也被用于通過操縱選舉等來影響公眾輿論。
  正如在電子書“AI驅動設計”中看到的那樣，有很多AI出錯的例子。但是，另一方面，我們有許多積極的例子，例如LYNA，它使用谷歌計算機視覺來檢測乳腺癌，正確識別99％的病例中的轉移模式，而人類病理學家發(fā)現的這一比例為62％。
  通過Web技術進行機器學習
  通過機器學習了解什么是模型？如何從ML開始？它是如何訓練的，如何實施它？幸運的是，今年已經充滿了人工智能網絡實驗的例子。TensorFlow.js是一個非常強大的工具，基于Node.js.可以使用現有的javascript ML模型，甚至創(chuàng)建自己的模型，通過使用來自直接連接到瀏覽器的傳感器的數據訓練或重新訓練現有模型。
  移動鏡子。根據您的動作查找圖像
  虛擬助手
  今年，虛擬助手已經抵達群眾，并將自己定位為消費產品。Siri和Google智能助理已廣泛應用于移動設備，并已轉變?yōu)榧磳⒊蔀楸夭豢缮俚碾娖?。Google Home，尤其是Alexa正在開發(fā)龐大的生態(tài)系統(tǒng)，使我們能夠與他們進行互動并將其整合到我們的產品和服務中。
  根據亞馬遜的這份報告，從2018年9月1日開始，已經開發(fā)了超過50,000個Alexa技能。
  由于移動設備是我們用來訪問互聯網的主要設備，因此演進到語音命令界面將是一個簡單而自然的下一步。在移動鍵盤上引入文本既復雜又繁瑣，并且會產生許多錯誤。
  未來是3D
  在過去的幾年里，3D資源的股票和社區(qū)已經大大增加，他們的未來更加光明。這是因為移動應用程序市場的游戲創(chuàng)建，通過Cinema 4D，Blender和Unity等工具輕松實現，3D打印的出現成為其增長的另一個觸發(fā)因素。今天有許多社區(qū)，例如Sketchfab提供了大量資源來下載，購買和銷售可用于任何媒體，WebGL，游戲和3D打印的模型。使用VR工具創(chuàng)建了無限的場景。
  增強現實轉型和內容創(chuàng)作者的天堂
  現在我們面臨著一個重要的挑戰(zhàn)，即為我們新的增強世界提供高質量的內容。對于我們來說，作為數字創(chuàng)意，它是一個神話般的情況。“未來得到增強”，我們周圍的每個元素都將擁有各種各樣的信息，我們用不同的信息層和互動復制世界。
  諸如AR，VR及其融合混合現實（MR）和擴展現實（XR）等技術將添加更多層信息，這些信息在設計界面和內容方面需要大量。簡而言之，是創(chuàng)作者的黃金機會。
  更少的應用程序和更多的平臺集成
  虛擬助手減少了必須管理的應用和平臺的數量。很快將擁有“技能”和更全面的任務，這將節(jié)省大量時間。通過API與所有這些平臺進行通信，并向未來展望內容將更加獨立于設計。
  語音命令接口
  語音命令接口或會話設備是相關的，因為它們減少了交互的時間和精力。使用語音命令，我們可以登錄到平臺，省去了記住和輸入密碼，瀏覽應用程序，了解其界面，內容結構等等的麻煩，很快我們就能夠配置數百個動作并使用簡單的單詞作為一個觸發(fā)器。
  視覺搜索
  相機是新的搜索框，許多應用程序最終將推出已在Snapchat，Pinterest Lens，AliExpress和Google Lens中找到的搜索系統(tǒng)。
  2014年，亞馬遜憑借其Flow功能成為視覺搜索領域的先驅。目前無效的Flow使用圖像識別來尋找產品。
  作為AR早期采用者，Snapchat不會錯過視覺搜索。2018年9月，它宣布與亞馬遜進行戰(zhàn)略合作的新功能。這個新的Snapchat功能允許用戶使用相機“掃描”條形碼。當結果為肯定時，其他產品信息將以亞馬遜卡的形式與其他類似產品和購買按鈕一起顯示或“增加”。