Advertisement
  1. Web Design
  2. Inspiration
Webdesign

目前的網頁設計趨勢

by
Length:LongLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Sorry About This: 40 Examples of 404 Pages
Designing Comments, Discussion, and Feedback For the Web

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

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

關于設計融合的一個注釋

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

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

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

有沒有你喜歡的?

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

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.