首屏大圖:最大限度利用設計

0 評論 12023 瀏覽 1 收藏 9 分鐘

當下網頁設計最重大的一項趨勢,就是大圖片的使用。不只是大,這些巨幅圖片看上去就像在屏幕上活過來一樣。用在頁面頂部時,就是我們常說的首屏大圖。

如何利用這一趨勢?需要從哪些工具入手?本文中,我們來看看這些首屏大圖、用好它們的訣竅、熟練掌握這一趨勢優秀網頁案例,甚至還有可供下載研究的贈品。

什么是首屏大圖?

首屏大圖,就是在首頁或其他頁面頂部,運用焦點圖、文字和導航元素。首屏大圖體現為多種形式——作為一張圖片或帶文字的圖、圖片輪播、固定圖片、視頻或是動態圖片。設計風格也囊括寫實與手繪。

焦點圖片是你在網站中首先看到的東西,它的設計的宗旨就是引人入勝。它應當具備強烈的聚焦能力和視覺吸引力。

首屏大圖在視覺上起著強烈的聚焦作用,通常仰仗簡潔的字體、極簡用色,還有基本圖形構成的界面元素。多數設計元素都放在圖片上,通常需要一些設計策略,來保證文字剛好融入屏幕中的特定位置。一般來說,品牌、導航和其他工具放置在外邊緣——典型的是在頂部的左右兩個角落——來保持注意力集中在圖片本身。

首屏大圖在各類網站設計中廣泛發揮作用,幾乎適合任何設計風格。這種視覺上討人喜愛的趨勢,其實只需要一樣關鍵事物——一張驚艷的圖片。

使用首屏大圖的訣竅

Heck

一旦你決定使用首屏大圖,設計時要記住一些要點。設計要干凈,元素不能干擾主圖片、圖集或視頻。在這類設計中,分離各種元素至關重要。設計焦點圖片時,記住這幾點:

  • 包含品牌。通常這個會放在左上角。選用純白或純黑的品牌標識或logo,不要帶很多顏色。
  • 標題和字體要鮮明。盡管照片很大,文字才更有助于吸引用戶的注意。
  • 就導航元素和輔助元素而言,文字處理得要精細。堅持只用一張大圖和一片文字;讓其他都在設計感中淡出。
  • 注意色彩的選擇。如果用了彩色圖片,其他東西都要堅持使用黑色或白色。如果圖片是黑白的,為文字選擇一種簡潔或單一的配色。
  • 放置文字時,不要妨礙圖片的視覺流程。不要遮擋圖片中的人臉或重要部分。
  • 考慮使用大而纖細的字體。(時尚且非常易于閱讀)
  • 考慮使用幽靈按鈕來增添一點精致。(閱讀之前的文章中詳細了解)
  • 使用固定導航。讓用戶更容易滾動和瀏覽頁面。雕琢首屏大圖的導航,使它在首屏內外都適用。
  • 減淡圖片顏色有助于突出文字。所有文字都要易于閱讀、起到作用。
  • 深度設計首屏大圖,讓用戶了解接下來該怎么做——點擊還是滾動。要包含一些視覺提示。記住,首屏大圖未必要充滿整個屏幕;只是多數會這么做。
  • 創造能存在于響應式環境中的首屏大圖。思考它在小屏幕上如何展現。該顯示什么圖片和文字?

有啟發性的案例

互聯網上隨處可見優秀的首屏大圖案例。這組案例包括了正式上線的網站和進行中的作品。

Grain

Hero Image Website

Cuppa

Frances

贈品

若你正準備從首屏大圖入手,通常有兩種免費資源可供選擇——由真實圖片或3D渲染構成的首屏大圖,或是繪畫作品。這取決于具體項目,每種風格都能良好發揮作用。

下載焦點圖片時候要注意的是分辨率(圖片要大過最的大屏幕寬度)、可編輯、文件格式和智能對象(如果你要四處移動元素的話)。正如所有免費的設計元素一樣,確保核對過使用許可,遵循相應條款。免費贈品通??梢杂糜趥€人項目,但商業項目需要支付費用;使用前閱讀任何元素的所有細節。

2個免費的首屏大圖展示

Presentation Hero Headers

扁平風格首屏大圖

Flat Hero Header Kit

2張復古風格首屏大圖

Vintage Hero Header Images

創意素材集

Creativity Bundle

免費焦點圖資源

Freebie Hero Image

付費資源

盡管有很多免費資源,也有相當多的高質量付費首屏大圖資源。在付費資源包中,你可能有更多選擇。購物愉快!

16張首屏大圖Vol. 1($20)

16 Hero/Header Images Vol. 1

食物首屏大圖模版#3($20)

Food Header Hero

87張首屏大圖素材包($35)

Hero Header Images

扁平風格創意工作臺($11)

Flat Creative Workspace Tools

樸實的素材圖片($20)

Rustic Stock Photos

藝術器材場景($12)

Art Equipments Scene Generator

總結

不久的將來,首屏大圖會是網頁設計中的一種最棒、最富視覺吸引力的趨勢。這項技巧的妙處在于,它可以與幾乎任何東西搭配。想要設計扁平風格、極簡風格,或是復古風格?就用首屏大圖。

你在項目中使用了首屏大圖嗎?可以在評論中與我們分享。我們樂于看到你正在進行的項目。

原文地址:http://designmodo.com/hero-headers/

譯者:可樂橙;via:http://colachan.farbox.com/post/3400

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!