用好圖片，設(shè)計(jì)過(guò)稿率提升50%
顏值即正義！看完這篇文章，設(shè)計(jì)過(guò)稿率將大大提升！
如今我們的生活，到處都是大幅圖像廣告，紛擾喧鬧的各類短視頻與直播。這是一個(gè)快節(jié)奏時(shí)代，我們更傾向閱讀圖像。為什么我們偏愛(ài)圖像視覺(jué)超過(guò)文字？從人類進(jìn)化角度來(lái)看，原始時(shí)代的祖先通過(guò)五感感知著這個(gè)世界，其中通過(guò)視覺(jué)來(lái)感知判斷生活，其他四感輔助之。即使后面我們發(fā)明了文字，但發(fā)展至今，對(duì)圖像的本能吸引力依舊強(qiáng)烈。因?yàn)樵谖覀冋J(rèn)知的潛意識(shí)里圖像相較于文字更能讓我們快速輕松理解并記憶。 圖像如此重要，設(shè)計(jì)作品中當(dāng)然也必不可少。因?yàn)閳D片，它能一定程度上決定畫面基調(diào)；引導(dǎo)視覺(jué)流程；調(diào)劑平衡多段文字信息的枯燥性，讓閱讀變得輕松容易。
在UI設(shè)計(jì)中，我們經(jīng)常需要把設(shè)計(jì)輸出物拿給產(chǎn)品經(jīng)理或者其他有設(shè)計(jì)決斷力的人看，UI設(shè)計(jì)中圖片使用的好與壞，能很大程度上影響著決策者的感知，以及你的設(shè)計(jì)過(guò)稿率。
如下左圖：商品視角、調(diào)性、細(xì)節(jié)，都沒(méi)有右圖來(lái)的統(tǒng)一、有質(zhì)感。單看這兩張圖，會(huì)讓用戶有這樣的心理感知：左圖感覺(jué)像山寨盜版商城；右圖則會(huì)認(rèn)為是嚴(yán)肅官方認(rèn)證商城。所以，在同樣頁(yè)面布局下，不同的圖片使用與處理，能讓UI頁(yè)面的品質(zhì)有較大的感知差異。
圖片的使用如此重要。那么，我們?cè)谡阶鯱I設(shè)計(jì)前，首先需要弄清楚圖片在頁(yè)面的占比情況以及后續(xù)圖片的支撐來(lái)源問(wèn)題。
1.了解圖片占比與來(lái)源
在構(gòu)思UI頁(yè)面階段，首先需要了解以下兩個(gè)問(wèn)題：1.圖片區(qū)域占比問(wèn)題；2.圖片來(lái)源問(wèn)題。當(dāng)頁(yè)面圖片占比多，且讓用戶自定義，那么需要預(yù)估到APP上線后設(shè)計(jì)可控率會(huì)降低。換句話說(shuō)，實(shí)際上線效果會(huì)不盡人意。如下圖：由于淘寶和網(wǎng)易嚴(yán)選平臺(tái)屬性不同，在圖片品控上就有著不同的視覺(jué)感受。當(dāng)然，不是說(shuō)淘寶做的不好，而是當(dāng)一個(gè)平臺(tái)集納不同的店鋪，不同調(diào)性的產(chǎn)品類型，即使有圖片規(guī)范，也難如統(tǒng)一品類、調(diào)性的產(chǎn)品來(lái)的統(tǒng)一。
弄清圖片內(nèi)容的可控性問(wèn)題后，開始進(jìn)入設(shè)計(jì)環(huán)節(jié)，那么我們?cè)撊绾芜x擇圖片？
2.怎樣選擇以及運(yùn)用圖片
1.是否符合產(chǎn)品氣質(zhì)？ 在不同的場(chǎng)合有恰當(dāng)合適的場(chǎng)景搭配，是十分基礎(chǔ)且重要的事情。在UI設(shè)計(jì)中，任何一個(gè)部分的設(shè)計(jì)以及元素運(yùn)用都需要為產(chǎn)品服務(wù)。圖片也不例外。如果你是廚房類APP，頭圖選用小清新感的圖片，就顯得不夠合適，帶有環(huán)境食材元素的圖片才更讓用戶有共鳴。
2.是否能清晰表達(dá)產(chǎn)品核心內(nèi)容？ 圖片是否主體明確？能一眼正確無(wú)誤的傳達(dá)核心內(nèi)容？會(huì)不會(huì)因?yàn)槠渌卦負(fù)屃酥黧w視覺(jué)，找不到視覺(jué)重點(diǎn)？
3.是否美觀、有品質(zhì)、讓人想擁有？ 圖片是否能表達(dá)美好生活以及美好品質(zhì)的向往？光影關(guān)系是否自然？圖片是否高清有細(xì)節(jié)？
當(dāng)明白圖片如何選擇后，還想和你分享一些冷門且重要的圖片過(guò)稿小技巧。記下來(lái)，將大大提升你的設(shè)計(jì)過(guò)稿率。
3.過(guò)稿高手圖片使用小技巧
1.圖片風(fēng)格統(tǒng)一風(fēng)格調(diào)性 漂亮圖片有很多，如果我們都以漂亮為基準(zhǔn)，找出來(lái)的圖片也會(huì)形色各異。由于用戶的實(shí)際使用場(chǎng)景是：瀏覽一個(gè)完整APP，統(tǒng)一風(fēng)格調(diào)性比美更重要。如果商品角度不一樣；飽和度高低不同；抽象與具象等，都會(huì)形成產(chǎn)品不統(tǒng)一，用戶視覺(jué)不適應(yīng)等問(wèn)題。
2.圖片使用符合場(chǎng)景，讓決策者可以看到最后的顯示效果 有時(shí)我們?yōu)榱粟s時(shí)間，直接用圖片填充插件，讓圖片區(qū)域自動(dòng)填充。但我還是想要給到你這樣一個(gè)建議：一個(gè)專業(yè)且成熟的設(shè)計(jì)師，即使是設(shè)計(jì)初稿，也不能隨便拿張圖，湊合一下。任何時(shí)候的匯報(bào)，都需要有著處女座對(duì)于事物的完美要求，過(guò)自己這關(guān)。因?yàn)槿魏螘r(shí)候你的表達(dá)與表現(xiàn)，都形成了你在別人心目中專不專業(yè)的看法，從而影響著后續(xù)的設(shè)計(jì)話語(yǔ)權(quán)問(wèn)題。如下圖都是商城陳列頁(yè)面，右側(cè)的圖片給出上線的實(shí)際效果，更貼合產(chǎn)品，方便設(shè)計(jì)決策者給出建議方向，或做出決策。
總結(jié)
我們都是視覺(jué)動(dòng)物，不管你是否愿意承認(rèn)：我們常常通過(guò)視覺(jué)表象，才決定是否愿意去更深入的了解某個(gè)東西。 設(shè)計(jì)就是在做產(chǎn)品視覺(jué)表象的表達(dá)，我們需要盡可能使用貼切的，漂亮的圖片。讓UI視覺(jué)看起來(lái)更加美觀，讓用戶愿意停留，認(rèn)可以及信賴平臺(tái)。
如今我們的生活，到處都是大幅圖像廣告，紛擾喧鬧的各類短視頻與直播。這是一個(gè)快節(jié)奏時(shí)代，我們更傾向閱讀圖像。為什么我們偏愛(ài)圖像視覺(jué)超過(guò)文字？從人類進(jìn)化角度來(lái)看，原始時(shí)代的祖先通過(guò)五感感知著這個(gè)世界，其中通過(guò)視覺(jué)來(lái)感知判斷生活，其他四感輔助之。即使后面我們發(fā)明了文字，但發(fā)展至今，對(duì)圖像的本能吸引力依舊強(qiáng)烈。因?yàn)樵谖覀冋J(rèn)知的潛意識(shí)里圖像相較于文字更能讓我們快速輕松理解并記憶。 圖像如此重要，設(shè)計(jì)作品中當(dāng)然也必不可少。因?yàn)閳D片，它能一定程度上決定畫面基調(diào)；引導(dǎo)視覺(jué)流程；調(diào)劑平衡多段文字信息的枯燥性，讓閱讀變得輕松容易。
在UI設(shè)計(jì)中，我們經(jīng)常需要把設(shè)計(jì)輸出物拿給產(chǎn)品經(jīng)理或者其他有設(shè)計(jì)決斷力的人看，UI設(shè)計(jì)中圖片使用的好與壞，能很大程度上影響著決策者的感知，以及你的設(shè)計(jì)過(guò)稿率。
如下左圖：商品視角、調(diào)性、細(xì)節(jié)，都沒(méi)有右圖來(lái)的統(tǒng)一、有質(zhì)感。單看這兩張圖，會(huì)讓用戶有這樣的心理感知：左圖感覺(jué)像山寨盜版商城；右圖則會(huì)認(rèn)為是嚴(yán)肅官方認(rèn)證商城。所以，在同樣頁(yè)面布局下，不同的圖片使用與處理，能讓UI頁(yè)面的品質(zhì)有較大的感知差異。
圖片的使用如此重要。那么，我們?cè)谡阶鯱I設(shè)計(jì)前，首先需要弄清楚圖片在頁(yè)面的占比情況以及后續(xù)圖片的支撐來(lái)源問(wèn)題。
1.了解圖片占比與來(lái)源
在構(gòu)思UI頁(yè)面階段，首先需要了解以下兩個(gè)問(wèn)題：1.圖片區(qū)域占比問(wèn)題；2.圖片來(lái)源問(wèn)題。當(dāng)頁(yè)面圖片占比多，且讓用戶自定義，那么需要預(yù)估到APP上線后設(shè)計(jì)可控率會(huì)降低。換句話說(shuō)，實(shí)際上線效果會(huì)不盡人意。如下圖：由于淘寶和網(wǎng)易嚴(yán)選平臺(tái)屬性不同，在圖片品控上就有著不同的視覺(jué)感受。當(dāng)然，不是說(shuō)淘寶做的不好，而是當(dāng)一個(gè)平臺(tái)集納不同的店鋪，不同調(diào)性的產(chǎn)品類型，即使有圖片規(guī)范，也難如統(tǒng)一品類、調(diào)性的產(chǎn)品來(lái)的統(tǒng)一。
弄清圖片內(nèi)容的可控性問(wèn)題后，開始進(jìn)入設(shè)計(jì)環(huán)節(jié)，那么我們?cè)撊绾芜x擇圖片？
2.怎樣選擇以及運(yùn)用圖片
1.是否符合產(chǎn)品氣質(zhì)？ 在不同的場(chǎng)合有恰當(dāng)合適的場(chǎng)景搭配，是十分基礎(chǔ)且重要的事情。在UI設(shè)計(jì)中，任何一個(gè)部分的設(shè)計(jì)以及元素運(yùn)用都需要為產(chǎn)品服務(wù)。圖片也不例外。如果你是廚房類APP，頭圖選用小清新感的圖片，就顯得不夠合適，帶有環(huán)境食材元素的圖片才更讓用戶有共鳴。
2.是否能清晰表達(dá)產(chǎn)品核心內(nèi)容？ 圖片是否主體明確？能一眼正確無(wú)誤的傳達(dá)核心內(nèi)容？會(huì)不會(huì)因?yàn)槠渌卦負(fù)屃酥黧w視覺(jué)，找不到視覺(jué)重點(diǎn)？
3.是否美觀、有品質(zhì)、讓人想擁有？ 圖片是否能表達(dá)美好生活以及美好品質(zhì)的向往？光影關(guān)系是否自然？圖片是否高清有細(xì)節(jié)？
當(dāng)明白圖片如何選擇后，還想和你分享一些冷門且重要的圖片過(guò)稿小技巧。記下來(lái)，將大大提升你的設(shè)計(jì)過(guò)稿率。
3.過(guò)稿高手圖片使用小技巧
1.圖片風(fēng)格統(tǒng)一風(fēng)格調(diào)性 漂亮圖片有很多，如果我們都以漂亮為基準(zhǔn)，找出來(lái)的圖片也會(huì)形色各異。由于用戶的實(shí)際使用場(chǎng)景是：瀏覽一個(gè)完整APP，統(tǒng)一風(fēng)格調(diào)性比美更重要。如果商品角度不一樣；飽和度高低不同；抽象與具象等，都會(huì)形成產(chǎn)品不統(tǒng)一，用戶視覺(jué)不適應(yīng)等問(wèn)題。
2.圖片使用符合場(chǎng)景，讓決策者可以看到最后的顯示效果 有時(shí)我們?yōu)榱粟s時(shí)間，直接用圖片填充插件，讓圖片區(qū)域自動(dòng)填充。但我還是想要給到你這樣一個(gè)建議：一個(gè)專業(yè)且成熟的設(shè)計(jì)師，即使是設(shè)計(jì)初稿，也不能隨便拿張圖，湊合一下。任何時(shí)候的匯報(bào)，都需要有著處女座對(duì)于事物的完美要求，過(guò)自己這關(guān)。因?yàn)槿魏螘r(shí)候你的表達(dá)與表現(xiàn)，都形成了你在別人心目中專不專業(yè)的看法，從而影響著后續(xù)的設(shè)計(jì)話語(yǔ)權(quán)問(wèn)題。如下圖都是商城陳列頁(yè)面，右側(cè)的圖片給出上線的實(shí)際效果，更貼合產(chǎn)品，方便設(shè)計(jì)決策者給出建議方向，或做出決策。
總結(jié)
我們都是視覺(jué)動(dòng)物，不管你是否愿意承認(rèn)：我們常常通過(guò)視覺(jué)表象，才決定是否愿意去更深入的了解某個(gè)東西。 設(shè)計(jì)就是在做產(chǎn)品視覺(jué)表象的表達(dá)，我們需要盡可能使用貼切的，漂亮的圖片。讓UI視覺(jué)看起來(lái)更加美觀，讓用戶愿意停留，認(rèn)可以及信賴平臺(tái)。
