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