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

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

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

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