本文從(cóng)找圖、圖片比例到降噪方法、後期處理技巧、運用須知等全方位總結了(le)關于圖片設計的基礎知識，
今天給大家分享的是關于圖片設計的那(nà)些事兒，希望今天的分享可(kě)以讓你知道(dào)圖片的重要(yào)性以及圖片在設計中的一(yī)些基本處理技巧。
圖片在設計中的定位就如(rú)同一(yī)個人(rén)的衣着品味，不同的穿衣風(fēng)格會使别人(rén)對你作(zuò)出不同的判斷，為(wèi)你打上(shàng)不同社會屬性的标簽。随着用戶對各類體驗的不斷升級，商家也在各種細節上(shàng)面不斷優化，對于圖片的要(yào)求也不斷加以重視(shì)。今天給大家分享的就是關于圖片的那(nà)些事兒，希望可(kě)以帶給你更多幫助。
本文将從(cóng)圖片在設計中的重要(yào)性開(kāi)始解析，加強大家對圖片的認知；再從(cóng)圖片比例、後期處理技巧、設計中的運用須知等方面分享關于圖片在設計中的處理經驗；最後也會分享一(yī)下(xià)我們在尋找合适的圖片過程中的方法與後期圖庫的管理經驗。
相信圖片在設計中的重要(yào)程度對于設計師(shī)來說已經了(le)然于胸，雖然大家都(dōu)會選擇更好的圖片資源來進行(xíng)設計，但(dàn)是依然還有很(hěn)多需要(yào)設計師(shī)注意和(hé)把控的地(dì)方，下(xià)面我們一(yī)起來看(kàn)看(kàn)。
越來越多的産品對圖片質量開(kāi)始加以重視(shì)，比如(rú)網易嚴選對産品圖片的拍攝與處理都(dōu)有嚴格的規範，目的就是為(wèi)了(le)提升産品氣質和(hé)在用戶心中的印象。我們在設計的時(shí)候更要(yào)以最佳的圖片來烘托我們的設計稿，圖片的質量影響着整個設計的格調。
在産品設計中，很(hěn)多夥伴會覺得圖片都(dōu)是後期運營上(shàng)傳的，我設計稿做(zuò)得再精美最終也是沒用的。對于這(zhè)個問(wèn)題我的觀點是這(zhè)樣的：
雖然前面提到圖片質量的重要(yào)性，但(dàn)是我們不能(néng)為(wèi)了(le)視(shì)覺效果選擇一(yī)些與主題無關的配圖，這(zhè)樣也會給決策者一(yī)種誤導。我們可(kě)以提高配圖的質量，但(dàn)是需要(yào)保證圖片的真實還原，這(zhè)樣才能(néng)讓你的設計作(zuò)品更加真實合理。
在一(yī)些本土(tǔ)的産品設計中，對于國(guó)外(wài)圖片素材的運用，需要(yào)謹慎對待。如(rú)案例中的模特形象，文案信息的傳達更加偏向于國(guó)內(nèi)的場景，如(rú)果運用一(yī)張國(guó)外(wài)的模特素材也許格調更高，可(kě)是卻無法真實的還原産品場景，會給決策者傳達一(yī)種錯誤的認知。
關于版權這(zhè)個問(wèn)題往往還有很(hěn)多設計師(shī)不以為(wèi)意，要(yào)麽是壓根就沒注意這(zhè)個問(wèn)題的重要(yào)性，要(yào)麽就是抱着僥幸心理。我們作(zuò)為(wèi)專業的設計師(shī)，不僅需要(yào)保護和(hé)維護自(zì)身權益和(hé)公司利益，對于作(zuò)者的尊重也是基本的職業素養。
在項目中面對圖片版權問(wèn)題我們要(yào)主動告知需求方，這(zhè)樣我們盡到了(le)職業義務，也讓需求方能(néng)夠做(zuò)出正确的判斷。
在對産品界面進行(xíng)布局的時(shí)候，圖片的比例往往被大家所忽略，憑着自(zì)我感覺任意選擇一(yī)個整數(shù)數(shù)值進行(xíng)設計，在多個地(dì)方出現相同內(nèi)容圖片的時(shí)候也會尺寸混亂，這(zhè)樣無形中增加了(le)前後台的規範性和(hé)存儲壓力。
下(xià)面從(cóng)項目中常用的圖片比例和(hé)需要(yào)注意的地(dì)方給大家進行(xíng)分析，也給大家分享一(yī)下(xià)圖片比例的選擇方式，在整套産品設計中需要(yào)保持一(yī)緻性等問(wèn)題。
不同比例的圖片所傳達的信息主體不盡相同，根據産品屬性我們會選擇與之相符的圖片比例進行(xíng)整體的界面布局。
通(tōng)過體驗一(yī)些主流的産品，我們會發現比較常用的圖片比例，如(rú) 1:1、2:1、3:1、3:2、4:3、16:9、16:10 等等。也會發現一(yī)些打破常規比例的設計，我們需要(yào)分析它們的性格，結合自(zì)身産品的特點，才能(néng)在自(zì)己的産品設計中合理地(dì)運用。
下(xià)面選擇幾個常用比例進行(xíng)分析，希望抛磚引玉，帶給大家更多的思路。
1:1 強調主體的存在感
1:1的圖片比例是比較常見(jiàn)的一(yī)種設計比例，利用此長(cháng)寬比更容易将構圖歸整得簡單，突出主體的存在感。常用于産品展示、頭像、特寫展示等場景，在電商類産品中尤為(wèi)常見(jiàn)，如(rú)：淘寶、網易嚴選、網易考拉等。
在産品設計中通(tōng)常以兩欄或以上(shàng)為(wèi)主，通(tōng)欄展示的情況一(yī)般用于商品詳情頁頭圖部分展示居多，其餘界面布局較少(shǎo)利用通(tōng)欄展示。
4:3 圖像緊湊、更易構圖
4:3的圖片比例可(kě)以使圖像更緊湊，更易構圖，方便設計師(shī)進行(xíng)發揮。由于手機屏幕容量較小，作(zuò)為(wèi)全屏展示時(shí)，該比例在産品設計布局上(shàng)面占用空間(jiān)較大，通(tōng)常我們作(zuò)為(wèi)分欄來進行(xíng)界面布局。
對于設計師(shī)來說，這(zhè)個比例經常接觸，站酷、Dribbble 等的作(zuò)品封面，在攜程、廚房故事等産品中也均采用這(zhè)個比例。
16:9 電影場景般的效果
16:9的圖片比例可(kě)以呈現電影場景般的效果，多用于橫向構圖，是應用非常廣泛的尺寸比例之一(yī)，能(néng)給用戶一(yī)種視(shì)野開(kāi)闊的體驗。在很(hěn)多影視(shì)娛樂(yuè)類産品設計中運用廣泛，如(rú)騰訊視(shì)頻(pín)、網易雲音樂(yuè)等。
16:10 擁抱黃(huáng)金(jīn)比例
黃(huáng)金(jīn)比例就像金(jīn)字塔上(shàng)的明(míng)珠，越接近她越有魅力，16:10的圖片比例最為(wèi)接近。設計沒有絕對的标準，我們可(kě)以遵循一(yī)些優秀的規則，但(dàn)是也要(yào)敢于突破規則，嘗試更多的可(kě)能(néng)性。
X:≤Y 瀑布流設計
X:≤Y代表寬度固定，高度在最大值之間(jiān)自(zì)定義的瀑布流設計，在一(yī)些用戶沒有很(hěn)明(míng)确的目的，隻是喜歡獲取盡量多的信息的情況下(xià)采用這(zhè)種設計方式。X:≤Y的圖片比例要(yào)注意高度的控制，最大值不要(yào)超出屏幕可(kě)顯示區(qū)域的範圍。
以上(shàng)列舉的僅為(wèi)部分常用比例的分析與說明(míng)，還有更多的比例這(zhè)裏就不一(yī)一(yī)演示，分享的目的是讓大家養成分析的習慣，結合自(zì)身産品特點選擇适合的圖片比例。
圖片比例選擇方式：
當我們結合産品特點确定合适的圖片展示比例以後，需要(yào)針對整體的布局與圖片分布情況，規範出那(nà)些布局可(kě)以采用相同的圖片展示比例。在保障視(shì)覺效果與交互形式的情況下(xià)，相同的主體，在不同的頁面中最好采用相同的比例呈現，這(zhè)樣的好處不僅可(kě)以保持視(shì)覺表達的一(yī)緻性，也能(néng)給後期運營維護帶來便利。
如(rú)果說公司有專業的攝影團隊，那(nà)麽對于圖片的需求相對會容易滿足。對于大部分的團隊來說設計師(shī)找圖與處理圖片都(dōu)是比較日常的工(gōng)作(zuò)，在産品設計裏面，雖然不一(yī)定能(néng)夠達到專業修圖師(shī)的精修标準，但(dàn)是比較常見(jiàn)的處理技巧還是需要(yào)掌握的。
在項目中，我們會通(tōng)過一(yī)些圖庫網站去尋找合适的配圖，但(dàn)是想要(yào)剛好滿足還是比較難的，對素材進行(xíng)裁切來突出我們想要(yào)的部分是比較簡單的圖片處理技巧。
實際生活中拍攝的照片總會出現很(hěn)多幹擾主體的內(nèi)容，裁切掉多餘的內(nèi)容突出主體信息。裁切後的圖片構圖更緊湊、凝聚，主體更具吸引力。這(zhè)也是我們說的對圖片進行(xíng)降噪，排除多餘的幹擾。
當系列圖片進行(xíng)排版時(shí)，需要(yào)保持圖片比例尺寸的統一(yī)性，當我們在多個圖片素材之間(jiān)進行(xíng)裁切處理時(shí)，需要(yào)以最小裁切空間(jiān)的圖片為(wèi)示例去裁切其它圖片，這(zhè)樣才能(néng)保證最終的展示效果。
如(rú)果是人(rén)物(wù)圖片，需要(yào)注意人(rén)物(wù)眼睛的視(shì)平線，讓眼睛的位置盡量保持在水平線左右。
當我們在選擇人(rén)物(wù)圖片的時(shí)候，一(yī)張特寫鏡頭能(néng)傳達一(yī)種眼神與眼神交流的感覺，在進行(xíng)裁切的時(shí)候要(yào)以視(shì)平線為(wèi)準進行(xíng)縮放裁切，可(kě)以保留眼神的交流感。圖片放得越大，眼神的交流感就會越強。
我們在選擇圖片的時(shí)候，如(rú)果是如(rú)同城市建築等類型的垂直主體時(shí)，我們需要(yào)注意主體物(wù)與地(dì)平線的垂直關系。如(rú)果構圖特意需要(yào)傾斜的效果另當别論，否則我們将會優先考慮這(zhè)個因素，選擇主體垂直的圖片或者後期微(wēi)調讓主體垂直地(dì)平線，這(zhè)樣整個畫(huà)面更加協調穩定。
在選擇圖片時(shí)如(rú)果有明(míng)顯地(dì)平線的照片，需要(yào)注意地(dì)平線是否平行(xíng)。地(dì)平線的平行(xíng)将會有助于畫(huà)面感的協調，如(rú)果遇到想要(yào)體現特殊效果，如(rú)體現速度感、突破畫(huà)面張力、營造不穩定性、強化某種視(shì)覺效果等，也會特意打破地(dì)平線的平行(xíng)。在調整地(dì)平線平行(xíng)時(shí)，可(kě)以通(tōng)過軟件的變形工(gōng)具等對圖片進行(xíng)後期處理。
有時(shí)候一(yī)張普通(tōng)的圖片并不能(néng)引起我們的注意，但(dàn)是我們通(tōng)過局部放大突出單一(yī)的主體特征時(shí)，往往可(kě)以獲得更好的視(shì)覺效果。放大後的主體構圖更加飽滿，視(shì)覺效果更強烈。
局部特征放大到一(yī)定程度的時(shí)候主體信息會被淡化，為(wèi)極端的處理方式。這(zhè)樣處理出來的圖片主體将會無法識别，極端的裁切方式常用于背景的使用。我們也可(kě)以通(tōng)過 Photoshop 軟件的高斯模糊等工(gōng)具進行(xíng)處理，形成一(yī)些特殊色彩融合的背景圖片。
在進行(xíng)圖片裁切的時(shí)候，不一(yī)定總是将視(shì)覺主體放置在畫(huà)面中心點，将視(shì)覺主體放置在三分處也許可(kě)以增加更多樂(yuè)趣。如(rú)果當畫(huà)面中主體是人(rén)物(wù)時(shí)，可(kě)以考慮将人(rén)物(wù)主體或者視(shì)平線放置在三分處。
面對一(yī)些人(rén)物(wù)圖片，我們在進行(xíng)裁切的時(shí)候需要(yào)注意人(rén)物(wù)的發際線。在裁切人(rén)物(wù)發際線時(shí)就會聯想到秃頭，因此不要(yào)太靠近人(rén)物(wù)發際線，留下(xià)足夠的頭發，不要(yào)過度裁切，以免影響人(rén)物(wù)形象。
以上(shàng)列舉了(le)一(yī)些常用的處理形式，更多的形式希望大家多多的總結，在設計中考慮到每一(yī)個細微(wēi)的元素差别。
噪音會對我們的生活造成幹擾，我們喜歡安靜的環境。對于圖片的處理也有降噪的說法，可(kě)以讓畫(huà)面感更加簡潔，主體更能(néng)突顯。
下(xià)面給大家分享一(yī)下(xià)找圖前的降噪思考和(hé)後期處理進行(xíng)降噪的經驗。
在選擇圖片的時(shí)候，要(yào)盡量選擇主體表現突出，沒有過多信息進行(xíng)幹擾的圖片。我們要(yào)明(míng)确主題，尋找的圖片要(yào)能(néng)單一(yī)的表現這(zhè)個主題，如(rú)果一(yī)張圖片中表現多個信息源的時(shí)候，會給人(rén)一(yī)種信息幹擾。
我們在拍攝商品展示圖的時(shí)候就是考慮這(zhè)個因素，盡量用最簡單的背景來襯托，其它的物(wù)體元素僅僅作(zuò)為(wèi)裝飾出現，不會搶占主體物(wù)的呈現效果。
有時(shí)候沒辦法通(tōng)過自(zì)行(xíng)拍攝獲取圖片，我們在通(tōng)過圖庫網站尋找圖片的時(shí)候也不一(yī)定要(yào)剛好達到心中的标準，可(kě)以用設計軟件進行(xíng)後期處理，通(tōng)常運用 Photoshop 軟件居多。
對于一(yī)些背景比較雜(zá)亂的圖片，我們為(wèi)了(le)更加統一(yī)視(shì)覺效果，讓主體更加突出，會通(tōng)過去底來進行(xíng)降噪，特别是在展示商品圖片的時(shí)候。
去掉底色後一(yī)般會有幾種處理方式來襯托主體：
通(tōng)過以上(shàng)的一(yī)些分享我們可(kě)以掌握圖片的基本處理方式，在進行(xíng)運用的過程中會有很(hěn)多需要(yào)注意的地(dì)方，比如(rú)關于結合卡片式布局的時(shí)候內(nèi)外(wài)圓角的關系以及對圖片設置投影的注意事項等。
現在很(hěn)多産品布局都(dōu)運用了(le)卡片式，如(rú)果對卡片進行(xíng)圓角設置以後，對于卡片內(nèi)部的圖片通(tōng)常也會設置一(yī)點小圓角。設置的數(shù)值由卡片外(wài)圓角數(shù)值減去它們之間(jiān)的間(jiān)隙數(shù)值，如(rú)果算出來的數(shù)值為(wèi)負數(shù)，原理上(shàng)圖片不做(zuò)圓角設計也是可(kě)以的，隻是為(wèi)了(le)整體風(fēng)格的統一(yī)，我們通(tōng)常會設置一(yī)個小圓角。
如(rú)果我們設計需要(yào)不斷更新的圖片，通(tōng)常不建議(yì)設置投影，因為(wèi)圖片配色風(fēng)格、色彩比重、明(míng)暗程度等不同，都(dōu)會影響投影的效果。
在相同投影參數(shù)設置的前提下(xià)，淺色風(fēng)格的圖片會顯得投影重，深色風(fēng)格的圖片會顯得淡。這(zhè)樣的反差會影響我們對圖片的選擇。如(rú)果圖片都(dōu)是用戶随機上(shàng)傳的，我們是很(hěn)難進行(xíng)控制的。
但(dàn)在一(yī)些特殊固定的場景，圖片都(dōu)是設計師(shī)可(kě)以把控的前提下(xià)，我們可(kě)以根據圖片的情況不同來區(qū)别對待投影的參數(shù)。
掌握了(le)各種圖片處理的技巧，但(dàn)是能(néng)夠找到更加合适的圖片資源，将會大大降低(dī)我們的處理工(gōng)作(zuò)量，也能(néng)帶來更好的效果。找圖相對比較耗費(fèi)時(shí)間(jiān)，大家在平時(shí)要(yào)利用空餘時(shí)間(jiān)多進行(xíng)體驗，看(kàn)到質量好的圖片先進行(xíng)分類收藏，需要(yào)的時(shí)候可(kě)以根據分類去尋找。
我們不僅要(yào)善于利用圖庫網站和(hé)關鍵詞發散來進行(xíng)找圖，也要(yào)養成良好的習慣，可(kě)以關注更多的優質畫(huà)闆，也可(kě)以創建屬于自(zì)己的圖庫資源。
現在圖庫的網站也很(hěn)多，我們在選擇圖片的時(shí)候也要(yào)注意版權說明(míng)，可(kě)以下(xià)載使用并不代表作(zuò)者進行(xíng)了(le)原創授權，在進行(xíng)商用的時(shí)候還是需要(yào)了(le)解詳情，找一(yī)些具備正版授權的正規平台。
當我們在一(yī)些平台發現優質的圖片資源時(shí)，可(kě)以進行(xíng)采集和(hé)分類，如(rú)果圖片有編号，可(kě)以在存儲的時(shí)候把編号備注在名稱上(shàng)，方便以後需要(yào)高清大圖時(shí)可(kě)以通(tōng)過編号進行(xíng)搜索。
我們在利用圖庫網站搜索圖片的時(shí)候可(kě)以利用圖片信息篩選更大尺寸；利用相似圖片功能(néng)可(kě)以搜索更多類似資源；點擊圖片可(kě)以進到原始出處，可(kě)以找到更多系列主題下(xià)的資源。在百度識圖、站酷海(hǎi)洛等平台裏面，設計師(shī)可(kě)以利用以圖搜圖功能(néng)在圖庫裏面找尋高清正版圖片。
推薦一(yī)些常用的圖片網站給大家：站酷海(hǎi)洛、500px、1x、Pinterest、unsplash、foodiesfeed等等。網站很(hěn)多，根據自(zì)己需求選擇使用即可(kě)。
現在找圖片的網站很(hěn)多，但(dàn)是我們要(yào)善于進行(xíng)一(yī)些關鍵詞發散，有些資源直接搜索不一(yī)定能(néng)夠找到合适的。
舉一(yī)個簡單的例子來說一(yī)下(xià)關鍵詞發散的作(zuò)用，比如(rú)圓形和(hé)香蕉是沒有本質聯系的，但(dàn)是通(tōng)過關鍵詞發散就會産生關聯，圓形→西(xī)瓜→水果→香蕉。對圖片資源來說原理相似，比如(rú)我們要(yào)找一(yī)張美女(nǚ)圖片，搜索的關鍵詞不一(yī)定是「美女(nǚ)」，這(zhè)個關鍵詞進行(xíng)發散可(kě)以衍生出時(shí)尚雜(zá)志、街拍、模特、氣質、時(shí)尚大片、穿搭等等，這(zhè)樣通(tōng)過發散出來的關鍵詞也許能(néng)找到更加符合的圖片資源。
每個人(rén)的審美和(hé)設計感覺都(dōu)不一(yī)樣，也會影響最終作(zuò)品的效果。方法技巧都(dōu)可(kě)以短時(shí)間(jiān)來提升，但(dàn)是設計感覺是需要(yào)長(cháng)時(shí)間(jiān)進行(xíng)熏陶的。我們可(kě)以關注一(yī)些優秀的設計師(shī)，關注他(tā)們創建的畫(huà)闆和(hé)分享的資源，讓他(tā)們的審美能(néng)力成為(wèi)你的一(yī)層過濾網，幫你篩選掉一(yī)些劣質的資源。
我們也可(kě)以通(tōng)過老(lǎo)司機們關注的設計師(shī)或者畫(huà)闆來尋找出更多的優質資源，通(tōng)過關系鏈可(kě)以讓你認識和(hé)發現更多優秀的設計師(shī)。
很(hěn)多設計師(shī)會忽略日常資源采集的重要(yào)性，總是在需要(yào)的時(shí)候才去尋找想要(yào)的資源，但(dàn)總是徒勞。也有很(hěn)多通(tōng)過一(yī)些途徑一(yī)次性獲得上(shàng)百G資源，內(nèi)心滿是喜悅，以為(wèi)從(cóng)此設計無憂，卻不知後面似乎也沒什麽用……你肯定還有更多類似的情況。
俗話說有備無患，養成良好的設計習慣很(hěn)重要(yào)。日常的采集習慣将會給設計師(shī)帶來大量靈感和(hé)提升執行(xíng)效率，設計做(zuò)不好其中部分因素就是靈感素材沒有找對。
建立靈感圖庫相當于形成一(yī)本字典，當你需要(yào)的時(shí)候可(kě)以進行(xíng)查詢；閑暇的時(shí)候可(kě)以進行(xíng)回顧，去挖掘一(yī)些優秀作(zuò)品背後的軌迹，以便能(néng)夠運用到後期的項目中，提升工(gōng)作(zuò)執行(xíng)效率。
随着用戶對體驗的要(yào)求不斷提升，我們需要(yào)從(cóng)各個方面加強設計細節，圖片資源的好壞不僅傳遞的是商品的品質，也能(néng)夠體現産品的格調。希望今天的分享可(kě)以帶給大家對圖片的認知，在後期産品設計的過程中可(kě)以考慮得更全面，如(rú)有補充歡迎留言互動。
在線客服1号
微(wēi)信公衆賬号