您現在的位置是:電腦技術吧?>? 編程技術 ??>??網站背景圖,背景圖??>??正文詳情

網站背景圖,背景圖

系項明2019-11-16 15:20:45 人圍觀
簡介優質背景圖高清幾乎所有的設計師都知道在網頁設計中使用圖形的重要性,但是在實際的項目中,如何做好圖片設計呢?本文將與大家分享如何通過把握圖片的意圖來做好設計給設計師

幾乎所有設計師都知道網頁設計中用圖的重要性,但在實際項目中,如何做好圖片設計?本文將與大家分享如何通過把握圖片的意圖做好設計。

  給設計師的建議:做圖前先別急著找素材!  如果能做好兩個準備工作,對設計師們會有幫助:  1、 梳理網站中所需圖片類型  沒經過思考就直接開工是設計效率低下的罪魁禍首。

  在圖片設計前,設計師最好能參考目前已有的網頁粗略布局和欄目等,重新梳理列出網站中所需的圖片類型。

  比如,按照欄目和模塊對所需的圖片分類:Banner、業務介紹、產品介紹/展示、公司介紹、團隊介紹、新聞/資訊、客戶案例等。

  當然,設計師也可以根據項目實際情況,或最適合自己的方法采用更好的圖片分類。

  梳理圖片類型是幫助設計師重新梳理網站內容,讓后面工作更有計劃和針對性。

  2、 明確圖片的意圖  在一個網站中,瀏覽網頁時所看到的圖片不應僅做到吸引用戶的視線,而更能讓用戶通過視覺影像,準確感受到網站傳遞的信息。

  實際上,網頁上的圖片不只是美麗的像素塊,所有的圖片都應該是有意圖的。

  了解圖片意圖,對設計師來說就是明確圖片的設計目標,這是非常重要的一步工作。

  我們總結了幾個常見的圖片意圖:展現產品特點(優勢);與文字相關聯,保持元素一致性;幫助人理解某些東西;教導人使用(某產品);以人物視線引導用戶;營造氛圍;渲染情緒;塑造品牌。

  以下是實際案例分享:  展現產品特點:

  上面案例是fiftythree網站的Banner圖。

  在一個網站中,首屏對用戶的第一印象幾乎起決定作用,而Banner圖在首屏中所在的位置,決定了其重要性。

尤其對于營銷型網站來說,Banner圖是一個最佳產品展示的位置。

  案例中的圖片展示了Pencil使用在iPad(Apple系列產品)上的畫面,即產品的使用場景,也是產品的一個特點。

  該案例的圖片意圖非常明確,和文字搭配在一起,既有宣傳、推廣產品的作用,又是一個引導用戶點擊參與的入口。

  與文字相關聯,保持元素一致性:

  上圖案例是aiia產品博客的Banner,此處的圖片與文字高度相關,既保持了元素的一致性,又通過色調上明與暗的處理,呈現了一種視覺美。

  用戶在打開博客后,會同時關注到文字和背景的產品圖片,在腦海中留下具象化的印象。

  其實對設計師來說,圖文相關是設計中的一個基本原則。

但大部分網站忽略了這一點,甚至導致信息不能正確傳遞、銷售機會減少等問題。

  有一個來自Web易用性大師Jakob Nielsen的研究結論:單純的裝飾性圖片會潛意識地被我們大腦忽略。

  這項研究表明圖文相關性的重要作用,成為設計指導原則。

  圖片與文字相關聯更應該被設計師用于項目實踐中。

  幫助人理解

  Zuli網站中為用戶展示的是一款新穎的智能家居產品,其中首頁Banner以產品使用場景為背景。

  這款產品是怎么用的?上圖幫助用戶快速理解網站傳達的內容。

  此處圖片經過專業拍攝和處理,清晰、干凈,并且將原本需要一大段文字描述的信息,成功以看圖說話的方式直接向用戶展示,幫助用戶更好地理解產品。

  教導人使用

  在Zuli網站的How it Works頁面中,網頁以圖文結合方式展示產品的多個使用狀態或場景。

  該網頁的所有圖片風格一致,圖片設計都以實體圖像為主,通過扁平化的圖標建立了產品與手機App之間的虛擬聯系,簡單易懂。

  此處圖片的意圖是教導用戶使用產品。

  當用戶瀏覽網頁時,圖片可以吸引人的注意力,并讓用戶對圖片內容高度敏感,進而主動瀏覽文字深入了解產品如何使用,激發更大興趣。

  一般情況下,設計目標為教導人使用的圖片,更適用于新產品或使用復雜的產品,這種方式可以幫助用戶快速掌握使用技巧,降低產品使用成本,獲得用戶青睞。

  以人物視線引導用戶

  Ines Maria Gamler網站中展示的女性正側著臉,雙眼注視網站中間的文字。

