原地址:星健視覺(微信官方賬號(hào))

這是今年產(chǎn)生的第二篇文章。今天和大家分享一些關(guān)于畫面設(shè)計(jì)的事情。希望今天的分享能讓你知道圖片的重要性以及圖片在設(shè)計(jì)中的一些基本處理技巧。

圖片在設(shè)計(jì)中的定位就像一個(gè)人的服裝品味。不同的衣服風(fēng)格會(huì)讓別人對(duì)你的評(píng)價(jià)不同，給你貼上不同的社會(huì)屬性的標(biāo)簽。隨著用戶體驗(yàn)的不斷升級(jí)，商家也在不斷優(yōu)化各種細(xì)節(jié)，注重畫面的要求。今天就和大家分享一下關(guān)于圖片的事情，希望能給大家?guī)砀嗟膸椭?/p>

本文將開始分析圖片在設(shè)計(jì)中的重要性，強(qiáng)化大家對(duì)圖片的認(rèn)知；然后從圖片比例、后期處理技巧、設(shè)計(jì)中的應(yīng)用說明等方面分享設(shè)計(jì)中圖片的處理經(jīng)驗(yàn)；最后分享一下我們?cè)趯ふ液线m圖片過程中的方法以及后期圖庫的管理經(jīng)驗(yàn)。

我相信圖片在設(shè)計(jì)中的重要性是設(shè)計(jì)師很清楚的。雖然每個(gè)人都會(huì)選擇更好的圖片資源來設(shè)計(jì)，但是仍然有很多地方需要設(shè)計(jì)師的關(guān)注和控制。讓我們來看看他們。

1.1、提高圖片質(zhì)量

越來越多的產(chǎn)品開始重視畫質(zhì)。比如網(wǎng)易YEATION對(duì)產(chǎn)品圖片的拍攝和處理有嚴(yán)格的規(guī)范，目的是提升產(chǎn)品氣質(zhì)和在用戶心目中的印象。我們?cè)谠O(shè)計(jì)的時(shí)候，要用最好的圖片來襯托我們的設(shè)計(jì)稿，因?yàn)閳D片的好壞影響到整個(gè)設(shè)計(jì)的風(fēng)格。

在產(chǎn)品設(shè)計(jì)中，很多合作伙伴會(huì)認(rèn)為圖片是后期操作上傳的，把我的設(shè)計(jì)稿做的很漂亮是沒有用的。我對(duì)這個(gè)問題的看法如下:

a. 最佳的設(shè)計(jì)輸出是設(shè)計(jì)師專業(yè)的體現(xiàn)；b. 把最好的效果呈現(xiàn)給決策者，增加他對(duì)你設(shè)計(jì)能力的印象；c. 通過制定運(yùn)營視覺規(guī)范來把控圖片質(zhì)量，是可以嚴(yán)格把控你對(duì)圖片的視覺追求；d. 你的態(tài)度會(huì)給你帶來好運(yùn)。

1.2.圖片的真實(shí)還原

雖然前面提到了畫質(zhì)的重要性，但是對(duì)于視覺效果，我們不能選擇一些與主題無關(guān)的畫面，這樣也會(huì)誤導(dǎo)決策者。我們可以提高圖片的質(zhì)量，但我們需要保證圖片的真實(shí)還原，這樣才能讓你的設(shè)計(jì)更加真實(shí)合理。

在一些本地產(chǎn)品設(shè)計(jì)中，使用外國圖片材料需要謹(jǐn)慎對(duì)待。例如在模型圖像的情況下，復(fù)制信息的傳輸更傾向于國內(nèi)場(chǎng)景。如果使用國外的模型素材，可能會(huì)更有說服力，但不能真正還原產(chǎn)品場(chǎng)景，會(huì)向決策者傳達(dá)一種錯(cuò)誤的認(rèn)知。

1.3、圖片版權(quán)聲明

