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內置了幾個全屏布局選項的登陸頁面模板。

有沒有你喜歡的?
全屏網頁還能用上很多年呐。 爲什麽? 就因爲它能有效的向用戶接受網站。 你還喜歡什麽? 你還從哪裏見過這些模式。 請分享下你的看法。
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post