打開網站時,大多數人會首先關注人物的臉部,并進一步受到人物視線的引導。

  隨著人物的視線,用戶會進一步將注意力放在網頁中間的文字和圖形上。

  這種設計方式有兩個關鍵:一般先通過美麗的模特(或其他人物形象)吸引用戶關注;用戶會繼續跟著模特視線轉移注意點,關注產品、文案或Logo,達到圖片設計的目標。

  在著名的You Look Where They Look研究里,通過對嬰兒尿布零售商網站的眼動研究,得出了結論:廣告中,用戶眼球可以被模特(或人物形象)的視線所引導。

  通過人物視線的巧妙引導,可以讓網站重要信息得到展示,并改善用戶視線只關注模特的問題。

  營造氛圍

  打開23snaps網站后,左側圖片瞬間吸引人的注意力,給人一種親切感。

  對用戶來說,生活化的圖片濃縮了人們日常生活的一個場景,有熟悉的感覺。

圖片從整體營造了溫馨的氛圍,并且人物愉悅的表情能影響人的心情,讓用戶感受到一種歡樂、溫馨的家庭氣氛。

  此處同樣采用了人物視線引導用戶,跟著圖片中兒童的視線,用戶會進一步關注到圖中文案和注冊/登錄區域。

  該案例還從整體構圖展現了App使用場景,向用戶傳達了Share Family Photos的定位。

  渲染情緒

  UDO網站采用的圖片展現了大量美麗景色,布局和色彩的整體搭配,從視覺上帶給用戶一種清新舒適的感覺。

  審美是人人具備的天性,一個網站是否好看,用戶在第一眼就會有直觀的判斷。

受到大腦中的原始人影響,圖片美觀程度能真正影響到用戶對網站第一印象。

  該案例中的圖片給在視覺設計上給用戶留下一個好印象,激發用戶的想象,并釋放出優美、清新、寧靜等感受,讓用戶感到放松,并樂意繼續瀏覽網站。

  塑造品牌

  Katia Bongiorno是一個品牌網站,該案例的產品/服務通過一系列風格統一的高清大圖全屏展示,在用戶群體中塑造了高端、精美的品牌形象。

  對用戶來說,高質量的大圖往往更受歡迎,風格統一的圖片既有視覺震撼力,又容易給人留下較深刻的印象,長久吸引用戶注意力。

  成功品牌可以在很久之后,通過視覺上的獨特,喚起人潛意識里的印象,讓用戶聯想到該品牌。

  此處的高清大圖以及圖片風格統一是塑造品牌的關鍵因素,無形中加深了人的印象,留下長遠影響。

  以上幾個案例是最常見的圖片意圖,同時也是圖片設計中需要實現的目標。

  設計師需要做的,就是加深對項目需求和客戶公司的業務了解,以便更明確網站中各欄目圖片的設計目標。

  準備工作完成后,再綜合考慮需求分析階段的成果(設計構思、網頁內容結構、網站風格等),設計師們就可以開始準備拍攝或搜集圖片素材了。

版權聲明:本文由 系項明 整理編輯。

原標題:千圖網背景圖,好的背景圖

轉載注明出處:http://www.dn9ww09s.icu/program/12870.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 聲道切換,左右聲道切換

    聲道切換,左右聲道切換 相關圖片耳機聲道怎么設置完美解碼是一款沒有廣告的強大播放器,深受廣大用戶的喜愛。然而,一些新用戶不知道如何切換語言,也不知道如何切換頻道,所以當他們遇到一些多語言版本的電...

  • 才華與美貌,美貌與才華并存

    才華與美貌,美貌與才華并存 相關圖片美貌與才華于一身的女子網頁設計師面臨的最大挑戰之一可能是平衡網站的功能性和可視性。你說,我也想成為“極簡主義者”和“高個子”。但如果沒有紅色按鈕,用戶就不知道在哪...

  • wechat如何發音,wechat 翻譯

    wechat如何發音,wechat 翻譯 相關圖片wechatexe是什么意思微信現在是很多人聊天和支付的必備工具,而一些用戶發現身邊的一些人手機上沒有微信,只有微信。微信是什么意思?微信和微信有什么區別wechat fet是什么意思...

  • 極簡風格,現代極簡風格

    極簡風格,現代極簡風格 相關圖片極簡什么是極簡主義設計極簡主義設計?嚴格地說,它不能被視為一種視覺風格,而是一種設計理念。在保留基本骨架內容的基礎上,去除多余的元素、裝飾、顏色和紋理。這是一個通...

  • 印象筆記 破解,印象筆記破解版

    印象筆記 破解,印象筆記破解版 相關圖片手機印象筆記高級破解版筆記不僅是一個云服務筆記軟件,幫助您記錄您的生活和工作,而且是一個協作工具,可以共享數據和基于數據的通信。為了了解notes在高效工作筆記中的位置,...

  • win 10專業版密鑰,win7專業版密鑰

    win 10專業版密鑰,win7專業版密鑰 相關圖片win10家庭版升級專業版密鑰大多數人安裝win10時,旗艦版或家用版都可以,但對于一些技術人員、中小企業等安全性較高的群體來說,需要使用win10專業版。小編在這里分享win10專業版的一...

  • 綠色菜單,綠色美食菜單

    綠色菜單,綠色美食菜單 相關圖片綠色的菜名本文以div CSS為例實現了一級菜單的綠色級代碼。與您分享以供參考。具體如下:這是一個基于div CSS的綠色級網站菜單。我相信這是一個你喜歡的CSS菜單,綠綠色莊園烤肉菜單...

  • 應版權方要求,應版權

    應版權方要求,應版權 相關圖片應版權方要求不能下載隨著數字版權的逐步規范,一些用戶在網上下載資源時遇到了應版權人要求無法下載的情況。我們怎樣才能解決這個問題?有兩種情況,一種是資源因侵權被撤銷...

  • win10專業版激活碼2019,win10最新激活碼

    win10專業版激活碼2019,win10最新激活碼 相關圖片win10家庭版激活碼使用win7和win8的putty,升級到win10并不容易。發現win10只有激活后才能正常使用。一般來說,非活動win10系統最明顯的特點是需要激活的水印會window10專業版激活碼...

  • 奶瓶三個圖標,奶瓶圖標

    奶瓶三個圖標,奶瓶圖標 相關圖片圖標是奶瓶的app叫什么在下面的教程中,我們將從基本形狀開始,完全使用flash繪制一個小瓶子圖標首先我們從一個圓角矩形開始,并將其底部調整為一個圓形如果您熟悉Bezier曲線,這并...