還有很多設(shè)計(jì)師不關(guān)心版權(quán)，要么根本不重視這個(gè)問題的重要性，要么就是碰運(yùn)氣。作為我們工作中的專業(yè)設(shè)計(jì)師，我們不僅需要保護(hù)和維護(hù)自己的權(quán)益，也需要尊重作者。

在項(xiàng)目中，要主動(dòng)將圖片版權(quán)問題告知需求方，讓我們履行專業(yè)義務(wù)，讓需求方做出正確的判斷。

產(chǎn)品界面布局的時(shí)候，圖片的比例往往被大家忽略。如果任意選擇一個(gè)整數(shù)值進(jìn)行設(shè)計(jì)，在很多地方出現(xiàn)內(nèi)容相同的圖片時(shí)，尺寸會(huì)比較混亂，無形中增加了前后的標(biāo)準(zhǔn)化和存儲(chǔ)壓力。

在這里，我們將分析項(xiàng)目中常用的圖片比例和需要注意的地方，也分享圖片比例的選擇和整個(gè)產(chǎn)品設(shè)計(jì)中需要保持的一致性。

2.1.對(duì)圖片比例的強(qiáng)調(diào)是什么

不同尺度的圖片傳達(dá)的信息主體是不同的。根據(jù)產(chǎn)品屬性，我們會(huì)為整體界面布局選擇與之匹配的圖片比例。

通過體驗(yàn)一些主流產(chǎn)品，我們會(huì)發(fā)現(xiàn)一些常用的畫面比例，比如1:1、2:1、3:1、3:2、4:3、16:9、16:10等等；我們也會(huì)發(fā)現(xiàn)一些打破常規(guī)比例的設(shè)計(jì)。我們需要分析它們的特點(diǎn)，結(jié)合自己產(chǎn)品的特點(diǎn)，才能在自己的產(chǎn)品設(shè)計(jì)中合理使用它們。

下面是一些常用的比例進(jìn)行分析，希望能吸引更多的思路。

1.1強(qiáng)調(diào)主體的存在

1:1的畫面比例是常見的設(shè)計(jì)比例，這樣更容易讓構(gòu)圖簡單，突出主體的存在。常用于產(chǎn)品展示、頭像、特寫展示等場(chǎng)景，尤其是電商產(chǎn)品，如淘寶、網(wǎng)易YEATION、網(wǎng)易考拉等。

在產(chǎn)品設(shè)計(jì)中，通常有兩列或更多列，橫幅的顯示一般用于顯示產(chǎn)品詳細(xì)信息頁面的頁眉，而界面布局的其余部分很少通過橫幅來顯示。

4.3圖像緊湊，易于合成

4:3的畫面比例可以讓圖像更緊湊，更容易構(gòu)圖，方便設(shè)計(jì)師發(fā)揮。因?yàn)槭謾C(jī)屏幕容量小，當(dāng)顯示為全屏?xí)r，這個(gè)比例在產(chǎn)品設(shè)計(jì)布局上占據(jù)了空的大空間，所以我們通常用列來布局界面。

作為設(shè)計(jì)師，經(jīng)常接觸這個(gè)比例，詹和Dribbble等作品的封面也用在攜程、廚房故事等產(chǎn)品中。

16:9電影場(chǎng)景效果

16:9的畫面比例可以呈現(xiàn)電影場(chǎng)景般的效果，多用于水平構(gòu)圖。這是一個(gè)廣泛使用的尺寸比例，可以給用戶一個(gè)視野開闊的體驗(yàn)。廣泛應(yīng)用于騰訊視頻、網(wǎng)易云音樂等眾多影視娛樂產(chǎn)品的設(shè)計(jì)中。

擁抱16:10的黃金比例

黃金比例就像金字塔上的珍珠。離她越近越有魅力，不然魅力就減弱了。16:10的畫面比例最接近。設(shè)計(jì)沒有絕對(duì)的標(biāo)準(zhǔn)。我們可以遵循一些優(yōu)秀的經(jīng)驗(yàn)法則，但也要敢于突破規(guī)則，嘗試更多的可能性。

X:≤Y瀑布流設(shè)計(jì)

