網頁設計:應用背景大圖更起範兒!

2021-02-13 上海艾藝

用圖像創造場景感,增強用戶的真實體驗,近些年來,圖片作為背景填充整個屏幕的設計越來越廣泛,曾經只有時尚潮流網站或者攝影類站點才會特別依賴富有衝擊力的圖像,但是現在幾乎任何類型的網站都有可能採用這種大圖片作為背景,特別是企業品牌宣傳、產品介紹等等。

在設計網頁過程中,需要用到大量的圖片,而且找到的圖片大多風格迥異、無品牌感,那麼如何找到合適而又能正確地應用圖片呢?

整理了一些經驗總結供大家參考:

首先需要提煉產品特性關鍵詞,通過關鍵詞的形式尋找合適的圖片。

上圖是google雲盤官網banner背景為一張在飛機向外看的圖片,不難發現用這種比擬手法來表現雲盤的口號「隨時隨地使用」,在任何時候、任何地點都可以使用文件。換位思考,假如我們來設計google雲盤官網,首先提煉出關鍵詞:隨時隨地、自動同步、超大空間等等,用最能突出特點和有代表性的關鍵詞來尋找合適的圖片。

上圖是IBM旗下的MobileFirst產品,其主要為用戶移動應用從創建到維護推出的一體化解決方案為廣大用戶提供更便利服務,那麼根據項目提煉出關鍵詞:手機、用戶,該網站用了一張人拿著手機進行使用的圖片,目的是為了突出項目的業務特點。

上圖分別為蘋果官網、研究無線電技術企業——高通的網站中運用的圖片同樣也是通過產品特點提煉的關鍵詞來完成圖片的選用。

什麼是圖片品牌化?通過關鍵詞尋找到的圖片進行深度加工處理,使之在項目中運用到的圖片都是一整套的、風格統一的,比如可以在圖片的色調、色彩飽和度與特色風格上做調整等等,下面舉幾個案例。

Google Drive官網摘取出來的圖片,這些圖片不難發現無論在色調、色彩飽和度上是一致的,特點是低飽和度、顏色深沉和圖片噪點,顏色上新穎有特色、風格上具有明顯的品牌統一性。

上圖為SAP公司官網的系列圖片,作為全球最大的B2B企業為各行各業、不同規模的其他企業提供解決方案,正如它運用不同行業場景的圖片一樣:色彩豐富、但色調又不過於鮮豔,它們所有用到的圖片都有這些特點。

美國高通網站的品牌宣傳圖片讓人印象深刻,品牌特點獨樹一熾,顏色上運用冷暖搭配,加以漸變效果巧妙地疊加於圖片上,雖然顏色種類不多,但能在風格、品牌上具有強烈的統一性,讓人對品牌辨識度有更加深刻的記憶性。

去年做了幾個騰訊雲的項目改版,嘗試新的風格探索,排版上採用了大圖片為背景。設計過程中考慮到產品的長遠發展,通過研究後發現圖片統一風格在產品品牌推廣上有著非常重要的作用,通過幾經打磨快速整理了實現方案。騰訊雲線上新版本的頁面圖片已經實現了統一風格。


總結

大圖片作為背景的設計風格,這種設計方式雖然非常強有力地抓住用戶的注意力,能準確應用圖片而達到更大的體驗效果是非常重要的,如果去掌握,了解項目背景,利用關鍵詞的方式尋找更合適的圖片,此外還需關注用戶對產品的印象程度,那麼圖片的品牌化就顯得格外重要,把產品所用的圖片設計為一整套統一的風格出來的效果是不可估量的。