熱評文章

  • 怎么解綁手機令牌,怎樣解綁qq手機令牌

    怎么解綁手機令牌,怎樣解綁qq手機令牌 相關圖片怎么解綁令牌手機代幣是我們確保騰訊賬戶安全的法寶。當賬戶被消費或被盜時,它可以被大量使用。手機代幣只能用來保護騰訊賬戶的安全。一。用戶可按QQ順序登錄個人安全中心qq怎...

  • 女人的顏色,美女

    女人的顏色,美女 相關圖片給點顏色就發這篇文章不是讓你看這篇文章來做這個效果,而是給你一些啟發。我不想再叫這個教程了。我只想和你分享我的一些感受。也許你可以發現你需要什么來添加你獨特的想法...

  • 天貓積分獲得,如何快速獲得天貓積分

    天貓積分獲得,如何快速獲得天貓積分 相關圖片天貓積分怎么來的當買家在天貓購物時,會得到一定數量的天貓積分。以前,天貓積分可以用來扣除購買金額,但后來這個功能被取消了,天貓積分可以用來兌換積分權益,兌換天貓購...

  • mxfq,mxfq怎么用

    mxfq,mxfq怎么用 相關圖片類似mxfq的xp模塊經常使用Android手機的用戶對mxfq并不陌生。Mxfq是QQ聊天工具的一個小版本。它可以和QQ結合使用,但是它的窗口很小,而且還可以設置為透明,這不會影響q酷安...

  • 容器排污閥怎么設置,容器被重新設置大小

    容器排污閥怎么設置,容器被重新設置大小 相關圖片權限設置并未向在應用程序容器設置容器的文本行為將替換具有指定內容的頁面上的現有容器。頁面上的容器引用任何可以包含文本或其他元素的HTML元素;指定的內容可以包含任何有效...

  • markdown筆記是什么,markdown做筆記

    markdown筆記是什么,markdown做筆記 相關圖片markdown是什么威志筆記是一個非常容易使用的筆記軟件。偉志筆記是一款專注于高效工作筆記的移動應用,也是中國唯一的云筆記產品。很多用戶不知道降價可以用來了解筆記印象筆記...

  • 表單標簽是,html表單樣式

    表單標簽是,html表單樣式 相關圖片html5表單input[表單目的]對于一般的網頁設計初學者來說,表單功能并不常用,因為表單必須使用CGI、JavaScript或ASP程序來操作,否則單靠表單沒有多大意義。但是,一旦html制作表單...

  • 黑鯊裝機大師怎么用,黑鯊裝機大師能用嗎

    黑鯊裝機大師怎么用,黑鯊裝機大師能用嗎 相關圖片用了黑鯊裝機大師重啟不了當您需要重新安裝計算機系統時,網絡上有許多一鍵式安裝工具,非常容易使用。黑鯊安裝大師就是其中之一。它是一款簡單方便的系統重裝軟件,可以快速...

  • 賽博加速器用不了,賽博加速器好用嗎

    賽博加速器用不了,賽博加速器好用嗎 相關圖片賽博加速器激活碼怎么用賽博加速器是網絡游戲加速器的一個很好的應用,特別是當玩家玩外服游戲時,他們特別喜歡使用賽博加速器。如何使用塞伯坦?使用塞伯坦很容易。啟動Cybe...

  • 一鍵啟動,一鍵啟動按了沒反應

    一鍵啟動,一鍵啟動按了沒反應 相關圖片無鑰匙啟動啟動頁面也被稱為flash screen,它已經開始出現在越來越多的本地化應用程序中。現在,越來越多的應用程序將啟動頁面作為必要的UI組件添加到了它們的產品中。無鑰匙啟動怎...

關注微信

变脸官网查询