X:≤Y代表最大值之間有固定寬度和自定義高度的瀑布流設(shè)計(jì)，在用戶沒有明確目的，只是喜歡獲取盡可能多的信息時(shí)采用。X:≤Y要注意高度控制，最大值不能超過屏幕的可顯示區(qū)域。

以上列舉只是對(duì)一些常用比例的分析和說明，還有更多的比例在此不做論證。分享的目的是讓大家養(yǎng)成分析的習(xí)慣，根據(jù)自己的產(chǎn)品特點(diǎn)選擇合適的畫面比例。

2.2、畫面比例選擇方法

a. 以商品展示效果為準(zhǔn)，選擇能夠充分表現(xiàn)商品特點(diǎn)的圖片展示比例；b. 以產(chǎn)品氣質(zhì)為準(zhǔn)，選擇符合產(chǎn)品內(nèi)容氣質(zhì)的圖片展示比例；c. 結(jié)合產(chǎn)品特點(diǎn)選擇合適的常用比例；d. 根據(jù)版面布局靈活的自定義特殊的比例值；e. 分析→打破→創(chuàng)新，創(chuàng)造出符合某種規(guī)律或者美學(xué)概念的比例值。

2.3.圖片比例的一致性

當(dāng)我們根據(jù)產(chǎn)品的特點(diǎn)確定合適的圖片顯示比例時(shí)，我們需要根據(jù)整體布局和圖片分布來規(guī)范哪些布局可以采用相同的圖片顯示比例。在保證視覺效果和交互形式的情況下，同一主題在不同頁面中應(yīng)以相同的比例呈現(xiàn)，既能保持視覺表達(dá)的一致性，又能給后期的操作和維護(hù)帶來方便。

如果公司有專業(yè)的攝影團(tuán)隊(duì)，對(duì)圖片的需求會(huì)相對(duì)容易滿足。對(duì)于大多數(shù)團(tuán)隊(duì)來說，找圖、加工圖是設(shè)計(jì)師的日常工作。在產(chǎn)品設(shè)計(jì)上，雖然可能達(dá)不到專業(yè)修圖師的微調(diào)標(biāo)準(zhǔn)，但還是需要掌握常見的加工技巧。

3.1.剪切簡化圖片

在項(xiàng)目中，我們會(huì)通過一些圖庫網(wǎng)站尋找合適的圖片，但是還是很難遇到。切割材料以突出我們想要的部分是一種相對(duì)簡單的圖像處理技巧。

現(xiàn)實(shí)生活中拍攝的照片中總會(huì)有大量干擾主題的內(nèi)容。剪掉多余的內(nèi)容突出了主題信息，剪掉的圖片構(gòu)圖更緊湊，更有凝聚力，主題更有吸引力。那就是我們所說的圖片降噪，消除不必要的干擾。

3.2.相同尺寸的切割

一系列圖片排版時(shí)，需要保持圖片比例尺大小的統(tǒng)一。當(dāng)我們?cè)诙鄠€(gè)圖片素材之間進(jìn)行裁剪時(shí)，需要以最小裁剪空之間的圖片為例來裁剪其他圖片，以保證最終的顯示效果。

如果是一個(gè)人的照片，要注意這個(gè)人眼睛的表觀視界，眼睛的位置盡量保持在水平線周圍。

3.3、視地平線為水平線的基準(zhǔn)

當(dāng)我們選擇人物圖片時(shí)，特寫鏡頭可以傳達(dá)一種目光接觸的感覺。切割的時(shí)候要根據(jù)表觀的地平線來縮放切割，這樣可以保持眼神的接觸。畫面越大，眼神交流就越強(qiáng)烈。

3.4.調(diào)整圖片的垂直線

我們?cè)谶x擇畫面時(shí)，如果是像城市建筑一樣的垂直主體，就需要注意主體與地平線的垂直關(guān)系。如果構(gòu)圖特別需要傾斜效果，否則我們會(huì)優(yōu)先考慮這個(gè)因素，選擇主體垂直的畫面或者后期微調(diào)，使主體垂直于地平線，這樣整個(gè)畫面更加和諧穩(wěn)定。

