就像劇院的觀眾正在等待他們最喜歡的演員在表演中扮演他們的角色一樣，網(wǎng)頁設(shè)計(jì)師和開發(fā)者每年都會迎接新的趨勢，期待很快就能出現(xiàn)在舞臺上的新趨勢。
距離2019年新年慶祝活動還有一個(gè)月的時(shí)間。我們剛剛慶祝新年，所以現(xiàn)在是時(shí)候討論可能在2019年傳播的最新網(wǎng)站設(shè)計(jì)趨勢了。
但是，您將能夠在沒有任何繁瑣的研究的情況下獲得2019年網(wǎng)頁設(shè)計(jì)趨勢的全部集合。我們猜測這個(gè)有用讀數(shù)的版本將花費(fèi)你不超過半小時(shí)甚至更少。此外，您可以跳過目前不感興趣的趨勢，并查看暫時(shí)至關(guān)重要的信息。我們?yōu)榇四康闹贫艘环N文章計(jì)劃。每個(gè)項(xiàng)目都是一個(gè)錨點(diǎn)，引導(dǎo)您獲取相關(guān)信息。我們希望成為您的一站式，希望這將成為現(xiàn)實(shí)。
當(dāng)人們迎接新的一年時(shí)，他們總會回憶起前一年的最佳時(shí)刻以及發(fā)生在他們身上的最好的事情。我們在2018年觀察到了許多大趨勢。下面列出的一些趨勢達(dá)到或幾乎達(dá)到了受歡迎程度。
我們試圖總結(jié)，系統(tǒng)化并整理所有可用材料，希望這會有所幫助，您將開始對2019年的網(wǎng)頁設(shè)計(jì)趨勢感到非常自在。
為什么遵循網(wǎng)頁設(shè)計(jì)趨勢很重要？
您網(wǎng)站的目的是什么？除了擁有優(yōu)質(zhì)照片外，您的網(wǎng)頁還需要具備一定的背景，以吸引網(wǎng)絡(luò)受眾并傳達(dá)情感。需要一個(gè)例子嗎？想想在上吸引你的是什么？這是一個(gè)令人驚嘆的演示文稿和經(jīng)過深思熟慮的品牌檔案組織，鼓勵(lì)您在網(wǎng)頁上停留更長時(shí)間。通過網(wǎng)絡(luò)的成功和不斷增長的銷售數(shù)量證實(shí)了這一趨勢。
有什么訣竅？客戶認(rèn)為他為產(chǎn)品付費(fèi)，但事實(shí)上他專注于支持產(chǎn)品的形象。客戶在感知某個(gè)特定環(huán)境中的產(chǎn)品或服務(wù)的呈現(xiàn)時(shí)，會想象這個(gè)產(chǎn)品對他有多酷。
相同的技術(shù)應(yīng)用于網(wǎng)頁設(shè)計(jì)。一個(gè)有吸引力和令人難忘的網(wǎng)頁可以吸引用戶的眼球，鼓勵(lì)觀眾發(fā)現(xiàn)更多有關(guān)您的品牌或訂購您的服務(wù)。
/布局
分屏
這種布局類型是我們在2018年觀察到的主要趨勢之一。分屏基本上是一個(gè)布局，其中網(wǎng)站被分成兩半：2個(gè)不同的圖像，有2個(gè)不同的意圖和CTA。
大膽使用顏色
網(wǎng)絡(luò)應(yīng)用和網(wǎng)站往往堅(jiān)持“網(wǎng)絡(luò)安全”的顏色。藍(lán)調(diào)，柔和的顏色，紅色警報(bào)和通知。在2019年，我們期望品牌顏色的變化更多，傾向于飽和和充滿活力的品牌。也許他們看起來甚至霓虹燈或熒光燈。
活版印刷
排版是安排類型的藝術(shù)和技巧，使書面文字變得更具吸引力。隨著設(shè)計(jì)師改進(jìn)設(shè)計(jì)的各個(gè)方面，必須包括排版。平面設(shè)計(jì)和極簡主義已經(jīng)利用大而有戲劇性的字體的力量來做出強(qiáng)有力的陳述。即將到來的一年將在網(wǎng)站上更多地冒險(xiǎn)使用藝術(shù)字體和創(chuàng)意類型處理。
阻止網(wǎng)格
阻止網(wǎng)格特別適合電子商務(wù)網(wǎng)站。它在展示產(chǎn)品方面非常有效。頁面看起來一點(diǎn)都不凌亂。此外，您可以使用塊的大小來強(qiáng)調(diào)重要性（越大 - 越重要）。
雖然您可能無法捕捉到網(wǎng)格的真實(shí)視圖，但事實(shí)仍然是網(wǎng)格在每個(gè)移動設(shè)備的界面上都非常存在。難怪，這些網(wǎng)格被認(rèn)為是您可以啟動移動應(yīng)用程序設(shè)計(jì)任務(wù)的基本設(shè)計(jì)路徑。
更重要的是，2019年將會看到更多有趣的網(wǎng)頁布局，這些布局偏離嚴(yán)格的網(wǎng)格設(shè)計(jì)。當(dāng)然，講故事和高互動性會鼓勵(lì)這種對經(jīng)典網(wǎng)格的軟反叛。
有觀點(diǎn)認(rèn)為，按需網(wǎng)格將取代，和UI Kit。
也許是時(shí)候閱讀Susy 2了嗎？你怎么看？和為快速原型制作做了很多精彩的事情，但截至目前，它們作為設(shè)計(jì)平臺感覺相當(dāng)僵硬。如果你花了很多時(shí)間使用它們，那么你就會知道以優(yōu)雅的方式走出網(wǎng)格塊是非常困難的。您還知道基礎(chǔ)級框架生成的JS和CSS文件很糟糕。UI工具包是向正確方向邁出的一大步，但它仍然是一個(gè)網(wǎng)格系統(tǒng)，您需要修剪以適應(yīng)您的項(xiàng)目。Susy 2花費(fèi)了一些時(shí)間來包裹你的頭，但是一旦你得到它，你就能夠根據(jù)需要調(diào)用網(wǎng)格，同時(shí)堅(jiān)持你自己的輕量級設(shè)計(jì)。
將重新定義響應(yīng)式網(wǎng)格系統(tǒng)
所有現(xiàn)代瀏覽器現(xiàn)在都支持，這意味著更清晰的CSS，更快的網(wǎng)站和更少的布局黑客只是為了讓一些東西垂直對齊。自然地響應(yīng)瀏覽器窗口的變化，因此不再需要渲染流行的響應(yīng)式網(wǎng)格系統(tǒng)。
卡片布局
由首創(chuàng)，網(wǎng)絡(luò)上的卡片（非常接近網(wǎng)格）無處不在，因?yàn)樗鼈円砸豢诖笮〉膲K呈現(xiàn)信息，非常適合掃描。每張卡代表一個(gè)統(tǒng)一的概念。由于它們充當(dāng)“內(nèi)容容器”，因此它們的矩形形狀使得它們更容易重新安排用于不同的設(shè)備斷點(diǎn)。
沒有頁眉/頁腳
該網(wǎng)站看起來不尋常，沒有菜單和標(biāo)簽（更準(zhǔn)確，隱藏它們時(shí)）。這給人一種美妙的清潔效果。用戶只關(guān)注重要的事情。
材料設(shè)計(jì)的興起
是開發(fā)的一種設(shè)計(jì)語言。它已于2014年6月25日在2014年 I / O大會上宣布。許多應(yīng)用程序一直在使用這種新設(shè)計(jì)語言，我們將在2019年看到更多使用材料設(shè)計(jì)的網(wǎng)站。
這種趨勢將擾亂那些網(wǎng)站不像航空公司，銀行，醫(yī)療保健，財(cái)務(wù)等那樣有用的行業(yè)。想想有趣的圖像，表達(dá)，隱藏功能，智能個(gè)性化數(shù)據(jù)等等。
平面設(shè)計(jì)永遠(yuǎn)不會變老
無論多少年過去了，平板網(wǎng)站仍然看起來很新鮮和最新。平面風(fēng)格不斷發(fā)展到新的水平。實(shí)際上它現(xiàn)在是真實(shí)的形式。此表單包含設(shè)備擴(kuò)展和屏幕大小。由于這種新形式，平面設(shè)計(jì)的原則將永遠(yuǎn)不會消失。用戶絕不會錯(cuò)過平板網(wǎng)站想要展示的重要內(nèi)容。
半平面設(shè)計(jì)
這種技術(shù)已存在多年，但僅在過去幾年才獲得普及。它在很短的時(shí)間內(nèi)變得流行，因?yàn)樗旄菀鬃層脩衾斫獠⒛軌蛟诰W(wǎng)站上更快地加載。平面設(shè)計(jì)趨勢隨處可見，從小型企業(yè)的博客到世界上最具代表性的品牌網(wǎng)站。創(chuàng)建和管理平面設(shè)計(jì)非常容易。但隨著不斷變化的趨勢，設(shè)計(jì)師可能會為圖標(biāo)，菜單和插圖添加一些額外內(nèi)容，以便為網(wǎng)站元素注入活力。
刪除非必要的設(shè)計(jì)元素以支持簡單性
設(shè)計(jì)中有一個(gè)想法/概念，即當(dāng)所有非必要元素都被移除后，設(shè)計(jì)就完成了。在2019年，我們可以看到更多這個(gè)想法得以實(shí)現(xiàn)，因?yàn)榫W(wǎng)站希望通過刪除非必要的設(shè)計(jì)元素來尋找簡化設(shè)計(jì)的方法。
網(wǎng)頁設(shè)計(jì)的簡單性：
簡約似乎與平面設(shè)計(jì)有著永恒的友情。在20世紀(jì)60年代早期，我們目睹了最初的簡約或極簡主義浪潮，雖然之間已經(jīng)有大量的裝飾細(xì)節(jié)作品，但今天的簡潔再次回到了前面。現(xiàn)在談?wù)撟钍軞g迎的最新設(shè)計(jì)趨勢之一，你有大多數(shù)設(shè)計(jì)師表達(dá)“簡單”。那么，關(guān)于簡單性的嗡嗡聲是什么導(dǎo)致它在長期統(tǒng)治的精美裝飾性演示中占主導(dǎo)地位？以下五點(diǎn)有效地總結(jié)了簡約的重要性 -
減少分心- 一個(gè)簡單的設(shè)計(jì)消除了不必要的額外功能分散注意力的機(jī)會，例如突然剪輯藝術(shù)或不確定的斜面，否則會使設(shè)計(jì)變得過于復(fù)雜。
清晰的信息處理- 難道您不認(rèn)為大腦更容易從簡單的圖形處理數(shù)據(jù)而不是從具有復(fù)雜3D視角的設(shè)計(jì)中處理數(shù)據(jù)嗎？答案肯定是肯定的，在這里你有簡單的贏家。
簡單的編碼- 簡單的設(shè)計(jì)不會要求開發(fā)團(tuán)隊(duì)提供太多不必要的額外工作，而您的開發(fā)人員會更喜歡您。
快速裝載- 簡單的網(wǎng)頁設(shè)計(jì)意味著更少的細(xì)節(jié)，確保更快的裝載，您將有快樂的訪客。
美觀- 當(dāng)您可以保持簡潔和簡單時(shí)，您已經(jīng)掌握了精致的藝術(shù)，這保證了美學(xué)上令人愉悅的工作，受到所有人的喜愛。
當(dāng)代平面設(shè)計(jì)場景讓設(shè)計(jì)師們越來越偏離裝飾華麗的圖案，以保證時(shí)尚簡約的簡約圖案。今天這是一個(gè)繁忙的時(shí)代，我們希望一切都精簡，以便我們能夠更快地掌握在我們面前的演示文稿，以及簡約本質(zhì)的“簡約”和形式與功能之間的平衡表達(dá)，就像夢一樣。
下面的圖表說明了設(shè)計(jì)簡單性的重要性和必要性，并揭示了在演示文稿中實(shí)現(xiàn)最佳簡潔性的主要規(guī)律。
更少的頁面
如果現(xiàn)在更少，那么使用單頁設(shè)計(jì)或簡化的多頁設(shè)計(jì)將吸引更多用戶訪問您的網(wǎng)站。訪客經(jīng)常回避頁面繁重的網(wǎng)站。
沒有人想再點(diǎn)擊多個(gè)頁面了。隨著越來越多的人通過他們的移動設(shè)備訪問互聯(lián)網(wǎng)，這一天，一頁設(shè)計(jì)很容易，也更方便。當(dāng)您設(shè)計(jì)一個(gè)單頁網(wǎng)站時(shí)，確保創(chuàng)新滾動以使訪問者更輕松，更有趣是有意義的。
固定寬度居中的網(wǎng)站布局
在過去幾年中，大多數(shù)網(wǎng)站都使用了“綁定”或?qū)挾龋?00％的設(shè)計(jì)元素，以便圖像和部分之類的內(nèi)容可以直觀地拉伸瀏覽器視口的整個(gè)寬度。在這種趨勢變得流行之前，大多數(shù)網(wǎng)站都是固定寬度并且在頁面中居中。你可以知道網(wǎng)站在哪里結(jié)束了。
復(fù)古風(fēng)格靈感來自80年代
80年代早期和90年代早期笨重的計(jì)算機(jī)和大量手機(jī)的多彩時(shí)代是網(wǎng)絡(luò)上復(fù)古潮流的最新風(fēng)格的主要靈感來源。在2019年的網(wǎng)頁設(shè)計(jì)中，像素化的圖標(biāo)和文字，銀河背景和交互式移動的恒星和行星將會很多。
自定義主頁將在2019年停留
自定義主頁是一項(xiàng)有趣的發(fā)明。基本上，它意味著以網(wǎng)站的主要目的 - 它的主要目標(biāo) - 并通過引入高度優(yōu)化的外觀將其置于類固醇上。這種外觀旨在吸引訪客的注意力，在他們被引導(dǎo)到特定行動之前不要放手。
自定義主頁基本上是一種登陸頁面。在某種程度上，它們與網(wǎng)站設(shè)計(jì)的其他部分不同，并且通常也更具視覺效果。
一個(gè)好的自定義主頁提供了一種更好的方式來歡迎第一次訪問者，并且更有效地講述故事。
使用不同的幾何形狀
這是過去幾年的贏家趨勢。預(yù)計(jì)今年也會在網(wǎng)頁設(shè)計(jì)行業(yè)掀起波瀾。對于長矩形頁面布局一直是網(wǎng)站設(shè)計(jì)者的首選。但我們可能會看到越來越多的設(shè)計(jì)師在2019年開始有意識地努力想出一個(gè)矩形以外的形狀。
有許多其他幾何形狀可以用于設(shè)計(jì)網(wǎng)站。它可以提供增強(qiáng)網(wǎng)站設(shè)計(jì)整體聲音的能力。除了幫助用戶輕松瀏覽網(wǎng)站外，它還能輕松吸引眼球。
幽靈按鈕
使用響亮而華麗的按鈕的方式已經(jīng)消失。幽靈按鈕的使用，也稱為透明/空心按鈕，是2019年統(tǒng)治棲息地的另一個(gè)趨勢。幽靈按鈕僅包括按鈕的輪廓以及中心的簡單排版中的一兩個(gè)字。這就是讓他們看起來很有吸引力并立即引起人們注意的原因。由于它們不那么突兀的性質(zhì)，鬼按鈕幫助網(wǎng)站突出了他們希望觀眾實(shí)際看到的更多內(nèi)容。
強(qiáng)調(diào)原創(chuàng)性
當(dāng)前設(shè)計(jì)趨勢的最大問題是原始設(shè)計(jì)非常困難。這是大規(guī)模采用的副作用。我們猜測原創(chuàng)性將以自定義繪制元素的增加與精心制作的動畫相結(jié)合的形式出現(xiàn)。隨著flash的優(yōu)雅傳遞，缺乏HTML5 / JS / CSS3動畫庫如雨后春筍般出現(xiàn)。沒有一種通用技術(shù)可以實(shí)現(xiàn)原創(chuàng)性，因此大多數(shù)做得好的執(zhí)行都需要大量的努力和計(jì)劃。
/圖像
單個(gè)圖像
這是一個(gè)偉大的趨勢 - 一個(gè)巨大的形象直接打擊你的臉。它吸引人，并將注意力集中在內(nèi)容上。沒有分心，一切都干凈整潔。增加的帶寬，HTML5視頻的廣泛瀏覽器支持，以及有選擇地為具有視網(wǎng)膜屏幕的設(shè)備提供高分辨率圖形資產(chǎn)的方式，都增加了在2019年變得更加強(qiáng)大的網(wǎng)站上流行的華麗高清背景圖像和視頻。這尤其如此在房地產(chǎn)等行業(yè)。
關(guān)于全屏布局最有趣的事情是，它使用戶可以輕松地查找，理解和理解他們正在尋找的信息。您可以輕松使用您提供的產(chǎn)品或服務(wù)的視頻或圖像，以幫助吸引客戶。
想要與競爭對手不同？然后，只是不要接受大標(biāo)題背景圖像趨勢。
全屏背景視頻
全屏背景視頻是網(wǎng)頁設(shè)計(jì)的一種上升趨勢。這個(gè)完美的自動背景視頻肯定會引起游客的注意。背景視頻也提升了網(wǎng)站的價(jià)值。但它不會分散任何人的注意力;相比之下，它支持觀眾在“號召性用語”按鈕中獲得關(guān)注。據(jù)我們所知，視頻背景確實(shí)對設(shè)計(jì)產(chǎn)生了影響。
現(xiàn)實(shí)想象力模糊
游戲化和設(shè)計(jì)的下一步正在出現(xiàn)，在網(wǎng)頁設(shè)計(jì)項(xiàng)目中真實(shí)與創(chuàng)造或想象之間存在模糊界限。結(jié)果非常令人驚嘆。
從虛擬現(xiàn)實(shí)到可以選擇查找新內(nèi)容的網(wǎng)站，這種類型的定制是個(gè)性化的，用戶似乎非常喜歡它。這種趨勢還包括創(chuàng)建看起來真實(shí)的圖像，但您知道它不是。
自然股票攝影
設(shè)計(jì)師將開始更加關(guān)注圖像，因?yàn)樽匀坏恼掌c人們在不同的情感層面上相互聯(lián)系。在2019年，我們將在網(wǎng)站上看到更多令人驚嘆的照片。
有些網(wǎng)站選擇在自己的主頁或博客文章中使用自己的攝影作品，而不是選擇一張照片。其他網(wǎng)站正在放棄用于視頻，信息圖表甚至GIF的股票攝影，以幫助傳達(dá)他們的信息。
圖標(biāo)集是另一個(gè)被放棄的股票元素，有利于更自定義的東西。那里有成千上萬的套裝，所以很容易選擇一套并隨之運(yùn)行，但創(chuàng)建自定義圖標(biāo)的額外一點(diǎn)點(diǎn)可以幫助將網(wǎng)站與其他網(wǎng)站區(qū)分開來。
充滿活力的自定義插圖和圖標(biāo)
高像素密度監(jiān)視器顯示標(biāo)準(zhǔn)圖像格式并不總是在現(xiàn)代網(wǎng)絡(luò)上按預(yù)期工作。使用.jpg和.png文件可以在視網(wǎng)膜顯示器上產(chǎn)生像素化外觀，這會破壞網(wǎng)站的美感。今天，對可縮放矢量圖形（SVG）的更廣泛的瀏覽器支持和易于實(shí)現(xiàn)的圖標(biāo)字體是這個(gè)問題的絕佳答案。因此，我們將看到更多的網(wǎng)頁設(shè)計(jì)展示豐富多彩的自定義插圖，以及時(shí)尚的手繪圖標(biāo)字體和SVG圖標(biāo)，在任何屏幕分辨率下都保持清晰和美觀。
SVG已經(jīng)使用了很多年。它仍然極為重要。使用SVG，圖像可以在所有設(shè)備上保持清晰度和清晰度。它將所有必要的網(wǎng)頁元素與設(shè)計(jì)元素結(jié)合在一起，以適應(yīng)所有屏幕尺寸。透露，目前只有1.3％的網(wǎng)站使用SVG。但我們肯定會看到它在2019年流行于創(chuàng)意網(wǎng)頁設(shè)計(jì)的世界。
/ 動畫
動畫故事
雖然擁有令人驚嘆的內(nèi)容，但網(wǎng)站能夠通過此內(nèi)容講述故事始終是至關(guān)重要的。2019年的網(wǎng)頁設(shè)計(jì)可能會圍繞幫助為用戶講故事，因?yàn)閯赢嫻适潞芫省Ｓ脩粝矚g故事。講述故事的網(wǎng)站立即吸引了訪客的注意力。當(dāng)你向下滾動頁面并且網(wǎng)站告訴你關(guān)于公司的故事時(shí)，這很酷。
動態(tài)背景
動態(tài)背景可以是使用強(qiáng)大的圖像到3D背景甚至視頻。在背景中添加視頻非常適合吸引人們的注意力，因?yàn)槿搜蹠灰苿铀?/p>
我們肯定會在2019年的網(wǎng)頁設(shè)計(jì)領(lǐng)域看到更多動態(tài)背景，因?yàn)樗鼈冏屧L問者希望看到更多并了解動態(tài)圖像背后的故事。
更多靜態(tài)內(nèi)容/減少運(yùn)動部件
許多專業(yè)人士認(rèn)為，在頁面上有元素滑動，淡入淡出和滾動的情況下，滑塊是首先被淘汰的東西。我們將看到更多靜態(tài)設(shè)計(jì)，移動部件更少。用戶需要快速且易于理解的內(nèi)容，設(shè)計(jì)人員和開發(fā)人員必須努力提供直接且不會分散注意力的內(nèi)容。但是，畫廊和幻燈片仍然是展示多個(gè)圖像的有效方式，而不會使攝影網(wǎng)站，產(chǎn)品展示和產(chǎn)品組合上的用戶負(fù)擔(dān)過重。
順便說一句網(wǎng)頁布局有哪幾種，帶幻燈片的網(wǎng)站可以成為帶滑塊的網(wǎng)站的替代品。它們是一種滑塊演變。滑塊旨在允許網(wǎng)站在框架內(nèi)移動圖像以展示內(nèi)容。全屏幻燈片，每張幻燈片使用新內(nèi)容刷新整個(gè)屏幕，可以使用單擊，滾動或定時(shí)效果。用戶可以前后導(dǎo)航以獲得幾乎是物理的體驗(yàn)。預(yù)計(jì)未來幾個(gè)月會有很多網(wǎng)站使用這個(gè)概念。
也受到廣泛青睞。這些是帶有選定動畫部分的靜止圖像，通常是一個(gè)微妙的細(xì)節(jié)，恰當(dāng)?shù)匚司W(wǎng)站訪問者的注意力。它們并不新鮮，但最新上的“實(shí)時(shí)照片”的成功，與電影圖非常接近，以及對HTML5畫布的強(qiáng)大瀏覽器支持，在電影圖被列為2019年的設(shè)計(jì)趨勢中發(fā)揮了關(guān)鍵作用。
微觀經(jīng)驗(yàn)
我們在這里設(shè)想的是自包含的工作流程，這些工作流程隨著它們的交互而增長。例如，主頁可能有3或4個(gè)呼出區(qū)域，這些區(qū)域具有明顯的意圖，如注冊，游覽，產(chǎn)品供應(yīng)等。最初，他們將有少量內(nèi)容面向交互的乞討。一旦觸發(fā)工作流程，它將啟動一個(gè)完成其預(yù)期目的的迷你應(yīng)用程序。單擊注冊元素將直接在該區(qū)域中將該區(qū)域更改為注冊向?qū)В蛇x地更改其位置和大小，或者在模式窗口中。
這些體驗(yàn)可能很簡單或復(fù)雜，但它們的目標(biāo)是簡化初始導(dǎo)航路徑網(wǎng)頁布局有哪幾種，同時(shí)仍然提供各種選擇而不會讓人不知所措。它們還具有減少頁面更改和滾動任務(wù)的副作用，只需單擊幾下即可完成。這些微觀體驗(yàn)單元或卡片可以是用于特定業(yè)務(wù)領(lǐng)域的自包含陳列柜，而不是無處不在的滾動標(biāo)題圖像。
這種技術(shù)在Web應(yīng)用程序中特別有用，在這些應(yīng)用程序中，單元不是轉(zhuǎn)移到新屏幕來輸入某些數(shù)據(jù)或完成任務(wù)，而是簡單地適應(yīng)以允許任務(wù)在現(xiàn)場完成。
/ 滾動
長滾動
長卷非常吸引人。這種布局有點(diǎn)向訪問者講述一個(gè)故事，而不必點(diǎn)擊任何東西。Apple是其中一個(gè)非常好的網(wǎng)站。滾動頁面時(shí)，今天的大多數(shù)新網(wǎng)站設(shè)計(jì)往往更長。隨著移動設(shè)備變得越來越流行，網(wǎng)站選擇滾動而不是鏈接作為顯示內(nèi)容的手段變得越來越普遍，尤其是在他們的主頁上。
根據(jù)UX 最近的研究，大多數(shù)訪問者喜歡上下滾動設(shè)計(jì)，而不是通常的單頁導(dǎo)航到另一頁。它可以是垂直或水平，滑動或動畫滾動。我們可能會在2019年看到更多創(chuàng)新的滾動。因此，不要忘記在未來一年中采用創(chuàng)新的滾動功能來吸引更多訪問者訪問您的網(wǎng)站。它還將確保訪問者在您的網(wǎng)站上花費(fèi)更長的時(shí)間。請記住，我們的想法是讓訪問者更有趣，更方便。NASA 是這種創(chuàng)新滾動的完美范例。這個(gè)驚人的卷軸網(wǎng)站永遠(yuǎn)不會讓訪客參與和娛樂。
視差滾動
如果你問我們，視差滾動效果真的很酷。簡而言之，它們都是通過改變背景和前景滾動的速度來創(chuàng)造3D運(yùn)動和深度的幻覺。
如果做得好，它會給網(wǎng)站帶來這種獨(dú)特的感覺，讓一切都非常悅目。更不用說動態(tài)了。
視差效果最常見的應(yīng)用是使用背景中的一個(gè)圖像，兩個(gè)圖像（一個(gè)“比屏幕”更接近“），甚至是視頻，然后將一個(gè)文本塊放在前景中。
雖然滾動劫持收到了不同的反應(yīng)，但許多網(wǎng)站至少都在試用這個(gè)功能。事實(shí)上，有一些HTML5模板，如，用于產(chǎn)品演示，包括。如果您使用這些模板，請確保已針對可能破壞您網(wǎng)站的每個(gè)元素對其進(jìn)行全面測試。
Web開發(fā)人員必須記住的一件事是，如果您實(shí)現(xiàn)，請盡量不要將它們與其他插件混合到您的頁面，例如水平無限滾動。
另一個(gè)功能是添加錨點(diǎn)，使用正確的標(biāo)題文本，以便屏幕閱讀器在聚焦時(shí)可以讀出它們。從可訪問性的角度來看，實(shí)現(xiàn)可能類似于制表符，尤其是在定義錨點(diǎn)及其ARIA角色時(shí)。
是一種難以實(shí)現(xiàn)的技術(shù)，使其易于訪問說起來容易做起來難。正如我們所見，很多網(wǎng)友都表達(dá)了對此事的擔(dān)憂，我們相信你應(yīng)該聽取他們的意見并遠(yuǎn)離它。
我們懷疑，只要Apple退出此功能，它的粉絲就會效仿。
頁面高度減少
這更像是一種希望，而不是一種預(yù)測。目前常見的信念是，這種更垂直滾動和更少點(diǎn)擊的趨勢將繼續(xù)增長。有時(shí)，無盡的滾動結(jié)束了糟糕的用戶體驗(yàn)。人們喜歡使用滾動作為分段內(nèi)容的小部分或觸發(fā)動畫的方式，但是滾動或滑動50次以查看主要網(wǎng)站內(nèi)容太過分了。
如果網(wǎng)站要更多地考慮他們的內(nèi)容和交互的目標(biāo)，點(diǎn)擊以觸發(fā)向下鉆取到網(wǎng)站將不會是一件壞事。結(jié)合微觀體驗(yàn)和現(xiàn)代前端編程，鼠標(biāo)點(diǎn)擊或屏幕點(diǎn)擊不一定意味著不再刷新震撼頁面。我們相信這種感覺會在下一次迭代中占上風(fēng)。
/ 可用性
用于制定數(shù)據(jù)驅(qū)動設(shè)計(jì)決策的可訪問數(shù)據(jù)
網(wǎng)頁設(shè)計(jì)是一項(xiàng)有利可圖的業(yè)務(wù)，因此需要開始講業(yè)務(wù)語言。這意味著指標(biāo)，點(diǎn)擊率，轉(zhuǎn)化次數(shù)，渠道，簡而言之，分析。如果您是自由職業(yè)者，您可能會親自動手訪問這些商業(yè)智能工具。如果不是，像這樣的公司正致力于為設(shè)計(jì)師提供大數(shù)據(jù)。目前的迭代還沒有，但他們是為此目標(biāo)而建立的領(lǐng)先團(tuán)隊(duì)之一。
績效預(yù)算
顯而易見的是，設(shè)計(jì)變得越來越不是美學(xué)，而是更多地關(guān)注整體用戶體驗(yàn)。一個(gè)快速加載網(wǎng)站，讓用戶首先獲得目標(biāo)。
我們已經(jīng)開始在很多以性能為中心的品牌中看到這一點(diǎn)。
考慮到UI響應(yīng)的速度和它的外觀一樣重要。
立即響應(yīng)UI
保存按鈕和輔助操作UI元素的日子正在逐漸消失。這在大多數(shù)現(xiàn)代網(wǎng)絡(luò)應(yīng)用程序中很明顯。隨著我們越來越接近使Web應(yīng)用程序像桌面應(yīng)用程序一樣執(zhí)行，我們將看到這一點(diǎn)全面采用。技術(shù)在這里，設(shè)計(jì)將緊隨其后。一些示例包括套件中的任何內(nèi)容以及等其他應(yīng)用。
響應(yīng)式設(shè)計(jì)
響應(yīng)式網(wǎng)頁設(shè)計(jì)正變得不再是一種趨勢，而是更多的最佳實(shí)踐。這是由于移動互聯(lián)網(wǎng)使用的興起。可以肯定地說，響應(yīng)式設(shè)計(jì)不會很快發(fā)生，因?yàn)樗砹艘环N相對簡單且廉價(jià)的方式，可以幫助企業(yè)構(gòu)建功能齊全的移動友好型網(wǎng)站。毫無疑問，響應(yīng)式設(shè)計(jì)非常有用且功能多樣，但為了提供出色的用戶體驗(yàn)，它也應(yīng)該是快速的。
UI模式的激增
現(xiàn)代網(wǎng)站經(jīng)常被歸咎于網(wǎng)站的相似性。但是看起來相似并不一定是壞事。沒有理由重新發(fā)明輪子。UI模式必須引導(dǎo)用戶順利體驗(yàn)。雖然有些人批評模式使用，但毫無疑問，它們的廣泛使用使得該功能易于被用戶識別。
例如，每當(dāng)您嘗試注冊網(wǎng)站時(shí)，您都會找到帳戶注冊模式。可能有填寫表單或允許您使用社交帳戶注冊的按鈕。多步形式向?qū)б埠苡行В驗(yàn)樗鼈儭疤畛洹绷怂璧淖侄危瑴p少了摩擦并鼓勵(lì)用戶流過整個(gè)過程。
設(shè)計(jì)模塊和組件而不是整個(gè)頁面
Web設(shè)計(jì)正在向模塊化和組件設(shè)計(jì)發(fā)展，而不是模擬特定網(wǎng)頁的整個(gè)布局和組合。這些組件通常涉及設(shè)計(jì)搜索功能的工作方式，導(dǎo)航的布局方式等。
我們已經(jīng)成熟，知道我們在不同的屏幕上有重復(fù)的元素，并且這些元素需要設(shè)計(jì)，以便它們獨(dú)立工作，但仍然可以與網(wǎng)站的其余部分一起工作。
我們不僅更關(guān)注這些組件在設(shè)計(jì)方面的外觀，而且它們都帶有各自的功能。使用組件和模塊進(jìn)行設(shè)計(jì)允許復(fù)制相同的功能，無論它在網(wǎng)站上出現(xiàn)在何處。
表格和輸入全屏顯示
這種趨勢來自響應(yīng)式網(wǎng)站設(shè)計(jì)的廣泛適應(yīng)。出現(xiàn)這種情況有幾個(gè)原因：保持另一個(gè)屏幕不被加載，提供更多的屏幕空間以便觸摸屏上的手指更容易觸摸，并鼓勵(lì)用戶完成表單（對于那些一次呈現(xiàn)一個(gè)輸入的表單）。
更多網(wǎng)站和應(yīng)用程序?qū)⑹褂萌帘韱魏洼斎肫聊唬ɡ缱院偷卿洠｜c(diǎn)擊“登錄”和/或“聯(lián)系”，您可能會看到一個(gè)全屏覆蓋圖，其中包含所需的表格，而不是發(fā)送到其他頁面。一個(gè)很好的例子是 East的聯(lián)系表格。
被動的激進(jìn)彈出窗口
網(wǎng)絡(luò)社區(qū)認(rèn)為，現(xiàn)在有兩種嚴(yán)重的用戶體驗(yàn)犯罪在起作用。首先是自家廣告。他們太可怕了。彈出窗口曾經(jīng)被品牌以內(nèi)容營銷的名義購買。據(jù)推測，這是因?yàn)樗鼈儺a(chǎn)生了大量的簡報(bào)注冊，但這是一種粗野的廣告形式，它只是絕望而已。
第二個(gè)犯罪是消息傳遞。根據(jù)您繪制線條的位置，您可能不會考慮此網(wǎng)頁設(shè)計(jì)，除非您認(rèn)為內(nèi)容和用戶體驗(yàn)是基礎(chǔ)。那么除了“注冊我們的新聞通訊”或“下載我們的電子書”之外，這里的信息是什么？消息是，如果你沒有注冊，你（用戶）是...我們將結(jié)束你的想象力。
實(shí)時(shí)產(chǎn)品預(yù)覽
由于更高的速度和瀏覽器功能，著陸頁設(shè)計(jì)已經(jīng)實(shí)現(xiàn)了令人難以置信的增長。我們注意到的一個(gè)主要趨勢是在主頁或自定義目標(biāo)網(wǎng)頁上添加實(shí)時(shí)產(chǎn)品預(yù)覽。這些產(chǎn)品預(yù)覽旨在讓潛在用戶一瞥產(chǎn)品的運(yùn)作方式。以Slack的產(chǎn)品頁面為例。它具有視頻導(dǎo)覽和覆蓋Slack界面的矢量圖形。這些產(chǎn)品預(yù)覽旨在讓潛在用戶一瞥產(chǎn)品的運(yùn)作方式。
但是，您并不總是需要依靠動畫來進(jìn)行產(chǎn)品預(yù)覽。一些著陸使用簡單的PNG屏幕截圖來顯示產(chǎn)品是什么以及它是如何工作的。
是另一個(gè)在主頁上播放實(shí)時(shí)動畫的精彩示例。這樣，訪問者無需手動演示產(chǎn)品即可查看的運(yùn)行情況。
自動化任務(wù)運(yùn)行器
通過一些新的網(wǎng)站創(chuàng)建最佳實(shí)踐，前端開發(fā)的世界發(fā)生了很大的變化。像Gulp和Grunt這樣的任務(wù)運(yùn)行器/構(gòu)建系統(tǒng)正在被更頻繁地用于以前需要手動操作的大量任務(wù)。
自動化是快速周轉(zhuǎn)和生成高質(zhì)量代碼的生命線。機(jī)器不會出錯(cuò)，所以你可以自信地自動化，你所擁有的問題就越少（理論上）。
這些工具基本上運(yùn)行JS代碼，可以自動化部分工作流，可以是自定義JS，也可以是其他人編寫的腳本。
更加專注于UX設(shè)計(jì)
隨著越來越多的設(shè)計(jì)師和開發(fā)人員注意到，用戶體驗(yàn)設(shè)計(jì)領(lǐng)域?qū)⒗^續(xù)快速增長。UI設(shè)計(jì)是UX設(shè)計(jì)的一部分，但它不是最終目標(biāo)。UI是達(dá)到目的的手段，最終是一種出色的用戶體驗(yàn)。
就在5年前，我們幾乎不熟悉UX或它如何應(yīng)用于界面設(shè)計(jì)。現(xiàn)在我們擁有UX Stack 和免費(fèi)的UX電子書等資源。如果您對用戶體驗(yàn)了解不多，那么現(xiàn)在是學(xué)習(xí)和學(xué)習(xí)如何將UX原則應(yīng)用于所有形式的數(shù)字接口的最佳時(shí)機(jī)。