2019年網頁及UI設計趨勢（二）
每年各大設計部落格和知名網站都會預測新一年的網頁和UI設計趨勢，既有相同之處，也有各家的獨到見解，甚至還有相互衝突的地方。在接下來的系列文章裡，將會為大家彙編（譯）一些比較具有前瞻性的趨勢文章供參考。
本期文章選取了 The Next Web 網站對2019年網頁設計趨勢的展望，主要涉及佈局，顏色，排版，導航，空白邊等。
系列文章
- 2019年網頁及UI設計趨勢（一）
- 2019年網頁及UI設計趨勢（二）
- 2019年網頁及UI設計趨勢（三）
- 2019年網頁及UI設計趨勢（四）
- 2019年網頁及UI設計趨勢（五）
- 2019年網頁及UI設計趨勢（六）
- 2019年網頁及UI設計趨勢（七）
- 2019年網頁及UI設計趨勢（八）
- 2019年網頁及UI設計趨勢（九）
- 2019年網頁及UI設計趨勢（十）
2019年10個激動人心的網頁設計趨勢
10 exciting web design trends you can’t hide from in 2019
概覽
- 衝破網格和不對稱佈局
- 流體/有機設計和元素
- 懷舊/迴歸/復古設計美學
- 更多增強/提升的影象處理
- 單色或無色
- 重疊設計元素
- 重新構想的英雄和標題區域
- 大型試驗性導航
- 大量留白區域
- 突破排版界限
1.衝破網格和不對稱佈局
這條趨勢在2018年曾經提到過，不過看似2019年才是它的爆發之年。
設計術語中的網格概念是指具有水平和垂直線的假想平面，用來幫助頁面和螢幕進行元素佈局。對於大多數的網站而言，網格很容易識別。例如，你可以向下看網站的左側，網站logo，標題，以及內容 ，在大多數情況下是排列在一起的。當你遇到一個衝破的網格，即平面上的內容通過某種方式進行擺放，看上去不再那麼僵硬，換句話說就是把網格破壞掉了。
image
這種出乎意料，打破邊界，不對稱的設計方式已經存在一段時間了。它曾經被視為一種標新立異的技術，用來吸引目光，改變設計體驗。但是到了2019年，這種設計更多的會成為一種設計準則，並且在網際網路上變的越來越普通。
image
Studio Revele 在主頁設計上使用了一個不對稱和衝破網格的網站設計（圓圈可以在螢幕上移動，以幫助更好的促進衝破網格概念的形成）
在2019年，我期望看到更多的使用衝破網格和不對稱的佈局，因為我們開始擺脫近年來嚴格的網格化模式。通過在網頁設計中使用網格和不對稱設計的體驗試驗，我預計這種趨勢會變得越來越普遍。
2.流體/有機設計和元素
慢慢地，我們越來越遠離扁平化設計所帶來的直線，並開始嘗試更加流動的形狀和線條。這種型別的形狀，不是典型的圓圈，正方形，矩形，或任何直邊型，通常被稱為流體或有機形狀。
image
通過擺脫我們習慣於在網上使用的直線和近臨界線，並使用來在於大自然或生命的繪畫元素來替換它們（比如池塘和湖泊的形狀，撕碎的紙片），這些有機形狀和線條可以讓設計更加平易近人，近通人性。
image
Mawla 的網站在主頁上使用了有機形狀和線條，特別是在英雄區域。
進入2019年，長期以來在網頁設計中使用的典型形狀（圓形和正方形）將開始被越來越多的有機形狀和線條所替代，從而帶來全新的設計元素並影響到整個網站設計。
3.懷舊/迴歸/復古設計美學
舊的再次變成新的。我們從扁平化設計繼續向前邁進，試驗不停息，老式設計元素中帶有懷舊的味道似乎時機已成熟。
image
懷舊復古的設計風格可以在過去與現在的設計之間創造一個很好的並行空間。更有趣的是，我們可以通過使用這種反映時代復古設計的風格，為更多的人制造出“煥然一新”的感覺。
image
Great Jones 網站使用了典型的20世紀70年代的字型和配色方案，這是 1983年ARPANET 之前普遍的設計審美。
我預計會看到更多的網站擁抱不同的設計風格，無論是在網站本身的設計還是在內容方面都都能適合過去的時代。這些有舊時特點的元素可以包括懷舊的配色方案和排版，讓我們回想起不同的時代。
4.更多增強/提升的影象處理
影象通常總會呈現出獨特的設計機會，特別是在網際網路上。將圖片置於圓圈中，使它們變成黑白圖片，新增陰影，所有這些都是設計師們用來增強和（或）引起對網站影象關注的技術手段。
image
進一步採取影象處理可以引起對影象的注意或者甚至將注意力從影象上拉開。大多數網站都會有一個非常大的英雄風格的影象，跨越整個網站的寬度，佔據很大的高度，而不是更多的改變影象。我相信，改變影象的呈現方式是一種設計趨勢，會在2019年大放異彩。
image
與其執行一種方式的影象處理，更希望看到網站圖層化的影象處理方式，以此來推動影象儘可能吸引到更多的注意力或者遠離注意力。堆疊設計處理方式，比如製作單色影象，剪下物體，或者在上面新增圖案製作一個全新的影象，在2019年的網頁設計中可能會更加突出。
5.單色或無色
擁有數以百計的顏色固然很酷，但是如果你把顏色限制到一個甚至沒有呢？如果處理得好，那麼這種型別的設計將會幫助增強設計並使其更加難忘。
image
限制使用一種顏色可以幫助鞏固你的品牌識別，同時在設計靈活性方面增加約束。大多數網站都會使用2到5種顏色，那麼只使用一種顏色將會讓你的網站脫穎而出，並讓你的網站瀏覽者記憶深刻。
image
Climate 的網站堅持使用灰色系的配色方案，沒有任何其他顏色，甚至連網站上的視訊都是灰白的。
如果你正在尋找一種簡化你的調色盤的方式，那麼更進一步去除所有顏色無疑是一個不錯的選擇 （在藝術和設計中，黑色，白色以及灰色不會作為顏色考慮，它們屬於中性色）。2019年，我希望更多的網站使用更好的顏色或者根本沒有顏色。
6.重疊設計元素
和衝破網格佈局及不對稱密切相關，在頁面特定型別的內容上使物體彼此重疊會帶來視覺上的趣味性。這可以帶來意想不到的元素，因為我們已經習慣了網頁上的元素有自己的空間並且與周圍的元素分離開來（通常不會彼此接觸）。
image
經過仔細考慮以後，頁面上的重疊元素可以幫助提高網站的整體美感。但是這對於移動優先來說執行起來並不容易，如果重疊元素沒有處理好，元素以錯誤的方式重疊的時候會給使用者帶來困擾。
image
使用重疊元素，讓它們共享相似的空間是一種趨勢，在2019年會越來越普遍，並且開始越來越多的嘗試三維立體效果。
7.重新構想的英雄和標題區域
如前所述，大多數英雄區域（通常理解為“首頁上方”）都是由一張跨越大部分可視區域的大圖構成的，通常上面還會有一些文字吸引瀏覽者的注意力。在過去幾年，對網站這塊區域（可以說是最重要的區域）進行的試驗並不多。
image
雖然一些網站已經開始突破其英雄/標題區域的可能性，但是當我們離開典型的“全尺寸影象文字疊加”形式的英雄樣式時，我希望開始看到越來越多的網頁設計師對該區域進行更多的試驗性操作。
image
2019年，我希望對網站上這個重要的區域進行不同型別的試驗，包括最小化區域，改變現有內容（以及使用不同於全螢幕尺寸的影象內容），並且更加重視這一領域，在第一手時間抓住使用者的注意力。
8.大型試驗性導航
看上去每一年的設計趨勢都會涉及到網站導航這一塊。估計是因為這塊是頁面進行設計時最艱難的元素。這對我們如何使用網站至關重要，但是既要保持功能性又要保持美觀很難。
image
2019年的設計趨勢還是會看到更多用於導航的試驗。但是不僅僅是更改頁面上的位置，字型大小，甚至是佈局本身，試驗很可能在2019年有所突破，比如將導航作為網站的主要部分，或者將它設計的非常大足以成為焦點。
image
隨著試驗性導航在2109年設計趨勢中越來越重要，我們可以期待看到非常大的導航，網站首頁除了導航沒有別的內容，以及具有複雜動畫效果的導航。
9.大量留白區域
有效的使用空白區域是設計師們用了數十年的設計工具。然而，一種不常見的方式是大量空白區域的使用導致焦點全都放在了空白區域上而非內容上。
image
以這種方式額外使用空白區域反映了我們通常使用空白區域的原因，新增空白邊或者空間以便讓我們的眼睛得以休息。現在新增額外的空白區域有助於將其作為設計美學的焦點或更引人注目的部分。通過在不必要的位置新增空白區域，可以使空白區域成為設計中的重要部分，並且更能引起使用者的注意。
image
2019年，我們可能會看到網站使用了大量的空白區域用來做宣告或者使其成為網站的焦點。過去，我們可能認為使用額外的空白空間是一種浪費，但是現在的趨勢可能是它給空間增加了一些額外的意義。
10.突破排版界限
雖然嘗試排版對於設計師來說總是有所期待的，但是與印刷品相比，在網頁中突破排版界限還是比較難的。隨著編碼越來越複雜，排版試驗也將變得越來越容易 。
image
試驗和突破排版界限可能包括故意減掉字母和單詞的部分（依靠負空間填寫其它字母），影象內嵌於排版，延對角線或形狀進行排版，動態排版等等。
image
ARCHE68 網站突破二維空間排版限制，使其接近三維空間。排版不僅伴隨動效，而且可以左右自動滾動，並隨使用者游標移動上下滾動。（你可以看到它們的導航設計，正是之前提到的另外一個設計趨勢。）
2019年，排版試驗和推動網站型別的可能性將成為新式網頁設計的趨勢。由於印刷排版相對容易，我們希望在網頁上也能夠看到同印刷排版相同的排版方式，這可以通過學習新的排版編碼方式來實現。
（編譯完）
重點關注：#衝破網格和不對稱佈局 #流體或有機形狀 #重疊設計元素
英文原文： 地址
原文作者： Amber Leigh Turner
以上譯文僅代表原作者觀點。如需轉載請遵循 CC版權協議 正確標明出處。