3.5.調(diào)整圖片的地平線

選擇圖片時(shí)，如果有地平線明顯的照片，需要注意地平線是否平行。地平線平行有助于協(xié)調(diào)畫面感。如果要體現(xiàn)特效，比如表達(dá)速度感，突破畫面的張力，制造不穩(wěn)定，強(qiáng)化一定的視覺效果，就會(huì)打破地平線的平行度。調(diào)整水平平行度時(shí)，圖片可以通過軟件變形工具進(jìn)行后期處理。

3.6.在本地加強(qiáng)主題

有時(shí)候一張普通的圖片并不能吸引我們的注意力，但是當(dāng)我們通過局部放大突出一個(gè)單一的主題特征時(shí)，往往可以獲得更好的視覺效果。放大后的主成分更飽滿，視覺效果更強(qiáng)。

3.7.局部特征的極端應(yīng)用

當(dāng)局部特征放大到一定程度時(shí)，會(huì)稀釋主體信息，這是一種極端的處理方法。這樣處理的圖像主體不會(huì)被識(shí)別，背景往往采用極端的裁剪方法。我們也可以利用Photoshop軟件中的高斯模糊等工具，對(duì)一些背景圖片進(jìn)行處理，形成一些具有特殊色彩融合的背景圖片。

3.8、三分法

切圖時(shí)，不一定要把視覺主體放在畫面中央，但把視覺主體放在三點(diǎn)可能更好玩。如果圖片中的主體是人物，可以考慮將人物主體或視在地平線放置在三點(diǎn)。

3.9.避免接近角色的發(fā)際線

在面對(duì)一些人的照片時(shí)，我們?cè)诓眉舻臅r(shí)候需要注意人的發(fā)際線。剪人物發(fā)際線的時(shí)候會(huì)想到禿頂，所以不要離人物發(fā)際線太近，留足夠的頭發(fā)，也不要剪太多，以免影響人物形象。

以上列舉為一種常見的處理形式，預(yù)計(jì)會(huì)總結(jié)出更多的形式，并在設(shè)計(jì)中考慮到每一個(gè)細(xì)微的元素差異。

噪音可以干擾我們的生活，降低噪音。我們喜歡安靜的環(huán)境。還有一種說法是對(duì)圖像進(jìn)行降噪處理，可以讓畫面感覺更簡潔，主題更突出。

先分享一下降噪的經(jīng)驗(yàn)再找圖和降噪的后處理。

4.1.找圖前的降噪思考

選圖的時(shí)候盡量選表現(xiàn)突出，沒有太多信息干擾的圖。我們要定義主題，要找的圖片要能以單一的方式表達(dá)這個(gè)主題。如果在一張圖片中表達(dá)多個(gè)信息源，會(huì)給人一種信息干擾。

我們拍產(chǎn)品展示圖的時(shí)候考慮到了這個(gè)因素，盡量用最簡單的背景出發(fā)。其他對(duì)象元素只作為裝飾品出現(xiàn)，不會(huì)搶占主對(duì)象的呈現(xiàn)效果。

4.2設(shè)計(jì)軟件的后處理

有時(shí)候自己拍也拍不到圖，通過圖庫網(wǎng)站找圖也不一定符合標(biāo)準(zhǔn)。通過設(shè)計(jì)軟件進(jìn)行后期處理是最常見的方式，通常使用Photoshop軟件。

4.3.去底用于降噪

對(duì)于一些背景比較凌亂的圖片，為了統(tǒng)一視覺效果，讓主體更加突出，我們會(huì)通過背景來減少噪點(diǎn)，尤其是在展示商品圖片的時(shí)候。

去除背景色后，一般有幾種處理方法來襯托主體:

