首屏大圖:最大限度利用設(shè)計(jì)

當(dāng)下網(wǎng)頁(yè)設(shè)計(jì)最重大的一項(xiàng)趨勢(shì)，就是大圖片的使用。不只是大，這些巨幅圖片看上去就像在屏幕上活過(guò)來(lái)一樣。用在頁(yè)面頂部時(shí)，就是我們常說(shuō)的首屏大圖。

如何利用這一趨勢(shì)？需要從哪些工具入手？本文中，我們來(lái)看看這些首屏大圖、用好它們的訣竅、熟練掌握這一趨勢(shì)優(yōu)秀網(wǎng)頁(yè)案例，甚至還有可供下載研究的贈(zèng)品。

什么是首屏大圖？

首屏大圖，就是在首頁(yè)或其他頁(yè)面頂部，運(yùn)用焦點(diǎn)圖、文字和導(dǎo)航元素。首屏大圖體現(xiàn)為多種形式——作為一張圖片或帶文字的圖、圖片輪播、固定圖片、視頻或是動(dòng)態(tài)圖片。設(shè)計(jì)風(fēng)格也囊括寫實(shí)與手繪。

焦點(diǎn)圖片是你在網(wǎng)站中首先看到的東西，它的設(shè)計(jì)的宗旨就是引人入勝。它應(yīng)當(dāng)具備強(qiáng)烈的聚焦能力和視覺(jué)吸引力。

首屏大圖在視覺(jué)上起著強(qiáng)烈的聚焦作用，通常仰仗簡(jiǎn)潔的字體、極簡(jiǎn)用色，還有基本圖形構(gòu)成的界面元素。多數(shù)設(shè)計(jì)元素都放在圖片上，通常需要一些設(shè)計(jì)策略，來(lái)保證文字剛好融入屏幕中的特定位置。一般來(lái)說(shuō)，品牌、導(dǎo)航和其他工具放置在外邊緣——典型的是在頂部的左右兩個(gè)角落——來(lái)保持注意力集中在圖片本身。

首屏大圖在各類網(wǎng)站設(shè)計(jì)中廣泛發(fā)揮作用，幾乎適合任何設(shè)計(jì)風(fēng)格。這種視覺(jué)上討人喜愛(ài)的趨勢(shì)，其實(shí)只需要一樣關(guān)鍵事物——一張?bào)@艷的圖片。

使用首屏大圖的訣竅

一旦你決定使用首屏大圖，設(shè)計(jì)時(shí)要記住一些要點(diǎn)。設(shè)計(jì)要干凈，元素不能干擾主圖片、圖集或視頻。在這類設(shè)計(jì)中，分離各種元素至關(guān)重要。設(shè)計(jì)焦點(diǎn)圖片時(shí)，記住這幾點(diǎn)：

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

有啟發(fā)性的案例

互聯(lián)網(wǎng)上隨處可見(jiàn)優(yōu)秀的首屏大圖案例。這組案例包括了正式上線的網(wǎng)站和進(jìn)行中的作品。

贈(zèng)品

若你正準(zhǔn)備從首屏大圖入手，通常有兩種免費(fèi)資源可供選擇——由真實(shí)圖片或3D渲染構(gòu)成的首屏大圖，或是繪畫作品。這取決于具體項(xiàng)目，每種風(fēng)格都能良好發(fā)揮作用。

下載焦點(diǎn)圖片時(shí)候要注意的是分辨率（圖片要大過(guò)最的大屏幕寬度）、可編輯、文件格式和智能對(duì)象（如果你要四處移動(dòng)元素的話）。正如所有免費(fèi)的設(shè)計(jì)元素一樣，確保核對(duì)過(guò)使用許可，遵循相應(yīng)條款。免費(fèi)贈(zèng)品通常可以用于個(gè)人項(xiàng)目，但商業(yè)項(xiàng)目需要支付費(fèi)用；使用前閱讀任何元素的所有細(xì)節(jié)。

2個(gè)免費(fèi)的首屏大圖展示

扁平風(fēng)格首屏大圖

2張復(fù)古風(fēng)格首屏大圖

創(chuàng)意素材集

免費(fèi)焦點(diǎn)圖資源

付費(fèi)資源

盡管有很多免費(fèi)資源，也有相當(dāng)多的高質(zhì)量付費(fèi)首屏大圖資源。在付費(fèi)資源包中，你可能有更多選擇。購(gòu)物愉快！

16張首屏大圖Vol. 1（$20）

食物首屏大圖模版#3（$20）

87張首屏大圖素材包（$35）

扁平風(fēng)格創(chuàng)意工作臺(tái)（$11）

樸實(shí)的素材圖片（$20）

藝術(shù)器材場(chǎng)景（$12）

總結(jié)

不久的將來(lái)，首屏大圖會(huì)是網(wǎng)頁(yè)設(shè)計(jì)中的一種最棒、最富視覺(jué)吸引力的趨勢(shì)。這項(xiàng)技巧的妙處在于，它可以與幾乎任何東西搭配。想要設(shè)計(jì)扁平風(fēng)格、極簡(jiǎn)風(fēng)格，或是復(fù)古風(fēng)格？就用首屏大圖。

你在項(xiàng)目中使用了首屏大圖嗎？可以在評(píng)論中與我們分享。我們樂(lè)于看到你正在進(jìn)行的項(xiàng)目。

新聞名稱：首屏大圖:最大限度利用設(shè)計(jì)
網(wǎng)頁(yè)路徑：http://www.bm7419.com/news7/166957.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、網(wǎng)站改版、響應(yīng)式網(wǎng)站、Google、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)