網(wǎng)頁設(shè)計最新趨勢

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

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

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