a. 以白底的形式顯示，這個(gè)比較常見，有時(shí)候?yàn)榱俗寛D片的外輪廓出現(xiàn)也會(huì)加一個(gè)淺色的描邊；b. 設(shè)置一個(gè)固定值的淺灰色，這樣處理也能形成視覺統(tǒng)一，還能讓圖片的外輪廓清晰，也有通過品牌色融入調(diào)出的一個(gè)偏向于品牌色的淺色作為背景；c. 根據(jù)圖片主體的配色反推出淺色背景的配色，通常是以降低色彩明度與飽和度的形式；d. 圖片去底后利用深色作為背景，這個(gè)一般比較少出現(xiàn)，需要運(yùn)用一般為品牌色、深灰色、黑色等。

通過上面的一些分享，可以掌握?qǐng)D片的基本處理方法，在應(yīng)用的過程中會(huì)有一些注意事項(xiàng)，比如組合卡式布局時(shí)內(nèi)外圓角的關(guān)系，以及為圖片設(shè)置投影的注意事項(xiàng)。

5.1.內(nèi)外拐角的處理

現(xiàn)在很多產(chǎn)品都是按卡片式布局的。如果卡片是圓形的，通常會(huì)為卡片內(nèi)部的圖片設(shè)置一個(gè)小圓角。設(shè)定值是卡圓角值減去它們之間的間隙值。如果計(jì)算值為負(fù)，原則上設(shè)計(jì)沒有圓角值的圖片是可以的，但是為了整體風(fēng)格的統(tǒng)一，我們通常會(huì)設(shè)置一個(gè)小的圓角值。

5.2.圖片的投影設(shè)置

如果設(shè)計(jì)過程是一張需要不斷更新的圖片，我們通常不建議設(shè)置投影，因?yàn)閳D片不同的配色風(fēng)格、色彩比例、明暗程度都會(huì)影響投影效果。

在設(shè)定相同投影參數(shù)的前提下，淺色圖片在投影時(shí)會(huì)顯得很重，深色圖片會(huì)顯得很輕。這種對(duì)比會(huì)影響我們對(duì)圖片的選擇，但是如果圖片是用戶隨機(jī)上傳的，我們很難控制。

如果是在一些特殊的固定場(chǎng)景中，圖片可以由設(shè)計(jì)師控制，我們可以根據(jù)圖片的不同情況，對(duì)投影參數(shù)進(jìn)行不同的處理。

掌握各種圖像處理技巧，但是找到更合適的圖像資源，會(huì)大大減少我們的處理工作量，帶來更好的效果。找圖比較費(fèi)時(shí)間。每個(gè)人都應(yīng)該利用空的業(yè)余時(shí)間去體驗(yàn)它們。當(dāng)他們看到質(zhì)量好的圖片時(shí)，應(yīng)該首先進(jìn)行分類和收集。如果需要，可以按分類進(jìn)行搜索。

不僅要利用好圖庫網(wǎng)站和關(guān)鍵詞發(fā)散找圖，還要養(yǎng)成良好的習(xí)慣，多關(guān)注高質(zhì)量的畫板，打造自己的圖庫資源。

6.1、正確使用各種網(wǎng)站資源

現(xiàn)在圖庫的網(wǎng)站很多，選擇圖片的時(shí)候也要注意版權(quán)描述。不代表作者已經(jīng)通過下載使用授權(quán)了原著。做生意的時(shí)候還是要了解細(xì)節(jié)，找一些有正版授權(quán)的正規(guī)平臺(tái)。

當(dāng)我們?cè)谝恍┢脚_(tái)上找到高質(zhì)量的圖片資源時(shí)，我們可以對(duì)它們進(jìn)行收集和分類。如果圖片有數(shù)字，我們?cè)诖鎯?chǔ)的時(shí)候可以在名字上標(biāo)注數(shù)字，這樣以后需要高清大圖的時(shí)候就可以按數(shù)字搜索了。

當(dāng)我們使用圖庫網(wǎng)站搜索圖片時(shí)，我們可以使用圖片信息來過濾較大的尺寸；可以使用相似圖片功能搜索更多相似資源；點(diǎn)擊圖片即可獲得原始來源，并在一系列主題下找到更多資源。在百度地圖閱讀和酷站羅海等平臺(tái)上，設(shè)計(jì)師可以使用地圖搜索功能在圖庫中找到高清正版圖片。

