目前的網頁設計趨勢

Chinese (Traditional) (中文（繁體）) translation by Fuhuan (you can also view the original English article)

全屏模式是目前網絡上最爲熟悉的浏覽模式之一。青菜蘿蔔各有所愛，讓我們來看看一些優秀的全屏模式例子，並進行分析。

關于設計融合的一個注釋

設計融合是指設計到最後都成爲同一種風格，比如現在手機都在模仿蘋果。最近看了下面的內容：

你目前正在設計哪兩個可能的網站？ pic.twitter.com/ZD0uRGTqqm
- 黃金（@jongold）2016年2月2日

他的觀點是，目前的網頁設計師普遍缺乏創造力，總是在追尋同一種風格。全屏幕設計就是一個完美的例子。作爲設計師，我們是否該通過這種方式來取巧？我們是否忽略了推動邊界的突破？是否因爲懶惰才制作靜態界面？

正如Paul Boag所說，我們只是成熟的網頁設計環境的一部分。我們正在制作用戶想要的網頁嗎？他們期望什麽？要做些什麽才能使我們的産品更易于使用？

設計的標准越多，就越像裹腳布。——Paul Boag

好好思考吧。同時，讓我們來看看一些全屏網頁設計。

許多全屏網頁都精確的標明了它們的尺寸，使用JAVA或者CSS來確保可見部分完美適配浏覽器大小。一旦完成後，可以用CSS定位將元素放置在頂端，不用擔心窗口大小的調整。

暫時使用這種模式來粘貼到平面底部的輔助導航，一些上一個或者下一個的鏈接。背景圖片使用background-size：cover; 在一個巨大的數字元素。

這是一個全屏的WordPress主題，有著幻燈片，介紹，主頁演示等各種選項。它使用位于屏幕底部的漸變來使圖像標題和說明更具可讀性。

詹姆斯·特珀（James Tupper）將自己的臉部圖形定位在背景位置的中心。使用原生CSS高度：100，巨大的黃色塊等于視口高度。

了解有關這兩種CSS技術的更多信息：

生活雜志Lagom，Elliot Jay和Samantha Stocks的創意，使用了一個完整填充屏幕的主頁。這裏沒有滾動（除非在小屏幕上查看）。 Lagom使用底部邊緣來放置社交鏈接。

Soul是一個Shopify模板，其中一個布局是一個全屏幕滑塊，導航鏈接位于右側。

使用全屏網頁的話，可能會導致用戶沒有意識到能滾動界面。我們的主頁采用了滾動的圖表來提醒用戶應該下拉試試。

比如平淡的說：“嘿，看這裏。”。

該主頁采用了一種新的技術，能確保下一部分的一小部分能在窗口底部被預覽到。還有一個查找更多的控件，所以從不擔心客戶不會下拉查看更多的信息。

Kilani采取了自動播放的方法; 屏幕右下方有一個靜音按鈕。他們建議用戶進一步滾動的方式也很有趣 - 將“向下滾動”指令固定到鼠標光標上：

前Envato用戶體驗設計師DamirKotorić因爲對航空攝影的熱愛而創立了Falcon Films。視頻在Falcon Films主頁中扮演重要角色是合理的。看看背景，然後觀看無人機鏡頭的演出。

Damir再次使用了原生CSS來制作一個全屏部分。

景觀達到同樣的效果; 一個全屏幕，autoplaying視頻與額外的showreel，但使用JavaScript來獲得全屏。自動播放mp4視頻文件本身是1.3Mb，此外沒有別的需要你下載了。

我們還沒有提到的一件事就是全屏給我們提供到的：一塊畫布！用這個畫布空間來展示一個産品，一個公司，一個想法，就是這個模式的重點。它消除了其他內容的混亂，並集中與消息和個性。

早期的景觀例子采用了美麗的钴藍遮罩，看起來非常棒。

雖然說這是雙色調圖像，所以可以將當前的圖像大小縮小。而不用擔心會影響到視覺效果。

在彭博商業周刊設計大會使用一個抽象的排版布局做出點。設計融合？不在這裏，夥計。

我有沒有提到Envato Tuts +翻譯項目？可能提過了吧？無論如何，我喜歡這個主題的RTL腳本的演示 - 檢查了Proland，Bootstrap內置了幾個全屏布局選項的登陸頁面模板。

全屏網頁還能用上很多年呐。爲什麽？就因爲它能有效的向用戶接受網站。你還喜歡什麽？你還從哪裏見過這些模式。請分享下你的看法。