相關焦點

  • 2015年網頁設計背景圖流行趨勢
  • ​網頁設計配色10大趨勢
    這一年中湧現了許多優秀的設計作品,設計趨勢也在時間的推移中漸漸轉變。一起來看看2015年哪些網頁配色最受歡迎。Odam Luiran的網站就是典型的Metro風格,這種風格尤其適合比較鮮嫩柔和的顏色。近來,扁平化網頁設計相當流行,同時也讓柔和色彩的用途變得越來越廣泛,馬卡龍色系也會常常出現在網頁設計中。偏灰的冷色系色彩,是一種看起來比較百搭的顏色。
  • 二柱男神來信:能幫我設計一個淘寶詳情頁嗎?
    不過昨晚小編看朋友圈發現了二柱媽媽的最新動態——二柱食堂的官方網頁設計圖片分享。同學們請注意,這裡要劃重點哦,不是淘寶店,更不是微商,而是高大上的官網呀!這可是濃墨重彩的一筆,把小編瞬時帶回了老太太要動態logo的牛掰閃閃的時刻。點開網頁之後小編內心活動是這樣的:這次的設計應該是交了錢的。
  • 網頁設計:字體怎麼設置才能讓網頁更美觀個性
    但是,如果你不好好設計網頁,只是隨隨便便替換下圖片和文字就發布上線了,那就很難把網站做出自己的個性。網站字體是網站個性的一個重要展現形式,字體獨特的話,也能給訪客留下深刻印象。如何設置一個獨特的字體呢?你可以利用「上線了」sxl.cn建站的「上傳自定義字體」功能實現這個效果。
  • 網頁設計新趨勢:我所知道的關於web字體的一切
    我並沒有根據他的模型來使用字體,為此他專門把我叫出來並告訴我這是一個非常大的錯誤。我該如何彌補呢? 「我不知道。但是目前它是最大的問題,毫無疑問。」  說起來,在過去的很長一段時間裡,我都同不同的網頁設計師一起合作開發各種不同的網站,這使得我逐漸開始關注網頁設計中的很多細小但重要的細節了,比如,字體。  在此可以簡單介紹一點背景知識。
  • 第一彈:製作家鄉網頁設計的全過程(圖文教程)
    需求 做一個介紹家鄉的網頁設計,用table進行布局,至少為三行兩列表格,包含文字、圖片、超連結、表單等元素,至少包含四頁。
  • 視頻教程:流行的全屏式網頁是怎樣設計的?
    設計達人www.shejidaren.com愛設計,愛分享前言:現在的PC基本上是寬屏時代,網頁設計也幾乎使用寬屏或全屏式設計
  • 2017年網頁設計的趨勢與特點!
    01半扁平化設計過去純粹的扁平化設計幾乎統治了整個網頁設計市場,但今年由於具體化設計的影響,今年的網頁設計會變得更加趨向於立體化
  • 不愧是今年最棒的設計,這個網頁簡直有毒!
    發現這個網站得益於它被著名的網頁展示平臺the Favourite Website Awards評為了2015年度最佳網站,這相當於得了網頁設計界的奧斯卡。喜歡設計的朋友對FWA應該是不陌生的,畢竟大家平時找靈感的時候也沒少看它,對嘛?FWA對網頁設計的評判標準相當嚴苛,能獲得它們「最佳」稱號的網站都兼具審美、功能和創意,在某種程度上代表了全球網頁設計和媒體創意的最高水平和風向標。
  • 設計靈感:12 款醫療類網頁界面設計
    來看看這12款醫療網頁設計,貼心的醫療網站助你擁有健康生活!Doctor Appointment Dashboard UI by Pentyakov V.Management System for Hospitals and Labs by Cleveroad來源:Dribbble關注『UI設計達人』看UI
  • Lively Wallpaper:一款輕鬆為Win10設置動畫桌面的新應用
    據外媒報導,Windows 10擁有一系列能改變桌面和應用的外觀從而使作業系統變得更個性化的設置。
  • 特邀專欄:遊戲圖標的設計跟其它應用的圖標設計有何不同?
    既然是軟體,其圖標的設計也就不應該和其他普通的軟體對立開來看待。從產品的角度來說,一個完整的軟體產品設計,不僅僅包含了應用程式入口圖標的設計,更有非常多的圖形交互界面圖標(控制項)設計。同時,它們的所被賦予的「使命」是不同的。
  • 【赤峰大圖】鳥巢體育館元宵節群星演唱會
    安又琪是晚會真正的亮點,一出場就明星範兒十足,韓式髮型和混搭的服飾令人印象深刻。【赤峰大圖】是赤峰市唯一一家以原創高質圖片播報當地資訊的獨立網媒,首發於微信公眾號『赤峰大圖』,旨在弘揚正能量,助力大赤峰的中國夢!
  • 信息設計:一些視覺思維應用的學習資源
    這幾天,一直在聊「信息設計」的話題。後臺有用戶問:有沒有好的學習資源推薦?利用節日重新梳理了以前的博客文章,下面分享給你:我最喜歡的視覺思維大神:1.全景大圖的發明者:E.Robert Horn 博客:http://web.stanford.edu/~rhorn/2.餐巾紙背面的大神 Dan Roam
  • 雅安這個小區真奇怪,淡藍色的背景、青青的竹籬笆、還有文藝範兒的牆畫
    淡藍色的背景、青青的竹籬笆、文藝範兒的牆畫……小區大院很少使用這種裝飾風格,然而名山區中心社區的文軒小區卻是個例外,它處處布置的詩情畫意。
  • Google 應用大更新:新 UI、更智能
    總的來說,Material Design 這種設計語言非常簡潔,看上去與 iOS 8 的扁平化有相近之處,看上去都更加抽象,但是借鑑了傳統的印刷設計和光影效果與動畫效果,為很簡單的圖形提供了立體和實物般的效果。
  • 印度再禁用中國背景應用程式 中使館回應:損人不利己
    11月25日,中國駐印度使館發言人嵇蓉回答記者相關提問時表示,中方堅決反對印方一再以「國家安全」為藉口對擁有中國背景的手機應用程式採取禁用措施。他強調,中國政府一貫要求中國在海外企業遵守國際規則、合法合規經營、尊重公序良俗,希望印方能夠為包括中國在內的各國市場主體在印投資經營提供公平、公正、非歧視的營商環境,並糾正這一違反世貿組織規則的歧視性做法。
  • 深圳梅觀高速公路上的BIM設計應用
    2.現狀管線遷改項目區域地下管網密布,對項目設計方案和實施影響非常大,尤其是管廊布設和管線遷改的難度極大。項目組利用BIM技術可視化的優勢,在地下密布的構造物基礎和管網中,通過道路、橋梁、綜合管廊各專業間協同設計,比選出最優的管廊方案和管線遷改方案。
  • Google:青少年比成人更會使用語音搜索
    約55%的18歲及以下人群使用Cortana,Google Voice Search或Siri,至少一天一次,而成人只有41%。對於一天使用手機超過11小時的青少年來說,這個數字攀升到了75%。年輕的用戶並不擔心周圍人的眼光,當身邊有朋友時,他們更有可能使用語音指令(57%對比24%)。同時,約45%的成人在對著智慧型手機說話時會覺得自己很書呆子氣。