給大家推薦一些常用的享受圖片的網(wǎng)站:詹酷海洛，500px，1x，Pinterest，unsplash，foodiesfeed等等。網(wǎng)站很多，但是很難全部使用。根據(jù)自己的需要有選擇的使用就好。

6.2.巧妙搭配關(guān)鍵詞

現(xiàn)在找圖的網(wǎng)站很多，但是要善于傳播一些關(guān)鍵詞，有些資源可能不適合直接搜索。

舉個(gè)簡單的例子說明關(guān)鍵詞發(fā)散的作用。比如圈和香蕉沒有本質(zhì)聯(lián)系，但是會(huì)通過關(guān)鍵詞發(fā)散聯(lián)系起來。圈→西瓜→水果→香蕉。切換到圖片資源的原理也差不多。比如我們?cè)谡颐琅畧D片，我們搜索的關(guān)鍵詞不一定是“美女”。如果發(fā)散這個(gè)關(guān)鍵詞，就可以衍生出時(shí)尚雜志、街拍、模特、氣質(zhì)、時(shí)尚大片、穿著等關(guān)鍵詞，讓我們通過發(fā)散的關(guān)鍵詞找到更一致的圖片資源。

6.3.關(guān)注雷鋒

有時(shí)候，我們用同樣的方式尋找圖片和設(shè)計(jì)，但是每個(gè)人的審美和設(shè)計(jì)感受不同，也會(huì)影響到最終作品的效果。方法和技巧可以在短時(shí)間內(nèi)提高，但設(shè)計(jì)的感覺需要長期培養(yǎng)。我們可以關(guān)注一些優(yōu)秀的設(shè)計(jì)師，關(guān)注他們創(chuàng)作的畫板，關(guān)注他們分享的資源，讓他們的審美能力成為你的過濾器，為你篩選一些劣質(zhì)的資源。

我們也可以通過老司機(jī)關(guān)注的設(shè)計(jì)師或者畫板找到更多優(yōu)質(zhì)的資源，通過關(guān)系鏈讓你認(rèn)識(shí)和發(fā)現(xiàn)更多優(yōu)秀的設(shè)計(jì)師。

6.4.創(chuàng)建您自己的圖庫資源

很多設(shè)計(jì)師忽略了日常資源收集的重要性，總是在需要的時(shí)候去尋找自己想要的資源，卻總是徒勞無功。一次獲得幾百個(gè)G資源的方法也有很多，心里充滿喜悅，以為設(shè)計(jì)無憂，卻不知道好像沒用...你一定有更多類似的情況。

俗話說，培養(yǎng)好設(shè)計(jì)師的職場(chǎng)習(xí)慣很重要。日常的收藏習(xí)慣會(huì)大大提升設(shè)計(jì)師后期項(xiàng)目設(shè)計(jì)的靈感來源和執(zhí)行效率，設(shè)計(jì)差的部分因素是沒有正確找到靈感素材。

建立靈感圖庫相當(dāng)于形成一個(gè)字典，需要的時(shí)候可以查詢；在業(yè)余時(shí)間，我可以回顧和探索一些優(yōu)秀作品背后的軌跡，以便應(yīng)用到以后的項(xiàng)目中，提高工作執(zhí)行的效率。

隨著用戶對(duì)體驗(yàn)的要求越來越高，我們需要從各個(gè)方面加強(qiáng)設(shè)計(jì)細(xì)節(jié)。圖片資源的質(zhì)量不僅傳達(dá)了產(chǎn)品的質(zhì)量，也反映了產(chǎn)品的風(fēng)格。希望今天的分享能讓你對(duì)圖片有更好的了解，在后期的產(chǎn)品設(shè)計(jì)過程中可以更全面的考慮。最后感謝各位酷友的支持。如有補(bǔ)充，請(qǐng)留言互動(dòng)。